{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status",
  "type": "registry:ui",
  "title": "LED and status badge",
  "description": "A 4–5 pt LED lit from the top left (green live, amber waiting, red failed, blue link, off), and the 24 tall status badge: an LED and the state in the label role, not pressable, with the fixing command as a tooltip.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/status/status.tsx",
      "type": "registry:ui",
      "target": "components/metalui/status/status.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Tooltip } from '../tooltip/tooltip';\n\n/* LED and STATUS BADGE (the reference design's .led-*, .pill.status).\n * An LED says one state by colour and never alone: it sits beside words (a badge, a readout, an engraving).\n * The badge is not pressable; its hint (the command that fixes it) shows as a tooltip on hover and focus.\n * Styled with the theme's utilities (the status recipe). */\n\nexport type LedKind = 'live' | 'waiting' | 'failed' | 'link' | 'off';\n\nexport interface LedProps extends React.HTMLAttributes<HTMLSpanElement> {\n  kind: LedKind;\n  /** 5 (default) or 4 (small). */\n  size?: 'default' | 'small';\n}\n\nconst LED = 'mu-led inline-block flex-none rounded-round';\nconst LED_SIZES = {\n  default: 'size-status-led-size',\n  small: 'size-status-led-size-small',\n};\nconst LED_KINDS: Record<LedKind, string> = {\n  live: 'recipe-status-led-live',\n  waiting: 'recipe-status-led recipe-status-led-waiting',\n  failed: 'recipe-status-led recipe-status-led-failed',\n  link: 'recipe-status-led recipe-status-led-link',\n  off: 'recipe-status-led-off',\n};\n\n/** A tiny lamp, lit from the top left. Decorative: pair it with words. */\nexport function Led({ kind, size = 'default', className, ...props }: LedProps) {\n  const own = `${LED} ${LED_SIZES[size]} ${LED_KINDS[kind]}`;\n  return <span aria-hidden data-kind={kind} data-size={size} className={className ? `${own} ${className}` : own} {...props} />;\n}\n\nexport interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  led: LedKind;\n  /** The state, short, uppercase in the label role: \"SYNC LIVE\", \"OFFLINE · ADD KEY TO KEYCHAIN\". */\n  children: React.ReactNode;\n  /** What fixes it, shown on hover and focus: \"security add-generic-password -s example-service …\". */\n  hint?: string;\n}\n\nconst BADGE = 'mu-badge inline-flex items-center gap-status-badge-gap h-status-badge-height px-status-badge-pad rounded-pill whitespace-nowrap type-status-badge uppercase text-ink2 recipe-status-badge cursor-default focus-visible:focus-ring';\n\n/** A state the system is in, with its LED. Not a button. */\nexport const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(function StatusBadge({ led, children, hint, className, ...props }, ref) {\n  const badge = (\n    <span ref={ref} role=\"status\" tabIndex={hint ? 0 : undefined} aria-description={hint} className={className ? `${BADGE} ${className}` : BADGE} {...props}>\n      <Led kind={led} />\n      {children}\n    </span>\n  );\n  if (!hint) return badge;\n  return (\n    <Tooltip label={hint} side=\"bottom\" offset={8} wrap>\n      {badge}\n    </Tooltip>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/status.md. SwiftUI: MetalLED, MetalStatusBadge in the MetalUI Swift package."
}