{
  "name": "status",
  "type": "registry:ui",
  "files": [
    {
      "path": "ui/status.tsx",
      "type": "registry:ui",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst statusVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-full border px-2.5 py-1 font-medium text-xs transition-colors\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-muted text-muted-foreground **:data-[slot=status-indicator]:bg-muted-foreground\",\n        success:\n          \"border-green-500/20 bg-green-500/10 text-green-600 **:data-[slot=status-indicator]:bg-green-600 dark:text-green-400 **:data-[slot=status-indicator]:dark:bg-green-400\",\n        error:\n          \"border-destructive/20 bg-destructive/10 text-destructive **:data-[slot=status-indicator]:bg-destructive\",\n        warning:\n          \"border-orange-500/20 bg-orange-500/10 text-orange-600 **:data-[slot=status-indicator]:bg-orange-600 dark:text-orange-400 **:data-[slot=status-indicator]:dark:bg-orange-400\",\n        info: \"border-blue-500/20 bg-blue-500/10 text-blue-600 **:data-[slot=status-indicator]:bg-blue-600 dark:text-blue-400 **:data-[slot=status-indicator]:dark:bg-blue-400\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\ninterface StatusProps\n  extends VariantProps<typeof statusVariants>,\n    React.ComponentProps<\"div\">,\n    useRender.ComponentProps<\"div\"> {}\n\nfunction Status(props: StatusProps) {\n  const { className, variant = \"default\", render, ...rootProps } = props;\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(statusVariants({ variant }), className),\n      },\n      rootProps,\n    ),\n    render,\n    state: {\n      slot: \"status\",\n      variant,\n    },\n  });\n}\n\nfunction StatusIndicator(props: React.ComponentProps<\"div\">) {\n  const { className, ...indicatorProps } = props;\n\n  return (\n    <div\n      data-slot=\"status-indicator\"\n      {...indicatorProps}\n      className={cn(\n        \"relative flex size-2 shrink-0 rounded-full\",\n        \"before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-inherit\",\n        \"after:absolute after:inset-[2px] after:rounded-full after:bg-inherit\",\n        className,\n      )}\n    />\n  );\n}\n\nfunction StatusLabel(props: React.ComponentProps<\"div\">) {\n  const { className, ...labelProps } = props;\n\n  return (\n    <div\n      data-slot=\"status-label\"\n      {...labelProps}\n      className={cn(\"leading-none\", className)}\n    />\n  );\n}\n\nexport { Status, StatusIndicator, StatusLabel, statusVariants };\n",
      "target": ""
    }
  ],
  "dependencies": [
    "@base-ui/react"
  ]
}