"use client";
import { jsx } 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 }, forwardedRef) => {
    const [propsPolyfillForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "button-group",
      { variant, size, orientation, fullWidth },
      { ref: forwardedRef, forceEnable: true }
    );
    return /* @__PURE__ */ jsx(
      "span",
      {
        ref: propsPolyfillForwardedRef,
        className: classNames([
          `gds-button-group block -:max-w-full
          -:if-prop-[full-width=false(width:max-content),full-width=true(width:100%)]/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
          +:h-max`,
          className
        ]),
        ...getCSSPropsAttributes("button-group", { variant, size, orientation, fullWidth }, style),
        ...propsPolyfillAttributes,
        ...props,
        children: /* @__PURE__ */ jsx(
          "span",
          {
            className: `
            flex items-center
            @prop-size-xsmall/button-group:gap-1
            @prop-size-small/button-group:gap-1
            @prop-size-medium/button-group:gap-2
            @prop-size-large/button-group:gap-2
            --:@prop-orientation-horizontal/button-group:*:grow
            @prop-orientation-vertical/button-group:not-in-[.gds-button-group[data-gds-prop-polyfill-orientation=horizontal]]:flex-col
            -:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:*:grow
            -:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:*:basis-0
            +:@prop-orientation-vertical/button-group:not-in-[.gds-button-group[data-gds-prop-polyfill-orientation=horizontal]]:*:w-full
          `,
            children
          }
        )
      }
    );
  }
);
ExperimentalButtonGroup.displayName = "ExperimentalButtonGroup";
export {
  ExperimentalButtonGroup
};
