{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:ui",
  "title": "Button group",
  "description": "Joined button group for toolbars, split actions, and segmented controls.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/button-group-knobs.ts",
      "target": "@components/control-ui/knob-contracts/button-group-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/button-group.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const buttonGroupKnobs = [\n  \"--cui-button-group-text-radius\",\n  \"--cui-button-group-text-background\",\n  \"--cui-button-group-text-foreground\",\n  \"--cui-button-group-separator-background\",\n] as const;\nexport type ButtonGroupKnobStyle = Partial<Record<(typeof buttonGroupKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/button-group.css",
      "target": "@components/control-ui/styles/recipes/button-group.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"button-group\"][data-slot=\"root\"]) {\n    --cui-button-group-text-radius: var(--radius-control);\n    --cui-button-group-text-background: oklch(from var(--card) l c h / 0.72);\n    --cui-button-group-text-foreground: var(--muted-foreground);\n    --cui-button-group-separator-background: var(--border);\n  }\n  :where([data-control-family=\"button-group\"][data-slot=\"text\"]) {\n    border: 1px solid var(--border);\n    border-radius: var(--cui-button-group-text-radius);\n    background: var(--cui-button-group-text-background);\n    box-shadow: var(--shadow-sm);\n    color: var(--cui-button-group-text-foreground);\n    font-weight: var(--font-weight-medium);\n  }\n\n  :where([data-control-family=\"button-group\"][data-slot=\"separator\"]) {\n    background: var(--cui-button-group-separator-background);\n  }\n}\n\n@property --cui-button-group-text-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-button-group-text-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-group-text-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-group-separator-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/button-group.tsx",
      "target": "@components/control-ui/ui/button-group.tsx",
      "type": "registry:ui",
      "content": "import { cva } from \"class-variance-authority\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport type { ControlSize } from \"@/components/control-ui/control-variants\";\nimport { controlSize } from \"@/components/control-ui/control-variants\";\nimport type { ButtonGroupKnobStyle } from \"@/components/control-ui/knob-contracts/button-group-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type ButtonGroupTextProps = Omit<\n  ComponentProps<\"div\"> & {\n    size?: ControlSize;\n  },\n  \"style\"\n> & { style?: CSSProperties & ButtonGroupKnobStyle };\n\nexport type ButtonGroupProps = ComponentProps<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n} & { style?: CSSProperties & ButtonGroupKnobStyle };\n\nexport type ButtonGroupSeparatorProps = Omit<\n  ComponentProps<\"div\"> & {\n    orientation?: \"horizontal\" | \"vertical\";\n  },\n  \"style\"\n> & { style?: CSSProperties & ButtonGroupKnobStyle };\n\n// selected controls sit above adjacent focus rings, keeping their shared seams visible\nconst buttonGroupVariant = cva(\n  \"inline-flex w-fit items-stretch [&>*]:relative [&>*:focus-within:not([data-active=true])]:z-[1] [&>*[data-active=true]]:z-[2] [&>*[data-active=true]:focus-within]:z-[3]\",\n  {\n    variants: {\n      orientation: {\n        horizontal: \"flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none\",\n        vertical: \"flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  },\n);\n\nexport function ButtonGroup({ orientation = \"horizontal\", className, ...props }: ButtonGroupProps) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: a segmented control is a labelled group, not a fieldset form group.\n    <div\n      role=\"group\"\n      data-control-ui=\"button-group\"\n      data-control-family=\"button-group\"\n      data-slot=\"root\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariant({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nexport function ButtonGroupText({ size = \"sm\", className, ...props }: ButtonGroupTextProps) {\n  return (\n    <div\n      data-control-ui=\"button-group\"\n      data-control-family=\"button-group\"\n      data-slot=\"text\"\n      data-size={size}\n      className={cn(\n        \"inline-flex items-center whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0\",\n        controlSize({ size }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ButtonGroupSeparator({ orientation = \"vertical\", className, ...props }: ButtonGroupSeparatorProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-control-ui=\"button-group\"\n      data-control-family=\"button-group\"\n      data-slot=\"separator\"\n      data-orientation={orientation}\n      className={cn(\"shrink-0 self-stretch\", orientation === \"vertical\" ? \"w-px\" : \"h-px w-full\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/button-group.css\"": {}
  },
  "meta": {}
}