{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "files": [
    {
      "path": "ui/kbd/Kbd.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/kbd/Kbd.astro directly.\n/**\n * @component Kbd\n * @title Kbd\n * @description A visual indicator for keyboard keys and shortcuts, styled to match system keyboard key appearance.\n * @status stable\n *\n * @preview\n *\n * <div class=\"flex flex-col items-center gap-4\">\n *   <KbdGroup>\n *     <Kbd>⌘</Kbd>\n *     <Kbd>⇧</Kbd>\n *     <Kbd>⌥</Kbd>\n *     <Kbd>⌃</Kbd>\n *   </KbdGroup>\n *   <KbdGroup>\n *     <Kbd>Ctrl</Kbd>\n *     <span>+</span>\n *     <Kbd>B</Kbd>\n *   </KbdGroup>\n *   <KbdGroup>\n *     <Kbd>⌘</Kbd>\n *     <Kbd>K</Kbd>\n *   </KbdGroup>\n * </div>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';\n * ---\n *\n * <KbdGroup>\n *   <Kbd>⌘</Kbd>\n *   <Kbd>K</Kbd>\n * </KbdGroup>\n *\n * <KbdGroup>\n *   <Kbd>Ctrl</Kbd>\n *   <span>+</span>\n *   <Kbd>B</Kbd>\n * </KbdGroup>\n * ```\n *\n * @examples\n *\n * ### Group\n *\n * Use the `KbdGroup` component to group keyboard keys together.\n *\n * <div class=\"flex flex-col items-center gap-4\">\n *   <p class=\"text-muted-foreground text-sm\">\n *    Use{\" \"}\n *     <KbdGroup>\n *       <Kbd>Ctrl + B</Kbd>\n *       <Kbd>Ctrl + K</Kbd>\n *     </KbdGroup>{\" \"}\n *     to open the command palette\n *   </p>\n * </div>\n *\n * ### Button\n *\n * Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.\n *\n * <Button variant=\"outline\">\n *   Accept <Kbd class=\"translate-x-0.5\">\n *     ⏎\n *   </Kbd>\n * </Button>\n *\n * ### Tooltip\n *\n * You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.\n *\n * <div class=\"flex flex-wrap gap-4\">\n *   <Tooltip>\n *     <TooltipTrigger asChild>\n *       <Button variant=\"outline\">Save</Button>\n *     </TooltipTrigger>\n *     <TooltipContent class=\"pr-1.5\">\n *       <div class=\"flex items-center gap-2\">\n *         Save Changes <Kbd>S</Kbd>\n *       </div>\n *     </TooltipContent>\n *   </Tooltip>\n *   <Tooltip>\n *     <TooltipTrigger asChild>\n *       <Button variant=\"outline\">Print</Button>\n *     </TooltipTrigger>\n *     <TooltipContent class=\"pr-1.5\">\n *       <div class=\"flex items-center gap-2\">\n *         Print Document <KbdGroup>\n *           <Kbd>Ctrl</Kbd>\n *           <Kbd>P</Kbd>\n *         </KbdGroup>\n *       </div>\n *     </TooltipContent>\n *   </Tooltip>\n * </div>\n *\n * ### Input Group\n *\n * You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.\n *\n * <div class=\"flex w-full max-w-xs flex-col gap-6\">\n *   <InputGroup>\n *     <InputGroupInput placeholder=\"Search...\" />\n *     <InputGroupAddon>\n *       <SearchIcon />\n *     </InputGroupAddon>\n *     <InputGroupAddon align=\"inline-end\">\n *       <Kbd>⌘</Kbd>\n *       <Kbd>K</Kbd>\n *     </InputGroupAddon>\n *   </InputGroup>\n * </div>\n *\n * @props\n * - class?: string — Additional classes for styling.\n */\n\nimport { cn } from \"@/lib/utils\";\n\nconst { class: className = \"\", ...props } = Astro.props;\n---\n\n<kbd\n  data-slot=\"kbd\"\n  class={cn(\"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3\", \n    \"bg-muted text-muted-foreground\",\n    \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background\",\n    \"dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\n    \"h-5 w-fit min-w-5 gap-1 rounded-sm px-1\",\n    \"font-sans text-xs font-medium\",\n    \"[&_svg:not([class*='size-'])]:size-3\",\n    \"pointer-events-none inline-flex items-center justify-center select-none\",\n    className,\n  )}\n  {...props}\n>\n  <slot />\n</kbd>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/kbd/KbdGroup.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/kbd/KbdGroup.astro directly.\n/**\n * @component KbdGroup\n * @title Keyboard Key Group\n * @description A container for grouping multiple keyboard keys together, typically used for displaying keyboard shortcuts.\n * @status stable\n *\n * @preview\n *\n * <div class=\"flex flex-col items-center gap-4\">\n *   <KbdGroup>\n *     <Kbd>⌘</Kbd>\n *     <Kbd>⇧</Kbd>\n *     <Kbd>⌥</Kbd>\n *     <Kbd>⌃</Kbd>\n *   </KbdGroup>\n *   <KbdGroup>\n *     <Kbd>Ctrl</Kbd>\n *     <span>+</span>\n *     <Kbd>B</Kbd>\n *   </KbdGroup>\n * </div>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';\n * ---\n *\n * <KbdGroup>\n *   <Kbd>⌘</Kbd>\n *   <Kbd>K</Kbd>\n * </KbdGroup>\n * ```\n *\n * @props\n * - class?: string — Additional classes for styling.\n */\n\nimport { cn } from \"@/lib/utils\";\n\nconst {\n  class: className = \"\",\n  ...props\n} = Astro.props;\n---\n\n<div\n  data-slot=\"kbd-group\"\n  class={cn(\"gap-1\", \"gap-1 inline-flex items-center\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/kbd/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/kbd/index.ts directly.\nexport { default as Kbd } from \"./Kbd.astro\";\nexport { default as KbdGroup } from \"./KbdGroup.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}