{
  "name": "kbd",
  "type": "registry:ui",
  "description": "Key cap for a keyboard shortcut, alone or in a group",
  "files": [
    {
      "path": "ui/kbd.tsx",
      "type": "registry:ui",
      "content": "import { fv } from \"@facet-ui/react-variants\";\nimport { getPassthroughProps, type PassthroughProps, React } from \"@lattice-ui/react-runtime\";\nimport { TextSlot } from \"~/lib/text\";\nimport { type ClassName, cn } from \"~/lib/utils\";\n\n/**\n * A key cap — `Ctrl`, `⌘`, `E`.\n *\n * Fixed height, fitted width, and a floor under the width: `h-5 w-fit min-w-5`\n * is shadcn's, and it is what makes `E` a square and `Backspace` a lozenge from\n * the same recipe. Vela lowers `min-w-5` onto a `UISizeConstraint`.\n *\n * No border. shadcn's cap is a filled `bg-muted` block and nothing more — the\n * outline this file used to draw was an invention.\n */\nexport const kbdVariants = fv(\n  \"flex-row items-center justify-center gap-1 w-fit h-5 min-w-5 rounded-sm bg-muted px-1 pointer-events-none\",\n);\n\n/**\n * `font-sans` is a family, not a weight — Vela resolves it to SourceSansPro\n * against `theme.fontFamily`, where the weights resolve against something else\n * entirely. shadcn names it explicitly here because a `<kbd>` element is\n * monospace by user-agent default and the cap is not meant to be; Roblox has no\n * such default, so the token is carried over for the meaning rather than the\n * correction.\n */\nexport const kbdLabelVariants = fv(\"whitespace-nowrap text-xs font-sans font-medium text-muted-foreground\");\n\n/** A run of caps read as one shortcut — `Ctrl` `Shift` `P`. */\nexport const kbdGroupVariants = fv(\"flex-row items-center gap-1 size-fit\");\n\nexport type KbdProps = { className?: ClassName; Text?: string; children?: React.ReactNode } & PassthroughProps<Frame>;\n\nexport type KbdGroupProps = { className?: ClassName; children?: React.ReactNode } & PassthroughProps<Frame>;\n\nconst OWN_PROPS = [\"className\", \"Text\", \"children\"] as const;\nconst GROUP_OWN_PROPS = [\"className\", \"children\"] as const;\n\nconst NEUTRAL_PROPS = {\n  BackgroundTransparency: 1,\n  BorderSizePixel: 0,\n};\n\nexport function Kbd(props: KbdProps) {\n  return (\n    <frame\n      className={cn(kbdVariants({ className: props.className }))}\n      {...NEUTRAL_PROPS}\n      {...getPassthroughProps<Frame>(props, OWN_PROPS)}\n    >\n      <TextSlot Text={props.Text} className={kbdLabelVariants()}>\n        {props.children}\n      </TextSlot>\n    </frame>\n  );\n}\n\nexport function KbdGroup(props: KbdGroupProps) {\n  return (\n    <frame\n      className={cn(kbdGroupVariants({ className: props.className }))}\n      {...NEUTRAL_PROPS}\n      {...getPassthroughProps<Frame>(props, GROUP_OWN_PROPS)}\n    >\n      {props.children}\n    </frame>\n  );\n}\n"
    }
  ],
  "registryDependencies": [
    "utils",
    "text"
  ],
  "dependencies": [
    "@facet-ui/react-variants@^0.1.1",
    "@lattice-ui/react-runtime@^0.8.0"
  ],
  "tokens": [
    "muted",
    "muted-foreground"
  ]
}