{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "A status as tone, icon and word.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "badge/Badge.css",
      "content": ".cr-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--cr-space-1);\n  padding: 3px var(--cr-space-3);\n  border-radius: var(--cr-radius-full);\n  font-size: var(--cr-font-size-xs);\n  font-weight: var(--cr-font-weight-semibold);\n  line-height: var(--cr-font-line-height-normal);\n  white-space: nowrap;\n}\n\n.cr-badge[data-status='running'] { background: var(--cr-color-status-running-bg); color: var(--cr-color-status-running-fg); }\n.cr-badge[data-status='waiting'] { background: var(--cr-color-status-waiting-bg); color: var(--cr-color-status-waiting-fg); }\n.cr-badge[data-status='blocked'] { background: var(--cr-color-status-blocked-bg); color: var(--cr-color-status-blocked-fg); }\n.cr-badge[data-status='done']    { background: var(--cr-color-status-done-bg);    color: var(--cr-color-status-done-fg); }\n.cr-badge[data-status='failed']  { background: var(--cr-color-status-failed-bg);  color: var(--cr-color-status-failed-fg); }\n\n.cr-badge[data-status='running'] .cr-icon {\n  animation: cr-badge-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes cr-badge-pulse {\n  50% { opacity: 0.35; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cr-badge[data-status='running'] .cr-icon { animation: none; }\n}\n",
      "type": "registry:file",
      "target": "@components/creance/badge/Badge.css"
    },
    {
      "path": "badge/Badge.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport { BlockedIcon, CheckIcon, CrossIcon, DotIcon, PauseIcon } from '@/lib/creance/icons';\nimport './Badge.css';\n\nexport type Status = 'running' | 'waiting' | 'blocked' | 'done' | 'failed';\n\nexport const statusLabels: Record<Status, string> = {\n  running: 'Running',\n  waiting: 'Waiting',\n  blocked: 'Blocked',\n  done: 'Done',\n  failed: 'Failed',\n};\n\nconst icons: Record<Status, ReactNode> = {\n  running: <DotIcon />,\n  waiting: <PauseIcon />,\n  blocked: <BlockedIcon />,\n  done: <CheckIcon />,\n  failed: <CrossIcon />,\n};\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  status: Status;\n  /** Defaults to the status name, e.g. \"Running\". */\n  children?: ReactNode;\n}\n\n/** Status is carried by icon and text as well as colour. */\nexport function Badge({ status, children, className, ...props }: BadgeProps) {\n  return (\n    <span className={cx('cr-badge', className)} data-status={status} {...props}>\n      {icons[status]}\n      <span>{children ?? statusLabels[status]}</span>\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/badge/Badge.tsx"
    }
  ],
  "categories": [
    "atom",
    "data-display"
  ],
  "type": "registry:ui"
}