{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "description": "Connected and standard groups of buttons, with the kit's 2dp separation and first/middle/last corner geometry.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/button-group-context.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/button-group.tsx",
      "content": "import type { ComponentProps } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  ButtonGroupContext,\n  type ButtonGroupButtonDefaults,\n} from \"./button-group-context\"\nimport { buttonGroupVariants } from \"./button-group-variants\"\n\ntype ButtonGroupVariant = \"standard\" | \"connected\"\ntype ButtonGroupOrientation = \"horizontal\" | \"vertical\"\ntype ButtonGroupSize = Exclude<\n  NonNullable<ButtonGroupButtonDefaults[\"size\"]>,\n  \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\"\n>\ntype ButtonGroupShape = NonNullable<ButtonGroupButtonDefaults[\"shape\"]>\ntype ButtonGroupButtonVariant = NonNullable<\n  ButtonGroupButtonDefaults[\"variant\"]\n>\n\ntype ButtonGroupAccessibleName =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: never; \"aria-labelledby\": string }\n\ntype ButtonGroupProps = Omit<\n  ComponentProps<\"div\">,\n  \"aria-label\" | \"aria-labelledby\" | \"role\"\n> &\n  ButtonGroupAccessibleName & {\n  /** Default visual variant inherited by child buttons. */\n  buttonVariant?: ButtonGroupButtonVariant\n  /** Axis used to lay out the related actions. */\n  orientation?: ButtonGroupOrientation\n  /** Default shape inherited by child buttons. */\n  shape?: ButtonGroupShape\n  /** Material size inherited by child buttons. */\n  size?: ButtonGroupSize\n  /** Whether actions are spaced apart or share connected edges. */\n  variant?: ButtonGroupVariant\n}\n\n/** Groups related, non-selectable button actions with Material geometry. */\nfunction ButtonGroup({\n  buttonVariant,\n  children,\n  className,\n  orientation = \"horizontal\",\n  shape = \"round\",\n  size = \"default\",\n  variant = \"standard\",\n  ...props\n}: ButtonGroupProps) {\n  const resolvedButtonVariant =\n    buttonVariant ?? (variant === \"connected\" ? \"secondary\" : \"default\")\n\n  return (\n    <div\n      {...props}\n      role=\"group\"\n      data-orientation={orientation}\n      data-shape={shape}\n      data-size={size}\n      data-slot=\"button-group\"\n      data-variant={variant}\n      className={cn(\n        buttonGroupVariants({ orientation, size, variant }),\n        className,\n      )}\n    >\n      <ButtonGroupContext.Provider\n        value={{ shape, size, variant: resolvedButtonVariant }}\n      >\n        {children}\n      </ButtonGroupContext.Provider>\n    </div>\n  )\n}\n\nexport { ButtonGroup, buttonGroupVariants }\nexport type {\n  ButtonGroupAccessibleName,\n  ButtonGroupButtonVariant,\n  ButtonGroupOrientation,\n  ButtonGroupProps,\n  ButtonGroupShape,\n  ButtonGroupSize,\n  ButtonGroupVariant,\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/button-group-variants.ts",
      "content": "import { cva } from \"class-variance-authority\"\n\nconst buttonGroupVariants = cva(\"w-fit\", {\n  variants: {\n    orientation: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n    size: {\n      xs: \"\",\n      sm: \"\",\n      default: \"\",\n      lg: \"\",\n      xl: \"\",\n      \"2xl\": \"\",\n    },\n    variant: {\n      standard: \"\",\n      connected: \"[&>[data-slot=button]:focus-visible]:z-10\",\n    },\n  },\n  compoundVariants: [\n    {\n      variant: \"standard\",\n      orientation: \"horizontal\",\n      className: \"flex items-center\",\n    },\n    {\n      variant: \"standard\",\n      orientation: \"vertical\",\n      className: \"flex flex-col items-stretch\",\n    },\n    {\n      variant: \"connected\",\n      orientation: \"horizontal\",\n      className:\n        \"m3-connected-button-group grid grid-flow-col auto-cols-fr items-center gap-0.5\",\n    },\n    {\n      variant: \"connected\",\n      orientation: \"vertical\",\n      className:\n        \"m3-connected-button-group grid grid-flow-row auto-rows-fr items-stretch gap-0.5\",\n    },\n    {\n      variant: \"connected\",\n      orientation: \"horizontal\",\n      size: [\"xs\", \"sm\", \"default\"],\n      className: \"min-h-12\",\n    },\n    {\n      variant: \"standard\",\n      orientation: \"horizontal\",\n      size: \"xs\",\n      className: \"min-h-12 gap-[18px] px-[9px]\",\n    },\n    {\n      variant: \"standard\",\n      orientation: \"vertical\",\n      size: \"xs\",\n      className: \"min-w-12 gap-[18px] py-[9px]\",\n    },\n    {\n      variant: \"standard\",\n      orientation: \"horizontal\",\n      size: [\"sm\", \"default\"],\n      className: \"min-h-12 gap-3 px-1.5\",\n    },\n    {\n      variant: \"standard\",\n      orientation: \"vertical\",\n      size: [\"sm\", \"default\"],\n      className: \"min-w-12 gap-3 py-1.5\",\n    },\n    {\n      variant: \"standard\",\n      orientation: \"horizontal\",\n      size: [\"lg\", \"xl\", \"2xl\"],\n      className: \"gap-2\",\n    },\n    {\n      variant: \"standard\",\n      orientation: \"vertical\",\n      size: [\"lg\", \"xl\", \"2xl\"],\n      className: \"gap-2\",\n    },\n  ],\n  defaultVariants: {\n    orientation: \"horizontal\",\n    size: \"default\",\n    variant: \"standard\",\n  },\n})\n\nexport { buttonGroupVariants }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "actions"
  ],
  "type": "registry:ui"
}