{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "description": "A keyboard key primitive for rendering shortcuts, with size variants and a KbdGroup helper for multi-key combinations.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/tealmac/kbd.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst kbdVariants = cva(\n  cn(\n    \"inline-flex select-none items-center justify-center gap-1 rounded-[0.35rem] border font-medium\",\n    \"border-border bg-muted text-muted-foreground\",\n    \"shadow-[inset_0_-1px_0_0] shadow-black/[0.08] dark:shadow-white/[0.08]\",\n    \"[&_svg:not([class*='size-'])]:size-3 [&_svg]:shrink-0\"\n  ),\n  {\n    variants: {\n      size: {\n        sm: \"h-5 min-w-5 px-1 text-[10px]\",\n        default: \"h-6 min-w-6 px-1.5 text-[11px]\",\n        lg: \"h-7 min-w-7 px-2 text-xs\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nexport interface KbdProps\n  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof kbdVariants> {}\n\nconst Kbd = React.forwardRef<HTMLElement, KbdProps>(\n  ({ className, size, ...props }, ref) => {\n    return (\n      <kbd\n        ref={ref}\n        className={cn(kbdVariants({ size }), className)}\n        {...props}\n      />\n    )\n  }\n)\nKbd.displayName = \"Kbd\"\n\nexport interface KbdGroupProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Character rendered between keys. Pass `null` to render keys with no separator. */\n  separator?: React.ReactNode\n}\n\n/**\n * Groups multiple `Kbd` keys into a shortcut (e.g. ⌘ + K) with an optional\n * separator rendered between each key.\n */\nconst KbdGroup = React.forwardRef<HTMLSpanElement, KbdGroupProps>(\n  ({ className, children, separator = \"+\", ...props }, ref) => {\n    const keys = React.Children.toArray(children).filter(Boolean)\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\"inline-flex items-center gap-1\", className)}\n        {...props}\n      >\n        {keys.map((child, index) => (\n          <React.Fragment key={index}>\n            {child}\n            {separator !== null && index < keys.length - 1 ? (\n              <span\n                aria-hidden\n                className=\"text-muted-foreground/60 text-[10px]\"\n              >\n                {separator}\n              </span>\n            ) : null}\n          </React.Fragment>\n        ))}\n      </span>\n    )\n  }\n)\nKbdGroup.displayName = \"KbdGroup\"\n\nexport { Kbd, KbdGroup, kbdVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}