{"version":3,"sources":["../src/components/Kbd/Kbd.tsx"],"names":["forwardRef","jsx","cn","Fragment"],"mappings":";;;;;;AAIA,IAAM,WAAA,GAA6D;AAAA,EACjE,EAAA,EAAI,uCAAA;AAAA,EACJ,EAAA,EAAI,wCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GACJ,wKAAA;AAgBK,IAAM,GAAA,GAAMA,gBAAA;AAAA,EACjB,CAAC,EAAE,IAAA,EAAM,SAAA,GAAY,GAAA,EAAK,IAAA,GAAO,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC9E,IAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,MAAA;AAAA;AAAA;AAAA;AAAA,wBAIEC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,sBAAA,EAAqB,EAAA;AAAA,YACrB,SAAA,EAAWC,oBAAA,CAAG,qDAAA,EAAuD,SAAS,CAAA;AAAA,YAC7E,GAAG,KAAA;AAAA,YAEH,eAAK,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qCACXC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,CAAA,GAAI,qBACHF,cAAA,CAAC,MAAA,EAAA,EAAK,eAAW,IAAA,EAAC,SAAA,EAAU,oCACzB,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,8BAEFA,cAAA,CAAC,UAAK,SAAA,EAAWC,oBAAA,CAAG,YAAY,WAAA,CAAY,IAAI,CAAC,CAAA,EAAI,QAAA,EAAA,CAAA,EAAE;AAAA,aAAA,EAAA,EAN1C,CAOf,CACD;AAAA;AAAA;AACH;AAAA,IAEJ;AAEA,IAAA,uBACED,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,sBAAA,EAAqB,EAAA;AAAA,QACrB,WAAWC,oBAAA,CAAG,UAAA,EAAY,YAAY,IAAI,CAAA,EAAG,cAAc,SAAS,CAAA;AAAA,QACnE,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,GAAA,CAAI,WAAA,GAAc,KAAA","file":"chunk-SUCBR6L5.cjs","sourcesContent":["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 — `<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"]}