{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-icon",
  "title": "Status Icon",
  "description": "Unified status icon component with variants for different contexts",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://openstatus.dev/r/status-types.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/status-icon.tsx",
      "content": "import type { StatusType } from \"@/components/blocks/status.types\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  AlertCircleIcon,\n  CheckIcon,\n  TriangleAlertIcon,\n  WrenchIcon,\n} from \"lucide-react\";\n\ninterface StatusIconProps extends React.ComponentProps<\"div\"> {\n  /**\n   * The status type to display\n   */\n  status?: StatusType;\n  /**\n   * The variant determines the CSS selector pattern used for status-based styling\n   * - \"default\": Uses group-data-[variant=...] (for Status component)\n   * - \"banner\": Uses group-data-[status=...]/status-banner (for StatusBanner component)\n   * - \"component\": Uses group-data-[variant=...]/component (for StatusComponent)\n   */\n  variant?: \"default\" | \"banner\" | \"component\";\n}\n\n/**\n * StatusIcon - A unified icon component for displaying status indicators\n *\n * This component renders the appropriate icon based on the status type:\n * - success: CheckIcon\n * - degraded: TriangleAlertIcon\n * - error: AlertCircleIcon\n * - info: WrenchIcon\n * - empty: No icon (muted background)\n *\n * @example\n * // In Status component context\n * <StatusIcon variant=\"default\" />\n *\n * @example\n * // In StatusBanner context\n * <StatusIcon variant=\"banner\" />\n *\n * @example\n * // In StatusComponent context\n * <StatusIcon variant=\"component\" />\n */\nexport function StatusIcon({\n  className,\n  variant = \"default\",\n  status,\n  ...props\n}: StatusIconProps) {\n  // Define size classes based on variant\n  const sizeClasses =\n    variant === \"component\"\n      ? \"size-[12.5px] [&>svg]:size-[9px]\"\n      : \"size-7 [&>svg]:size-4\";\n\n  // Define status-based classes based on variant\n  const statusClasses = (() => {\n    switch (variant) {\n      case \"banner\":\n        return [\n          \"group-data-[status=success]/status-banner:bg-success\",\n          \"group-data-[status=degraded]/status-banner:bg-warning\",\n          \"group-data-[status=error]/status-banner:bg-destructive\",\n          \"group-data-[status=info]/status-banner:bg-info\",\n        ];\n      case \"component\":\n        return [\n          \"group-data-[variant=success]/component:bg-success\",\n          \"group-data-[variant=degraded]/component:bg-warning\",\n          \"group-data-[variant=error]/component:bg-destructive\",\n          \"group-data-[variant=info]/component:bg-info\",\n        ];\n      case \"default\":\n      default:\n        return [\n          \"group-data-[variant=success]:bg-success\",\n          \"group-data-[variant=degraded]:bg-warning\",\n          \"group-data-[variant=error]:bg-destructive\",\n          \"group-data-[variant=info]:bg-info\",\n        ];\n    }\n  })();\n\n  // Define icon visibility classes based on variant\n  const iconVisibilityClasses = (() => {\n    switch (variant) {\n      case \"banner\":\n        return {\n          success: \"group-data-[status=success]/status-banner:block\",\n          degraded: \"group-data-[status=degraded]/status-banner:block\",\n          error: \"group-data-[status=error]/status-banner:block\",\n          info: \"group-data-[status=info]/status-banner:block\",\n        };\n      case \"component\":\n        return {\n          success: \"group-data-[variant=success]/component:block\",\n          degraded: \"group-data-[variant=degraded]/component:block\",\n          error: \"group-data-[variant=error]/component:block\",\n          info: \"group-data-[variant=info]/component:block\",\n        };\n      case \"default\":\n      default:\n        return {\n          success: \"group-data-[variant=success]:block\",\n          degraded: \"group-data-[variant=degraded]:block\",\n          error: \"group-data-[variant=error]:block\",\n          info: \"group-data-[variant=info]:block\",\n        };\n    }\n  })();\n\n  return (\n    <div\n      data-slot=\"status-icon\"\n      className={cn(\n        \"bg-muted text-background flex items-center justify-center rounded-full\",\n        sizeClasses,\n        ...statusClasses,\n        className,\n      )}\n      {...props}\n    >\n      <CheckIcon className={cn(\"hidden\", iconVisibilityClasses.success)} />\n      <TriangleAlertIcon\n        className={cn(\"hidden\", iconVisibilityClasses.degraded)}\n      />\n      <AlertCircleIcon className={cn(\"hidden\", iconVisibilityClasses.error)} />\n      <WrenchIcon className={cn(\"hidden\", iconVisibilityClasses.info)} />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/blocks/status-icon.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-success": "var(--success)",
      "color-warning": "var(--warning)",
      "color-info": "var(--info)"
    },
    "light": {
      "success": "oklch(0.72 0.19 150)",
      "warning": "oklch(0.77 0.16 70)",
      "info": "oklch(0.62 0.19 260)"
    },
    "dark": {
      "success": "oklch(0.72 0.19 150)",
      "warning": "oklch(0.77 0.16 70)",
      "info": "oklch(0.62 0.19 260)"
    }
  },
  "type": "registry:block"
}