{"version":3,"file":"stepper.cjs","sources":["../../../src/components/stepper.tsx"],"sourcesContent":["import React from \"react\";\nimport { type ReactElement, useCallback } from \"react\";\nimport { mergedCva } from \"../utils/components\";\nimport { Typography } from \"./typography\";\n\nconst rootStyles = mergedCva([\"cui-flex\"], {\n    variants: {\n        layout: {\n            vertical: [\"cui-flex-col\", \"cui-gap-8\"],\n            horizontal: [\"cui-relative\", \"cui-flex-row\", \"cui-gap-2\"],\n            automatic: [\n                \"cui-relative\",\n                \"cui-gap-2 md:cui-gap-8\",\n                \"cui-flex-row md:cui-flex-col\",\n            ],\n        },\n    },\n});\n\nconst stepStyles = mergedCva([\"cui-flex\", \"cui-items-center\", \"cui-gap-4\"], {\n    variants: {\n        layout: {\n            vertical: [],\n            horizontal: [\"cui-flex-col\", \"cui-w-12\"],\n            automatic: [\n                \"cui-flex-col md:cui-flex-row\",\n                \"cui-w-12 md:cui-w-full\",\n            ],\n        },\n        clickable: {\n            true: [\n                \"hover:cui-underline\",\n                \"hover:cui-cursor-pointer\",\n                \"hover:dark:cui-decoration-white\",\n            ],\n        },\n    },\n});\n\nconst squareStyles = mergedCva([\"cui-relative\", \"cui-h-3\", \"cui-w-3\"], {\n    variants: {\n        active: {\n            true: [\"cui-bg-orange\"],\n            false: [\"cui-bg-black\"],\n        },\n        completed: {\n            true: [\"cui-border\", \"cui-border-orange\"],\n            false: [],\n        },\n    },\n});\n\nconst lineStyles = mergedCva([\"cui-absolute\"], {\n    variants: {\n        layout: {\n            vertical: [\n                \"cui-top-3\",\n                \"cui-left-1/2\",\n                \"cui-h-12\",\n                \"cui-w-[1px]\",\n                \"-cui-translate-x-[0.5px]\",\n                \"-cui-translate-y-[0.5px]\",\n            ],\n            horizontal: [\n                \"cui-top-1/2\",\n                \"cui-h-[1px]\",\n                \"cui-w-12\",\n                \"-cui-translate-y-[0.5px]\",\n                \"cui-translate-x-[11px]\",\n            ],\n            automatic: [\n                \"cui-top-1/2 md:cui-top-3\",\n                \"md:cui-left-1/2\",\n                \"cui-h-[1px] md:cui-h-12\",\n                \"cui-w-12 md:cui-w-[1px]\",\n                \"cui-translate-x-[11px] md:-cui-translate-x-[0.5px] md:cui-translate-x-0\",\n                \"-cui-translate-y-[0.5px]\",\n            ],\n        },\n        active: {\n            true: [\"cui-bg-orange\"],\n            false: [\"cui-bg-black\"],\n        },\n    },\n});\n\nconst labelStyles = mergedCva([], {\n    variants: {\n        layout: {\n            vertical: [],\n            horizontal: [\n                \"cui-text-center\",\n                \"cui-max-w-[100px]\",\n                \"cui-text-ellipsis\",\n                \"cui-overflow-hidden\",\n            ],\n            automatic: [\n                \"cui-text-center md:cui-text-left\",\n                \"cui-max-w-[100px] md:cui-max-w-full\",\n                \"cui-text-ellipsis\",\n                \"cui-overflow-hidden\",\n            ],\n        },\n        visible: {\n            true: [],\n            false: [],\n        },\n    },\n    compoundVariants: [\n        {\n            layout: \"horizontal\",\n            visible: false,\n            className: [\"cui-hidden\"],\n        },\n        {\n            layout: \"horizontal\",\n            visible: true,\n            className: [\"cui-flex\"],\n        },\n        {\n            layout: \"automatic\",\n            visible: false,\n            className: [\"cui-hidden md:cui-flex\"],\n        },\n        {\n            layout: \"automatic\",\n            visible: true,\n            className: [\"cui-flex\"],\n        },\n    ],\n});\n\ntype StepperLayout = \"vertical\" | \"horizontal\" | \"automatic\";\n\nexport interface StepperProps {\n    stepTitles: string[];\n    activeStep: number;\n    lastStepCompleted: number;\n    layout?: StepperLayout;\n    className?: {\n        root?: string;\n        step?: string;\n        stepLabel?: string;\n        square?: string;\n        line?: string;\n    };\n    onClick: (index: number) => void;\n}\n\nexport const Stepper = ({\n    stepTitles,\n    activeStep,\n    lastStepCompleted,\n    layout = \"automatic\",\n    className,\n    onClick,\n}: StepperProps): ReactElement => {\n    const handleStepClick = useCallback(\n        (clickedStep: number) => () => {\n            onClick(clickedStep);\n        },\n        [onClick],\n    );\n\n    return (\n        <div className={rootStyles({ layout, className: className?.root })}>\n            {stepTitles.map((title, index) => {\n                const currentStep = index === activeStep;\n                const squareActive = index <= activeStep;\n                const lineActive = index < activeStep;\n                const squareCompleted = index <= lastStepCompleted;\n\n                const handleOnClick =\n                    index <= lastStepCompleted\n                        ? handleStepClick(index)\n                        : undefined;\n\n                return (\n                    <div\n                        key={index}\n                        className={stepStyles({\n                            layout,\n                            clickable: !!onClick,\n                            className: className?.step,\n                        })}\n                        onClick={handleOnClick}\n                    >\n                        <div\n                            className={squareStyles({\n                                active: squareActive,\n                                completed: squareCompleted,\n                                className: className?.square,\n                            })}\n                        >\n                            {index < stepTitles.length - 1 && (\n                                <div\n                                    className={lineStyles({\n                                        layout,\n                                        active: lineActive,\n                                        className: className?.line,\n                                    })}\n                                />\n                            )}\n                        </div>\n                        <Typography\n                            weight={currentStep ? \"medium\" : undefined}\n                            className={{\n                                root: labelStyles({\n                                    layout,\n                                    visible: currentStep,\n                                    className: className?.stepLabel,\n                                }),\n                            }}\n                        >\n                            {title}\n                        </Typography>\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["mergedCva","useCallback","Typography"],"mappings":"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"}