{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "type": "registry:component",
  "title": "Kbd",
  "description": "Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.",
  "dependencies": [
    "@vllnt/ui@^0.2.1",
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/kbd/kbd.tsx",
      "content": "\"use client\";\n\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\nconst kbdVariants = cva(\n  \"inline-flex select-none items-center justify-center rounded border border-border bg-muted font-mono font-medium text-foreground shadow-[0_1px_0_0_hsl(var(--border))] [&>svg]:h-3 [&>svg]:w-3\",\n  {\n    defaultVariants: {\n      size: \"md\",\n    },\n    variants: {\n      size: {\n        lg: \"h-7 min-w-[1.75rem] px-2 text-sm\",\n        md: \"h-5 min-w-[1.25rem] px-1.5 text-xs\",\n        sm: \"h-4 min-w-[1rem] px-1 text-[10px]\",\n      },\n    },\n  },\n);\n\nconst MAC_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/i;\n\nconst MODIFIER_LABELS: Record<\n  \"alt\" | \"ctrl\" | \"meta\" | \"mod\" | \"shift\",\n  { mac: string; other: string }\n> = {\n  alt: { mac: \"⌥\", other: \"Alt\" },\n  ctrl: { mac: \"⌃\", other: \"Ctrl\" },\n  meta: { mac: \"⌘\", other: \"Win\" },\n  mod: { mac: \"⌘\", other: \"Ctrl\" },\n  shift: { mac: \"⇧\", other: \"Shift\" },\n};\n\nconst SPECIAL_KEY_LABELS: Record<string, string> = {\n  arrowdown: \"↓\",\n  arrowleft: \"←\",\n  arrowright: \"→\",\n  arrowup: \"↑\",\n  backspace: \"⌫\",\n  delete: \"⌦\",\n  enter: \"↵\",\n  escape: \"Esc\",\n  return: \"↵\",\n  space: \"Space\",\n  tab: \"⇥\",\n};\n\nconst SHORTCUT_SEPARATOR = /\\s*\\+\\s*/;\n\nfunction isMacPlatform(): boolean {\n  if (typeof navigator === \"undefined\") return false;\n  return MAC_PLATFORM_PATTERN.test(navigator.userAgent);\n}\n\nfunction noopUnsubscribe(): void {\n  return;\n}\n\nfunction subscribeNoop(): () => void {\n  return noopUnsubscribe;\n}\n\nfunction getServerSnapshot(): boolean {\n  return false;\n}\n\nfunction useIsMac(): boolean {\n  return useSyncExternalStore(subscribeNoop, isMacPlatform, getServerSnapshot);\n}\n\nfunction isModifier(value: string): value is keyof typeof MODIFIER_LABELS {\n  return Object.hasOwn(MODIFIER_LABELS, value);\n}\n\nfunction formatToken(token: string, mac: boolean): string {\n  const lowered = token.toLowerCase();\n  if (isModifier(lowered)) {\n    const labels = MODIFIER_LABELS[lowered];\n    return mac ? labels.mac : labels.other;\n  }\n  const special = SPECIAL_KEY_LABELS[lowered];\n  if (special !== undefined) return special;\n  return token.length === 1 ? token.toUpperCase() : token;\n}\n\n/**\n * Props for {@link Kbd}.\n *\n * @public\n */\nexport type KbdProps = {\n  /** Optional explicit children. Takes precedence over `shortcut`. */\n  children?: ReactNode;\n  /**\n   * Shortcut string in the form `\"mod+k\"` or `\"ctrl+shift+p\"`. The `mod`\n   * token expands to `⌘` on Mac and `Ctrl` elsewhere.\n   */\n  shortcut?: string;\n} & ComponentPropsWithoutRef<\"kbd\"> &\n  VariantProps<typeof kbdVariants>;\n\n/**\n * Keyboard key indicator. Renders a single key when used with `children`,\n * or expands a shortcut string with platform-aware modifiers when given a\n * `shortcut` prop.\n *\n * @example\n * ```tsx\n * <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>\n *\n * {/* Renders ⌘+K on Mac, Ctrl+K elsewhere *\\/}\n * <Kbd shortcut=\"mod+k\" />\n * ```\n *\n * @public\n */\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(\n  ({ children, className, shortcut, size, ...rest }, ref) => {\n    const isMac = useIsMac();\n\n    if (children !== undefined) {\n      return (\n        <kbd\n          className={cn(kbdVariants({ size }), className)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </kbd>\n      );\n    }\n\n    if (shortcut) {\n      const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);\n      const ariaLabel = tokens\n        .map((token) => formatToken(token, isMac))\n        .join(\" + \");\n      return (\n        <span aria-label={ariaLabel} className=\"inline-flex items-center gap-1\">\n          {tokens.map((token, index) => (\n            <kbd\n              className={cn(kbdVariants({ size }), className)}\n              key={`${token}-${index.toString()}`}\n              ref={index === 0 ? ref : undefined}\n              {...(index === 0 ? rest : {})}\n            >\n              {formatToken(token, isMac)}\n            </kbd>\n          ))}\n        </span>\n      );\n    }\n\n    return (\n      <kbd\n        className={cn(kbdVariants({ size }), className)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nKbd.displayName = \"Kbd\";\n\nexport { kbdVariants };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}