{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "description": "Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.",
  "dependencies": [
    "@vllnt/ui@^0.3.0",
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/kbd/kbd.tsx",
      "content": "\"use client\";\n\nimport {\n  type ComponentPropsWithoutRef,\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_oklch(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 = ({\n  children,\n  className,\n  ref,\n  shortcut,\n  size,\n  ...rest\n}: KbdProps & { ref?: React.Ref<HTMLElement> }) => {\n  const isMac = useIsMac();\n\n  if (children !== undefined) {\n    return (\n      <kbd className={cn(kbdVariants({ size }), className)} ref={ref} {...rest}>\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\n        aria-label={ariaLabel}\n        className=\"inline-flex items-center gap-1\"\n        role=\"img\"\n      >\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 className={cn(kbdVariants({ size }), className)} ref={ref} {...rest} />\n  );\n};\nKbd.displayName = \"Kbd\";\n\nexport { kbdVariants };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}