'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext } from 'react';
import flattenChildren from 'react-keyed-flatten-children';
import { CheckIcon } from '@graphprotocol/gds-react/icons';
import { useCSSPropsPolyfill, useGDS } from "../hooks/index.js";
import { cn, getCSSPropsAttributes } from "../utils/index.js";
import { StepperMeta } from "./Stepper.meta.js";
import { Tag } from "./Tag.js";
export const StepperRoot = ({ ref: passedRef, count = 1, currentIndex: passedCurrentIndex, labelPosition, className, style, children, ...props }) => {
    useGDS();
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(StepperMeta, {
        labelPosition,
    }, { ref: passedRef });
    const childrenArray = children
        ? flattenChildren(children)
        : Array.from({ length: Math.min(Math.max(1, count), 16) }, (_, index) => (_jsx(StepperStep, {}, index)));
    const currentIndex = Math.min(Math.max(Number.isInteger(passedCurrentIndex) ? passedCurrentIndex : Math.round(passedCurrentIndex), 0), childrenArray.length - 1);
    return (_jsx("div", { ref: cssPropsPolyfillPassedRef, className: cn('gds-stepper root-block i:h-max', className), ...getCSSPropsAttributes(StepperMeta, { labelPosition }, style), ...cssPropsPolyfillAttributes, ...props, children: _jsx("ol", { className: "flex gap-1", children: childrenArray.map((child, childIndex) => (_jsx(StepperStepContext.Provider, { value: { index: childIndex, currentIndex }, children: child }, childIndex))) }) }));
};
StepperRoot.displayName = 'Stepper';
const StepperStepContext = createContext({
    index: 0,
    currentIndex: 0,
});
export const StepperStep = ({ className, children, ...props }) => {
    const { index, currentIndex } = useContext(StepperStepContext);
    const isCurrent = index === currentIndex;
    const isComplete = index < currentIndex;
    return (_jsxs("li", { "aria-current": isCurrent ? 'step' : undefined, "data-status": isComplete ? 'complete' : isCurrent ? 'current' : 'incomplete', className: cn(`group/stepper-step root-flex flex-1 flex-col gap-2
        @prop-label-position-bottom/stepper:flex-col-reverse
        u:min-w-4`, className), ...props, children: [children ? (_jsxs("span", { className: `
            flex items-center gap-1 px-1
            @prop-label-position-hidden/stepper:sr-only
          `, children: [_jsx(Tag, { variant: "elevated", size: "xsmall", "aria-hidden": true, className: `
              shrink-0 var-[padding=0]
              group-data-[status=current]/stepper-step:prop-variant-brand
            `, children: isComplete ? _jsx(CheckIcon, { alt: "", size: 2.5 }) : index + 1 }), _jsx("span", { className: `
              truncate text-12 transition
              group-data-[status=complete]/stepper-step:text-strong
              group-data-[status=current]/stepper-step:text-default
              group-data-[status=incomplete]/stepper-step:text-elevated
            `, children: children })] })) : (_jsxs("span", { className: "sr-only", children: ["Step ", index, isComplete ? ' (Completed)' : ''] })), _jsx("span", { className: "block h-0.5 overflow-clip rounded-full rtl:-scale-x-100", children: _jsxs("span", { className: `
            absolute inset-y-0 left-0 flex w-[205%] animate-translate-x-from-0 animate-translate-x-to-0 transition duration-300 animate-duration-300
            group-has-[~[data-status=current]]/stepper-step:transition-none
            group-data-[status=current]/stepper-step:animate-translate-x-from-[-51%]
            group-data-[status=incomplete]/stepper-step:animate-translate-x-from-[-51%]
            group-data-[status=incomplete]/stepper-step:animate-translate-x-to-[-51%]
            group-data-[status=incomplete]/stepper-step:translate-x-[-51%]
            group-data-[status=incomplete]/stepper-step:group-not-[[data-status=current]+*]/stepper-step:transition-none
            rtl:flex-row-reverse
          `, children: [_jsx("span", { className: `
              flex-1 bg-(--border-color-brand-default) transition duration-300
              group-data-[status=complete]/stepper-step:bg-(--border-color-brand-subtle)
            ` }), _jsx("span", { className: "flex-1 bg-(--border-color-default)" })] }) })] }));
};
StepperStep.displayName = 'Stepper.Step';
//# sourceMappingURL=Stepper.parts.js.map