{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"kbd","type":"registry:ui","title":"Kbd","description":"Keyboard key rendering for shortcuts.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/kbd\/Kbd.tsx","content":"import { forwardRef, Fragment } from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport type { KbdProps } from \".\/Kbd.types\";\n\nconst sizeClasses: Record<NonNullable<KbdProps[\"size\"]>, string> = {\n  xs: \"min-w-[1.25rem] px-1 py-px text-[9px]\",\n  sm: \"min-w-[1.4rem] px-1 py-0.5 text-[10px]\",\n  md: \"min-w-[1.6rem] px-1.5 py-0.5 text-xs\",\n};\n\nconst capClasses =\n  \"inline-grid place-items-center rounded border border-zinc-300 bg-zinc-50 \" +\n  \"font-mono leading-none text-zinc-700 \" +\n  \"dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300\";\n\n\/**\n * A keyboard key cap \u2014 `<Kbd>K<\/Kbd>`, or a chord via `<Kbd keys={[\"Cmd\",\"K\"]} \/>`.\n *\n * Twenty `<kbd>` elements across this suite's own showcase carried six\n * different className recipes for the same thing: rounded, bordered, mono,\n * small, with a dark-mode counterpart. None of them disagreed on intent; they\n * disagreed on which greys.\n *\n * `min-w` is the detail worth having in one place: without it a `K` cap is\n * visibly narrower than an `Esc` cap beside it, and a row of single letters\n * reads as ragged rather than as keys.\n *\/\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(\n  ({ keys, separator = \"+\", size = \"sm\", className, children, ...props }, ref) => {\n    if (keys?.length) {\n      return (\n        \/\/ The chord is ONE <kbd> containing per-key caps: a screen reader\n        \/\/ announces \"Cmd + K\" as a unit, which is what it is, rather than as\n        \/\/ two unrelated keys.\n        <kbd\n          ref={ref}\n          data-react-fancy-kbd=\"\"\n          className={cn(\"inline-flex items-center gap-1 font-mono not-italic\", className)}\n          {...props}\n        >\n          {keys.map((k, i) => (\n            <Fragment key={i}>\n              {i > 0 && (\n                <span aria-hidden className=\"text-zinc-400 dark:text-zinc-500\">\n                  {separator}\n                <\/span>\n              )}\n              <span className={cn(capClasses, sizeClasses[size])}>{k}<\/span>\n            <\/Fragment>\n          ))}\n        <\/kbd>\n      );\n    }\n\n    return (\n      <kbd\n        ref={ref}\n        data-react-fancy-kbd=\"\"\n        className={cn(capClasses, sizeClasses[size], \"not-italic\", className)}\n        {...props}\n      >\n        {children}\n      <\/kbd>\n    );\n  },\n);\n\nKbd.displayName = \"Kbd\";\n","type":"registry:ui","target":"components\/fancy\/kbd\/Kbd.tsx"},{"path":"components\/fancy\/kbd\/Kbd.types.ts","content":"import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  \/**\n   * Render a chord as separate keys \u2014 `keys={[\"Cmd\", \"K\"]}` renders two caps\n   * with a separator between them, rather than one wide cap reading \"Cmd K\".\n   *\/\n  keys?: ReactNode[];\n  \/** Separator drawn between chord keys. Default `\"+\"`. *\/\n  separator?: ReactNode;\n  size?: \"xs\" | \"sm\" | \"md\";\n  children?: ReactNode;\n}\n","type":"registry:ui","target":"components\/fancy\/kbd\/Kbd.types.ts"},{"path":"components\/fancy\/kbd\/index.ts","content":"export { Kbd } from \".\/Kbd\";\nexport type { KbdProps } from \".\/Kbd.types\";\n","type":"registry:ui","target":"components\/fancy\/kbd\/index.ts"}],"since":"0.5"}