'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext } from 'react';
import { Tabs } from '@base-ui/react/tabs';
import flattenChildren from 'react-keyed-flatten-children';
import { useControlled, useCSSPropsPolyfill, useCSSState, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes } from "../utils/index.js";
import { renderAddon } from "./base/Addon.js";
import { Transition } from "./base/Transition.js";
import { Divider } from "./Divider.js";
import { TabSetTabsMeta } from './TabSet.meta.js';
export const TabSetContext = createContext({
    selectedTab: 0,
});
export function TabSetRoot({ value: controlledValue, defaultValue, onChange, className, style, children, ...props }) {
    useGDS();
    const [value, setValue] = useControlled(controlledValue, defaultValue ?? 0, onChange);
    return (_jsx(TabSetContext.Provider, { value: { selectedTab: value }, children: _jsx(Tabs.Root, { value: value, onValueChange: setValue, className: cn('group/tab-set', className), style: style ?? undefined, ...props, children: children }) }));
}
TabSetRoot.displayName = 'TabSet';
export function TabSetTabs({ ref: passedRef, size, fullWidth, divider, className, style, children, ...props }) {
    const { selectedTab } = useContext(TabSetContext);
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(TabSetTabsMeta, { size, fullWidth, divider }, { ref: passedRef });
    return (_jsx("div", { ref: cssPropsPolyfillPassedRef, className: cn(`gds-tab-set-tabs group/tab-set-tabs scrollbar-none overflow-x-auto overflow-y-clip gradient-mask-x whitespace-nowrap
        u:max-w-full u:shrink-0`, className), ...getCSSPropsAttributes(TabSetTabsMeta, { size, fullWidth, divider }, style), ...cssPropsPolyfillAttributes, ...props, children: _jsxs(Tabs.List, { activateOnFocus: true, className: `
          grid h-full min-w-min ${ /* Ensure the divider spans the whole scroll area */''}
          grid-flow-col gap-(--gds-tab-set-tabs-gap)
          @prop-size-small/tab-set-tabs:text-12
          @prop-size-medium/tab-set-tabs:text-14
          @prop-size-large/tab-set-tabs:text-16
          @prop-full-width-false/tab-set-tabs:auto-cols-min
          @prop-full-width-true/tab-set-tabs:auto-cols-[minmax(min-content,1fr)]
        `, children: [_jsx(Divider, { variant: "muted", className: `
            absolute inset-x-0 bottom-0
            @prop-divider-false/tab-set-tabs:hidden
          ` }), flattenChildren(children).map((child, childIndex) => (_jsx(TabSetItemContext.Provider, { value: { selectedTab, index: childIndex }, children: child }, childIndex))), _jsx("span", { className: `
            absolute inset-x-[anchor(inside)] bottom-0 h-px bg-(--border-color-brand-default) transition-[inset] duration-300
            [position-anchor:--gds-tab-set-underline]
            not-supports-[position-anchor:--foo]:hidden
            group-not-hover/tab-set-tabs:duration-0
            group-has-focus-visible/tab-set-tabs:hidden
          ` })] }) }));
}
TabSetTabs.displayName = 'TabSet.Tabs';
const TabSetItemContext = createContext({
    selectedTab: 0,
    index: -1,
});
const useTabSetItem = (passedValue) => {
    const { selectedTab, index } = useContext(TabSetItemContext);
    const value = passedValue !== undefined ? passedValue : index;
    const selected = selectedTab === value;
    return { value, selected };
};
export function TabSetTab({ ref: passedRef, value: passedValue, addonBefore, addonAfter, disabled = false, className, style, children, ...props }) {
    const { value, selected } = useTabSetItem(passedValue);
    const [statePassedRef, state] = useCSSState({
        pointer: undefined,
        focus: undefined,
        checked: selected,
        disabled,
    }, { ref: passedRef });
    return (_jsxs(Tabs.Tab, { ref: statePassedRef, value: value, disabled: disabled, className: cn(`gds-tab-set-tab root-flex transition u:h-full u:items-center u:justify-center u:py-2 u:text-muted u:outline-0
        u:hover:state-hover
        u:focus-visible:state-focus
        u:enabled:hover:text-default
        u:disabled:state-disabled
        u:disabled:state-idle
        u:data-active:cursor-default
        u:data-active:text-default
        u:data-active:state-checked
        u:data-active:[anchor-name:--gds-tab-set-underline]
        u:@prop-size-small/tab-set-tabs:px-2
        u:@prop-size-small/tab-set-tabs:addon-small
        u:@prop-size-medium/tab-set-tabs:px-4
        u:@prop-size-medium/tab-set-tabs:addon-medium
        u:@prop-size-large/tab-set-tabs:px-4
        u:@prop-size-large/tab-set-tabs:addon-large
        ${ /* Disabled styles */''}
        u:*:transition-opacity
        u:disabled:*:opacity-disabled
        u:disabled:*:grayscale`, className), style: style ?? undefined, ...state.polyfillAttributes, ...props, children: [addonBefore ? _jsx(TabAddon, { children: renderAddon(addonBefore) }) : null, _jsx("span", { className: "truncate px-1", children: children }), addonAfter ? _jsx(TabAddon, { children: renderAddon(addonAfter) }) : null, _jsx("span", { className: `
          absolute inset-0 my-auto max-h-full rounded-6 opacity-100 -outline-offset-1 filter-none
          @state-focus/tab-set-tab:outline
        ` }), _jsx("span", { className: `
          absolute inset-x-0 bottom-0 h-px bg-(--border-color-brand-default) opacity-0 filter-none transition
          group-has-focus-visible/tab-set-tabs:hidden
          supports-[position-anchor:--foo]:hidden
          @state-checked/tab-set-tab:opacity-100
        ` })] }));
}
TabSetTab.displayName = 'TabSet.Tab';
function TabAddon({ className, children, ...props }) {
    return (_jsx("span", { className: cn('gds-addon root-flex items-center justify-center u:h-(--gds-addon-size) u:min-w-(--gds-addon-size) u:shrink-0', className), ...props, children: children }));
}
export function TabSetPanels({ transition = true, className, children, ...props }) {
    const { selectedTab } = useContext(TabSetContext);
    return (_jsx(Transition, { layout: "flex-col", duration: !transition ? 0 : undefined, ...(transition && typeof transition === 'object' ? transition : {}), className: cn(`u:group-data-[activation-direction=left]/tab-set:var-[enter-translate-x=-32px]
        u:group-data-[activation-direction=left]/tab-set:var-[exit-translate-x=32px]
        u:group-data-[activation-direction=right]/tab-set:var-[enter-translate-x=32px]
        u:group-data-[activation-direction=right]/tab-set:var-[exit-translate-x=-32px]
        u:has-nested-focus-visible/tab-set-panel:animate
        u:has-nested-focus-visible/tab-set-panel:outline
        u:has-nested-focus-visible/tab-set-panel:animate-outline-from-focus`, transition && typeof transition === 'object' ? transition.className : undefined, className), ...props, children: _jsx("div", { className: "flex grow flex-col", children: flattenChildren(children).map((child, childIndex) => (_jsx(TabSetItemContext.Provider, { value: { selectedTab, index: childIndex }, children: child }, childIndex))) }, selectedTab) }));
}
TabSetPanels.displayName = 'TabSet.Panels';
export function TabSetPanel({ value: passedValue, className, style, children, ...props }) {
    const { value, selected } = useTabSetItem(passedValue);
    return (_jsx(Tabs.Panel, { value: value, keepMounted: true, hidden: !selected, className: cn('nested/tab-set-panel grow u:outline-0', className), style: style ?? undefined, ...props, children: selected ? children : null }));
}
TabSetPanel.displayName = 'TabSet.Panel';
//# sourceMappingURL=TabSet.parts.js.map