{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "type": "registry:ui",
  "title": "Badge",
  "description": "상태나 속성을 짧은 라벨로 강조해, 목록에서 훑어보는 것만으로 구분되게 만드는 표식입니다.",
  "registryDependencies": [
    "@atom/tokens",
    "@atom/lib-bem",
    "@atom/lib-cn",
    "@atom/lib-context",
    "@atom/lib-slot"
  ],
  "files": [
    {
      "path": "poc/design-system/implement/src/components/badge.tsx",
      "content": "\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, type Ref } from \"react\";\nimport { mod } from \"../lib/bem\";\nimport { cn } from \"../lib/cn\";\nimport { createStrictContext } from \"../lib/context\";\nimport { Slot } from \"../lib/slot\";\n\n/* -------------------------------------------------------------------------- */\n/*  Badge (components/badge.md, styles/atom/elements/badge.css)               */\n/*    <Badge variant=\"positiveWeak\" icon={<CheckIcon />}>본인 인증</Badge>      */\n/*    <Badge variant=\"brandWeak\" shape=\"pill\">                                 */\n/*      <Badge.Icon><CheckIcon /></Badge.Icon>                                 */\n/*      신규                                                                   */\n/*    </Badge>                                                                 */\n/* -------------------------------------------------------------------------- */\n\nexport type BadgeVariant =\n  | \"neutralSolid\"\n  | \"brandSolid\"\n  | \"criticalSolid\"\n  | \"neutralWeak\"\n  | \"brandWeak\"\n  | \"positiveWeak\"\n  | \"informativeWeak\"\n  | \"warningWeak\"\n  | \"neutralOutline\";\nexport type BadgeSize = \"small\" | \"medium\";\nexport type BadgeShape = \"square\" | \"pill\";\n\nconst B = \"atom-badge\";\n\nconst [BadgeContext, useBadgeContext] = createStrictContext<true>(\"Badge\");\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n  ref?: Ref<HTMLSpanElement>;\n  /** 배지의 의미와 색을 결정합니다. */\n  variant?: BadgeVariant;\n  /** 높이와 폰트 크기를 결정합니다. */\n  size?: BadgeSize;\n  /** 모서리 반경을 결정합니다. */\n  shape?: BadgeShape;\n  /** 라벨 앞에 놓일 아이콘입니다. `<Badge.Icon>` 으로 감싸 렌더합니다. */\n  icon?: ReactNode;\n  /** 라벨 텍스트입니다. */\n  children: ReactNode;\n};\n\n/** 누를 수 없는 표식입니다. `<span>` 이며 role 을 붙이지 않고 포커스도 받지 않습니다. */\nfunction BadgeRoot({\n  ref,\n  variant = \"neutralSolid\",\n  size = \"medium\",\n  shape = \"square\",\n  icon,\n  className,\n  children,\n  ...rest\n}: BadgeProps) {\n  return (\n    <BadgeContext value={true}>\n      <span\n        {...rest}\n        ref={ref}\n        className={cn(\n          B,\n          mod(B, \"variant\", variant),\n          mod(B, \"size\", size, \"medium\"),\n          mod(B, \"shape\", shape, \"square\"),\n          className,\n        )}\n      >\n        {icon !== undefined && icon !== null && <BadgeIcon>{icon}</BadgeIcon>}\n        {children}\n      </span>\n    </BadgeContext>\n  );\n}\n\n/**\n * 라벨 앞 아이콘(선택). 장식용이라 스크린리더에서 숨깁니다.\n * badge.css 가 크기를 아이콘 요소(svg)에 직접 주므로, 자식 요소에 atom-badge__icon 을 합칩니다.\n */\nfunction BadgeIcon({ className, children, ...rest }: HTMLAttributes<HTMLElement>) {\n  useBadgeContext(\"Badge.Icon\");\n  return (\n    <Slot {...rest} aria-hidden=\"true\" className={cn(`${B}__icon`, className)}>\n      {children}\n    </Slot>\n  );\n}\n\nexport const Badge = Object.assign(BadgeRoot, { Icon: BadgeIcon });\n",
      "type": "registry:ui",
      "target": "components/ui/badge.tsx"
    },
    {
      "path": "poc/design-system/implement/src/styles/atom/elements/badge.css",
      "content": "/* ============================================================================\n   Element — Badge\n   ----------------------------------------------------------------------------\n   atom-badge\n     --size_{small|medium}                   medium is the default\n     --shape_pill\n     --variant_{neutral-solid|brand-solid|critical-solid\n                |neutral-weak|brand-weak|positive-weak|informative-weak\n                |warning-weak|neutral-outline}\n     __icon                                  optional prefix icon\n   ========================================================================== */\n\n.atom-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--atom-x1);\n  height: 23px;\n  padding-inline: 8px;\n  border-radius: var(--atom-radius-r1);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.atom-badge__icon {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  margin-left: -1px;\n}\n\n/* --- sizes --------------------------------------------------------------- */\n.atom-badge--size_small {\n  height: 19px;\n  padding-inline: 6px;\n  font-size: 10px;\n}\n\n.atom-badge--size_small .atom-badge__icon {\n  width: 10px;\n  height: 10px;\n}\n\n/* --- shape --------------------------------------------------------------- */\n.atom-badge--shape_pill {\n  border-radius: var(--atom-radius-full);\n  padding-inline: 9px;\n}\n\n/* --- variants ------------------------------------------------------------ */\n.atom-badge--variant_neutral-solid {\n  background: var(--atom-bg-neutral-solid);\n  color: var(--atom-fg-on-solid);\n}\n\n.atom-badge--variant_brand-solid {\n  background: var(--atom-primary-600);\n  color: #fff;\n}\n\n.atom-badge--variant_critical-solid {\n  background: var(--atom-bg-critical-solid);\n  color: #fff;\n}\n\n.atom-badge--variant_neutral-weak {\n  background: var(--atom-bg-neutral-weak);\n  color: var(--atom-fg-neutral-muted);\n}\n\n.atom-badge--variant_brand-weak {\n  background: var(--atom-primary-50);\n  color: var(--atom-primary-700);\n}\n\n.atom-badge--variant_positive-weak {\n  background: var(--atom-green-50);\n  color: var(--atom-green-700);\n}\n\n.atom-badge--variant_informative-weak {\n  background: var(--atom-blue-50);\n  color: var(--atom-blue-600);\n}\n\n.atom-badge--variant_warning-weak {\n  background: var(--atom-bg-warning-weak);\n  color: var(--atom-fg-warning);\n}\n\n.atom-badge--variant_neutral-outline {\n  box-shadow: inset 0 0 0 1px var(--atom-border-default);\n  color: var(--atom-fg-neutral);\n}\n",
      "type": "registry:file",
      "target": "styles/atom/elements/badge.css"
    }
  ],
  "categories": [
    "feedback"
  ],
  "meta": {
    "version": "0.1.0",
    "kind": "element",
    "status": "stable",
    "specSource": "measured",
    "parts": [
      "Badge",
      "Badge.Icon"
    ],
    "docs": "poc/design-system/components/badge.md"
  }
}