{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-box",
  "title": "Data Box",
  "description": "Compact data display box with label and large value, ideal for KPIs and metrics",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/data-box.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@/lib/utils\"\n\nconst dataBoxVariants = cva(\n  \"border border-treasury-base bg-treasury-base-lightest flex flex-col\",\n  {\n    variants: {\n      size: {\n        default: \"min-w-[180px]\",\n        sm: \"min-w-[120px]\",\n        xs: \"min-w-[90px]\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nconst dataBoxLabelVariants = cva(\n  \"font-sans text-treasury-base-dark border-b border-treasury-base-light\",\n  {\n    variants: {\n      size: {\n        default: \"px-4 py-3 text-base\",\n        sm: \"px-3 py-2 text-sm\",\n        xs: \"px-2 py-1.5 text-xs\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nconst dataBoxValueVariants = cva(\n  \"font-heading font-bold text-treasury-ink\",\n  {\n    variants: {\n      size: {\n        default: \"px-4 py-4 text-4xl\",\n        sm: \"px-3 py-3 text-2xl\",\n        xs: \"px-2 py-2 text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nexport interface DataBoxProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof dataBoxVariants> {\n  label: string\n  value: string | number\n}\n\nfunction DataBox({\n  className,\n  size,\n  label,\n  value,\n  ...props\n}: DataBoxProps) {\n  return (\n    <div className={cn(dataBoxVariants({ size, className }))} {...props}>\n      <div className={cn(dataBoxLabelVariants({ size }))}>\n        {label}\n      </div>\n      <div className={cn(dataBoxValueVariants({ size }))}>\n        {value}\n      </div>\n    </div>\n  )\n}\n\nexport { DataBox, dataBoxVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}