{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-dot",
  "title": "StatusDot",
  "description": "A small mark and a word. Each status has its own shape as well as tone.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "status-dot/StatusDot.css",
      "content": ".cr-status-dot {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--cr-space-2);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n}\n\n.cr-status-dot__mark {\n  box-sizing: border-box;\n  flex: none;\n  width: 10px;\n  height: 10px;\n  border-radius: var(--cr-radius-full);\n}\n\n/* Running: a ring. Waiting: a solid ink dot with a halo. Done: a quiet grey dot. Failed: red. Queued: dashed. */\n.cr-status-dot[data-status='running'] .cr-status-dot__mark { border: 2px solid var(--cr-color-ink-bg); }\n.cr-status-dot[data-status='waiting'] { font-weight: var(--cr-font-weight-semibold); }\n.cr-status-dot[data-status='waiting'] .cr-status-dot__mark { background: var(--cr-color-ink-bg); box-shadow: 0 0 0 4px var(--cr-color-ink-subtle); }\n.cr-status-dot[data-status='done'] .cr-status-dot__mark { background: var(--cr-color-text-muted); }\n.cr-status-dot[data-status='failed'] { color: var(--cr-color-status-failed-fg); }\n.cr-status-dot[data-status='failed'] .cr-status-dot__mark { background: var(--cr-color-danger-text); }\n.cr-status-dot[data-status='queued'] { color: var(--cr-color-text-muted); }\n.cr-status-dot[data-status='queued'] .cr-status-dot__mark { border: 2px dashed var(--cr-color-text-muted); }\n",
      "type": "registry:file",
      "target": "@components/creance/status-dot/StatusDot.css"
    },
    {
      "path": "status-dot/StatusDot.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './StatusDot.css';\n\nexport type DotStatus = 'running' | 'waiting' | 'done' | 'failed' | 'queued';\n\nconst words: Record<DotStatus, string> = {\n  running: 'Running',\n  waiting: 'Waiting for you',\n  done: 'Done',\n  failed: 'Failed',\n  queued: 'Queued',\n};\n\nexport interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {\n  status: DotStatus;\n  /** Defaults to the status in words. The label always shows: a dot alone says nothing. */\n  children?: ReactNode;\n}\n\n/** A small mark and a word. Each status has its own shape as well as tone, so colour is never the only cue. */\nexport function StatusDot({ status, children, className, ...props }: StatusDotProps) {\n  return (\n    <span className={cx('cr-status-dot', className)} data-status={status} {...props}>\n      <span className=\"cr-status-dot__mark\" aria-hidden=\"true\" />\n      {children ?? words[status]}\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/status-dot/StatusDot.tsx"
    }
  ],
  "categories": [
    "atom",
    "data-display"
  ],
  "type": "registry:ui"
}