{"$schema":"https://ui.logic2b.com/schema/registry-item.json","name":"button-group","type":"registry:ui","description":"Groups related buttons (and optionally a text label or select) together edge-to-edge, horizontal or vertical. Use for segmented actions like a split button or a toolbar. Parts: ButtonGroup (root, orientation), ButtonGroupText, ButtonGroupSeparator.","registryDependencies":["utils","separator"],"files":[{"path":"ui/button-group.tsx","type":"registry:ui","content":"import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction ButtonGroup({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\"\n}) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(\n        \"flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>input]:flex-1\",\n        orientation === \"horizontal\"\n          ? \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\"\n          : \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"button-group-text\"\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { ButtonGroup, ButtonGroupText, ButtonGroupSeparator }\n"}],"categories":["form"],"accessibility":{"support":"consumer","pattern":"group of actions","primitive":"HTML div","keyboard":[],"aria":["Groups native buttons visually without replacing their button semantics."],"consumer":["Add role=group and an accessible name when the buttons form one conceptual control."]},"api":{"source":"src/ui/button-group.tsx","exports":[{"name":"ButtonGroup","kind":"component","propsType":"React.ComponentProps<\"div\"> & { orientation?: \"horizontal\" | \"vertical\" }","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"\"horizontal\""}]},{"name":"ButtonGroupText","kind":"component","propsType":"React.ComponentProps<\"div\"> & { asChild?: boolean }","props":[{"name":"asChild","type":"boolean","required":false,"default":"false"}]},{"name":"ButtonGroupSeparator","kind":"component","propsType":"React.ComponentProps<typeof Separator>","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","required":false,"default":"\"vertical\"","description":"Either `vertical` or `horizontal`. Defaults to `horizontal`."}]}]}}