{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-glyph",
  "title": "Status Glyph",
  "description": "A 10px shape per status (circle, bullseye for live, triangle, cross, half ring, square).",
  "registryDependencies": [
    "https://sproutboat.com/ikada/r/theme.json",
    "https://sproutboat.com/ikada/r/cn.json",
    "https://sproutboat.com/ikada/r/status.json"
  ],
  "files": [
    {
      "path": "registry/ikada/ui/status-glyph.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/components/ikada/lib/cn\";\nimport { dotColor } from \"@/components/ikada/status\";\nimport type { Status } from \"@/components/ikada/status\";\n\nconst glyphClass = {\n  success: \"rounded-full\",\n  warning: \"[clip-path:polygon(50%_0,100%_100%,0_100%)] -translate-y-px\",\n  danger:\n    \"[clip-path:polygon(20%_0,50%_30%,80%_0,100%_20%,70%_50%,100%_80%,80%_100%,50%_70%,20%_100%,0_80%,30%_50%,0_20%)]\",\n  // In progress: a ring with a filled half, like a pie at 50%. A closed ring plus a\n  // wedge cannot be mistaken for the letter C, and it still differs from the solid circle.\n  info: \"rounded-full border-2 border-info-dot bg-[conic-gradient(var(--sb-info-dot)_0_50%,transparent_0)]\",\n  neutral: \"rounded-xs scale-80\",\n} satisfies Record<Status, string>;\n\n/**\n * Live: serving traffic right now. A bullseye (ring with a solid centre), so it differs from the\n * solid Ready circle and from the half-filled in-progress ring. Only applies to success.\n */\nconst liveClass =\n  \"rounded-full border-2 border-brand-dot bg-[radial-gradient(circle,var(--sb-brand-dot)_0_30%,transparent_35%)]\";\n\nexport interface StatusGlyphProps extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** Which status: sets the shape and the colour. Default neutral. */\n  tone?: Status;\n  /** @deprecated Use `tone`; removed in 0.3.0. */\n  status?: Status;\n  /** Success that is serving traffic (\"Live\"): a bullseye instead of the solid \"Ready\" circle. */\n  live?: boolean;\n  /** Pulses (a fade) while in progress; the building ring and its wedge spin when motion is allowed. */\n  pulse?: boolean;\n  /**\n   * Success or creation just happened: on mount the shape grows up from its base and sends one\n   * ring out. Only applies to success. Under reduced motion it fades in place.\n   */\n  sprout?: boolean;\n}\n\n/** The sprouting success glyph: grow from the base, then one ring that spreads and fades. */\nconst sproutClass = [\n  \"relative origin-bottom animate-[sb-sprout_480ms_var(--ease-out)_both]\",\n  \"after:absolute after:-inset-[3px] after:rounded-full after:border-[1.5px] after:border-brand-dot after:content-['']\",\n  \"after:animate-[sb-sprout-ring_700ms_var(--ease-out)_both]\",\n].join(\" \");\n\n/** A 10px shape per status (circle, bullseye for live, triangle, cross, half ring, square). Decorative: always paired with a label. */\nexport function StatusGlyph({\n  tone,\n  status: legacyStatus,\n  live = false,\n  pulse = false,\n  sprout = false,\n  className,\n  ...props\n}: StatusGlyphProps) {\n  const status: Status = tone ?? legacyStatus ?? \"neutral\";\n  const isLive = live && status === \"success\";\n  return (\n    <span\n      data-slot=\"status-glyph\"\n      aria-hidden=\"true\"\n      data-glyph={isLive ? \"live\" : status}\n      data-sprout={sprout && status === \"success\" ? \"\" : undefined}\n      className={cn(\n        \"inline-block size-2.5 shrink-0\",\n        status === \"info\" || isLive ? \"\" : dotColor[status],\n        isLive ? liveClass : glyphClass[status],\n        pulse && (status === \"info\" ? \"motion-safe:animate-spin\" : \"animate-pulse\"),\n        sprout && status === \"success\" && sproutClass,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/ikada/status-glyph.tsx"
    }
  ],
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}