flikkui 0.1.0-beta.9 → 0.2.0-beta.1

package/dist/components/forms/Slider/Slider.js

@@ -0,0 +1,246 @@
+import React__default, { useRef, useState, useCallback } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { sliderTheme } from './Slider.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const Slider = React__default.forwardRef(({ state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", min = 0, max = 100, step = 1, value, defaultValue, onChange, onChangeCommitted, showValue = false, unit = "", showMinMax = false, showTicks = false, tickStep, range = false, iconStart, iconEnd, theme = {}, required = false, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const trackRef = useRef(null);
+    const sliderId = id || `slider-${Math.random().toString(36).substring(2, 9)}`;
+    const helperTextId = helperText ? `${sliderId}-helper` : undefined;
+    // Handle controlled/uncontrolled value
+    const [internalValue, setInternalValue] = useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : (range ? [min, min] : min));
+    const currentValue = value !== null && value !== void 0 ? value : internalValue;
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    // Get values as array for consistent handling
+    const values = Array.isArray(currentValue) ? currentValue : [currentValue];
+    const [dragIndex, setDragIndex] = useState(null);
+    // Calculate percentage for positioning
+    const getPercentage = useCallback((val) => {
+        return ((val - min) / (max - min)) * 100;
+    }, [min, max]);
+    // Get value from mouse/touch position
+    const getValueFromPosition = useCallback((clientX) => {
+        if (!trackRef.current)
+            return min;
+        const rect = trackRef.current.getBoundingClientRect();
+        const percentage = ((clientX - rect.left) / rect.width) * 100;
+        const clampedPercentage = Math.max(0, Math.min(100, percentage));
+        const rawValue = min + (clampedPercentage / 100) * (max - min);
+        // Round to nearest step
+        const steppedValue = Math.round(rawValue / step) * step;
+        return Math.max(min, Math.min(max, steppedValue));
+    }, [min, max, step]);
+    // Handle value change
+    const handleValueChange = useCallback((newValue) => {
+        if (isDisabled)
+            return;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }, [value, onChange, isDisabled]);
+    // Handle pointer down on thumb
+    const handlePointerDown = useCallback((e, thumbIndex) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        setDragIndex(thumbIndex);
+        const handleMove = (moveEvent) => {
+            const newValue = getValueFromPosition(moveEvent.clientX);
+            if (range) {
+                const newValues = [...values];
+                newValues[thumbIndex] = newValue;
+                // Ensure values don't cross over
+                if (thumbIndex === 0 && newValue > newValues[1]) {
+                    newValues[0] = newValues[1];
+                }
+                else if (thumbIndex === 1 && newValue < newValues[0]) {
+                    newValues[1] = newValues[0];
+                }
+                handleValueChange(newValues);
+            }
+            else {
+                handleValueChange(newValue);
+            }
+        };
+        const handleEnd = () => {
+            setDragIndex(null);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(currentValue);
+            document.removeEventListener("pointermove", handleMove);
+            document.removeEventListener("pointerup", handleEnd);
+        };
+        document.addEventListener("pointermove", handleMove);
+        document.addEventListener("pointerup", handleEnd);
+    }, [
+        isDisabled,
+        range,
+        values,
+        getValueFromPosition,
+        handleValueChange,
+        onChangeCommitted,
+        currentValue,
+    ]);
+    // Handle track click
+    const handleTrackClick = useCallback((e) => {
+        if (isDisabled || dragIndex !== null)
+            return;
+        const newValue = getValueFromPosition(e.clientX);
+        if (range) {
+            // Find closest thumb
+            const distances = values.map((val) => Math.abs(val - newValue));
+            const closestIndex = distances[0] <= distances[1] ? 0 : 1;
+            const newValues = [...values];
+            newValues[closestIndex] = newValue;
+            // Ensure values don't cross over
+            if (closestIndex === 0 && newValue > newValues[1]) {
+                newValues[0] = newValues[1];
+            }
+            else if (closestIndex === 1 && newValue < newValues[0]) {
+                newValues[1] = newValues[0];
+            }
+            handleValueChange(newValues);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValues);
+        }
+        else {
+            handleValueChange(newValue);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValue);
+        }
+    }, [
+        isDisabled,
+        dragIndex,
+        range,
+        values,
+        getValueFromPosition,
+        handleValueChange,
+        onChangeCommitted,
+    ]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e, thumbIndex) => {
+        if (isDisabled)
+            return;
+        let delta = 0;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                delta = step;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                delta = -step;
+                break;
+            case "PageUp":
+                delta = step * 10;
+                break;
+            case "PageDown":
+                delta = -step * 10;
+                break;
+            case "Home":
+                delta = min - values[thumbIndex];
+                break;
+            case "End":
+                delta = max - values[thumbIndex];
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (range) {
+            const newValues = [...values];
+            newValues[thumbIndex] = Math.max(min, Math.min(max, newValues[thumbIndex] + delta));
+            // Ensure values don't cross over
+            if (thumbIndex === 0 && newValues[0] > newValues[1]) {
+                newValues[0] = newValues[1];
+            }
+            else if (thumbIndex === 1 && newValues[1] < newValues[0]) {
+                newValues[1] = newValues[0];
+            }
+            handleValueChange(newValues);
+        }
+        else {
+            const newValue = Math.max(min, Math.min(max, values[0] + delta));
+            handleValueChange(newValue);
+        }
+    }, [isDisabled, step, min, max, range, values, handleValueChange]);
+    // Generate tick marks
+    const generateTicks = useCallback(() => {
+        if (!showTicks)
+            return [];
+        const actualTickStep = tickStep !== null && tickStep !== void 0 ? tickStep : step;
+        const ticks = [];
+        for (let i = min; i <= max; i += actualTickStep) {
+            ticks.push(i);
+        }
+        return ticks;
+    }, [showTicks, tickStep, step, min, max]);
+    const ticks = generateTicks();
+    // Merged theme
+    const mergedTheme = {
+        wrapperStyle: (_b = theme.wrapperStyle) !== null && _b !== void 0 ? _b : sliderTheme.wrapperStyle,
+        labelStyle: (_c = theme.labelStyle) !== null && _c !== void 0 ? _c : sliderTheme.labelStyle,
+        helperTextStyle: (_d = theme.helperTextStyle) !== null && _d !== void 0 ? _d : sliderTheme.helperTextStyle,
+        rootStyle: (_e = theme.rootStyle) !== null && _e !== void 0 ? _e : sliderTheme.rootStyle,
+        trackStyle: (_f = theme.trackStyle) !== null && _f !== void 0 ? _f : sliderTheme.trackStyle,
+        rangeStyle: (_g = theme.rangeStyle) !== null && _g !== void 0 ? _g : sliderTheme.rangeStyle,
+        thumbStyle: (_h = theme.thumbStyle) !== null && _h !== void 0 ? _h : sliderTheme.thumbStyle,
+        valueDisplayStyle: (_j = theme.valueDisplayStyle) !== null && _j !== void 0 ? _j : sliderTheme.valueDisplayStyle,
+        minMaxLabelStyle: (_k = theme.minMaxLabelStyle) !== null && _k !== void 0 ? _k : sliderTheme.minMaxLabelStyle,
+        tickStyle: (_l = theme.tickStyle) !== null && _l !== void 0 ? _l : sliderTheme.tickStyle,
+    };
+    // Calculate filled track dimensions
+    const getFilledTrackStyle = () => {
+        if (range) {
+            const start = getPercentage(Math.min(...values));
+            const end = getPercentage(Math.max(...values));
+            return {
+                left: `${start}%`,
+                width: `${end - start}%`,
+            };
+        }
+        const percentage = getPercentage(values[0]);
+        return {
+            left: 0,
+            width: `${percentage}%`,
+        };
+    };
+    // Format value display
+    const formatValueDisplay = () => {
+        if (Array.isArray(currentValue)) {
+            return `${currentValue[0]}${unit} - ${currentValue[1]}${unit}`;
+        }
+        return `${currentValue}${unit}`;
+    };
+    return (React__default.createElement("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props },
+        label && (React__default.createElement(FormLabel, { htmlFor: sliderId, required: required, className: cn(mergedTheme.labelStyle, labelClassName) }, label)),
+        React__default.createElement("div", { className: "flex items-center gap-4" },
+            iconStart && (React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconStart)),
+            showMinMax && (React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, min)),
+            React__default.createElement("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal" },
+                React__default.createElement("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation" },
+                    React__default.createElement("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }),
+                    showTicks &&
+                        ticks.map((tick) => {
+                            const percentage = getPercentage(tick);
+                            return (React__default.createElement("div", { key: tick, className: mergedTheme.tickStyle, style: { left: `${percentage}%` } }));
+                        })),
+                values.map((val, index) => {
+                    const percentage = getPercentage(val);
+                    return (React__default.createElement("div", { key: index, className: cn(mergedTheme.thumbStyle, "outline-[1px] outline-white/50 ring-0 shadow-none p-0 overflow-visible"), style: {
+                            left: `${percentage}%`,
+                            transform: "translate(-50%, -50%)",
+                            position: "absolute",
+                            top: "50%",
+                        }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined }));
+                }),
+                name && (React__default.createElement("input", { type: "hidden", name: name, value: Array.isArray(currentValue)
+                        ? currentValue.join(",")
+                        : currentValue }))),
+            showMinMax && (React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, max)),
+            showValue && (React__default.createElement("div", { className: cn(mergedTheme.valueDisplayStyle) }, formatValueDisplay())),
+            iconEnd && (React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconEnd))),
+        helperText && (React__default.createElement("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName) }, helperText))));
+});
+Slider.displayName = "Slider";
+
+export { Slider };

package/dist/components/forms/Slider/Slider.theme.d.ts

@@ -1,7 +1,17 @@
-import { SliderThemeOverrides } from "./Slider.types";
 /**
  * Default theme for the Slider component
- * Extends the common forms base theme
+ * Uses flat structure with data-attribute selectors following shadcn pattern
  */
-export declare const sliderTheme: SliderThemeOverrides;
-export default sliderTheme;
+export interface SliderTheme {
+    wrapperStyle: string;
+    labelStyle: string;
+    helperTextStyle: string;
+    rootStyle: string;
+    trackStyle: string;
+    rangeStyle: string;
+    thumbStyle: string;
+    valueDisplayStyle: string;
+    minMaxLabelStyle: string;
+    tickStyle: string;
+}
+export declare const sliderTheme: SliderTheme;

package/dist/components/forms/Slider/Slider.theme.js

@@ -0,0 +1,26 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+const sliderTheme = {
+    // Wrapper styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Label styles
+    labelStyle: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
+    // Helper text styles
+    helperTextStyle: formsBaseTheme.helperText,
+    // Root container with layout
+    rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
+    // Track (background)
+    trackStyle: "relative w-full h-2 grow rounded-full bg-neutral-200 overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full",
+    // Range (filled portion) - rounded to match track clipping
+    rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
+    // Thumb (draggable handle)
+    thumbStyle: "block h-5 w-8 rounded-full border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)] glass-effect-5",
+    // Value display
+    valueDisplayStyle: "text-sm font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
+    // Min/max labels
+    minMaxLabelStyle: "text-sm font-medium text-[var(--color-text-muted)]",
+    // Tick marks
+    tickStyle: "absolute w-0.5 h-2 bg-white/60 -translate-x-0.5 pointer-events-none",
+};
+
+export { sliderTheme };

package/dist/components/forms/Slider/Slider.types.d.ts

@@ -18,13 +18,11 @@ import React from 'react';
  * @property {boolean} showTicks - Whether to show tick marks
  * @property {number} tickStep - Step for tick marks (defaults to step)
  * @property {boolean} range - Whether this is a range slider (dual thumbs)
- * @property {React.ReactNode} leftIcon - Icon to display on the left side of the slider
- * @property {React.ReactNode} rightIcon - Icon to display on the right side of the slider
+ * @property {React.ReactNode} iconStart - Icon to display at the start of the slider
+ * @property {React.ReactNode} iconEnd - Icon to display at the end of the slider
  * @property {boolean} required - Whether the slider is required
  */
 export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
-    /** The size of the slider */
-    size?: SliderSize;
     /** The state of the slider (default, disabled, invalid) */
     state?: SliderState;
     /** Optional label text for the slider */
@@ -57,10 +55,10 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     tickStep?: number;
     /** Whether this is a range slider (dual thumbs) */
     range?: boolean;
-    /** Icon to display on the left side of the slider */
-    leftIcon?: React.ReactNode;
-    /** Icon to display on the right side of the slider */
-    rightIcon?: React.ReactNode;
+    /** Icon to display at the start of the slider */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end of the slider */
+    iconEnd?: React.ReactNode;
     /** Additional class name for the slider */
     className?: string;
     /** Additional class name for the label */
@@ -82,50 +80,30 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     /** ARIA describedby for accessibility */
     'aria-describedby'?: string;
 }
-export type SliderSize = 'sm' | 'md' | 'lg';
 export type SliderState = 'default' | 'disabled' | 'invalid';
 /**
  * Theme overrides for the Slider component
+ * Simplified flat structure following shadcn pattern
  */
 export interface SliderThemeOverrides {
     /** Style for the outermost wrapper */
     wrapperStyle?: string;
-    /** Style for the slider container */
-    containerStyle?: string;
-    /** Base style for the slider track */
-    trackStyle?: string;
-    /** Style for the filled portion of the track */
-    filledTrackStyle?: string;
-    /** Base style for the slider thumb */
-    thumbStyle?: string;
-    /** Size variants for the slider */
-    sizes?: Partial<Record<SliderSize, {
-        track?: string;
-        thumb?: string;
-        container?: string;
-    }>>;
-    /** State variants for the slider */
-    states?: Partial<Record<SliderState, {
-        track?: string;
-        filledTrack?: string;
-        thumb?: string;
-    }>>;
     /** Style for the label */
     labelStyle?: string;
     /** Style for the helper text */
     helperTextStyle?: string;
+    /** Style for the root slider container */
+    rootStyle?: string;
+    /** Style for the slider track (background) */
+    trackStyle?: string;
+    /** Style for the range (filled portion) */
+    rangeStyle?: string;
+    /** Base style for the slider thumb */
+    thumbStyle?: string;
     /** Style for the value display */
-    valueStyle?: string;
+    valueDisplayStyle?: string;
     /** Style for min/max labels */
     minMaxLabelStyle?: string;
     /** Style for tick marks */
     tickStyle?: string;
-    /** Style for tick labels */
-    tickLabelStyle?: string;
-    /** Style for the value input */
-    valueInputStyle?: string;
-    /** Style for the left icon container */
-    leftIconStyle?: string;
-    /** Style for the right icon container */
-    rightIconStyle?: string;
 }

package/dist/components/forms/Slider/index.d.ts

@@ -1,3 +1,3 @@
 export { Slider } from "./Slider";
-export type { SliderProps, SliderSize, SliderState, SliderThemeOverrides } from "./Slider.types";
+export type { SliderProps, SliderState, SliderThemeOverrides } from "./Slider.types";
 export { sliderTheme } from "./Slider.theme";

package/dist/components/forms/StepperForm/StepperForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { StepperFormRootProps, StepperFormStepProps, StepperFormIndicatorProps, StepperFormNavigationProps } from "./StepperForm.types";
+export declare const StepperForm: (<TData extends Record<string, any>>({ config, children, initialData, onTransition, onComplete, className, }: StepperFormRootProps<TData>) => React.JSX.Element) & {
+    Step: React.FC<StepperFormStepProps>;
+    Indicator: React.FC<StepperFormIndicatorProps>;
+    Navigation: React.FC<StepperFormNavigationProps>;
+};

package/dist/components/forms/StepperForm/StepperForm.js

@@ -0,0 +1,96 @@
+import React__default, { useState, useCallback, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { validateStep } from '../../../utils/formValidation.js';
+import { useFormStateMachine } from '../../../hooks/useFormStateMachine.js';
+import { Button } from '../../core/Button/Button.js';
+import { StepperFormContext, useStepperFormContext } from './StepperForm.types.js';
+import { stepperFormTheme } from './StepperForm.theme.js';
+import { ChevronLeftIcon, ChevronRightIcon, CheckIcon } from '@heroicons/react/24/outline';
+
+/**
+ * StepperForm.Root - Context provider and main state manager
+ */
+const Root = ({ config, children, initialData, onTransition, onComplete, className, }) => {
+    const [errors, setErrors] = useState(undefined);
+    const stateMachine = useFormStateMachine(config, {
+        initialData,
+        onTransition,
+        onComplete,
+    });
+    const [isValidating, setIsValidating] = useState(false);
+    const handleNext = useCallback(async () => {
+        var _a;
+        setIsValidating(true);
+        const result = await validateStep(config, stateMachine.currentStep, stateMachine.data);
+        setIsValidating(false);
+        if (result.success) {
+            setErrors(undefined);
+            stateMachine.next();
+        }
+        else {
+            setErrors({ current: ((_a = result.errors) === null || _a === void 0 ? void 0 : _a[0]) || "Validation failed" });
+        }
+    }, [config, stateMachine]);
+    const value = useMemo(() => ({
+        ...stateMachine,
+        config,
+        isValid: !errors,
+        errors,
+        next: handleNext,
+        isValidating,
+    }), [stateMachine, config, errors, handleNext, isValidating]);
+    return (React__default.createElement(StepperFormContext.Provider, { value: value },
+        React__default.createElement("div", { className: cn(stepperFormTheme.root, className) }, children)));
+};
+/**
+ * StepperForm.Step - Individual step wrapper
+ */
+const Step = ({ name, children, className, }) => {
+    const { currentStep, data } = useStepperFormContext();
+    const isActive = currentStep === name;
+    if (!isActive)
+        return null;
+    return (React__default.createElement(motion.div, { initial: { opacity: 0, x: 10 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -10 }, className: cn(stepperFormTheme.step, className) }, typeof children === "function" ? children({ isActive, data }) : children));
+};
+/**
+ * StepperForm.Indicator - Visual progress display
+ */
+const Indicator = ({ variant = "dots", className, }) => {
+    const { currentStep, config, progress } = useStepperFormContext();
+    const theme = stepperFormTheme.indicator;
+    const steps = Object.keys(config.states);
+    const currentIndex = steps.indexOf(currentStep);
+    return (React__default.createElement("div", { className: cn(theme.container, className) },
+        variant === "dots" && (React__default.createElement("div", { className: "flex gap-2 w-full justify-center" }, steps.map((step, i) => {
+            const isCompleted = i < currentIndex;
+            const isActive = i === currentIndex;
+            return (React__default.createElement("div", { key: step, className: cn(theme.dot, isActive && theme.dotActive, isCompleted && theme.dotCompleted) }));
+        }))),
+        variant === "percentage" && (React__default.createElement("div", { className: "w-full bg-[var(--color-background-tertiary)] rounded-full h-1 overflow-hidden" },
+            React__default.createElement(motion.div, { className: theme.progressBar, initial: { width: 0 }, animate: { width: `${progress * 100}%` } })))));
+};
+/**
+ * StepperForm.Navigation - Back/Next buttons
+ */
+const Navigation = ({ nextLabel = "Next", backLabel = "Back", submitLabel = "Complete", className, }) => {
+    const { next, previous, canGoBack, currentStep, config, isValidating } = useStepperFormContext();
+    const theme = stepperFormTheme.navigation;
+    const steps = Object.keys(config.states);
+    const isLastStep = steps.indexOf(currentStep) === steps.length - 1;
+    return (React__default.createElement("div", { className: cn(theme.container, className) },
+        canGoBack && (React__default.createElement(Button, { variant: "ghost", onClick: previous, className: theme.backBtn },
+            React__default.createElement(ChevronLeftIcon, { className: "size-4 mr-2" }),
+            backLabel)),
+        React__default.createElement(Button, { onClick: next, className: theme.nextBtn, state: isValidating ? "loading" : "default", color: isLastStep ? "success" : "primary" },
+            isLastStep ? submitLabel : nextLabel,
+            !isLastStep && React__default.createElement(ChevronRightIcon, { className: "size-4 ml-2" }),
+            isLastStep && React__default.createElement(CheckIcon, { className: "size-4 ml-2" }))));
+};
+const StepperForm = Object.assign(Root, {
+    Step,
+    Indicator,
+    Navigation,
+});
+
+export { StepperForm };

package/dist/components/forms/StepperForm/StepperForm.theme.d.ts

@@ -0,0 +1,2 @@
+import { StepperFormTheme } from "./StepperForm.types";
+export declare const stepperFormTheme: StepperFormTheme;

package/dist/components/forms/StepperForm/StepperForm.theme.js

@@ -0,0 +1,19 @@
+const stepperFormTheme = {
+    root: "w-full space-y-8",
+    step: "w-full",
+    indicator: {
+        container: "flex items-center justify-between w-full mb-8",
+        dot: "size-3 rounded-full bg-[var(--color-background-tertiary)] transition-all duration-300",
+        dotActive: "size-4 bg-[var(--color-primary)] ring-4 ring-[var(--color-primary-50)]",
+        dotCompleted: "bg-[var(--color-success)]",
+        label: "text-xs font-medium text-[var(--color-text-secondary)] mt-2",
+        progressBar: "h-1 bg-[var(--color-primary)] transition-all duration-500",
+    },
+    navigation: {
+        container: "flex items-center justify-between mt-8 pt-4 border-t border-[var(--color-border)]",
+        nextBtn: "ml-auto",
+        backBtn: "mr-auto",
+    },
+};
+
+export { stepperFormTheme };

package/dist/components/forms/StepperForm/StepperForm.types.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactNode } from "react";
+import { StateIdentifier } from "../../../utils/stateMachine";
+import { ValidatedStateMachineConfig } from "../../../utils/formValidation";
+import { FormStateMachineResult } from "../../../hooks/useFormStateMachine";
+/**
+ * Context for StepperForm compound components
+ */
+export interface StepperFormContextValue<TData = any> extends FormStateMachineResult<TData> {
+    config: ValidatedStateMachineConfig<TData>;
+    /** Whether the current step is valid */
+    isValid: boolean;
+    /** Whether validation is currently in progress */
+    isValidating: boolean;
+    /** Errors for the current step */
+    errors?: Record<string, string>;
+}
+export declare const StepperFormContext: React.Context<StepperFormContextValue<any> | undefined>;
+export declare function useStepperFormContext(): StepperFormContextValue<any>;
+export interface StepperFormRootProps<TData> {
+    config: ValidatedStateMachineConfig<TData>;
+    children: ReactNode;
+    initialData?: TData;
+    onTransition?: (state: StateIdentifier, data: TData) => void;
+    onComplete?: (data: TData) => void;
+    className?: string;
+}
+export interface StepperFormStepProps {
+    /** Name matching a state in the config */
+    name: StateIdentifier;
+    children: ReactNode | ((props: {
+        isActive: boolean;
+        data: any;
+    }) => ReactNode);
+    className?: string;
+}
+export interface StepperFormIndicatorProps {
+    variant?: "dots" | "labels" | "percentage";
+    className?: string;
+}
+export interface StepperFormNavigationProps {
+    /** Custom label for 'Next' button */
+    nextLabel?: string;
+    /** Custom label for 'Back' button */
+    backLabel?: string;
+    /** Custom label for final submission */
+    submitLabel?: string;
+    className?: string;
+}
+export interface StepperFormTheme {
+    root?: string;
+    step?: string;
+    indicator?: {
+        container?: string;
+        dot?: string;
+        dotActive?: string;
+        dotCompleted?: string;
+        label?: string;
+        progressBar?: string;
+    };
+    navigation?: {
+        container?: string;
+        nextBtn?: string;
+        backBtn?: string;
+    };
+}

package/dist/components/forms/StepperForm/StepperForm.types.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const StepperFormContext = createContext(undefined);
+function useStepperFormContext() {
+    const context = useContext(StepperFormContext);
+    if (!context) {
+        throw new Error("StepperForm components must be used within a StepperForm.Root");
+    }
+    return context;
+}
+
+export { StepperFormContext, useStepperFormContext };

package/dist/components/forms/StepperForm/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./StepperForm";
+export * from "./StepperForm.types";
+export * from "./StepperForm.theme";

package/dist/components/forms/Switch/Switch.d.ts

@@ -4,4 +4,3 @@ import { SwitchProps } from "./Switch.types";
  * Switch component for toggling between two states
  */
 export declare const Switch: React.FC<SwitchProps>;
-export default Switch;