"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalIcon } from "./Icon.js";
import { ExperimentalLoadingIndicator } from "./LoadingIndicator.js";
import { useCSSState } from "./tailwind/useCSSState.js";
import { splitProps } from "../utils/splitProps.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { ButtonOrLink } from "../atoms/ButtonOrLink/ButtonOrLink.js";
const ExperimentalButton = forwardRef(
  ({
    variant,
    size,
    hideLabel,
    iconBefore: passedIconBefore,
    iconAfter: passedIconAfter,
    loading = false,
    disabled = false,
    className,
    style,
    children,
    ...props
  }, forwardedRef) => {
    const [stateRef, state] = useCSSState({ disabled: Boolean(disabled) });
    const [propsPolyfillStateRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "button",
      { variant, size, hideLabel },
      { ref: stateRef }
    );
    const { rootProps, nestedProps } = splitProps(props);
    const loadingIndicator = /* @__PURE__ */ jsx(ExperimentalLoadingIndicator, { color: "current" });
    const iconBefore = passedIconBefore && loading && !passedIconAfter ? loadingIndicator : passedIconBefore;
    const iconAfter = passedIconAfter && loading ? loadingIndicator : passedIconAfter;
    const replaceChildrenByLoading = loading && !iconBefore && !iconAfter;
    return /* @__PURE__ */ jsx(
      "span",
      {
        ref: propsPolyfillStateRef,
        "data-has-children": children ? true : void 0,
        className: classNames([
          `gds-button flex [--gds-button-radius-or-initial:var(--gds-button-radius)] -:h-max -:w-max -:max-w-full -:[--gds-button-radius:initial]
          -:has-nested-focus-visible/button-ref:state-focus
          -:has-nested-hover/button-ref:has-nested-enabled/button-ref:state-hover
          -:has-nested-active/button-ref:has-nested-enabled/button-ref:state-active
          +:has-nested-disabled/button-ref:state-disabled
          ${/* Ensure icon-only buttons do not get squished in button groups or other flexbox containers */
          ""}
          -:not-data-[has-children]:min-w-auto
          -:has-icon-only:min-w-auto
          ${/* Ensure icon-only buttons do not grow in non-`fullWidth` button groups (unless explicitly set to `grow`) */
          ""}
          -:not-data-[has-children]:grow-0
          -:has-icon-only:grow-0
          ${/* Ensure naked icon-only buttons where the icon is passed in `children` are the same size as those where the icon is passed in `iconBefore`/`iconAfter` */
          ""}
          +:not-data-[has-children]:prop-hide-label-true`,
          className
        ]),
        ...state.forwardedAttributes,
        ...getCSSPropsAttributes("button", { variant, size, hideLabel }, style),
        ...propsPolyfillAttributes,
        ...rootProps,
        children: /* @__PURE__ */ jsxs(
          ButtonOrLink,
          {
            ref: forwardedRef,
            disabled: disabled || (loading ? "focusable" : false),
            "data-loading": loading || void 0,
            className: `
            nested/button-ref flex h-[var(--height)] min-h-full min-w-[var(--height)] grow items-center justify-center
            rounded-[var(--gds-button-radius)] border-transparent text-white transition outline-none [--border-width:theme(spacing.px)]
            [--gds-button-radius:var(--gds-button-radius-or-initial,var(--gds-button-radius-default))]
            [border-width:var(--border-width)]
            -:*:transition-opacity
            @state-active/button:transition-none
            -:*:@state-disabled/button:opacity-40
            @state-disabled/button:nested-icon:grayscale
            @prop-size-xsmall/button:px-1.5
            @prop-size-xsmall/button:text-12
            @prop-size-xsmall/button:font-regular
            @prop-size-xsmall/button:[--gds-button-radius-default:theme(borderRadius.6)]
            @prop-size-xsmall/button:[--height:theme(spacing.7)]
            @prop-size-xsmall/button:[--icon-wrapper-size:theme(spacing.4)]
            @prop-size-xsmall/button:nested-icon:default-size-3
            @prop-size-small/button:px-2
            @prop-size-small/button:text-12
            @prop-size-small/button:font-regular
            @prop-size-small/button:[--gds-button-radius-default:theme(borderRadius.6)]
            @prop-size-small/button:[--height:theme(spacing.8)]
            @prop-size-small/button:[--icon-wrapper-size:theme(spacing.4)]
            @prop-size-small/button:nested-icon:default-size-3.5
            @prop-size-medium/button:px-2
            @prop-size-medium/button:text-14
            @prop-size-medium/button:font-medium
            @prop-size-medium/button:[--gds-button-radius-default:theme(borderRadius.8)]
            @prop-size-medium/button:[--height:theme(spacing.10)]
            @prop-size-medium/button:[--icon-wrapper-size:theme(spacing.5)]
            @prop-size-medium/button:nested-icon:default-size-4
            @prop-size-large/button:px-3
            @prop-size-large/button:text-16
            @prop-size-large/button:font-medium
            @prop-size-large/button:[--gds-button-radius-default:theme(borderRadius.8)]
            @prop-size-large/button:[--height:theme(spacing.12)]
            @prop-size-large/button:[--icon-wrapper-size:theme(spacing.6)]
            @prop-size-large/button:nested-icon:default-size-4.5
            @prop-variant-primary/button:border-purple-400
            @prop-variant-primary/button:bg-purple-500
            @prop-variant-primary/button:@state-hover/button:border-purple-300
            @prop-variant-primary/button:@state-hover/button:bg-purple-400
            @prop-variant-primary/button:@state-active/button:border-purple-600
            @prop-variant-primary/button:@state-active/button:bg-purple-700
            @prop-variant-primary/button:@state-disabled/button:border-transparent
            @prop-variant-primary/button:@state-disabled/button:bg-purple-900
            @prop-variant-secondary/button:border-space-1200
            @prop-variant-secondary/button:bg-space-1400
            @prop-variant-secondary/button:@state-hover/button:border-space-1100
            @prop-variant-secondary/button:@state-hover/button:bg-space-1200
            @prop-variant-secondary/button:@state-active/button:border-space-1300
            @prop-variant-secondary/button:@state-active/button:bg-space-1500
            @prop-variant-secondary/button:@state-disabled/button:border-transparent
            @prop-variant-secondary/button:@state-disabled/button:bg-space-1600
            @prop-variant-tertiary/button:border-space-1200
            @prop-variant-tertiary/button:bg-transparent
            @prop-variant-tertiary/button:@state-hover/button:border-space-1100
            @prop-variant-tertiary/button:@state-hover/button:bg-space-1200
            @prop-variant-tertiary/button:@state-active/button:border-space-1300
            @prop-variant-tertiary/button:@state-active/button:bg-space-1400
            @prop-variant-tertiary/button:@state-disabled/button:border-space-1400
            @prop-variant-tertiary/button:@state-disabled/button:bg-transparent
            @prop-variant-inverse/button:border-white
            @prop-variant-inverse/button:bg-space-100
            @prop-variant-inverse/button:text-space-1800
            @prop-variant-inverse/button:@state-hover/button:border-white
            @prop-variant-inverse/button:@state-hover/button:bg-white
            @prop-variant-inverse/button:@state-active/button:border-space-500
            @prop-variant-inverse/button:@state-active/button:bg-space-500
            @prop-variant-inverse/button:@state-disabled/button:border-transparent
            @prop-variant-inverse/button:@state-disabled/button:bg-space-300
            @prop-variant-danger/button:border-sonja-400
            @prop-variant-danger/button:bg-sonja-500
            @prop-variant-danger/button:@state-hover/button:border-sonja-300
            @prop-variant-danger/button:@state-hover/button:bg-sonja-400
            @prop-variant-danger/button:@state-active/button:border-sonja-600
            @prop-variant-danger/button:@state-active/button:bg-sonja-700
            @prop-variant-danger/button:@state-disabled/button:border-transparent
            @prop-variant-danger/button:@state-disabled/button:bg-sonja-900
            @prop-variant-naked/button:h-auto
            @prop-variant-naked/button:min-w-0
            @prop-variant-naked/button:bg-transparent
            @prop-variant-naked/button:px-0
            @prop-variant-naked/button:text-space-500
            @prop-variant-naked/button:[--border-width:0px]
            @prop-variant-naked/button:[--gds-button-radius-default:theme(borderRadius.6)]
            @prop-variant-naked/button:@state-hover/button:text-white
            @prop-variant-naked/button:@state-focus/button:text-white
            @prop-variant-naked/button:@state-active/button:text-space-300
          `,
            ...nestedProps,
            children: [
              /* @__PURE__ */ jsx(
                "span",
                {
                  className: `
              absolute m-auto size-[calc(100%+2*var(--extra-padding)+2*var(--border-width))]
              rounded-[var(--gds-button-radius)] opacity-100 transition [--extra-padding:0px]
              @state-focus/button:outline-focus
              @prop-variant-naked/button:[--extra-padding:theme(spacing.2)]
            `
                }
              ),
              iconBefore ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", className: "@prop-hide-label-false/button:size-[var(--icon-wrapper-size)]", children: iconBefore }) : null,
              children ? /* @__PURE__ */ jsx(
                "span",
                {
                  className: classNames([
                    `truncate
                has-icon-only:px-0
                @prop-size-xsmall/button:px-0.5
                @prop-size-small/button:px-0.5
                @prop-size-medium/button:px-1
                @prop-size-large/button:px-1
                @prop-hide-label-true/button:not-has-icon-only:sr-only`,
                    replaceChildrenByLoading ? "invisible" : null
                  ]),
                  children
                }
              ) : null,
              replaceChildrenByLoading ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: loadingIndicator }) : null,
              iconAfter ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", className: "@prop-hide-label-false/button:size-[var(--icon-wrapper-size)]", children: iconAfter }) : null
            ]
          }
        )
      }
    );
  }
);
ExperimentalButton.displayName = "ExperimentalButton";
export {
  ExperimentalButton
};
