flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,105 @@
+import { __awaiter, __generator, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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
+ */
+var Root = function (_a) {
+    var config = _a.config, children = _a.children, initialData = _a.initialData, onTransition = _a.onTransition, onComplete = _a.onComplete, className = _a.className;
+    var _b = useState(undefined), errors = _b[0], setErrors = _b[1];
+    var stateMachine = useFormStateMachine(config, {
+        initialData: initialData,
+        onTransition: onTransition,
+        onComplete: onComplete,
+    });
+    var _c = useState(false), isValidating = _c[0], setIsValidating = _c[1];
+    var handleNext = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setIsValidating(true);
+                    return [4 /*yield*/, validateStep(config, stateMachine.currentStep, stateMachine.data)];
+                case 1:
+                    result = _b.sent();
+                    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" });
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [config, stateMachine]);
+    var value = useMemo(function () {
+        return (__assign(__assign({}, stateMachine), { config: config, isValid: !errors, errors: errors, next: handleNext, isValidating: 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
+ */
+var Step = function (_a) {
+    var name = _a.name, children = _a.children, className = _a.className;
+    var _b = useStepperFormContext(), currentStep = _b.currentStep, data = _b.data;
+    var 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: isActive, data: data }) : children));
+};
+/**
+ * StepperForm.Indicator - Visual progress display
+ */
+var Indicator = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "dots" : _b, className = _a.className;
+    var _c = useStepperFormContext(), currentStep = _c.currentStep, config = _c.config, progress = _c.progress;
+    var theme = stepperFormTheme.indicator;
+    var steps = Object.keys(config.states);
+    var 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(function (step, i) {
+            var isCompleted = i < currentIndex;
+            var 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: "".concat(progress * 100, "%") } })))));
+};
+/**
+ * StepperForm.Navigation - Back/Next buttons
+ */
+var Navigation = function (_a) {
+    var _b = _a.nextLabel, nextLabel = _b === void 0 ? "Next" : _b, _c = _a.backLabel, backLabel = _c === void 0 ? "Back" : _c, _d = _a.submitLabel, submitLabel = _d === void 0 ? "Complete" : _d, className = _a.className;
+    var _e = useStepperFormContext(), next = _e.next, previous = _e.previous, canGoBack = _e.canGoBack, currentStep = _e.currentStep, config = _e.config, isValidating = _e.isValidating;
+    var theme = stepperFormTheme.navigation;
+    var steps = Object.keys(config.states);
+    var 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" }))));
+};
+var StepperForm = Object.assign(Root, {
+    Step: Step,
+    Indicator: Indicator,
+    Navigation: 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 @@
+var 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';
+
+var StepperFormContext = createContext(undefined);
+function useStepperFormContext() {
+    var 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.js

@@ -1,9 +1,12 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
+import { motion } from 'motion/react';
 import { switchTheme, thumbPositions } from './Switch.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 
 /**
  * Switch component for toggling between two states

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

@@ -9,7 +9,7 @@ export type SwitchState = 'default' | 'disabled' | 'invalid';
 /**
  * Switch component props
  */
-export interface SwitchProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Unique identifier for the switch input */
     id: string;
     /** Whether the switch is checked (controlled mode) */

package/dist/components/forms/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { textareaTheme } from './Textarea.theme.js';

package/dist/components/forms/TimePicker/TimePicker.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useRef, useCallback, useEffect } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { timePickerTheme } from './TimePicker.theme.js';

package/dist/components/forms/TimePicker/TimePickerContent.js

@@ -1,12 +1,11 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useContext, useCallback } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePicker.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 var TimePickerContent = function (_a) {
     var _b, _c;

package/dist/components/forms/TimePicker/TimePickerTrigger.js

@@ -1,9 +1,7 @@
 import React__default, { useContext } from 'react';
+import { ClockIcon, XMarkIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePicker.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ClockIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
-import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronUpDownIcon.js';
 
 /**
  * TimePickerTrigger Component - styled like form input
@@ -35,15 +33,15 @@ var TimePickerTrigger = function (_a) {
         React__default.createElement("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, 'w-full cursor-pointer bg-white text-left', className // User overrides take highest precedence
             ), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open time picker" },
             iconStart !== undefined ? (iconStart && React__default.createElement("span", { className: iconStartStyle }, iconStart)) : (React__default.createElement("span", { className: iconStartStyle },
-                React__default.createElement(ForwardRef, { className: "h-4 w-4" }))),
+                React__default.createElement(ClockIcon, { className: "h-4 w-4" }))),
             React__default.createElement("span", { className: "block truncate" }, children),
             clearable && hasValue && !disabled && (React__default.createElement("button", { type: "button", onClick: function (e) {
                     e.stopPropagation();
                     onClear === null || onClear === void 0 ? void 0 : onClear();
                 }, className: cn(theme.clearButtonStyle), "aria-label": "Clear time" },
-                React__default.createElement(ForwardRef$1, { className: "w-4 h-4" }))),
+                React__default.createElement(XMarkIcon, { className: "w-4 h-4" }))),
             iconEnd !== undefined ? (iconEnd && React__default.createElement("span", { className: iconEndStyle }, iconEnd)) : (React__default.createElement("span", { className: iconEndStyle },
-                React__default.createElement(ForwardRef$2, { className: "h-4 w-4" }))))));
+                React__default.createElement(ChevronUpDownIcon, { className: "h-4 w-4" }))))));
 };
 
 export { TimePickerTrigger };

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

@@ -8,9 +8,17 @@ var formsBaseTheme = {
     // Common wrapper style
     wrapperStyle: "relative w-full",
     // Common input group style with focus, hover, and state variations
-    inputGroupBaseStyle: "relative flex rounded-[var(--form-rounded)] outline outline-1 outline-[var(--color-border)] focus-within:outline-2 focus-within:outline-[var(--color-primary-600)] focus-within:-outline-offset-1 focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all",
+    inputGroupBaseStyle: "relative flex rounded-[var(--form-rounded)] outline outline-1 outline-[var(--color-border)] " +
+        "focus-within:outline-2 focus-within:outline-[var(--color-primary-600)] focus-within:-outline-offset-1 " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all " +
+        // Dark mode
+        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] " +
+        "dark:focus-within:outline-[var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
-    controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none",
+    controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
+        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
+        // Dark mode
+        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
     // Size variants - atomic design tokens for composability
     // These tokens can be composed together or used individually for maximum flexibility
     sizes: {
@@ -36,14 +44,26 @@ var formsBaseTheme = {
     // Common state variants
     states: {
         default: "",
-        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] outline-[var(--color-border)] [&_input]:text-[var(--color-text-disabled)] [&_textarea]:text-[var(--color-text-disabled)] [&_select]:text-[var(--color-text-disabled)] [&_input]:cursor-not-allowed [&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed [&_input]:placeholder:text-[var(--color-text-placeholder)] [&_textarea]:placeholder:text-[var(--color-text-placeholder)] [&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed",
-        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] focus-within:outline-[var(--color-danger)]",
+        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] outline-[var(--color-border)] " +
+            "[&_input]:text-[var(--color-text-disabled)] [&_textarea]:text-[var(--color-text-disabled)] " +
+            "[&_select]:text-[var(--color-text-disabled)] [&_input]:cursor-not-allowed " +
+            "[&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed " +
+            "[&_input]:placeholder:text-[var(--color-text-placeholder)] " +
+            "[&_textarea]:placeholder:text-[var(--color-text-placeholder)] " +
+            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed " +
+            // Dark mode
+            "dark:bg-[var(--color-neutral-800)] dark:outline-[var(--color-neutral-700)]",
+        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] focus-within:outline-[var(--color-danger)] " +
+            // Dark mode
+            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
     },
     // Common focus state variants
     focusStates: {
-        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10",
+        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 " +
+            "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
         disabled: "outline-none",
-        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10",
+        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10 " +
+            "dark:ring-[var(--color-danger-500)]/20",
     },
     // Common hover state variants
     hoverStates: {
@@ -52,11 +72,14 @@ var formsBaseTheme = {
         invalid: "",
     },
     // Common helper text style with state variations
-    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)]",
+    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)] " +
+        "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
     iconStyles: {
-        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)]",
-        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]",
+        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)] " +
+            "dark:text-[var(--color-neutral-500)]",
+        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] " +
+            "dark:text-[var(--color-neutral-500)]",
         padding: {
             left: "pl-10",
             right: "pr-10",

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

@@ -1,55 +1,59 @@
-export { Input } from './Input';
-export type { InputProps, InputSize, InputState, InputTheme, InputType, PasswordStrength, PasswordStrengthIndicator } from './Input';
-export { inputTheme } from './Input';
-export { Select, SelectButton, SelectOptions, SelectOption } from './Select';
-export type { SelectProps, SelectOptionType, SelectSize, SelectState, SelectThemeOverrides } from './Select';
-export { selectTheme } from './Select';
-export { Textarea } from './Textarea';
-export type { TextareaProps, TextareaSize, TextareaState, TextareaThemeOverrides } from './Textarea';
-export { textareaTheme } from './Textarea';
-export { FormLabel } from './FormLabel';
-export type { FormLabelProps, FormLabelState, FormLabelTheme } from './FormLabel';
-export { formLabelTheme } from './FormLabel';
-export { Radio } from './Radio';
-export type { RadioProps, RadioSize, RadioState } from './Radio';
-export { radioTheme } from './Radio';
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckboxSize, CheckboxState } from './Checkbox';
-export { checkboxTheme } from './Checkbox';
-export { Switch } from './Switch';
-export type { SwitchProps, SwitchThemeOverrides } from './Switch';
-export { switchTheme } from './Switch';
-export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets } from './DatePicker';
-export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker';
-export { datePickerTheme } from './DatePicker';
-export { FileUpload } from './FileUpload';
-export type { FileUploadProps, FileUploadThemeOverrides, UploadedFile } from './FileUpload';
-export { fileUploadTheme } from './FileUpload';
-export { TimePicker } from './TimePicker';
-export type { TimePickerProps, TimePickerSize, TimePickerState, TimePickerThemeOverrides } from './TimePicker';
-export { timePickerTheme } from './TimePicker';
-export { Slider } from './Slider';
-export type { SliderProps, SliderState, SliderThemeOverrides } from './Slider';
-export { sliderTheme } from './Slider';
-export { Signature } from './Signature';
-export type { SignatureProps, SignatureTheme, SignatureThemeOverrides } from './Signature';
-export { signatureTheme } from './Signature';
-export { RichTextEditor } from './RichTextEditor';
-export type { RichTextEditorProps, RichTextEditorThemeOverrides } from './RichTextEditor';
-export { richTextEditorTheme } from './RichTextEditor';
-export { InputOTP } from './InputOTP';
-export type { InputOTPProps, InputOTPTheme } from './InputOTP';
-export { inputOTPTheme } from './InputOTP';
-export { InputCreditCard } from './InputCreditCard';
-export type { InputCreditCardProps, InputCreditCardThemeOverrides } from './InputCreditCard';
-export { inputCreditCardTheme } from './InputCreditCard';
-export { InputAddress } from './InputAddress';
-export type { InputAddressProps, InputAddressThemeOverrides } from './InputAddress';
-export { inputAddressTheme } from './InputAddress';
-export { InputDate } from './InputDate';
-export type { InputDateProps, DateFormat } from './InputDate';
-export { inputDateTheme } from './InputDate';
-export { InputCounter } from './InputCounter';
-export type { InputCounterProps, InputCounterTheme } from './InputCounter';
-export { inputCounterTheme } from './InputCounter';
-export { formsBaseTheme } from './forms.theme';
+export { Input } from "./Input";
+export type { InputProps, InputSize, InputState, InputTheme, InputType, PasswordStrength, PasswordStrengthIndicator, } from "./Input";
+export { inputTheme } from "./Input";
+export { Select, SelectButton, SelectOptions, SelectOption } from "./Select";
+export type { SelectProps, SelectOptionType, SelectSize, SelectState, SelectThemeOverrides, } from "./Select";
+export { selectTheme } from "./Select";
+export { Textarea } from "./Textarea";
+export type { TextareaProps, TextareaSize, TextareaState, TextareaThemeOverrides, } from "./Textarea";
+export { textareaTheme } from "./Textarea";
+export { FormLabel } from "./FormLabel";
+export type { FormLabelProps, FormLabelState, FormLabelTheme, } from "./FormLabel";
+export { formLabelTheme } from "./FormLabel";
+export { Radio } from "./Radio";
+export type { RadioProps, RadioSize, RadioState } from "./Radio";
+export { radioTheme } from "./Radio";
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize, CheckboxState } from "./Checkbox";
+export { checkboxTheme } from "./Checkbox";
+export { Switch } from "./Switch";
+export type { SwitchProps, SwitchThemeOverrides } from "./Switch";
+export { switchTheme } from "./Switch";
+export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets, } from "./DatePicker";
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
+export { datePickerTheme } from "./DatePicker";
+export { FileUpload } from "./FileUpload";
+export type { FileUploadProps, FileUploadThemeOverrides, UploadedFile, } from "./FileUpload";
+export { fileUploadTheme } from "./FileUpload";
+export { TimePicker } from "./TimePicker";
+export type { TimePickerProps, TimePickerSize, TimePickerState, TimePickerThemeOverrides, } from "./TimePicker";
+export { timePickerTheme } from "./TimePicker";
+export { Slider } from "./Slider";
+export type { SliderProps, SliderState, SliderThemeOverrides } from "./Slider";
+export { sliderTheme } from "./Slider";
+export { Signature } from "./Signature";
+export type { SignatureProps, SignatureTheme, SignatureThemeOverrides, } from "./Signature";
+export { signatureTheme } from "./Signature";
+export { RichTextEditor } from "./RichTextEditor";
+export type { RichTextEditorProps, RichTextEditorThemeOverrides, } from "./RichTextEditor";
+export { richTextEditorTheme } from "./RichTextEditor";
+export { InputOTP } from "./InputOTP";
+export type { InputOTPProps, InputOTPTheme } from "./InputOTP";
+export { inputOTPTheme } from "./InputOTP";
+export { InputCreditCard } from "./InputCreditCard";
+export type { InputCreditCardProps, InputCreditCardThemeOverrides, } from "./InputCreditCard";
+export { inputCreditCardTheme } from "./InputCreditCard";
+export { InputAddress } from "./InputAddress";
+export type { InputAddressProps, InputAddressThemeOverrides, } from "./InputAddress";
+export { inputAddressTheme } from "./InputAddress";
+export { InputDate } from "./InputDate";
+export type { InputDateProps, DateFormat } from "./InputDate";
+export { inputDateTheme } from "./InputDate";
+export { InputCounter } from "./InputCounter";
+export type { InputCounterProps, InputCounterTheme } from "./InputCounter";
+export { inputCounterTheme } from "./InputCounter";
+export { formsBaseTheme } from "./forms.theme";
+export { OptimisticForm } from "./OptimisticForm";
+export type { OptimisticFormProps, OptimisticFormState, OptimisticFormStatus, OptimisticFormTheme, } from "./OptimisticForm";
+export { optimisticFormTheme } from "./OptimisticForm";
+export * from "./StepperForm";

package/dist/components/forms/index.js

@@ -0,0 +1,52 @@
+export { Input } from './Input/Input.js';
+export { inputTheme } from './Input/Input.theme.js';
+export { Select, SelectButton, SelectOption, SelectOptions } from './Select/Select.js';
+export { selectTheme } from './Select/Select.theme.js';
+export { Textarea } from './Textarea/Textarea.js';
+export { textareaTheme } from './Textarea/Textarea.theme.js';
+export { FormLabel } from './FormLabel/FormLabel.js';
+export { formLabelTheme } from './FormLabel/FormLabel.theme.js';
+export { Radio } from './Radio/Radio.js';
+export { radioTheme } from './Radio/Radio.theme.js';
+export { Checkbox } from './Checkbox/Checkbox.js';
+export { checkboxTheme } from './Checkbox/Checkbox.theme.js';
+export { Switch } from './Switch/Switch.js';
+export { switchTheme } from './Switch/Switch.theme.js';
+export { DatePicker } from './DatePicker/DatePicker.js';
+export { datePickerTheme } from './DatePicker/DatePicker.theme.js';
+export { FileUpload } from './FileUpload/FileUpload.js';
+export { fileUploadTheme } from './FileUpload/FileUpload.theme.js';
+export { TimePicker } from './TimePicker/TimePicker.js';
+import 'react';
+import '@heroicons/react/24/outline';
+import 'clsx';
+import 'tailwind-merge';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import 'motion/react';
+import 'react-dom';
+export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
+export { Slider } from './Slider/Slider.js';
+export { sliderTheme } from './Slider/Slider.theme.js';
+export { Signature } from './Signature/Signature.js';
+export { signatureTheme } from './Signature/Signature.theme.js';
+export { RichTextEditor } from './RichTextEditor/RichTextEditor.js';
+export { richTextEditorTheme } from './RichTextEditor/RichTextEditor.theme.js';
+export { InputOTP } from './InputOTP/InputOTP.js';
+export { inputOTPTheme } from './InputOTP/InputOTP.theme.js';
+export { InputCreditCard } from './InputCreditCard/InputCreditCard.js';
+export { inputCreditCardTheme } from './InputCreditCard/InputCreditCard.theme.js';
+export { InputAddress } from './InputAddress/InputAddress.js';
+export { inputAddressTheme } from './InputAddress/InputAddress.theme.js';
+export { InputDate } from './InputDate/InputDate.js';
+export { inputDateTheme } from './InputDate/InputDate.theme.js';
+export { InputCounter } from './InputCounter/InputCounter.js';
+export { inputCounterTheme } from './InputCounter/InputCounter.theme.js';
+export { formsBaseTheme } from './forms.theme.js';
+export { OptimisticForm } from './OptimisticForm/OptimisticForm.js';
+export { optimisticFormTheme } from './OptimisticForm/OptimisticForm.theme.js';
+export { StepperForm } from './StepperForm/StepperForm.js';
+export { StepperFormContext, useStepperFormContext } from './StepperForm/StepperForm.types.js';
+export { stepperFormTheme } from './StepperForm/StepperForm.theme.js';
+export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';
+export { DatePickerContent } from './DatePicker/DatePickerContent.js';
+export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';

package/dist/hooks/index.d.ts

@@ -1,5 +1,14 @@
-export { useOverlay } from './useOverlay';
-export type { UseOverlayOptions, UseOverlayReturn } from './useOverlay';
-export { useSelectPortal } from './useSelectPortal';
-export { useSlidingNumber } from './useSlidingNumber';
-export { useTypewriter } from './useTypewriter';
+export { useOverlay } from "./useOverlay";
+export type { UseOverlayOptions, UseOverlayReturn } from "./useOverlay";
+export { useSelectPortal } from "./useSelectPortal";
+export { useSlidingNumber } from "./useSlidingNumber";
+export { useTypewriter } from "./useTypewriter";
+export { useStreamingSSE } from "./useStreamingSSE";
+export type { UseStreamingSSEOptions, UseStreamingSSEReturn, } from "./useStreamingSSE";
+export { useNetworkStatus } from "./useNetworkStatus";
+export type { NetworkStatusReturn } from "./useNetworkStatus";
+export { useOptimisticMutation } from "./useOptimisticMutation";
+export * from "./useFormStateMachine";
+export type { OptimisticMutationOptions, OptimisticMutationReturn, MutationStatus, } from "./useOptimisticMutation";
+export { usePresence } from "./usePresence";
+export type { UsePresenceOptions, UsePresenceReturn } from "./usePresence";

package/dist/hooks/useFormStateMachine.d.ts

@@ -0,0 +1,31 @@
+import { StateMachineConfig, StateIdentifier } from "../utils/stateMachine";
+export interface UseFormStateMachineOptions<TData = any> {
+    /** Initial form data */
+    initialData?: TData;
+    /** Callback when state changes */
+    onTransition?: (state: StateIdentifier, data: TData) => void;
+    /** Callback when form is completed */
+    onComplete?: (data: TData) => void;
+}
+export interface FormStateMachineResult<TData> {
+    /** Name of the current step/state */
+    currentStep: StateIdentifier;
+    /** Current form data */
+    data: TData;
+    /** Progress (0 to 1) */
+    progress: number;
+    /** Whether we can go back */
+    canGoBack: boolean;
+    /** Transition to the next valid state based on 'NEXT' event */
+    next: () => void;
+    /** Move to previous state (if history is managed) */
+    previous: () => void;
+    /** Update form data for the current step */
+    updateData: (newData: Partial<TData>) => void;
+    /** Jump to a specific state (if allowed) */
+    goTo: (state: StateIdentifier) => void;
+}
+/**
+ * Hook to manage multi-step form logic via a state machine
+ */
+export declare function useFormStateMachine<TData extends Record<string, any>>(config: StateMachineConfig<TData>, options?: UseFormStateMachineOptions<TData>): FormStateMachineResult<TData>;