"use client";
import { jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalButtonGroup = forwardRef(
  ({ variant, size, orientation, fullWidth, className, style, children, ...props }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill(
      "button-group",
      { variant, size, orientation, fullWidth },
      true
    );
    return /* @__PURE__ */ jsxs(
      "span",
      {
        ref,
        className: classNames([
          `gds-button-group flex h-max
          if-prop-[orientation=horizontal(flex-direction:row),orientation=vertical(flex-direction:column)]/button-group
          -:max-w-full
          -:children-if-prop-[orientation=horizontal(width:inherit),orientation=vertical(width:100%)]/button-group
          -:if-prop-[full-width=false(width:max-content),full-width=true(width:100%)]/button-group
          -:if-prop-[size=xsmall(gap:theme(spacing.1)),size=small(gap:theme(spacing.1)),size=medium(gap:theme(spacing.2)),size=large(gap:theme(spacing.2))]/button-group
          -:@prop-size-xsmall/button-group:nested-button:prop-size-xsmall
          -:@prop-size-xsmall/button-group:nested-button-group:prop-size-xsmall
          -:@prop-size-small/button-group:nested-button:prop-size-small
          -:@prop-size-small/button-group:nested-button-group:prop-size-small
          -:@prop-size-medium/button-group:nested-button:prop-size-medium
          -:@prop-size-medium/button-group:nested-button-group:prop-size-medium
          -:@prop-size-large/button-group:nested-button:prop-size-large
          -:@prop-size-large/button-group:nested-button-group:prop-size-large
          -:@prop-variant-primary/button-group:nested-button:default-variant-primary
          -:@prop-variant-primary/button-group:nested-button-group:default-variant-primary
          -:@prop-variant-secondary/button-group:nested-button:default-variant-secondary
          -:@prop-variant-secondary/button-group:nested-button-group:default-variant-secondary
          -:@prop-variant-tertiary/button-group:nested-button:default-variant-tertiary
          -:@prop-variant-tertiary/button-group:nested-button-group:default-variant-tertiary
          -:@prop-variant-inverse/button-group:nested-button:default-variant-inverse
          -:@prop-variant-inverse/button-group:nested-button-group:default-variant-inverse
          -:@prop-variant-danger/button-group:nested-button:default-variant-danger
          -:@prop-variant-danger/button-group:nested-button-group:default-variant-danger
          -:@prop-variant-naked/button-group:nested-button:default-variant-naked
          -:@prop-variant-naked/button-group:nested-button-group:default-variant-naked
          -:@prop-full-width-false/button-group:nested-button-group:default-full-width-false
          -:@prop-full-width-true/button-group:nested-button-group:default-full-width-true`,
          className
        ]),
        ...getCSSPropsAttributes("button-group", { variant, size, orientation, fullWidth }, style),
        ...polyfillAttributes,
        ...props,
        children: [
          polyfillElement,
          children
        ]
      }
    );
  }
);
ExperimentalButtonGroup.displayName = "ExperimentalButtonGroup";
export {
  ExperimentalButtonGroup
};
