{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd-styled",
  "title": "Kbd essentials",
  "description": "Styled kbd: the essentials set. 5 decorative kbd variations (RaisedKbd, FlatKbd, GlowKbd, OutlineKbd, SoftKbd) 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-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Kbd family: 5 decorative keys. Colour comes ONLY from tokens (alpha via color-mix or Tailwind opacity). The root is a real <kbd>, data-slot=\"styled-kbd\", font-mono. The effects are pure CSS - framer is not needed; RaisedKbd presses down on :active. */\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 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/* Raised: a 3D physical key - a token bottom-shadow body that presses down on :active. */\nexport function RaisedKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      className={cn(\n        base,\n        box[size],\n        \"border border-border bg-secondary text-secondary-foreground\",\n        \"shadow-[0_2px_0_0_color-mix(in_oklab,var(--color-foreground)_18%,transparent)]\",\n        \"transition-all duration-(--motion-fast) ease-(--motion-ease)\",\n        \"active:translate-y-0.5 active:shadow-[0_0_0_0_color-mix(in_oklab,var(--color-foreground)_18%,transparent)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n}\n\n/* Flat: temiz duz tus - yuzey token + ince kenar. */\nexport function FlatKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      className={cn(\n        base,\n        box[size],\n        \"border border-border bg-surface-2 text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n}\n\n/* Glow: yumusak token isima (box-shadow) ile parlayan tus. */\nexport function GlowKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      className={cn(\n        base,\n        box[size],\n        \"border border-info bg-info text-info-foreground\",\n        \"shadow-[0_0_12px_-2px_color-mix(in_oklab,var(--color-info)_70%,transparent)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n}\n\n/* Outline: a transparent body, only a token edge. */\nexport function OutlineKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      className={cn(\n        base,\n        box[size],\n        \"border border-border bg-transparent text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n}\n\n/* Soft: yumusak-token dolgulu, yuvarlak tus. */\nexport function SoftKbd({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <kbd\n      data-slot=\"styled-kbd\"\n      className={cn(\n        base,\n        box[size],\n        \"border-0 bg-info-soft text-info-soft-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/kbd-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "kbd"
  ],
  "type": "registry:component"
}