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

package/dist/components/forms/InputDate/InputDate.js

@@ -0,0 +1,155 @@
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { formatDateInput, isValidDateInput } from '../Input/inputMasks.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * InputDate component for entering dates with automatic masking
+ *
+ * Features:
+ * - Single input field with automatic slash insertion (e.g., "12252024" → "12/25/2024")
+ * - Multiple format support (MM/DD/YYYY, DD/MM/YYYY, YYYY/MM/DD)
+ * - Date validation (valid month, day, year ranges)
+ * - Min/max date range validation
+ * - Cursor position handling
+ * - Paste support
+ * - Inherits all Input component features (icons, addons, sizes, states, theming)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputDate
+ *   label="Date of Birth"
+ *   value={date}
+ *   onChange={setDate}
+ *   dateFormat="MM/DD/YYYY"
+ *   maxDate={new Date()}
+ *   onComplete={(date) => console.log('Valid date entered:', date)}
+ * />
+ * ```
+ */
+const InputDate = React__default.forwardRef(({ value = '', onChange, onComplete, dateFormat, minDate, maxDate, className, ...props }, ref) => {
+    const [maskedValue, setMaskedValue] = useState('');
+    const inputRef = useRef(null);
+    const cursorPositionRef = useRef(null);
+    const getDefaultDateFormat = () => {
+        if (typeof navigator !== 'undefined') {
+            const lang = (navigator.language || '').toLowerCase();
+            if (lang.startsWith('en-us'))
+                return 'MM/DD/YYYY';
+        }
+        return 'DD/MM/YYYY';
+    };
+    const resolvedFormat = dateFormat !== null && dateFormat !== void 0 ? dateFormat : getDefaultDateFormat();
+    // Initialize masked value from prop value
+    useEffect(() => {
+        if (value) {
+            const formatted = formatDateInput(value, resolvedFormat);
+            setMaskedValue(formatted);
+        }
+        else {
+            setMaskedValue('');
+        }
+    }, [value, resolvedFormat]);
+    // Generate placeholder based on format
+    const getPlaceholder = () => {
+        return resolvedFormat.toLowerCase().replace(/m/g, 'm').replace(/d/g, 'd').replace(/y/g, 'y');
+    };
+    // Handle backspace to delete slash along with digit
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Backspace' && !e.metaKey && !e.ctrlKey) {
+            const cursorPos = e.currentTarget.selectionStart;
+            const cursorEnd = e.currentTarget.selectionEnd;
+            // Only handle if no text is selected and cursor is right after a slash
+            if (cursorPos === cursorEnd && cursorPos !== null && cursorPos > 0) {
+                const currentValue = e.currentTarget.value;
+                const charBeforeCursor = currentValue[cursorPos - 1];
+                // If the character before cursor is a slash, delete it along with the digit before it
+                if (charBeforeCursor === '/') {
+                    e.preventDefault();
+                    const newValue = currentValue.slice(0, cursorPos - 2) + currentValue.slice(cursorPos);
+                    const masked = formatDateInput(newValue, resolvedFormat);
+                    setMaskedValue(masked);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(masked);
+                    // Set cursor position after the deletion
+                    setTimeout(() => {
+                        if (inputRef.current) {
+                            const newPos = Math.max(0, cursorPos - 2);
+                            inputRef.current.setSelectionRange(newPos, newPos);
+                        }
+                    }, 0);
+                }
+            }
+        }
+    }, [resolvedFormat, onChange]);
+    // Handle input change with masking
+    const handleChange = useCallback((e) => {
+        const originalValue = e.target.value;
+        cursorPositionRef.current = e.target.selectionStart;
+        // Apply date masking
+        const masked = formatDateInput(originalValue, resolvedFormat);
+        setMaskedValue(masked);
+        // Call onChange with formatted value
+        onChange === null || onChange === void 0 ? void 0 : onChange(masked);
+        // Check if date is complete and valid
+        if (masked.length === 10) {
+            if (isValidDateInput(masked, resolvedFormat)) {
+                // Parse the date based on format
+                const parts = masked.split('/');
+                let month, day, year;
+                switch (resolvedFormat) {
+                    case 'MM/DD/YYYY':
+                        month = parseInt(parts[0], 10);
+                        day = parseInt(parts[1], 10);
+                        year = parseInt(parts[2], 10);
+                        break;
+                    case 'DD/MM/YYYY':
+                        day = parseInt(parts[0], 10);
+                        month = parseInt(parts[1], 10);
+                        year = parseInt(parts[2], 10);
+                        break;
+                    case 'YYYY/MM/DD':
+                        year = parseInt(parts[0], 10);
+                        month = parseInt(parts[1], 10);
+                        day = parseInt(parts[2], 10);
+                        break;
+                    default:
+                        return;
+                }
+                const dateObj = new Date(year, month - 1, day);
+                // Check min/max date constraints
+                let isInRange = true;
+                if (minDate && dateObj < minDate)
+                    isInRange = false;
+                if (maxDate && dateObj > maxDate)
+                    isInRange = false;
+                if (isInRange) {
+                    onComplete === null || onComplete === void 0 ? void 0 : onComplete(dateObj);
+                }
+            }
+        }
+        // Adjust cursor position - move to end after formatting
+        setTimeout(() => {
+            if (inputRef.current) {
+                // Always place cursor at the end of the formatted value
+                const newPosition = masked.length;
+                inputRef.current.setSelectionRange(newPosition, newPosition);
+            }
+        }, 0);
+    }, [resolvedFormat, onChange, onComplete, minDate, maxDate]);
+    // Set the ref from forwardRef
+    const setInputRef = (el) => {
+        inputRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    return (React__default.createElement(Input, { ref: setInputRef, type: "text", inputMode: "numeric", value: maskedValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: props.placeholder || getPlaceholder(), maxLength: 10, className: cn("tabular-nums", className), ...props }));
+});
+InputDate.displayName = 'InputDate';
+
+export { InputDate };

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

@@ -0,0 +1,11 @@
+/**
+ * InputDate theme
+ *
+ * Note: InputDate wraps the Input component and inherits all its theming.
+ * The only date-specific styling (tabular-nums for monospaced numbers)
+ * is applied directly in the component via className.
+ *
+ * This file is kept for consistency with other form components,
+ * but no theme configuration is needed.
+ */
+export declare const inputDateTheme: {};

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

@@ -0,0 +1,13 @@
+/**
+ * InputDate theme
+ *
+ * Note: InputDate wraps the Input component and inherits all its theming.
+ * The only date-specific styling (tabular-nums for monospaced numbers)
+ * is applied directly in the component via className.
+ *
+ * This file is kept for consistency with other form components,
+ * but no theme configuration is needed.
+ */
+const inputDateTheme = {};
+
+export { inputDateTheme };

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

@@ -0,0 +1,25 @@
+import { InputProps } from '../Input/Input.types';
+/**
+ * Date format options for displaying and parsing dates
+ */
+export type DateFormat = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY/MM/DD';
+/**
+ * InputDate component props
+ *
+ * Extends Input component props with date-specific functionality
+ * Wraps the base Input component and inherits all its features
+ */
+export interface InputDateProps extends Omit<InputProps, 'type' | 'onChange' | 'value' | 'inputMode' | 'maxLength'> {
+    /** Current date value (formatted string like "12/25/2024" or ISO string) */
+    value?: string;
+    /** Callback when date value changes (returns formatted string) */
+    onChange?: (value: string) => void;
+    /** Callback when a valid complete date is entered */
+    onComplete?: (date: Date) => void;
+    /** Date format for display and parsing (default: auto-detected from locale) */
+    dateFormat?: DateFormat;
+    /** Minimum allowed date */
+    minDate?: Date;
+    /** Maximum allowed date */
+    maxDate?: Date;
+}

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

@@ -0,0 +1,3 @@
+export { InputDate } from './InputDate';
+export type { InputDateProps, DateFormat, } from './InputDate.types';
+export { inputDateTheme } from './InputDate.theme';

package/dist/components/forms/InputOTP/InputOTP.js

@@ -1,4 +1,3 @@
-import { __rest, __spreadArray, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Input } from '../Input/Input.js';
@@ -21,35 +20,34 @@ import { inputOTPTheme } from './InputOTP.theme.js';
  * />
  * ```
  */
-var InputOTP = React__default.forwardRef(function (_a, ref) {
-    var _b = _a.length, length = _b === void 0 ? 6 : _b, _c = _a.value, value = _c === void 0 ? '' : _c, onChange = _a.onChange, onComplete = _a.onComplete, _d = _a.disabled, disabled = _d === void 0 ? false : _d, label = _a.label, helperText = _a.helperText, error = _a.error, _e = _a.autoFocus, autoFocus = _e === void 0 ? true : _e, className = _a.className, props = __rest(_a, ["length", "value", "onChange", "onComplete", "disabled", "label", "helperText", "error", "autoFocus", "className"]);
-    var inputRefs = useRef([]);
-    var theme = inputOTPTheme;
+const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange, onComplete, disabled = false, label, helperText, error, autoFocus = true, className, ...props }, ref) => {
+    const inputRefs = useRef([]);
+    const theme = inputOTPTheme;
     // Internal state for uncontrolled usage
-    var _f = useState(''), internalValue = _f[0], setInternalValue = _f[1];
+    const [internalValue, setInternalValue] = useState('');
     // Use controlled value if provided, otherwise use internal state
-    var currentValue = value !== undefined ? value : internalValue;
-    var setValue = onChange || setInternalValue;
+    const currentValue = value !== undefined ? value : internalValue;
+    const setValue = onChange || setInternalValue;
     // Convert value to array of characters
-    var valueArray = currentValue.padEnd(length, '').split('').slice(0, length);
+    const valueArray = currentValue.padEnd(length, '').split('').slice(0, length);
     // Auto-focus first input on mount
-    useEffect(function () {
+    useEffect(() => {
         if (autoFocus && inputRefs.current[0] && !disabled) {
             inputRefs.current[0].focus();
         }
     }, [autoFocus, disabled]);
     // Handle input change
-    var handleChange = useCallback(function (index, newValue) {
+    const handleChange = useCallback((index, newValue) => {
         var _a;
         if (disabled)
             return;
         // Only allow single character (take last character if multiple)
-        var char = newValue.slice(-1);
+        const char = newValue.slice(-1);
         // Create new value array
-        var newValueArray = __spreadArray([], valueArray, true);
+        const newValueArray = [...valueArray];
         newValueArray[index] = char;
         // Convert back to string and remove trailing spaces
-        var newValueString = newValueArray.join('').trimEnd();
+        const newValueString = newValueArray.join('').trimEnd();
         setValue(newValueString);
         // Auto-focus next input if character was entered
         if (char && index < length - 1) {
@@ -61,7 +59,7 @@ var InputOTP = React__default.forwardRef(function (_a, ref) {
         }
     }, [disabled, valueArray, length, setValue, onComplete]);
     // Handle key down for navigation and deletion
-    var handleKeyDown = useCallback(function (index, event) {
+    const handleKeyDown = useCallback((index, event) => {
         var _a, _b, _c, _d, _e;
         if (disabled)
             return;
@@ -102,16 +100,16 @@ var InputOTP = React__default.forwardRef(function (_a, ref) {
         }
     }, [disabled, valueArray, length, handleChange]);
     // Handle paste
-    var handlePaste = useCallback(function (event) {
+    const handlePaste = useCallback((event) => {
         var _a;
         if (disabled)
             return;
         event.preventDefault();
-        var pastedData = event.clipboardData.getData('text').slice(0, length);
+        const pastedData = event.clipboardData.getData('text').slice(0, length);
         if (pastedData) {
             setValue(pastedData);
             // Focus the next empty field or last field
-            var nextIndex = Math.min(pastedData.length, length - 1);
+            const nextIndex = Math.min(pastedData.length, length - 1);
             (_a = inputRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             // Check if OTP is complete
             if (pastedData.length === length) {
@@ -120,57 +118,62 @@ var InputOTP = React__default.forwardRef(function (_a, ref) {
         }
     }, [disabled, length, setValue, onComplete]);
     // Handle focus and blur (simplified since we removed focus state)
-    var handleFocus = useCallback(function (index) {
+    const handleFocus = useCallback((index) => {
         // Focus logic can be added here if needed
     }, []);
-    var handleBlur = useCallback(function () {
+    const handleBlur = useCallback(() => {
         // Blur logic can be added here if needed
     }, []);
-    // Build classes
-    var wrapperClasses = cn(theme.wrapper, className);
-    var containerClasses = cn(theme.container);
+    // State class for CSS selectors (matches Input component pattern)
+    const stateClass = error
+        ? "state-invalid"
+        : disabled
+            ? "state-disabled"
+            : "state-default";
+    // Build classes with shadcn pattern - user className has highest priority
+    const wrapperClasses = cn(theme.wrapperStyle, stateClass, className);
+    const containerClasses = cn(theme.containerStyle);
     // Get input classes based on position within group
-    var getInputClasses = function (index) {
+    const getInputClasses = (index) => {
         if (length === 6) {
             // For 6-digit: two groups of 3
-            var isFirst = index === 0 || index === 3;
-            var isLast = index === 2 || index === 5;
-            return cn(theme.input, 'relative focus-within:z-10', {
-                '!rounded-r-none -mr-px': !isLast,
-                '!rounded-l-none': !isFirst,
+            const isFirst = index === 0 || index === 3;
+            const isLast = index === 2 || index === 5;
+            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
+                'rounded-r-none -mr-px': !isLast,
+                'rounded-l-none': !isFirst,
             });
         }
         else {
             // For other lengths: one group
-            var isFirst = index === 0;
-            var isLast = index === length - 1;
-            return cn(theme.input, 'relative focus-within:z-10', {
-                '!rounded-r-none -mr-px': !isLast,
-                '!rounded-l-none': !isFirst,
+            const isFirst = index === 0;
+            const isLast = index === length - 1;
+            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
+                'rounded-r-none -mr-px': !isLast,
+                'rounded-l-none': !isFirst,
             });
         }
     };
-    return (React__default.createElement("div", __assign({ ref: ref, className: wrapperClasses }, props),
-        label && (React__default.createElement(FormLabel, { htmlFor: "otp-input-0", className: theme.label }, label)),
+    return (React__default.createElement("div", { ref: ref, className: wrapperClasses, ...props },
+        label && (React__default.createElement(FormLabel, { htmlFor: `otp-input-0`, state: error ? "invalid" : disabled ? "disabled" : "default" }, label)),
         React__default.createElement("div", { className: containerClasses }, length === 6 ? (
         // For 6-digit OTP, create two groups of 3
         React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, function (_, i) { return (React__default.createElement(Input, { key: i, ref: function (el) {
+            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, (_, i) => (React__default.createElement(Input, { key: i, ref: (el) => {
                     inputRefs.current[i] = el;
-                }, id: "otp-input-".concat(i), type: "text", value: valueArray[i] || '', onChange: function (e) { return handleChange(i, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(i, e); }, onFocus: function () { return handleFocus(i); }, onBlur: handleBlur, onPaste: i === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.input, inputGroupClassName: getInputClasses(i), wrapperClassName: "!space-y-0" })); })),
-            React__default.createElement("span", { className: theme.separator }, "\u2014"),
-            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, function (_, i) {
-                var index = i + 3;
-                return (React__default.createElement(Input, { key: index, ref: function (el) {
+                }, id: `otp-input-${i}`, type: "text", value: valueArray[i] || '', onChange: (e) => handleChange(i, e.target.value), onKeyDown: (e) => handleKeyDown(i, e), onFocus: () => handleFocus(i), onBlur: handleBlur, onPaste: i === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(i), wrapperClassName: "space-y-0" })))),
+            React__default.createElement("span", { className: theme.separatorStyle }, "\u2014"),
+            React__default.createElement("div", { className: "flex" }, Array.from({ length: 3 }, (_, i) => {
+                const index = i + 3;
+                return (React__default.createElement(Input, { key: index, ref: (el) => {
                         inputRefs.current[index] = el;
-                    }, id: "otp-input-".concat(index), type: "text", value: valueArray[index] || '', onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onFocus: function () { return handleFocus(index); }, onBlur: handleBlur, disabled: disabled, maxLength: 1, className: theme.input, inputGroupClassName: getInputClasses(index), wrapperClassName: "!space-y-0" }));
+                    }, id: `otp-input-${index}`, type: "text", value: valueArray[index] || '', onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => handleFocus(index), onBlur: handleBlur, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0" }));
             })))) : (
         // For other lengths, create one group
-        React__default.createElement("div", { className: "flex" }, Array.from({ length: length }, function (_, index) { return (React__default.createElement(Input, { key: index, ref: function (el) {
+        React__default.createElement("div", { className: "flex" }, Array.from({ length }, (_, index) => (React__default.createElement(Input, { key: index, ref: (el) => {
                 inputRefs.current[index] = el;
-            }, id: "otp-input-".concat(index), type: "text", value: valueArray[index] || '', onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onFocus: function () { return handleFocus(index); }, onBlur: handleBlur, onPaste: index === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.input, inputGroupClassName: getInputClasses(index), wrapperClassName: "!space-y-0" })); })))),
-        error && (React__default.createElement("p", { className: theme.errorText }, error)),
-        !error && helperText && (React__default.createElement("p", { className: theme.helperText }, helperText))));
+            }, id: `otp-input-${index}`, type: "text", value: valueArray[index] || '', onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => handleFocus(index), onBlur: handleBlur, onPaste: index === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0" })))))),
+        (error || helperText) && (React__default.createElement("div", { className: cn(theme.helperText) }, error || helperText))));
 });
 InputOTP.displayName = 'InputOTP';
 

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

@@ -1,2 +1,6 @@
 import { InputOTPTheme } from './InputOTP.types';
+/**
+ * Default theme for InputOTP component - Clean & Organized
+ * Uses flat structure with design tokens following library patterns
+ */
 export declare const inputOTPTheme: InputOTPTheme;

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

@@ -1,11 +1,22 @@
-var inputOTPTheme = {
-    wrapper: 'space-y-2',
-    container: 'flex items-center gap-3',
-    input: 'text-center !w-12 !min-w-12 !h-12 !min-h-12 text-lg',
-    separator: 'text-gray-400 font-medium select-none',
-    label: 'block text-sm font-medium text-gray-700 mb-1',
-    helperText: 'text-sm text-gray-500',
-    errorText: 'text-sm text-red-600',
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for InputOTP component - Clean & Organized
+ * Uses flat structure with design tokens following library patterns
+ */
+const inputOTPTheme = {
+    // Base container styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // OTP input container
+    containerStyle: 'flex items-center gap-3',
+    // Individual input field styles with design tokens
+    inputStyle: 'text-center text-lg text-[var(--color-text-primary)]',
+    // Input group wrapper for grouped inputs (overrides default Input styling)
+    inputGroupStyle: 'w-12 min-w-12 h-12 min-h-12',
+    // Separator between input groups
+    separatorStyle: 'text-[var(--color-text-muted)] font-medium select-none',
+    // Helper text with state handling (reuses form base)
+    helperText: formsBaseTheme.helperText,
 };
 
 export { inputOTPTheme };

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

@@ -40,11 +40,10 @@ export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     autoFocus?: boolean;
 }
 export interface InputOTPTheme {
-    wrapper: string;
-    container: string;
-    input: string;
-    separator: string;
-    label: string;
+    wrapperStyle: string;
+    containerStyle: string;
+    inputStyle: string;
+    inputGroupStyle: string;
+    separatorStyle: string;
     helperText: string;
-    errorText: string;
 }

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

@@ -0,0 +1,33 @@
+/**
+ * OptimisticForm Component
+ * Form wrapper with optimistic updates and auto-rollback
+ */
+import React from "react";
+import type { OptimisticFormProps } from "./OptimisticForm.types";
+/**
+ * OptimisticForm - Form wrapper with optimistic updates and auto-rollback
+ *
+ * @example
+ * // Basic usage
+ * <OptimisticForm
+ *   onSubmit={async (data) => api.createUser(data)}
+ *   onOptimisticUpdate={(data) => addUserToList({ ...data, id: 'temp', isPending: true })}
+ *   onSuccess={(response) => updateUserInList(response)}
+ *   onError={() => removeUserFromList('temp')}
+ * >
+ *   <Input name="name" />
+ *   <Button type="submit">Create User</Button>
+ * </OptimisticForm>
+ *
+ * // With render prop for dynamic UI
+ * <OptimisticForm onSubmit={handleSubmit}>
+ *   {({ isPending, isError, error }) => (
+ *     <>
+ *       <Input name="email" disabled={isPending} />
+ *       {isError && <Alert variant="error">{error?.message}</Alert>}
+ *       <Button type="submit" loading={isPending}>Submit</Button>
+ *     </>
+ *   )}
+ * </OptimisticForm>
+ */
+export declare function OptimisticForm<TData, TFormData extends Record<string, unknown>>({ onSubmit, onOptimisticUpdate, onSuccess, onError, onRollback, retry, offlineQueue, resetOnSuccess, children, className, id, disabled, }: OptimisticFormProps<TData, TFormData>): React.ReactElement;

package/dist/components/forms/OptimisticForm/OptimisticForm.js

@@ -0,0 +1,87 @@
+import React__default, { useRef, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useOptimisticMutation } from '../../../hooks/useOptimisticMutation.js';
+import { optimisticFormTheme } from './OptimisticForm.theme.js';
+
+/**
+ * OptimisticForm Component
+ * Form wrapper with optimistic updates and auto-rollback
+ */
+/**
+ * OptimisticForm - Form wrapper with optimistic updates and auto-rollback
+ *
+ * @example
+ * // Basic usage
+ * <OptimisticForm
+ *   onSubmit={async (data) => api.createUser(data)}
+ *   onOptimisticUpdate={(data) => addUserToList({ ...data, id: 'temp', isPending: true })}
+ *   onSuccess={(response) => updateUserInList(response)}
+ *   onError={() => removeUserFromList('temp')}
+ * >
+ *   <Input name="name" />
+ *   <Button type="submit">Create User</Button>
+ * </OptimisticForm>
+ *
+ * // With render prop for dynamic UI
+ * <OptimisticForm onSubmit={handleSubmit}>
+ *   {({ isPending, isError, error }) => (
+ *     <>
+ *       <Input name="email" disabled={isPending} />
+ *       {isError && <Alert variant="error">{error?.message}</Alert>}
+ *       <Button type="submit" loading={isPending}>Submit</Button>
+ *     </>
+ *   )}
+ * </OptimisticForm>
+ */
+function OptimisticForm({ onSubmit, onOptimisticUpdate, onSuccess, onError, onRollback, retry, offlineQueue = false, resetOnSuccess = false, children, className, id, disabled = false, }) {
+    const theme = optimisticFormTheme;
+    const formRef = useRef(null);
+    // Use optimistic mutation hook
+    const { mutate, status, error, isOptimistic, isRolledBack, isQueued } = useOptimisticMutation(onSubmit, {
+        onMutate: (data) => data, // Pass form data as context
+        onOptimisticUpdate: onOptimisticUpdate
+            ? (data, _context) => onOptimisticUpdate(data)
+            : undefined,
+        onSuccess: (response, formData, _context) => {
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response, formData);
+            // Reset form if configured
+            if (resetOnSuccess && formRef.current) {
+                formRef.current.reset();
+            }
+        },
+        onError: (err, formData, _context) => {
+            onError === null || onError === void 0 ? void 0 : onError(err, formData);
+            onRollback === null || onRollback === void 0 ? void 0 : onRollback(formData);
+        },
+        retry,
+        offlineQueue,
+    });
+    // Handle form submission
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        if (disabled)
+            return;
+        const formElement = event.currentTarget;
+        const formData = new FormData(formElement);
+        // Convert FormData to object
+        const data = Object.fromEntries(formData.entries());
+        mutate(data);
+    }, [mutate, disabled]);
+    // Create form state for render prop
+    const formState = {
+        status,
+        isPending: status === "pending",
+        isOptimistic,
+        isSuccess: status === "success",
+        isError: status === "error",
+        isRolledBack,
+        isQueued,
+        error,
+        submittedData: null, // We don't track this currently
+    };
+    // Determine children to render
+    const content = typeof children === "function" ? children(formState) : children;
+    return (React__default.createElement("form", { ref: formRef, id: id, onSubmit: handleSubmit, className: cn(theme.base, status === "pending" && theme.pending, status === "error" && theme.error, status === "success" && theme.success, className), "aria-busy": status === "pending", "aria-disabled": disabled }, content));
+}
+
+export { OptimisticForm };

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

@@ -0,0 +1,2 @@
+import type { OptimisticFormTheme } from "./OptimisticForm.types";
+export declare const optimisticFormTheme: OptimisticFormTheme;

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

@@ -0,0 +1,8 @@
+const optimisticFormTheme = {
+    base: "transition-opacity duration-200",
+    pending: "opacity-70 pointer-events-none",
+    error: "",
+    success: "",
+};
+
+export { optimisticFormTheme };