{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "box",
  "title": "Box Widget",
  "description": "AdminLTE box/card widget with header, body, footer, tools. Supports 6 color variants, solid fill, collapsible, removable, and loading overlay.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-button.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/use-collapsible.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/use-removable.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/use-box-loading.json"
  ],
  "files": [
    {
      "path": "registry/new-york/box/components/box.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState, useRef, useEffect, useCallback } from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\nimport { type BoxVariant, boxVariantColors } from \"@/registry/new-york/adminlte-theme/lib/colors\"\n\n/* -------------------------------------------------------------------------- */\n/*  BoxTools                                                                  */\n/* -------------------------------------------------------------------------- */\n\ninterface BoxToolsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n}\n\nconst BoxTools = React.forwardRef<HTMLDivElement, BoxToolsProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"ml-auto flex items-center gap-[5px]\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nBoxTools.displayName = \"BoxTools\"\n\n/* -------------------------------------------------------------------------- */\n/*  BoxHeader                                                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface BoxHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  children?: React.ReactNode\n}\n\nconst BoxHeader = React.forwardRef<HTMLDivElement, BoxHeaderProps>(\n  ({ className, title, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center p-[10px] border-b border-[#f4f4f4]\",\n        className\n      )}\n      {...props}\n    >\n      {title && (\n        <h3 className=\"text-[18px] leading-none m-0 font-normal\">{title}</h3>\n      )}\n      {children}\n    </div>\n  )\n)\nBoxHeader.displayName = \"BoxHeader\"\n\n/* -------------------------------------------------------------------------- */\n/*  BoxBody                                                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface BoxBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n}\n\nconst BoxBody = React.forwardRef<HTMLDivElement, BoxBodyProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"p-[10px]\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nBoxBody.displayName = \"BoxBody\"\n\n/* -------------------------------------------------------------------------- */\n/*  BoxFooter                                                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface BoxFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n}\n\nconst BoxFooter = React.forwardRef<HTMLDivElement, BoxFooterProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"p-[10px] bg-white border-t border-[#f4f4f4]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nBoxFooter.displayName = \"BoxFooter\"\n\n/* -------------------------------------------------------------------------- */\n/*  Loading overlay spinner                                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction BoxLoadingOverlay() {\n  return (\n    <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-white/70 rounded-[3px]\">\n      <svg\n        className=\"h-[40px] w-[40px] animate-spin text-[#3c8dbc]\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle\n          className=\"opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          strokeWidth=\"4\"\n        />\n        <path\n          className=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n        />\n      </svg>\n    </div>\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Tool buttons (collapse / remove)                                          */\n/* -------------------------------------------------------------------------- */\n\nfunction CollapseButton({\n  isCollapsed,\n  onClick,\n  solid,\n}: {\n  isCollapsed: boolean\n  onClick: () => void\n  solid?: boolean\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center justify-center h-[20px] w-[20px] rounded-[3px] border-0 cursor-pointer bg-transparent\",\n        solid ? \"text-white hover:opacity-80\" : \"text-[#97a0b3] hover:text-[#444]\"\n      )}\n      aria-label={isCollapsed ? \"Expand\" : \"Collapse\"}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"h-[14px] w-[14px]\"\n      >\n        {isCollapsed ? (\n          <polyline points=\"6 9 12 15 18 9\" />\n        ) : (\n          <polyline points=\"18 15 12 9 6 15\" />\n        )}\n      </svg>\n    </button>\n  )\n}\n\nfunction RemoveButton({\n  onClick,\n  solid,\n}: {\n  onClick: () => void\n  solid?: boolean\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"inline-flex items-center justify-center h-[20px] w-[20px] rounded-[3px] border-0 cursor-pointer bg-transparent\",\n        solid ? \"text-white hover:opacity-80\" : \"text-[#97a0b3] hover:text-[#444]\"\n      )}\n      aria-label=\"Remove\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"h-[14px] w-[14px]\"\n      >\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n      </svg>\n    </button>\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Box                                                                       */\n/* -------------------------------------------------------------------------- */\n\nconst solidVariantBg: Record<BoxVariant, string> = {\n  default: \"bg-[#d2d6de]\",\n  primary: \"bg-[#3c8dbc]\",\n  info: \"bg-[#00c0ef]\",\n  success: \"bg-[#00a65a]\",\n  warning: \"bg-[#f39c12]\",\n  danger: \"bg-[#dd4b39]\",\n}\n\ninterface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: BoxVariant\n  solid?: boolean\n  collapsible?: boolean\n  removable?: boolean\n  loading?: boolean\n  defaultCollapsed?: boolean\n  title?: string\n  tools?: React.ReactNode\n  footer?: React.ReactNode\n  children?: React.ReactNode\n}\n\nconst Box = React.forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      solid = false,\n      collapsible = false,\n      removable = false,\n      loading = false,\n      defaultCollapsed = false,\n      title,\n      tools,\n      footer,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed)\n    const [isRemoving, setIsRemoving] = useState(false)\n    const [isRemoved, setIsRemoved] = useState(false)\n    const contentRef = useRef<HTMLDivElement>(null)\n    const [contentHeight, setContentHeight] = useState<number | undefined>(\n      undefined\n    )\n\n    const toggleCollapse = useCallback(() => {\n      setIsCollapsed((prev) => !prev)\n    }, [])\n\n    const handleRemove = useCallback(() => {\n      setIsRemoving(true)\n      setTimeout(() => {\n        setIsRemoved(true)\n      }, 500)\n    }, [])\n\n    useEffect(() => {\n      if (contentRef.current) {\n        setContentHeight(contentRef.current.scrollHeight)\n      }\n    }, [children, footer])\n\n    if (isRemoved) return null\n\n    const borderColor = boxVariantColors[variant]\n    const hasHeader = title || tools || collapsible || removable\n    const showToolbar = collapsible || removable || tools\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative mb-[20px] rounded-[3px] bg-white\",\n          isRemoving && \"transition-opacity duration-500 opacity-0\",\n          defaultCollapsed && isCollapsed && \"collapsed-box\",\n          className\n        )}\n        style={{\n          boxShadow: \"0 1px 1px rgba(0,0,0,0.1)\",\n          borderTop: `3px solid ${borderColor}`,\n        }}\n        {...props}\n      >\n        {/* Loading overlay */}\n        {loading && <BoxLoadingOverlay />}\n\n        {/* Header */}\n        {hasHeader && (\n          <BoxHeader\n            title={title}\n            className={cn(\n              solid && solidVariantBg[variant],\n              solid && \"text-white border-b-0\"\n            )}\n          >\n            {showToolbar && (\n              <BoxTools>\n                {tools}\n                {collapsible && (\n                  <CollapseButton\n                    isCollapsed={isCollapsed}\n                    onClick={toggleCollapse}\n                    solid={solid}\n                  />\n                )}\n                {removable && (\n                  <RemoveButton onClick={handleRemove} solid={solid} />\n                )}\n              </BoxTools>\n            )}\n          </BoxHeader>\n        )}\n\n        {/* Collapsible wrapper */}\n        <div\n          ref={contentRef}\n          className=\"overflow-hidden transition-[max-height] duration-500 ease-in-out\"\n          style={{\n            maxHeight: isCollapsed\n              ? 0\n              : contentHeight !== undefined\n                ? contentHeight\n                : \"none\",\n          }}\n        >\n          {/* Body */}\n          {children && <BoxBody>{children}</BoxBody>}\n\n          {/* Footer */}\n          {footer && <BoxFooter>{footer}</BoxFooter>}\n        </div>\n      </div>\n    )\n  }\n)\nBox.displayName = \"Box\"\n\nexport { Box, BoxHeader, BoxBody, BoxFooter, BoxTools }\nexport type { BoxProps, BoxHeaderProps, BoxBodyProps, BoxFooterProps, BoxToolsProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}