{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd-mac",
  "title": "Mac kbd",
  "description": "Styled kbd: the Mac set. 5 decorative kbd variations (SymbolKbd, MacKbd, WinKbd, IconKbd, MixedKbd) 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/kbd-mac.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ArrowBigUp, Command, Option } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Mac kbd family: platform glyph styles. The visual caps carry a unicode glyph or a lucide icon; because no glyph gives a readable name on its own, the root <kbd> always carries the sr-only full text (\"Command plus K\") and the visual stack is aria-hidden. Colour comes ONLY from tokens. Static - no motion required. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst box: Record<StyledSize, string> = {\n  sm: \"h-5 min-w-5 px-1.5 text-xs\",\n  md: \"h-6 min-w-6 px-2 text-xs\",\n  lg: \"h-7 min-w-7 px-2.5 text-sm\",\n  xl: \"h-8 min-w-8 px-3 text-sm\",\n}\n\nconst gap: Record<StyledSize, string> = {\n  sm: \"gap-1\",\n  md: \"gap-1\",\n  lg: \"gap-1.5\",\n  xl: \"gap-1.5\",\n}\n\nconst rootBase =\n  \"inline-flex w-fit shrink-0 select-none items-center whitespace-nowrap font-mono font-medium leading-none text-foreground\"\n\nconst capBase =\n  \"inline-flex shrink-0 select-none items-center justify-center gap-1 whitespace-nowrap rounded-md border border-border bg-surface-2 font-mono font-medium leading-none text-foreground [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none\"\n\n/* Bir kapak: gorsel glif + ekran okuyucuya giden ad. */\ninterface Key {\n  glyph: React.ReactNode\n  name: string\n}\n\ntype Props = React.ComponentProps<\"kbd\"> & { size?: StyledSize }\n\n/* Shared shell: the sr-only full combination text plus aria-hidden visual caps. */\nfunction Combo({\n  keys,\n  size,\n  className,\n  children,\n  ...props\n}: Props & { keys: Key[] }) {\n  return (\n    <kbd data-slot=\"styled-kbd\" className={cn(rootBase, gap[size ?? \"md\"], className)} {...props}>\n      {children ?? (\n        <>\n          <span className=\"sr-only\">{keys.map((k) => k.name).join(\" plus \")}</span>\n          <span aria-hidden=\"true\" className={cn(\"inline-flex items-center\", gap[size ?? \"md\"])}>\n            {keys.map((k, i) => (\n              <kbd key={`${k.name}-${i}`} className={cn(capBase, box[size ?? \"md\"])}>\n                {k.glyph}\n              </kbd>\n            ))}\n          </span>\n        </>\n      )}\n    </kbd>\n  )\n}\n\n/* Symbol: saf unicode mac glifleri (Command, Option, Shift). */\nexport function SymbolKbd({ size = \"md\", ...props }: Props) {\n  return (\n    <Combo\n      size={size}\n      keys={[\n        { glyph: \"⌘\", name: \"Command\" },\n        { glyph: \"⌥\", name: \"Option\" },\n        { glyph: \"⇧\", name: \"Shift\" },\n      ]}\n      {...props}\n    />\n  )\n}\n\n/* Mac: mac kisayolu - Command glifi + harf. */\nexport function MacKbd({ size = \"md\", ...props }: Props) {\n  return (\n    <Combo\n      size={size}\n      keys={[\n        { glyph: \"⌘\", name: \"Command\" },\n        { glyph: \"K\", name: \"K\" },\n      ]}\n      {...props}\n    />\n  )\n}\n\n/* Win: windows/linux karsiligi - duz metin tus adlari. */\nexport function WinKbd({ size = \"md\", ...props }: Props) {\n  return (\n    <Combo\n      size={size}\n      keys={[\n        { glyph: \"Ctrl\", name: \"Control\" },\n        { glyph: \"K\", name: \"K\" },\n      ]}\n      {...props}\n    />\n  )\n}\n\n/* Icon: caps carrying lucide icons instead of glyphs. */\nexport function IconKbd({ size = \"md\", ...props }: Props) {\n  return (\n    <Combo\n      size={size}\n      keys={[\n        { glyph: <Command />, name: \"Command\" },\n        { glyph: <ArrowBigUp />, name: \"Shift\" },\n        { glyph: \"P\", name: \"P\" },\n      ]}\n      {...props}\n    />\n  )\n}\n\n/* Mixed: glif, ikon ve metin kapaklarin karisimi. */\nexport function MixedKbd({ size = \"md\", ...props }: Props) {\n  return (\n    <Combo\n      size={size}\n      keys={[\n        { glyph: \"⌘\", name: \"Command\" },\n        { glyph: <Option />, name: \"Option\" },\n        { glyph: \"Del\", name: \"Delete\" },\n      ]}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/kbd-mac.tsx"
    }
  ],
  "categories": [
    "styled",
    "kbd"
  ],
  "type": "registry:component"
}