{
  "name": "kbd",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "kbd.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { useEffect, useState, type HTMLAttributes } from \"react\";\r\n\r\nconst kbdClass = css({\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"center\",\r\n  gap: \"2px\",\r\n  minWidth: \"1.375rem\",\r\n  height: \"1.375rem\",\r\n  padding: `0 ${theme.space[1.5]}`,\r\n  borderRadius: theme.radius.sm,\r\n  border: `1px solid ${theme.color.border}`,\r\n  borderBottomWidth: \"2px\",\r\n  backgroundColor: theme.color.muted,\r\n  color: theme.color.mutedForeground,\r\n  fontFamily: theme.fontFamily.sans,\r\n  fontSize: \"0.6875rem\",\r\n  fontWeight: theme.fontWeight.medium,\r\n  lineHeight: 1,\r\n  whiteSpace: \"nowrap\",\r\n});\r\n\r\nconst groupClass = css({ display: \"inline-flex\", alignItems: \"center\", gap: \"3px\" });\r\n\r\nconst SYMBOLS: Record<string, { mac: string; other: string }> = {\r\n  mod: { mac: \"⌘\", other: \"Ctrl\" },\r\n  cmd: { mac: \"⌘\", other: \"Ctrl\" },\r\n  meta: { mac: \"⌘\", other: \"Win\" },\r\n  alt: { mac: \"⌥\", other: \"Alt\" },\r\n  option: { mac: \"⌥\", other: \"Alt\" },\r\n  shift: { mac: \"⇧\", other: \"Shift\" },\r\n  ctrl: { mac: \"⌃\", other: \"Ctrl\" },\r\n  enter: { mac: \"↵\", other: \"Enter\" },\r\n  escape: { mac: \"esc\", other: \"Esc\" },\r\n  esc: { mac: \"esc\", other: \"Esc\" },\r\n  backspace: { mac: \"⌫\", other: \"Backspace\" },\r\n  tab: { mac: \"⇥\", other: \"Tab\" },\r\n  up: { mac: \"↑\", other: \"↑\" },\r\n  down: { mac: \"↓\", other: \"↓\" },\r\n  left: { mac: \"←\", other: \"←\" },\r\n  right: { mac: \"→\", other: \"→\" },\r\n};\r\n\r\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\r\n  /** Key names, e.g. [\"mod\", \"K\"]. \"mod\" renders ⌘ on macOS and Ctrl elsewhere. */\r\n  keys: string[];\r\n}\r\n\r\n/**\r\n * Renders a keyboard shortcut. Platform detection runs after mount rather than\r\n * during render — reading `navigator` while rendering would produce different\r\n * server and client output and trip a hydration mismatch, so the first paint\r\n * shows the non-Mac form and swaps on the client if needed.\r\n */\r\nexport function Kbd({ keys, className, ...props }: KbdProps) {\r\n  const [isMac, setIsMac] = useState(false);\r\n\r\n  useEffect(() => {\r\n    setIsMac(/Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent));\r\n  }, []);\r\n\r\n  return (\r\n    <span className={className ? `${groupClass} ${className}` : groupClass} {...props}>\r\n      {keys.map((key, index) => {\r\n        const entry = SYMBOLS[key.toLowerCase()];\r\n        const label = entry ? (isMac ? entry.mac : entry.other) : key.toUpperCase();\r\n        return (\r\n          <kbd key={`${key}-${index}`} className={kbdClass}>\r\n            {label}\r\n          </kbd>\r\n        );\r\n      })}\r\n    </span>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}