{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:ui",
  "title": "Button Group",
  "description": "Visually connected strip of buttons with shared radii and separators. For segmented actions and toolbars.",
  "dependencies": [
    "@radix-ui/react-slot",
    "@saasflare/ui",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/button-group.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview ButtonGroup primitive — groups multiple buttons or inputs into a\n * visually connected strip with shared border radii and separator support.\n * Supports horizontal and vertical orientations. Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/button-group\n * @layer core\n *\n * @component\n * @example\n * import { ButtonGroup, ButtonGroupText } from '@saasflare/ui';\n * <ButtonGroup orientation=\"horizontal\">\n *   <ButtonGroupText>Left</ButtonGroupText>\n *   <ButtonGroupText>Right</ButtonGroupText>\n * </ButtonGroup>\n */\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as Slot from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { Separator } from \"@saasflare/ui\"\n\n/**\n * cva variant builder for {@link ButtonGroup} — the `orientation` axis lays the\n * children out horizontally or vertically and flattens the adjacent corners of\n * connected children. Exported for consumers composing custom group shells.\n */\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\n/**\n * Props for {@link ButtonGroup}.\n *\n * Extends the native div props with the `orientation` variant from\n * {@link buttonGroupVariants} and {@link SaasflareComponentProps}.\n */\ninterface ButtonGroupProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    VariantProps<typeof buttonGroupVariants>,\n    SaasflareComponentProps {}\n\n/**\n * Groups multiple buttons or inputs into a visually connected strip with shared\n * border radii. The `radius` axis drives the corner rounding of the whole group;\n * connected edges between children have their adjacent corners flattened.\n *\n * @example\n * <ButtonGroup orientation=\"horizontal\" radius=\"lg\">\n *   <Button>Left</Button>\n *   <Button>Right</Button>\n * </ButtonGroup>\n */\nfunction ButtonGroup({\n  className,\n  orientation = \"horizontal\",\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: ButtonGroupProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\n/** Props for {@link ButtonGroupText}. */\ninterface ButtonGroupTextProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Render as the child element via Radix Slot instead of a `div`. */\n  asChild?: boolean\n}\n\n/**\n * A bordered, muted-surface text/label cell for use inside a {@link ButtonGroup}\n * (e.g. an inline prefix/suffix). Carries its own `surface` and `radius` axes so\n * it visually matches the connected controls around it.\n *\n * @example\n * <ButtonGroup>\n *   <ButtonGroupText>https://</ButtonGroupText>\n *   <Input placeholder=\"example.com\" />\n * </ButtonGroup>\n */\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: ButtonGroupTextProps) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <Comp\n      data-slot=\"button-group-text\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between segments of a {@link ButtonGroup}. Defaults to a vertical\n * orientation to suit the default horizontal group layout. Forwards all props to\n * the underlying {@link Separator}.\n *\n * @example\n * <ButtonGroup>\n *   <Button>Cut</Button>\n *   <ButtonGroupSeparator />\n *   <Button>Copy</Button>\n * </ButtonGroup>\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        \"relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  type ButtonGroupProps,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  type ButtonGroupTextProps,\n  buttonGroupVariants,\n}\n",
      "target": "components/ui/button-group.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/button-group.json"
  }
}