@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Form.stories.js

@@ -0,0 +1,908 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Form from "../components/Form.js";
+import Stack from "../components/Stack.js";
+import TextField from "../components/TextField.js";
+import Button from "../components/Button.js";
+import Card from "../components/Card.js";
+import Text from "../components/Text.js";
+import Checkbox from "../components/Checkbox.js";
+import Select from "../components/Select.js";
+import RadioButton from "../components/RadioButton.js";
+import Box from "../components/Box.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/Form',
+    component: Form,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Form component that provides semantic structure and behavior for collecting user input. Forms handle submission, validation, and provide accessible markup for form controls."
+            }
+        }
+    },
+    args: {
+        onSubmit: function(event) {
+            event.preventDefault();
+            console.log('Form submitted');
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        onSubmit: {
+            action: 'submitted',
+            description: 'Callback when form is submitted'
+        },
+        acceptCharset: {
+            control: 'text',
+            description: 'Character encodings that the server accepts'
+        },
+        action: {
+            control: 'text',
+            description: 'URL to submit form data to'
+        },
+        autoComplete: {
+            control: 'select',
+            options: [
+                'on',
+                'off'
+            ],
+            description: 'Whether form should have autocomplete enabled'
+        },
+        encType: {
+            control: 'select',
+            options: [
+                'application/x-www-form-urlencoded',
+                'multipart/form-data',
+                'text/plain'
+            ],
+            description: 'Encoding type for form data'
+        },
+        method: {
+            control: 'select',
+            options: [
+                'get',
+                'post'
+            ],
+            description: 'HTTP method for form submission'
+        },
+        name: {
+            control: 'text',
+            description: 'Name of the form'
+        },
+        noValidate: {
+            control: 'boolean',
+            description: 'Whether to disable browser validation'
+        },
+        target: {
+            control: 'select',
+            options: [
+                '_self',
+                '_blank',
+                '_parent',
+                '_top'
+            ],
+            description: 'Where to display form response'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(Form, _object_spread_props(_object_spread({}, args), {
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Name",
+                        placeholder: "Enter your name"
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Email",
+                        type: "email",
+                        placeholder: "Enter your email"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        primary: true,
+                        submit: true,
+                        children: "Submit"
+                    })
+                ]
+            })
+        }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var LoginForm = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(''), 2), email = _useState[0], setEmail = _useState[1];
+        var _useState1 = _sliced_to_array(useState(''), 2), password = _useState1[0], setPassword = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(false), 2), rememberMe = _useState2[0], setRememberMe = _useState2[1];
+        var handleSubmit = function(event) {
+            event.preventDefault();
+            console.log('Login submitted:', {
+                email: email,
+                password: password,
+                rememberMe: rememberMe
+            });
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Sign In",
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Form, {
+                onSubmit: handleSubmit,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "md",
+                    children: [
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Email",
+                            type: "email",
+                            value: email,
+                            onChange: setEmail,
+                            placeholder: "Enter your email",
+                            autoComplete: "email",
+                            required: true
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Password",
+                            type: "password",
+                            value: password,
+                            onChange: setPassword,
+                            placeholder: "Enter your password",
+                            autoComplete: "current-password",
+                            required: true
+                        }),
+                        /*#__PURE__*/ _jsx(Checkbox, {
+                            label: "Remember me",
+                            checked: rememberMe,
+                            onChange: setRememberMe
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    submit: true,
+                                    children: "Sign In"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    children: "Forgot Password?"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A complete login form with email, password, and remember me option.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ContactForm = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            name: '',
+            email: '',
+            subject: '',
+            message: '',
+            priority: 'medium',
+            subscribe: false
+        }), 2), formData = _useState[0], setFormData = _useState[1];
+        var handleSubmit = function(event) {
+            event.preventDefault();
+            console.log('Contact form submitted:', formData);
+        };
+        var updateField = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Contact Us",
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Form, {
+                onSubmit: handleSubmit,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "md",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Name",
+                                    value: formData.name,
+                                    onChange: function(value) {
+                                        return updateField('name', value);
+                                    },
+                                    placeholder: "Your full name",
+                                    required: true
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Email",
+                                    type: "email",
+                                    value: formData.email,
+                                    onChange: function(value) {
+                                        return updateField('email', value);
+                                    },
+                                    placeholder: "your@email.com",
+                                    required: true
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Select, {
+                            label: "Subject",
+                            options: [
+                                {
+                                    label: 'General Inquiry',
+                                    value: 'general'
+                                },
+                                {
+                                    label: 'Technical Support',
+                                    value: 'support'
+                                },
+                                {
+                                    label: 'Sales Question',
+                                    value: 'sales'
+                                },
+                                {
+                                    label: 'Feature Request',
+                                    value: 'feature'
+                                },
+                                {
+                                    label: 'Bug Report',
+                                    value: 'bug'
+                                }
+                            ],
+                            value: formData.subject,
+                            onChange: function(value) {
+                                return updateField('subject', value);
+                            },
+                            placeholder: "Select a subject"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    children: "Priority"
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    horizontal: true,
+                                    gap: "md",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(RadioButton, {
+                                            label: "Low",
+                                            name: "priority",
+                                            value: "low",
+                                            checked: formData.priority === 'low',
+                                            onChange: function(checked) {
+                                                return checked && updateField('priority', 'low');
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(RadioButton, {
+                                            label: "Medium",
+                                            name: "priority",
+                                            value: "medium",
+                                            checked: formData.priority === 'medium',
+                                            onChange: function(checked) {
+                                                return checked && updateField('priority', 'medium');
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(RadioButton, {
+                                            label: "High",
+                                            name: "priority",
+                                            value: "high",
+                                            checked: formData.priority === 'high',
+                                            onChange: function(checked) {
+                                                return checked && updateField('priority', 'high');
+                                            }
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Message",
+                            multiline: 4,
+                            value: formData.message,
+                            onChange: function(value) {
+                                return updateField('message', value);
+                            },
+                            placeholder: "Tell us how we can help...",
+                            required: true
+                        }),
+                        /*#__PURE__*/ _jsx(Checkbox, {
+                            label: "Subscribe to our newsletter",
+                            checked: formData.subscribe,
+                            onChange: function(checked) {
+                                return updateField('subscribe', checked);
+                            }
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    submit: true,
+                                    children: "Send Message"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    onClick: function() {
+                                        return setFormData({
+                                            name: '',
+                                            email: '',
+                                            subject: '',
+                                            message: '',
+                                            priority: 'medium',
+                                            subscribe: false
+                                        });
+                                    },
+                                    children: "Clear Form"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A comprehensive contact form with various input types and validation.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ValidationExample = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            username: '',
+            email: '',
+            password: '',
+            confirmPassword: ''
+        }), 2), formData = _useState[0], setFormData = _useState[1];
+        var _useState1 = _sliced_to_array(useState({}), 2), errors = _useState1[0], setErrors = _useState1[1];
+        var validateForm = function() {
+            var newErrors = {};
+            if (!formData.username) {
+                newErrors.username = 'Username is required';
+            } else if (formData.username.length < 3) {
+                newErrors.username = 'Username must be at least 3 characters';
+            }
+            if (!formData.email) {
+                newErrors.email = 'Email is required';
+            } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+                newErrors.email = 'Please enter a valid email';
+            }
+            if (!formData.password) {
+                newErrors.password = 'Password is required';
+            } else if (formData.password.length < 6) {
+                newErrors.password = 'Password must be at least 6 characters';
+            }
+            if (formData.password !== formData.confirmPassword) {
+                newErrors.confirmPassword = 'Passwords do not match';
+            }
+            return newErrors;
+        };
+        var handleSubmit = function(event) {
+            event.preventDefault();
+            var validationErrors = validateForm();
+            setErrors(validationErrors);
+            if (Object.keys(validationErrors).length === 0) {
+                console.log('Registration successful:', formData);
+            }
+        };
+        var updateField = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+            if (errors[field]) {
+                setErrors(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), _define_property({}, field, ''));
+                });
+            }
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Create Account",
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Form, {
+                onSubmit: handleSubmit,
+                noValidate: true,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "md",
+                    children: [
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Username",
+                            value: formData.username,
+                            onChange: function(value) {
+                                return updateField('username', value);
+                            },
+                            error: errors.username,
+                            placeholder: "Choose a username",
+                            autoComplete: "username"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Email",
+                            type: "email",
+                            value: formData.email,
+                            onChange: function(value) {
+                                return updateField('email', value);
+                            },
+                            error: errors.email,
+                            placeholder: "Enter your email",
+                            autoComplete: "email"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Password",
+                            type: "password",
+                            value: formData.password,
+                            onChange: function(value) {
+                                return updateField('password', value);
+                            },
+                            error: errors.password,
+                            placeholder: "Create a password",
+                            autoComplete: "new-password",
+                            helpText: "Must be at least 6 characters"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Confirm Password",
+                            type: "password",
+                            value: formData.confirmPassword,
+                            onChange: function(value) {
+                                return updateField('confirmPassword', value);
+                            },
+                            error: errors.confirmPassword,
+                            placeholder: "Confirm your password",
+                            autoComplete: "new-password"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            primary: true,
+                            submit: true,
+                            children: "Create Account"
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Form with client-side validation and error handling.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var MultiStepForm = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(0), 2), currentStep = _useState[0], setCurrentStep = _useState[1];
+        var _useState1 = _sliced_to_array(useState({
+            // Step 1: Personal Info
+            firstName: '',
+            lastName: '',
+            email: '',
+            phone: '',
+            // Step 2: Address
+            address: '',
+            city: '',
+            state: '',
+            zipCode: '',
+            // Step 3: Preferences
+            notifications: 'email',
+            newsletter: false
+        }), 2), formData = _useState1[0], setFormData = _useState1[1];
+        var steps = [
+            'Personal Info',
+            'Address',
+            'Preferences'
+        ];
+        var handleNext = function() {
+            if (currentStep < steps.length - 1) {
+                setCurrentStep(currentStep + 1);
+            }
+        };
+        var handlePrevious = function() {
+            if (currentStep > 0) {
+                setCurrentStep(currentStep - 1);
+            }
+        };
+        var handleSubmit = function(event) {
+            event.preventDefault();
+            console.log('Multi-step form completed:', formData);
+        };
+        var updateField = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+        };
+        var renderStep = function() {
+            switch(currentStep){
+                case 0:
+                    return /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '1rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'grid',
+                                    gridTemplateColumns: '1fr 1fr',
+                                    gap: '1rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "First Name",
+                                        value: formData.firstName,
+                                        onChange: function(value) {
+                                            return updateField('firstName', value);
+                                        },
+                                        placeholder: "Your first name"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Last Name",
+                                        value: formData.lastName,
+                                        onChange: function(value) {
+                                            return updateField('lastName', value);
+                                        },
+                                        placeholder: "Your last name"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Email",
+                                type: "email",
+                                value: formData.email,
+                                onChange: function(value) {
+                                    return updateField('email', value);
+                                },
+                                placeholder: "your@email.com"
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Phone",
+                                type: "tel",
+                                value: formData.phone,
+                                onChange: function(value) {
+                                    return updateField('phone', value);
+                                },
+                                placeholder: "(555) 123-4567"
+                            })
+                        ]
+                    });
+                case 1:
+                    return /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '1rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Street Address",
+                                value: formData.address,
+                                onChange: function(value) {
+                                    return updateField('address', value);
+                                },
+                                placeholder: "123 Main Street"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'grid',
+                                    gridTemplateColumns: '1fr 1fr 1fr',
+                                    gap: '1rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "City",
+                                        value: formData.city,
+                                        onChange: function(value) {
+                                            return updateField('city', value);
+                                        },
+                                        placeholder: "City"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "State",
+                                        value: formData.state,
+                                        onChange: function(value) {
+                                            return updateField('state', value);
+                                        },
+                                        placeholder: "State"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "ZIP Code",
+                                        value: formData.zipCode,
+                                        onChange: function(value) {
+                                            return updateField('zipCode', value);
+                                        },
+                                        placeholder: "12345"
+                                    })
+                                ]
+                            })
+                        ]
+                    });
+                case 2:
+                    return /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '1.5rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        style: {
+                                            marginBottom: '1rem'
+                                        },
+                                        children: "Notification Preferences"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: '0.75rem'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(RadioButton, {
+                                                label: "Email notifications",
+                                                name: "notifications",
+                                                value: "email",
+                                                checked: formData.notifications === 'email',
+                                                onChange: function(checked) {
+                                                    return checked && updateField('notifications', 'email');
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx(RadioButton, {
+                                                label: "SMS notifications",
+                                                name: "notifications",
+                                                value: "sms",
+                                                checked: formData.notifications === 'sms',
+                                                onChange: function(checked) {
+                                                    return checked && updateField('notifications', 'sms');
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx(RadioButton, {
+                                                label: "No notifications",
+                                                name: "notifications",
+                                                value: "none",
+                                                checked: formData.notifications === 'none',
+                                                onChange: function(checked) {
+                                                    return checked && updateField('notifications', 'none');
+                                                }
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Checkbox, {
+                                label: "Subscribe to newsletter",
+                                checked: formData.newsletter,
+                                onChange: function(checked) {
+                                    return updateField('newsletter', checked);
+                                }
+                            })
+                        ]
+                    });
+                default:
+                    return null;
+            }
+        };
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Registration Form",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '2rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                marginBottom: '0.5rem'
+                            },
+                            children: steps.map(function(step, index) {
+                                return /*#__PURE__*/ _jsxs(Text, {
+                                    variant: "headingSm",
+                                    style: {
+                                        color: index <= currentStep ? '#2196f3' : '#999',
+                                        fontWeight: index === currentStep ? 'bold' : 'normal'
+                                    },
+                                    children: [
+                                        index + 1,
+                                        ". ",
+                                        step
+                                    ]
+                                }, step);
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                height: '4px',
+                                backgroundColor: '#e1e1e1',
+                                borderRadius: '2px',
+                                overflow: 'hidden'
+                            },
+                            children: /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    height: '100%',
+                                    backgroundColor: '#2196f3',
+                                    width: "".concat((currentStep + 1) / steps.length * 100, "%"),
+                                    transition: 'width 0.3s ease'
+                                }
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Form, {
+                    onSubmit: handleSubmit,
+                    children: [
+                        renderStep(),
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                marginTop: '2rem',
+                                paddingTop: '1rem',
+                                borderTop: '1px solid #e1e1e1'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    disabled: currentStep === 0,
+                                    onClick: handlePrevious,
+                                    children: "Previous"
+                                }),
+                                currentStep === steps.length - 1 ? /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    submit: true,
+                                    children: "Complete Registration"
+                                }) : /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    onClick: handleNext,
+                                    children: "Next"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multi-step form with progress indicator and navigation between steps.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};