{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-status",
  "title": "Status item",
  "description": "Styled item: the Status set. 5 decorative item variations (DotItem, StatusBadgeItem, ToneItem, ProgressItem, StatusIconItem) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/item-status.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { CircleAlert, CircleCheck, Info, TriangleAlert } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Item status family: 5 list rows carrying state. Every variant expresses the state through a different device: a dot, a badge, a tone surface, a progress bar, an icon. Colour comes ONLY from the semantic tone tokens (info/success/warning/danger) plus `-foreground` / `-soft` / `-soft-foreground`; alpha via color-mix. The root carrying the tone gets `data-tone`. The state is purely visual, no animation. Every export renders without props too. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\nexport type StyledTone = \"info\" | \"success\" | \"warning\" | \"danger\"\n\nconst box: Record<StyledSize, string> = {\n  sm: \"gap-2.5 rounded-lg p-2 text-sm\",\n  md: \"gap-3 rounded-lg p-3 text-sm\",\n  lg: \"gap-3.5 rounded-xl p-4 text-base\",\n  xl: \"gap-4 rounded-xl p-5 text-base\",\n}\n\nconst tile: Record<StyledSize, string> = {\n  sm: \"size-8 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  md: \"size-9 rounded-md [&_svg]:size-4 [&_i]:text-base\",\n  lg: \"size-10 rounded-lg [&_svg]:size-5 [&_i]:text-lg\",\n  xl: \"size-12 rounded-lg [&_svg]:size-5 [&_i]:text-lg\",\n}\n\nconst base =\n  \"flex w-full items-center [&_svg]:shrink-0 [&_i]:not-italic [&_i]:leading-none\"\n\nconst titleCls = \"truncate font-medium text-foreground\"\nconst descCls = \"truncate text-muted-foreground text-[0.85em]\"\n\n/* Solid ton dolgusu (nokta / cubuk). */\nconst dotTone: Record<StyledTone, string> = {\n  info: \"bg-info\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  danger: \"bg-danger\",\n}\n\n/* Soft ton yuzeyi + okunur yazi rengi. */\nconst softTone: Record<StyledTone, string> = {\n  info: \"bg-info-soft text-info-soft-foreground\",\n  success: \"bg-success-soft text-success-soft-foreground\",\n  warning: \"bg-warning-soft text-warning-soft-foreground\",\n  danger: \"bg-danger-soft text-danger-soft-foreground\",\n}\n\n/* Solid ton rozeti. */\nconst solidTone: Record<StyledTone, string> = {\n  info: \"bg-info text-info-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  danger: \"bg-danger text-danger-foreground\",\n}\n\n/* A tone border plus a very light tint for the root surface. */\nconst edgeTone: Record<StyledTone, string> = {\n  info: \"border-[color-mix(in_oklab,var(--color-info)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_8%,transparent)]\",\n  success:\n    \"border-[color-mix(in_oklab,var(--color-success)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-success)_8%,transparent)]\",\n  warning:\n    \"border-[color-mix(in_oklab,var(--color-warning)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-warning)_8%,transparent)]\",\n  danger:\n    \"border-[color-mix(in_oklab,var(--color-danger)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-danger)_8%,transparent)]\",\n}\n\nconst toneIcon: Record<StyledTone, React.ReactNode> = {\n  info: <Info />,\n  success: <CircleCheck />,\n  warning: <TriangleAlert />,\n  danger: <CircleAlert />,\n}\n\nconst toneLabel: Record<StyledTone, string> = {\n  info: \"Queued\",\n  success: \"Healthy\",\n  warning: \"Degraded\",\n  danger: \"Failing\",\n}\n\ntype Props = React.ComponentProps<\"div\"> & {\n  size?: StyledSize\n  tone?: StyledTone\n  title?: React.ReactNode\n  description?: React.ReactNode\n  trailing?: React.ReactNode\n}\n\nfunction Body({\n  title,\n  description,\n}: {\n  title: React.ReactNode\n  description: React.ReactNode\n}) {\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col\">\n      <span className={titleCls}>{title}</span>\n      {description ? <span className={descCls}>{description}</span> : null}\n    </div>\n  )\n}\n\n/* Dot: bastaki kucuk ton noktasi. Durum metinle de tekrarlanir (nokta aria-hidden). */\nexport function DotItem({\n  className,\n  size = \"md\",\n  tone = \"success\",\n  title = \"api.ai2.dev\",\n  description = \"Operational\",\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div\n      data-slot=\"styled-item\"\n      data-tone={tone}\n      className={cn(base, box[size], className)}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"flex size-4 shrink-0 items-center justify-center\">\n        <span className={cn(\"size-2 rounded-full\", dotTone[tone])} />\n      </span>\n      <Body title={title} description={description} />\n      {trailing}\n    </div>\n  )\n}\n\n/* StatusBadge: sondaki solid ton rozeti durumu adlandirir. */\nexport function StatusBadgeItem({\n  className,\n  size = \"md\",\n  tone = \"warning\",\n  title = \"Nightly build\",\n  description = \"Finished 12 minutes ago\",\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div\n      data-slot=\"styled-item\"\n      data-tone={tone}\n      className={cn(base, box[size], className)}\n      {...props}\n    >\n      <Body title={title} description={description} />\n      {trailing ?? (\n        <span\n          className={cn(\n            \"inline-flex h-5 shrink-0 items-center rounded-md px-2 text-xs font-medium\",\n            solidTone[tone]\n          )}\n        >\n          {toneLabel[tone]}\n        </span>\n      )}\n    </div>\n  )\n}\n\n/* Tone: satirin tamami ton yuzeyi - ton kenarligi + hafif tint + soft ikon karesi. */\nexport function ToneItem({\n  className,\n  size = \"md\",\n  tone = \"danger\",\n  title = \"Payment declined\",\n  description = \"Update your card to keep the plan active\",\n  trailing,\n  ...props\n}: Props) {\n  return (\n    <div\n      data-slot=\"styled-item\"\n      data-tone={tone}\n      className={cn(base, box[size], \"border\", edgeTone[tone], className)}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\"inline-flex shrink-0 items-center justify-center\", tile[size], softTone[tone])}\n      >\n        {toneIcon[tone]}\n      </span>\n      <Body title={title} description={description} />\n      {trailing}\n    </div>\n  )\n}\n\n/* Progress: a tone-colored progress bar instead of a description. value is clamped\n   between 0 and 100. */\nexport function ProgressItem({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Uploading assets\",\n  description,\n  value = 64,\n  trailing,\n  ...props\n}: Props & { value?: number }) {\n  const pct = Math.max(0, Math.min(100, value))\n  return (\n    <div\n      data-slot=\"styled-item\"\n      data-tone={tone}\n      className={cn(base, box[size], className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <span className={titleCls}>{title}</span>\n          <span className=\"shrink-0 tabular-nums text-muted-foreground text-[0.85em]\">\n            {pct}%\n          </span>\n        </div>\n        <div\n          role=\"progressbar\"\n          aria-valuenow={pct}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-label={typeof title === \"string\" ? title : \"Progress\"}\n          className=\"h-1.5 w-full overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]\"\n        >\n          <span\n            className={cn(\"block h-full rounded-full\", dotTone[tone])}\n            style={{ width: `${pct}%` }}\n          />\n        </div>\n        {description ? <span className={descCls}>{description}</span> : null}\n      </div>\n      {trailing}\n    </div>\n  )\n}\n\n/* StatusIcon: bastaki ciplak ton ikonu (kare yok) - en sade durum satiri. */\nexport function StatusIconItem({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Region eu-west-1\",\n  description = \"Scheduled maintenance window\",\n  trailing,\n  ...props\n}: Props) {\n  const toneText: Record<StyledTone, string> = {\n    info: \"text-info\",\n    success: \"text-success\",\n    warning: \"text-warning\",\n    danger: \"text-danger\",\n  }\n  return (\n    <div\n      data-slot=\"styled-item\"\n      data-tone={tone}\n      className={cn(base, box[size], className)}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"inline-flex shrink-0 items-center justify-center [&_svg]:size-5 [&_i]:text-lg\",\n          toneText[tone]\n        )}\n      >\n        {toneIcon[tone]}\n      </span>\n      <Body title={title} description={description} />\n      {trailing}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/item-status.tsx"
    }
  ],
  "categories": [
    "styled",
    "item"
  ],
  "type": "registry:component"
}