"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Tabs } from "@base-ui-components/react/tabs";
import { motion, LayoutGroup } from "motion/react";
import { createContext, forwardRef, useContext, useId } from "react";
import flattenChildren from "react-keyed-flatten-children";
import { ExperimentalDivider } from "./Divider.js";
import { ExperimentalIcon } from "./Icon.js";
import { ExperimentalTransition } from "./Transition.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";
const ExperimentalTabSetContext = createContext({
  selectedTab: 0
});
const ExperimentalTabSetRoot = genericForwardRef(
  ({
    size,
    fullWidth,
    value: controlledValue,
    defaultValue,
    onChange,
    className,
    style,
    children,
    ...props
  }, forwardedRef) => {
    const [propsPolyfillForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "tab-set",
      { size, fullWidth },
      { ref: forwardedRef }
    );
    const [value, setValue] = useControlled(controlledValue, defaultValue ?? 0, onChange);
    return /* @__PURE__ */ jsx(ExperimentalTabSetContext.Provider, { value: { selectedTab: value }, children: /* @__PURE__ */ jsx(
      Tabs.Root,
      {
        ref: propsPolyfillForwardedRef,
        value,
        onValueChange: setValue,
        className: classNames(["group/tab-set gds-tab-set", className]),
        ...getCSSPropsAttributes("tab-set", { size, fullWidth }, style),
        ...propsPolyfillAttributes,
        ...props,
        children
      }
    ) });
  }
);
ExperimentalTabSetRoot.displayName = "ExperimentalTabSet";
const ExperimentalTabSetTabs = forwardRef(
  ({ className, children, ...props }, forwardedRef) => {
    const uniqueId = useId();
    const { selectedTab } = useContext(ExperimentalTabSetContext);
    return /* @__PURE__ */ jsx(LayoutGroup, { id: uniqueId, children: /* @__PURE__ */ jsx(
      "div",
      {
        className: classNames([
          `gradient-mask-x overflow-x-auto overflow-y-clip whitespace-nowrap scrollbar-none -:shrink-0
            -:@prop-size-small/tab-set:h-8
            -:@prop-size-medium/tab-set:h-10`,
          className
        ]),
        children: /* @__PURE__ */ jsxs(
          Tabs.List,
          {
            ref: forwardedRef,
            className: `
              grid h-full min-w-min ${/* Ensure the divider spans the whole scroll area */
            ""}
              grid-flow-col gap-1
              @prop-size-small/tab-set:text-p12
              @prop-size-medium/tab-set:text-h16
              @prop-full-width-false/tab-set:auto-cols-min
              @prop-full-width-true/tab-set:auto-cols-[minmax(min-content,1fr)]
            `,
            ...props,
            children: [
              /* @__PURE__ */ jsx(ExperimentalDivider, { variant: "subtle", className: "absolute inset-x-0 bottom-0" }),
              flattenChildren(children).map((child, childIndex) => /* @__PURE__ */ jsx(ExperimentalTabSetItemContext.Provider, { value: { selectedTab, index: childIndex }, children: child }, childIndex))
            ]
          }
        )
      }
    ) });
  }
);
ExperimentalTabSetTabs.displayName = "ExperimentalTabSet.Tabs";
const ExperimentalTabSetItemContext = createContext({
  selectedTab: 0,
  index: -1
});
const useTabSetItem = (passedValue) => {
  const { selectedTab, index } = useContext(ExperimentalTabSetItemContext);
  const value = passedValue !== void 0 ? passedValue : index;
  const selected = selectedTab === value;
  return { value, selected };
};
const ExperimentalTabSetTab = forwardRef(
  ({
    value: passedValue,
    iconBefore,
    iconAfter,
    disabled = false,
    className,
    children,
    ...props
  }, forwardedRef) => {
    const { value, selected } = useTabSetItem(passedValue);
    return /* @__PURE__ */ jsxs(
      Tabs.Tab,
      {
        ref: forwardedRef,
        value,
        disabled,
        className: classNames([
          `group/tab-set-tab flex items-center justify-center text-space-500 transition outline-none
          -:*:transition-opacity
          enabled:hover:text-white
          -:*:disabled:opacity-40
          data-[selected]:cursor-default
          data-[selected]:text-white
          nested-icon:disabled:grayscale
          @prop-size-small/tab-set:px-2
          @prop-size-small/tab-set:nested-icon:default-size-3.5
          @prop-size-medium/tab-set:px-4
          @prop-size-medium/tab-set:nested-icon:default-size-4.5`,
          className
        ]),
        ...props,
        children: [
          iconBefore ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", className: "mx-0.5", children: iconBefore }) : null,
          /* @__PURE__ */ jsx("span", { className: "truncate px-1", children }),
          iconAfter ? /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", className: "mx-0.5", children: iconAfter }) : null,
          selected ? /* @__PURE__ */ jsx(
            motion.span,
            {
              layoutId: "gds-tab-set-tab-underline",
              transition: { duration: 0.3 },
              className: "absolute inset-x-0 bottom-0 h-px bg-purple-500 transition-opacity in-focus-visible:!opacity-0",
              style: { originY: "0px" }
            }
          ) : null,
          /* @__PURE__ */ jsx(
            "span",
            {
              className: `
            absolute inset-0 my-auto max-h-full opacity-100 -outline-offset-1 transition
            group-focus-visible/tab-set-tab:outline-focus
            @prop-size-small/tab-set:h-8
            @prop-size-small/tab-set:rounded-6
            @prop-size-medium/tab-set:h-10
            @prop-size-medium/tab-set:rounded-8
          `
            }
          )
        ]
      }
    );
  }
);
ExperimentalTabSetTab.displayName = "ExperimentalTabSet.Tab";
const ExperimentalTabSetPanels = forwardRef(
  ({ transition = true, className, children, ...props }, forwardedRef) => {
    const { selectedTab } = useContext(ExperimentalTabSetContext);
    return /* @__PURE__ */ jsx(
      ExperimentalTransition,
      {
        ref: forwardedRef,
        layout: transition && typeof transition === "object" ? transition.layout : void 0,
        duration: transition ? 300 : 0,
        animateSize: transition && typeof transition === "object" ? transition.animateSize : void 0,
        className: classNames([
          `animate-fill-both
          has-nested-focus-visible/tab-set-panel:animate-outline-from-focus
          group-data-[activation-direction=left]/tab-set:[--gds-transition-enter-translate-x:-32px]
          group-data-[activation-direction=right]/tab-set:[--gds-transition-enter-translate-x:32px]
          group-data-[activation-direction=right]/tab-set:[--gds-transition-exit-translate-x:-32px]
          group-data-[activation-direction=left]/tab-set:[--gds-transition-exit-translate-x:32px]`,
          className
        ]),
        ...props,
        children: /* @__PURE__ */ jsx("div", { className: "flex grow flex-col", children: flattenChildren(children).map((child, childIndex) => /* @__PURE__ */ jsx(ExperimentalTabSetItemContext.Provider, { value: { selectedTab, index: childIndex }, children: child }, childIndex)) }, selectedTab)
      }
    );
  }
);
ExperimentalTabSetPanels.displayName = "ExperimentalTabSet.Panels";
const ExperimentalTabSetPanel = forwardRef(
  ({ value: passedValue, className, children, ...props }, forwardedRef) => {
    const { value, selected } = useTabSetItem(passedValue);
    return /* @__PURE__ */ jsx(
      Tabs.Panel,
      {
        ref: forwardedRef,
        value,
        keepMounted: true,
        hidden: !selected,
        className: classNames(["nested/tab-set-panel grow outline-none", className]),
        ...props,
        children: selected ? children : null
      }
    );
  }
);
ExperimentalTabSetPanel.displayName = "ExperimentalTabSet.Panel";
export {
  ExperimentalTabSetContext,
  ExperimentalTabSetPanel,
  ExperimentalTabSetPanels,
  ExperimentalTabSetRoot,
  ExperimentalTabSetTab,
  ExperimentalTabSetTabs
};
