{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-badge",
  "version": "1.2.0",
  "category": "status",
  "meta": {
    "preview": "https://ui.manifest.build/previews/status-badge.png",
    "version": "1.2.0",
    "changelog": {
      "1.0.0": "Initial release with multiple status states",
      "1.0.2": "Added comprehensive JSDoc documentation",
      "1.1.0": "Moved to status category for better organization",
      "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
      "1.1.2": "Fixed defensive property access to handle empty objects and null values",
      "1.2.0": "Added demo data defaults - component renders demo content when no data prop is provided"
    }
  },
  "changelog": {
    "1.0.0": "Initial release with multiple status states",
    "1.0.2": "Added comprehensive JSDoc documentation",
    "1.1.0": "Moved to status category for better organization",
    "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
    "1.1.2": "Fixed defensive property access to handle empty objects and null values",
    "1.2.0": "Added demo data defaults - component renders demo content when no data prop is provided"
  },
  "title": "Status Badge",
  "author": "MNFST, Inc",
  "description": "Status badge with multiple states (success, pending, processing, error, shipped, delivered).",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/status/status-badge.tsx",
      "content": "\"use client\"\n\nimport {\n  Check,\n  Clock,\n  AlertCircle,\n  XCircle,\n  Loader2,\n  Truck,\n} from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { demoStatusBadge } from './demo/status'\n\n/**\n * Available status types for the badge.\n * @typedef {\"success\" | \"pending\" | \"processing\" | \"warning\" | \"error\" | \"shipped\" | \"delivered\" | \"cancelled\"} StatusType\n */\nexport type StatusType =\n  | \"success\"\n  | \"pending\"\n  | \"processing\"\n  | \"warning\"\n  | \"error\"\n  | \"shipped\"\n  | \"delivered\"\n  | \"cancelled\"\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * StatusBadgeProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the StatusBadge component.\n * Displays a status indicator with configurable appearance.\n */\nexport interface StatusBadgeProps {\n  data?: {\n    /** The status to display (success, pending, processing, warning, error, shipped, delivered, cancelled). */\n    status?: StatusType\n  }\n  appearance?: {\n    /** Custom label text that overrides the default status label. */\n    label?: string\n    /**\n     * Whether to show the status icon.\n     * @default true\n     */\n    showIcon?: boolean\n    /**\n     * Badge size variant.\n     * @default \"md\"\n     */\n    size?: \"sm\" | \"md\" | \"lg\"\n  }\n}\n\nconst statusConfig: Record<\n  StatusType,\n  { icon: React.ElementType; className: string; defaultLabel: string }\n> = {\n  success: {\n    icon: Check,\n    className: \"bg-muted text-foreground border-border\",\n    defaultLabel: \"Success\",\n  },\n  pending: {\n    icon: Clock,\n    className: \"bg-muted text-muted-foreground border-border\",\n    defaultLabel: \"Pending\",\n  },\n  processing: {\n    icon: Loader2,\n    className: \"bg-muted text-foreground border-border\",\n    defaultLabel: \"Processing\",\n  },\n  warning: {\n    icon: AlertCircle,\n    className: \"bg-muted text-foreground border-border\",\n    defaultLabel: \"Warning\",\n  },\n  error: {\n    icon: XCircle,\n    className: \"bg-destructive/10 text-destructive border-destructive/20\",\n    defaultLabel: \"Error\",\n  },\n  shipped: {\n    icon: Truck,\n    className: \"bg-muted text-foreground border-border\",\n    defaultLabel: \"Shipped\",\n  },\n  delivered: {\n    icon: Check,\n    className: \"bg-foreground text-background border-foreground\",\n    defaultLabel: \"Delivered\",\n  },\n  cancelled: {\n    icon: XCircle,\n    className: \"bg-muted text-muted-foreground border-border\",\n    defaultLabel: \"Cancelled\",\n  },\n}\n\nconst sizeClasses = {\n  sm: \"px-2 py-0.5 text-xs gap-1\",\n  md: \"px-2.5 py-1 text-sm gap-1.5\",\n  lg: \"px-3 py-1.5 text-sm gap-2\",\n}\n\nconst iconSizes = {\n  sm: \"h-3 w-3\",\n  md: \"h-3.5 w-3.5\",\n  lg: \"h-4 w-4\",\n}\n\n/**\n * A status badge component displaying various states with icons.\n * Supports multiple status types with appropriate colors and icons.\n *\n * Features:\n * - 8 status types: success, pending, processing, warning, error, shipped, delivered, cancelled\n * - Three size variants (sm, md, lg)\n * - Optional status icon\n * - Custom label override\n * - Animated spinner for processing state\n *\n * @component\n * @example\n * ```tsx\n * <StatusBadge\n *   data={{ status: \"shipped\" }}\n *   appearance={{ size: \"md\", showIcon: true }}\n * />\n * ```\n */\nexport function StatusBadge({ data, appearance }: StatusBadgeProps) {\n  const resolved: NonNullable<StatusBadgeProps['data']> = data ?? demoStatusBadge\n  const status = resolved?.status ?? \"pending\"\n  const label = appearance?.label\n  const showIcon = appearance?.showIcon ?? true\n  const size = appearance?.size ?? \"md\"\n  const config = statusConfig[status]\n  const Icon = config.icon\n  const displayLabel = label || config.defaultLabel\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-full border font-medium\",\n        config.className,\n        sizeClasses[size]\n      )}\n    >\n      {showIcon && (\n        <Icon\n          className={cn(\n            iconSizes[size],\n            status === \"processing\" && \"animate-spin\"\n          )}\n        />\n      )}\n      {displayLabel}\n    </span>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/ui/status-badge.tsx"
    },
    {
      "path": "registry/status/demo/status.ts",
      "content": "// Demo data for Status category components\n// This file contains sample data used for component previews and documentation\n\nexport const demoProgressSteps = [\n  { label: 'Cart', status: 'completed' as const },\n  { label: 'Shipping', status: 'current' as const },\n  { label: 'Payment', status: 'pending' as const },\n  { label: 'Confirm', status: 'pending' as const },\n]\n\nexport const demoStatusBadge = {\n  status: 'processing' as const,\n  label: 'Processing',\n}\n",
      "type": "registry:lib",
      "target": "components/ui/demo/status.ts"
    }
  ],
  "categories": [
    "status"
  ],
  "type": "registry:block"
}