{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "description": "A shadcn-style button group component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "class-variance-authority"],
  "registryDependencies": ["button", "separator"],
  "files": [
    {
      "path": "src/components/ui/button-group.tsx",
      "content": "\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport const groupVariants = cva(\n  \"flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 in-data-invalid:*:data-slot:not-data-[slot=separator]:border-destructive/36 in-data-invalid:*:data-slot:not-data-[slot=separator]:focus-visible:ring-[3px] in-data-invalid:*:data-slot:not-data-[slot=separator]:focus-visible:ring-destructive/20 dark:in-data-invalid:*:data-slot:not-data-[slot=separator]:border-destructive/50 dark:in-data-invalid:*:data-slot:not-data-[slot=separator]:focus-visible:ring-destructive/40 data-invalid:*:data-slot:not-data-[slot=separator]:border-destructive/36 data-invalid:*:data-slot:not-data-[slot=separator]:focus-visible:ring-[3px] data-invalid:*:data-slot:not-data-[slot=separator]:focus-visible:ring-destructive/20 dark:data-invalid:*:data-slot:not-data-[slot=separator]:border-destructive/50 dark:data-invalid:*:data-slot:not-data-[slot=separator]:focus-visible:ring-destructive/40 in-data-invalid:*:data-[slot=separator]:bg-destructive/30 in-data-invalid:*:data-[slot=separator]:before:bg-destructive/25 dark:in-data-invalid:*:data-[slot=separator]:bg-destructive/40 dark:in-data-invalid:*:data-[slot=separator]:before:bg-destructive/35 data-invalid:*:data-[slot=separator]:bg-destructive/30 data-invalid:*:data-[slot=separator]:before:bg-destructive/25 dark:data-invalid:*:data-[slot=separator]:bg-destructive/40 dark:data-invalid:*:data-[slot=separator]:before:bg-destructive/35 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:in-data-invalid:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-destructive/45 dark:data-invalid:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-destructive/45 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64 dark:in-data-invalid:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-destructive/45 dark:data-invalid:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-destructive/45\",\n  {\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-inset-e-[0.5px] *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-inset-s-[0.5px] *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none\",\n        vertical:\n          \"flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none\",\n      },\n    },\n  },\n);\n\nexport const ButtonGroup = ({\n  className,\n  orientation,\n  children,\n  invalid,\n  ...props\n}: {\n  className?: string;\n  orientation?: VariantProps<typeof groupVariants>[\"orientation\"];\n  children: React.ReactNode;\n  invalid?: boolean;\n} & ComponentProps<typeof ark.div>) => {\n  return (\n    <ark.div\n      className={cn(groupVariants({ orientation }), className)}\n      data-orientation={orientation}\n      data-slot=\"group\"\n      role=\"group\"\n      data-invalid={invalid ? \"\" : undefined}\n      {...props}\n    >\n      {children}\n    </ark.div>\n  );\n};\n\nexport const ButtonGroupText = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.div>) => {\n  return (\n    <ark.div\n      className={cn(\n        \"relative inline-flex items-center gap-2 whitespace-nowrap rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-base text-muted-foreground shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"group-text\"\n      {...props}\n    />\n  );\n};\n\nexport const ButtonGroupSeparator = ({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: {\n  className?: string;\n} & ComponentProps<typeof Separator>) => {\n  return (\n    <Separator\n      className={cn(\n        \"pointer-events-none relative z-2 self-stretch bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px\",\n        className,\n      )}\n      orientation={orientation}\n      {...props}\n    />\n  );\n};\n",
      "type": "registry:ui",
      "target": "src/components/ui/button-group.tsx"
    }
  ],
  "type": "registry:ui"
}