{
  "name": "stat",
  "type": "registry:ui",
  "dependencies": [],
  "registryDependencies": [
    "separator"
  ],
  "files": [
    {
      "path": "ui/stat.tsx",
      "type": "registry:ui",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/registry/bases/radix/ui/separator\";\n\nfunction Stat({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"stat\"\n      className={cn(\n        \"grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 rounded-lg border bg-card p-4 text-card-foreground shadow-sm\",\n        \"**:data-[slot=stat-label]:col-span-1 **:data-[slot=stat-value]:col-span-1\",\n        \"**:data-[slot=stat-indicator]:col-start-2 **:data-[slot=stat-indicator]:row-span-2 **:data-[slot=stat-indicator]:row-start-1 **:data-[slot=stat-indicator]:self-start\",\n        \"**:data-[slot=stat-description]:col-span-2 **:data-[slot=stat-separator]:col-span-2 **:data-[slot=stat-trend]:col-span-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction StatLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"stat-label\"\n      className={cn(\"font-medium text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nconst statIndicatorVariants = cva(\n  \"flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"text-muted-foreground [&_svg:not([class*='size-'])]:size-5\",\n        icon: \"size-8 rounded-md border [&_svg:not([class*='size-'])]:size-3.5\",\n        badge:\n          \"h-6 min-w-6 rounded-sm border px-1.5 font-medium text-xs [&_svg:not([class*='size-'])]:size-3\",\n        action:\n          \"size-8 cursor-pointer rounded-md transition-colors hover:bg-muted/50 [&_svg:not([class*='size-'])]:size-4\",\n      },\n      color: {\n        default: \"bg-muted text-muted-foreground\",\n        success:\n          \"border-green-500/20 bg-green-500/10 text-green-600 dark:text-green-400\",\n        info: \"border-blue-500/20 bg-blue-500/10 text-blue-600 dark:text-blue-400\",\n        warning:\n          \"border-orange-500/20 bg-orange-500/10 text-orange-600 dark:text-orange-400\",\n        error: \"border-destructive/20 bg-destructive/10 text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      color: \"default\",\n    },\n  },\n);\n\ninterface StatIndicatorProps\n  extends Omit<React.ComponentProps<\"div\">, \"color\">,\n    VariantProps<typeof statIndicatorVariants> {}\n\nfunction StatIndicator({\n  className,\n  variant = \"default\",\n  color = \"default\",\n  ...props\n}: StatIndicatorProps) {\n  return (\n    <div\n      data-slot=\"stat-indicator\"\n      data-variant={variant}\n      data-color={color}\n      className={cn(statIndicatorVariants({ variant, color, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction StatValue({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"stat-value\"\n      className={cn(\"font-semibold text-2xl tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction StatTrend({\n  className,\n  trend,\n  ...props\n}: React.ComponentProps<\"div\"> & { trend?: \"up\" | \"down\" | \"neutral\" }) {\n  return (\n    <div\n      data-slot=\"stat-trend\"\n      data-trend={trend}\n      className={cn(\n        \"inline-flex items-center gap-1 font-medium text-xs [&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        {\n          \"text-green-600 dark:text-green-400\": trend === \"up\",\n          \"text-red-600 dark:text-red-400\": trend === \"down\",\n          \"text-muted-foreground\": trend === \"neutral\" || !trend,\n        },\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction StatSeparator({ ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot=\"stat-separator\" className=\"my-2\" {...props} />;\n}\n\nfunction StatDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"stat-description\"\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Stat,\n  StatDescription,\n  StatIndicator,\n  StatLabel,\n  StatSeparator,\n  StatTrend,\n  StatValue,\n};\n",
      "target": ""
    }
  ]
}