{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "description": "A small keycap for a shortcut, in text, buttons and tooltips.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/kbd.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { typeStyles } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  fontWeights,\n  radii,\n  sizes,\n  space,\n} from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst inTooltip = \":where([data-slot='tooltip-popup'] *)\";\n\nconst inButton = (size: string) =>\n  `:where([data-slot='button'][data-size='${size}'] > *)`;\nconst inInputGroup = (size: string) =>\n  `:where([data-slot='input-group'][data-size='${size}'] *)`;\n// Concentric with the box's corner; at `lg` the inset reaches the radius, so it keeps its own.\nconst nested = (height: string) =>\n  `calc(${radii.sm} - (${height} - ${sizes.kbd}) / 2)`;\n\nconst styles = stylex.create({\n  kbd: {\n    alignItems: \"center\",\n    backgroundColor: {\n      default: colors.fill,\n      [inTooltip]: colors.invertedFill,\n    },\n    borderStartStartRadius: {\n      default: radii.chip,\n      [inButton(\"sm\")]: nested(sizes.controlSm),\n      [inInputGroup(\"sm\")]: nested(sizes.controlSm),\n      [inButton(\"default\")]: nested(sizes.controlMd),\n      [inInputGroup(\"default\")]: nested(sizes.controlMd),\n      [inTooltip]: `calc(${radii.sm} - ${space.xxs})`,\n    },\n    borderStartEndRadius: {\n      default: radii.chip,\n      [inButton(\"sm\")]: nested(sizes.controlSm),\n      [inInputGroup(\"sm\")]: nested(sizes.controlSm),\n      [inButton(\"default\")]: nested(sizes.controlMd),\n      [inInputGroup(\"default\")]: nested(sizes.controlMd),\n      [inTooltip]: `calc(${radii.sm} - ${space.xxs})`,\n    },\n    borderEndStartRadius: {\n      default: radii.chip,\n      [inButton(\"sm\")]: nested(sizes.controlSm),\n      [inInputGroup(\"sm\")]: nested(sizes.controlSm),\n      [inButton(\"default\")]: nested(sizes.controlMd),\n      [inInputGroup(\"default\")]: nested(sizes.controlMd),\n      [inTooltip]: `calc(${radii.sm} - ${space.xxs})`,\n    },\n    borderEndEndRadius: {\n      default: radii.chip,\n      [inButton(\"sm\")]: nested(sizes.controlSm),\n      [inInputGroup(\"sm\")]: nested(sizes.controlSm),\n      [inButton(\"default\")]: nested(sizes.controlMd),\n      [inInputGroup(\"default\")]: nested(sizes.controlMd),\n      [inTooltip]: `calc(${radii.sm} - ${space.xxs})`,\n    },\n    color: {\n      default: colors.textSecondary,\n      [inTooltip]: colors.invertedOnSolid,\n    },\n    display: \"inline-flex\",\n    // Keycaps read as labels, not code, so they take the text around them over `<kbd>`'s mono.\n    fontFamily: \"inherit\",\n    fontWeight: fontWeights.medium,\n    gap: space.xxs,\n    height: sizes.kbd,\n    justifyContent: \"center\",\n    minWidth: sizes.kbd,\n    paddingInline: space.xxs,\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n  },\n  group: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    gap: space.xxs,\n  },\n});\n\nfunction Kbd({\n  render,\n  sx,\n  ...props\n}: Styled<useRender.ComponentProps<\"kbd\">>) {\n  return useRender({\n    defaultTagName: \"kbd\",\n    props: mergeProps<\"kbd\">(\n      props,\n      stylex.props([typeStyles.captionLg, styles.kbd], sx)\n    ),\n    render,\n    state: { slot: \"kbd\" },\n  });\n}\n\nfunction KbdGroup({ sx, ...props }: Styled<ComponentProps<\"kbd\">>) {\n  return (\n    <kbd data-slot=\"kbd-group\" {...props} {...stylex.props(styles.group, sx)} />\n  );\n}\n\nexport { Kbd, KbdGroup };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/kbd/index.md",
  "type": "registry:ui"
}