{
  "name": "stat",
  "type": "registry:ui",
  "registryDependencies": [
    "separator"
  ],
  "files": [
    {
      "path": "ui/stat.tsx",
      "type": "registry:ui",
      "content": "import type * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"cn\";\n\nimport { Separator } from \"@/registry/bases/radix/ui/separator\";\n\nfunction Stat({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"stat\" className={cn(\"grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 rounded-lg border bg-card p-4 text-card-foreground shadow-xs **:data-[slot=stat-description]:col-span-2 **: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 **:data-[slot=stat-label]:col-span-1 **:data-[slot=stat-separator]:col-span-2 **:data-[slot=stat-trend]:col-span-2 **:data-[slot=stat-value]:col-span-1\", className)} {...props} />\n  );\n}\n\nfunction StatLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"stat-label\"\n      className={cn(\"text-sm font-medium text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nconst statIndicatorVariants = cva(\"flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\", {\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: \"h-6 min-w-6 rounded-4xl border px-1.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3\",\n      action: \"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: \"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: \"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\ninterface StatIndicatorProps\n  extends\n    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(\"text-2xl font-medium 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 text-xs font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3\",\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 (\n    <Separator\n      data-slot=\"stat-separator\"\n      className=\"my-2\"\n      {...props}\n    />\n  );\n}\n\nfunction StatDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"stat-description\"\n      className={cn(\"text-xs text-muted-foreground\", 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": ""
    }
  ],
  "dependencies": [
    "cn"
  ]
}