{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd-tone",
  "title": "Tone kbd",
  "description": "Styled kbd: the Tone set. 5 decorative kbd variations (InfoKbd, SuccessKbd, WarningKbd, DangerKbd, MutedKbd) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/kbd-tone.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Tone kbd family: 5 keys in semantic tones. Every root is a real <kbd>, carries data-tone and takes its colour ONLY from semantic tokens (a soft fill plus an alpha border, through color-mix or Tailwind opacity). Static - no motion required. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst box: Record<StyledSize, string> = {\n  sm: \"h-5 px-1.5 text-xs\",\n  md: \"h-6 px-2 text-xs\",\n  lg: \"h-7 px-2.5 text-sm\",\n  xl: \"h-8 px-3 text-sm\",\n}\n\nconst base =\n  \"inline-flex w-fit shrink-0 select-none items-center justify-center gap-1 whitespace-nowrap rounded-md border font-mono font-medium leading-none [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none\"\n\ntype Props = React.ComponentProps<\"kbd\"> & { size?: StyledSize }\n\n/* Info: bilgi tonu - info-soft govde, info kenar. */\nexport function InfoKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      data-tone=\"info\"\n      className={cn(base, box[size], \"border-info/30 bg-info-soft text-info-soft-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"F1\"}\n    </kbd>\n  )\n}\n\n/* Success: onay tonu - success-soft govde, success kenar. */\nexport function SuccessKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      data-tone=\"success\"\n      className={cn(\n        base,\n        box[size],\n        \"border-success/30 bg-success-soft text-success-soft-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? \"Enter\"}\n    </kbd>\n  )\n}\n\n/* Warning: uyari tonu - warning-soft govde, warning kenar. */\nexport function WarningKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      data-tone=\"warning\"\n      className={cn(\n        base,\n        box[size],\n        \"border-warning/30 bg-warning-soft text-warning-soft-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? \"Alt\"}\n    </kbd>\n  )\n}\n\n/* Danger: yikici eylem tonu - danger-soft govde, danger kenar. */\nexport function DangerKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      data-tone=\"danger\"\n      className={cn(\n        base,\n        box[size],\n        \"border-danger/30 bg-danger-soft text-danger-soft-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? \"Esc\"}\n    </kbd>\n  )\n}\n\n/* Muted: notr/ikincil ton - muted govde, standart kenar. */\nexport function MutedKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      data-tone=\"neutral\"\n      className={cn(base, box[size], \"border-border bg-muted text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"Tab\"}\n    </kbd>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/kbd-tone.tsx"
    }
  ],
  "categories": [
    "styled",
    "kbd"
  ],
  "type": "registry:component"
}