'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext } from 'react';
import { Checkbox } from '@base-ui/react/checkbox';
import { CheckboxGroup } from '@base-ui/react/checkbox-group';
import { Radio } from '@base-ui/react/radio';
import { RadioGroup } from '@base-ui/react/radio-group';
import { useAutoValue, useCSSPropsPolyfill, useCSSState, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes, splitProps } from "../utils/index.js";
import { renderAddon } from "./base/Addon.js";
import { ButtonOrLink } from "./base/ButtonOrLink.js";
import { ChipGroupMeta, ChipMeta } from "./Chip.meta.js";
const ChipGroupContext = createContext(null);
export function ChipRoot({ size, name, value: passedValue, addonBefore, addonAfter, count, disabled = false, className, style, children, ...props }) {
    useGDS();
    const { rootProps, nestedProps } = splitProps(props);
    const autoValue = useAutoValue(children);
    const value = passedValue !== undefined ? passedValue : autoValue;
    const groupContext = useContext(ChipGroupContext);
    const [stateRef, state] = useCSSState({
        pointer: undefined,
        focus: undefined,
        checked: undefined,
        disabled: Boolean(disabled),
    });
    const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(ChipMeta, { size }, { ref: stateRef });
    return (_jsx("div", { ref: cssPropsPolyfillStateRef, "data-type": groupContext?.type ?? 'plain', className: cn(`gds-chip root-flex flex-col u:size-max u:max-w-full
        u:has-nested-checked/chip-ref:expose-checked
        u:has-nested-hover/chip-ref:expose-hover
        u:has-nested-focus-visible/chip-ref:expose-focus
        u:has-nested-disabled/chip-ref:expose-disabled
        u:i:has-nested-checked/chip-ref:data-[type=radio]:state-idle`, className), ...state.exposedAttributes, ...state.polyfillAttributes, ...getCSSPropsAttributes(ChipMeta, { size }, style), ...cssPropsPolyfillAttributes, ...rootProps, children: (() => {
            if (!groupContext || props.href !== undefined) {
                return renderButtonOrLink({});
            }
            if (groupContext.type === 'checkbox') {
                return (_jsx(Checkbox.Root, { name: name, value: typeof value === 'string' ? value : undefined, disabled: Boolean(disabled), nativeButton: true, render: renderButtonOrLink }));
            }
            else {
                return (_jsx(Radio.Root, { value: value, disabled: Boolean(disabled), nativeButton: true, render: renderButtonOrLink }));
            }
            function renderButtonOrLink({ tabIndex: _tabIndex, defaultChecked: _defaultChecked, ...renderProps }) {
                return (_jsxs(ButtonOrLink, { ...renderProps, disabled: disabled, className: cn(renderProps.className, `nested/chip-ref flex grow items-center justify-center
                rounded-full border border-default text-muted transition
                @state-checked/chip:border-brand-muted
                @state-checked/chip:bg-brand-subtlest
                @state-checked/chip:text-default
                @state-hover/chip:border-strong
                @state-hover/chip:text-default
                @state-hover/chip:@state-checked/chip:border-brand-default
                @state-hover/chip:@state-checked/chip:bg-brand-subtler
                @prop-size-small/chip:h-6
                @prop-size-small/chip:px-1
                @prop-size-small/chip:text-12
                @prop-size-medium/chip:h-8
                @prop-size-medium/chip:px-1.5
                @prop-size-medium/chip:text-14
                @prop-size-large/chip:h-10
                @prop-size-large/chip:px-2
                @prop-size-large/chip:text-16
                u:*:transition-opacity
                u:*:@state-disabled/chip:opacity-disabled
                u:*:@state-disabled/chip:grayscale
                u:@prop-size-small/chip:addon-small
                u:@prop-size-medium/chip:addon-medium
                u:@prop-size-large/chip:addon-large
                i:@state-disabled/chip:border-muted
                i:@state-disabled/chip:bg-transparent
                i:@state-disabled/chip:text-muted
                i:@state-disabled/chip:@state-checked/chip:border-transparent
                i:@state-disabled/chip:@state-checked/chip:bg-brand-subtlest`), ...nestedProps, children: [_jsx("span", { className: "absolute inset-0 not-in-clickable:hidden" }), addonBefore ? _jsx(ChipAddon, { side: "before", children: renderAddon(addonBefore) }) : null, _jsxs("span", { className: "flex items-baseline gap-1 px-1", children: [_jsx("span", { className: "truncate", children: children }), count ? (_jsx("span", { className: `
                      max-w-full shrink-0 truncate text-subtle transition
                      @state-enabled/chip:@state-checked/chip:text-current
                      @state-enabled/chip:@state-hover/chip:text-current
                      @prop-size-small/chip:text-10
                      @prop-size-medium/chip:text-12
                      @prop-size-large/chip:text-14
                    `, children: count })) : null] }), addonAfter ? _jsx(ChipAddon, { side: "after", children: renderAddon(addonAfter) }) : null] }));
            }
        })() }));
}
ChipRoot.displayName = 'Chip';
function ChipAddon({ side, className, children, ...props }) {
    return (_jsx("span", { "data-side": side, className: cn(`gds-addon root-flex items-center justify-center u:h-(--gds-addon-size) u:min-w-(--gds-addon-size) u:shrink-0
        u:has-avatar-group:data-[side=after]:ps-0.5
        u:has-tag:data-[side=after]:ps-0.5
        u:has-avatar-group:data-[side=before]:pe-0.5
        u:has-tag:data-[side=before]:pe-0.5`, className), ...props, children: children }));
}
export function ChipGroup({ ref: passedRef, type, name, value, defaultValue, onChange, size, className, style, children, ...props }) {
    useGDS();
    if (props['aria-label'] === undefined && props['aria-labelledby'] === undefined) {
        // oxlint-disable-next-line no-console
        console.warn('[Chip.Group] One of `aria-label` or `aria-labelledby` should be set for accessibility');
    }
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(ChipGroupMeta, { size }, { ref: passedRef, returnPropValues: { size } });
    const sharedProps = {
        ref: cssPropsPolyfillPassedRef,
        'data-size': cssProps.size,
        className: cn(`gds-chip-group root-flex u:flex-wrap
      u:data-[size=large]:gap-2
      u:data-[size=medium]:gap-1.5
      u:data-[size=small]:gap-1
      u:**:chip:@prop-size-small/chip-group:prop-size-small
      u:**:chip:@prop-size-medium/chip-group:prop-size-medium
      u:**:chip:@prop-size-large/chip-group:prop-size-large`, className),
        ...getCSSPropsAttributes(ChipGroupMeta, { size }, style),
        ...cssPropsPolyfillAttributes,
        ...props,
    };
    return (_jsx(ChipGroupContext.Provider, { value: { type }, children: type === 'checkbox' ? (_jsx(CheckboxGroup, { ...sharedProps, ...(value !== undefined && { value }), ...(defaultValue !== undefined && { defaultValue }), ...(onChange !== undefined && { onValueChange: onChange }), children: children })) : (_jsx(RadioGroup, { name: name, ...sharedProps, ...(value !== undefined && { value }), ...(defaultValue !== undefined && { defaultValue }), ...(onChange !== undefined && { onValueChange: onChange }), children: children })) }));
}
ChipGroup.displayName = 'Chip.Group';
//# sourceMappingURL=Chip.parts.js.map