"use client";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { Listbox, ListboxButton, ListboxSelectedOption, ListboxOptions, ListboxOption } from "@headlessui/react";
import { forwardRef, Fragment as Fragment$1 } from "react";
import { ExperimentalBaseField, ExperimentalBaseFieldBox } from "./BaseField.js";
import { ExperimentalMenu } from "./Menu.js";
import { genericForwardRef } from "../utils/genericForwardRef.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { useControlled } from "./hooks/useControlled.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { CaretDownInteractive } from "../icons/CaretDownInteractive.js";
const ExperimentalSelectRoot = genericForwardRef(
  ({
    size,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    description,
    placeholder,
    value: controlledValue,
    defaultValue,
    onChange,
    valueIdKey,
    valueLabel,
    disabled = false,
    status,
    message,
    id,
    className,
    style,
    children,
    ...props
  }, ref) => {
    if (!valueIdKey && (typeof controlledValue === "object" && controlledValue !== null || typeof defaultValue === "object" && defaultValue !== null)) {
      throw new Error("ExperimentalSelect: `valueIdKey` is required when `value` or `defaultValue` is an object");
    }
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("select", { size });
    const [value, setValue] = useControlled(controlledValue, defaultValue ?? null, onChange);
    return /* @__PURE__ */ jsx(
      ExperimentalBaseField,
      {
        fieldId: id,
        label,
        "aria-label": ariaLabel,
        "aria-labelledby": ariaLabelledBy,
        description,
        placeholder,
        status,
        message,
        className: classNames(["gds-select", className]),
        ...getCSSPropsAttributes("select", { size }, style),
        ...polyfillAttributes,
        children: ({ fieldProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
          polyfillElement,
          /* @__PURE__ */ jsxs(Listbox, { value, onChange: setValue, by: valueIdKey, disabled, children: [
            /* @__PURE__ */ jsx(ExperimentalBaseFieldBox, { hoverStyles: !disabled, focusStyles: !disabled, ignoreContentWidth: true, children: /* @__PURE__ */ jsx(ListboxButton, { as: Fragment$1, children: /* @__PURE__ */ jsxs(
              "button",
              {
                ref,
                type: "button",
                className: `
                      group/select-button nested/field nested/select flex w-full items-center
                      +:enabled:cursor-pointer
                      @prop-size-medium/select:h-12
                      @prop-size-medium/select:gap-3
                      @prop-size-medium/select:p-3
                      @prop-size-large/select:h-16
                      @prop-size-large/select:gap-4
                      @prop-size-large/select:p-4
                    `,
                ...fieldProps,
                ...props,
                children: [
                  valueLabel !== void 0 ? /* @__PURE__ */ jsx("span", { className: "truncate", children: valueLabel }) : /* @__PURE__ */ jsx("span", { className: "truncate not-first:*:hidden", children: /* @__PURE__ */ jsx(
                    ListboxSelectedOption,
                    {
                      options: children,
                      placeholder: /* @__PURE__ */ jsx("span", { className: "text-white/48", children: placeholder })
                    }
                  ) }),
                  /* @__PURE__ */ jsx(CaretDownInteractive, { size: "18px", className: "ms-auto" })
                ]
              }
            ) }) }),
            /* @__PURE__ */ jsx(ListboxOptions, { as: Fragment$1, anchor: { to: "bottom start" }, modal: false, transition: true, children: /* @__PURE__ */ jsx(
              ExperimentalMenu,
              {
                className: `
                    w-[var(--button-width)] transition outline-none [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)]
                    data-[closed]:-translate-y-1
                    data-[closed]:data-[anchor~=top]:translate-y-1
                    data-[closed]:opacity-0
                  `,
                children
              }
            ) })
          ] })
        ] })
      }
    );
  }
);
ExperimentalSelectRoot.displayName = "ExperimentalSelect";
const ExperimentalSelectOption = forwardRef(
  ({ value: passedValue, children, ...props }, ref) => {
    const value = passedValue !== void 0 ? passedValue : children;
    return /* @__PURE__ */ jsx(ListboxOption, { ref, as: Fragment$1, value, children: ({ focus, selected, selectedOption }) => {
      return selectedOption ? /* @__PURE__ */ jsx("span", { children }) : /* @__PURE__ */ jsx(ExperimentalMenu.Item, { focus, selected, ...props, children });
    } });
  }
);
ExperimentalSelectOption.displayName = "ExperimentalSelect.Option";
export {
  ExperimentalSelectOption,
  ExperimentalSelectRoot
};
