{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "author": "Matthew Blode",
  "description": "A styled keyboard key indicator for displaying shortcuts and key combinations.",
  "files": [
    {
      "path": "ui/kbd.tsx",
      "content": "import {\n  ArrowCornerDownLeftIcon,\n  ArrowDownIcon,\n  ArrowLeftXIcon,\n  ArrowUpIcon,\n  ArrowWall2RightIcon,\n  CmdIcon,\n  ControlIcon,\n  OptIcon,\n  ShiftIcon,\n} from \"blode-icons-react\";\nimport { cva } from \"class-variance-authority\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype KbdIcon =\n  | \"mod\"\n  | \"shift\"\n  | \"enter\"\n  | \"command\"\n  | \"ctrl\"\n  | \"alt\"\n  | \"tab\"\n  | \"backspace\"\n  | \"up\"\n  | \"down\";\n\nconst kbdVariants = cva(\n  \"pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1.5 font-medium font-sans text-xs ring-1 ring-inset [&_svg:not([class*='size-'])]:size-3\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default:\n          \"bg-muted text-muted-foreground ring-border [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background [[data-slot=tooltip-content]_&]:ring-background/20 dark:[[data-slot=tooltip-content]_&]:bg-background/10 dark:[[data-slot=tooltip-content]_&]:ring-background/10\",\n        tooltip:\n          \"bg-background/20 text-background ring-background/20 dark:bg-background/10 dark:ring-background/10\",\n      },\n    },\n  },\n);\n\ninterface KbdProps extends React.ComponentProps<\"kbd\">, VariantProps<typeof kbdVariants> {\n  icon?: KbdIcon;\n}\n\nconst iconMap: Record<KbdIcon, React.ReactNode> = {\n  alt: <OptIcon className=\"size-3\" />,\n  backspace: <ArrowLeftXIcon className=\"size-3\" />,\n  command: <CmdIcon className=\"size-3\" />,\n  ctrl: <ControlIcon className=\"size-3\" />,\n  down: <ArrowDownIcon className=\"size-3\" />,\n  enter: <ArrowCornerDownLeftIcon className=\"size-3\" />,\n  mod: <CmdIcon className=\"size-3\" />,\n  shift: <ShiftIcon className=\"size-3\" />,\n  tab: <ArrowWall2RightIcon className=\"size-3\" />,\n  up: <ArrowUpIcon className=\"size-3\" />,\n};\n\nconst Kbd = ({ className, variant, children, icon, ...props }: KbdProps) => {\n  const content = icon ? iconMap[icon] : children;\n\n  return (\n    <kbd className={cn(kbdVariants({ variant }), className)} data-slot=\"kbd\" {...props}>\n      {content}\n    </kbd>\n  );\n};\n\nconst KbdGroup = ({ className, ...props }: React.ComponentProps<\"kbd\">) => (\n  <kbd\n    className={cn(\"inline-flex items-center gap-1\", className)}\n    data-slot=\"kbd-group\"\n    {...props}\n  />\n);\n\nexport { Kbd, KbdGroup };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}