{"version":3,"file":"Stepper.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Stepper.module.css\";\n\nexport interface StepItem {\n    label: ReactNode;\n    /** Secondary line under the label — a hint, or \"optional\". */\n    description?: ReactNode;\n}\n\nexport interface StepperProps {\n    steps: StepItem[];\n    /** Index of the currently active step (0-based). */\n    current: number;\n    orientation?: \"horizontal\" | \"vertical\";\n    /**\n     * Makes each step activatable. Without it the steps are a read-only\n     * indicator, which is the right default — in a gated flow, jumping ahead\n     * would skip the gates.\n     */\n    onStepClick?: (index: number) => void;\n    className?: string;\n}\n\n/**\n * Linear progress indicator for multi-step flows. Steps before `current`\n * render as completed; the step at `current` is active; later steps are\n * upcoming.\n */\nexport function Stepper({\n    steps,\n    current,\n    orientation = \"horizontal\",\n    onStepClick,\n    className,\n}: StepperProps) {\n    return (\n        <ol\n            className={cn(styles.stepper, orientation === \"vertical\" && styles.vertical, className)}\n        >\n            {steps.map((step, index) => {\n                const completed = index < current;\n                const active = index === current;\n                return (\n                    <Fragment key={index}>\n                        <li\n                            className={cn(\n                                styles.step,\n                                completed && styles.completed,\n                                active && styles.active,\n                            )}\n                            aria-current={active ? \"step\" : undefined}\n                        >\n                            {onStepClick ? (\n                                <button\n                                    type=\"button\"\n                                    className={styles.trigger}\n                                    aria-current={active ? \"step\" : undefined}\n                                    onClick={() => onStepClick(index)}\n                                >\n                                    <span className={styles.dot}>\n                                        {completed ? \"✓\" : index + 1}\n                                    </span>\n                                    <span className={styles.labelGroup}>\n                                        <span className={styles.label}>{step.label}</span>\n                                        {step.description ? (\n                                            <span className={styles.description}>\n                                                {step.description}\n                                            </span>\n                                        ) : null}\n                                    </span>\n                                </button>\n                            ) : (\n                                <>\n                                    <span className={styles.dot}>\n                                        {completed ? \"✓\" : index + 1}\n                                    </span>\n                                    <span className={styles.labelGroup}>\n                                        <span className={styles.label}>{step.label}</span>\n                                        {step.description ? (\n                                            <span className={styles.description}>\n                                                {step.description}\n                                            </span>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </li>\n                        {index < steps.length - 1 && (\n                            <span\n                                className={cn(styles.connector, completed && styles.completed)}\n                                aria-hidden\n                            />\n                        )}\n                    </Fragment>\n                );\n            })}\n        </ol>\n    );\n}\n"],"mappings":"8HA8BA,SAAgB,EAAQ,CACpB,QACA,UACA,cAAc,aACd,cACA,aACa,CACb,OACI,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,IAAgB,YAAc,EAAA,QAAO,SAAU,CAAS,EAErF,SAAA,EAAM,KAAK,EAAM,IAAU,CACxB,IAAM,EAAY,EAAQ,EACpB,EAAS,IAAU,EACzB,OACI,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,KACP,GAAa,EAAA,QAAO,UACpB,GAAU,EAAA,QAAO,MACrB,EACA,eAAc,EAAS,OAAS,IAAA,GAE/B,SAAA,GACG,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,eAAc,EAAS,OAAS,IAAA,GAChC,YAAe,EAAY,CAAK,EAJpC,SAAA,EAMI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,IACnB,SAAA,EAAY,IAAM,EAAQ,CACzB,CAAA,GACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,WAAxB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAK,KAAY,CAAA,EAChD,EAAK,aACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,YACnB,SAAA,EAAK,WACJ,CAAA,EACN,IACF,CACF,CAAA,CAAA,CAER,CAAA,GAAA,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,IACnB,SAAA,EAAY,IAAM,EAAQ,CACzB,CAAA,GACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,WAAxB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAK,KAAY,CAAA,EAChD,EAAK,aACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,YACnB,SAAA,EAAK,WACJ,CAAA,EACN,IACF,CACR,CAAA,CAAA,CAAA,CAAA,CAEN,CAAA,EACH,EAAQ,EAAM,OAAS,IACpB,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,UAAW,GAAa,EAAA,QAAO,SAAS,EAC7D,cAAA,EACH,CAAA,CAEC,CAAA,EAlDK,CAkDL,CAElB,CAAC,CACD,CAAA,CAEZ"}