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

package/dist/components/forms/FormLabel/FormLabel.js

@@ -1,7 +1,10 @@
-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 from 'react';
 import { formLabelTheme } from './FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 
 /**
  * FormLabel component for providing consistent labeling for form elements

package/dist/components/forms/Input/Input.js

@@ -1,8 +1,12 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { inputTheme } from './Input.theme.js';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+import { LockClosedIcon, EyeSlashIcon, EyeIcon } from '@heroicons/react/24/solid';
 import { PlusIcon } from '../../../icons/core/PlusIcon.js';
 import { MinusIcon } from '../../../icons/core/MinusIcon.js';
 import { SearchIcon } from '../../../icons/core/SearchIcon.js';
@@ -10,9 +14,6 @@ import '../../../icons/core/LockIcon.js';
 import '../../../icons/core/DollarIcon.js';
 import '../../../icons/core/TickIcon.js';
 import { validateMaskedInput, applyInputMask, getAdjustedCursorPosition } from './inputMasks.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/LockClosedIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/EyeSlashIcon.js';
-import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/EyeIcon.js';
 
 var Input = React__default.forwardRef(function (_a, ref) {
     var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.state, state = _c === void 0 ? "default" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, label = _a.label, _e = _a.labelClassName, labelClassName = _e === void 0 ? "" : _e, helperText = _a.helperText, _f = _a.helperTextClassName, helperTextClassName = _f === void 0 ? "" : _f, _g = _a.wrapperClassName, wrapperClassName = _g === void 0 ? "" : _g, _h = _a.inputGroupClassName, inputGroupClassName = _h === void 0 ? "" : _h, iconStart = _a.iconStart, iconEnd = _a.iconEnd, contentStart = _a.contentStart, contentEnd = _a.contentEnd, addonPrefix = _a.addonPrefix, addonSuffix = _a.addonSuffix, keyboardShortcut = _a.keyboardShortcut, id = _a.id, required = _a.required, _j = _a.type, type = _j === void 0 ? "text" : _j, _k = _a.passwordToggle, passwordToggle = _k === void 0 ? type === "password" : _k, passwordStrengthIndicator = _a.passwordStrengthIndicator, _l = _a.showNumberControls, showNumberControls = _l === void 0 ? false : _l, min = _a.min, max = _a.max, _m = _a.step, step = _m === void 0 ? 1 : _m, onChange = _a.onChange, value = _a.value, currencyDecimalPlaces = _a.currencyDecimalPlaces, props = __rest(_a, ["size", "state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "inputGroupClassName", "iconStart", "iconEnd", "contentStart", "contentEnd", "addonPrefix", "addonSuffix", "keyboardShortcut", "id", "required", "type", "passwordToggle", "passwordStrengthIndicator", "showNumberControls", "min", "max", "step", "onChange", "value", "currencyDecimalPlaces"]);
@@ -38,7 +39,7 @@ var Input = React__default.forwardRef(function (_a, ref) {
     var inputRef = useRef(null);
     var cursorPositionRef = useRef(null);
     // Default icons based on input type
-    var defaultPasswordIcon = type === "password" && !iconStart ? (React__default.createElement(ForwardRef, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
+    var defaultPasswordIcon = type === "password" && !iconStart ? (React__default.createElement(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
     var defaultSearchIcon = type === "search" && !iconStart ? (React__default.createElement(SearchIcon, { size: "sm", className: inputTheme.typeStyles.search.iconStyle })) : null;
     // Use the provided iconStart or the default icon based on input type
     var finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
@@ -222,7 +223,7 @@ var Input = React__default.forwardRef(function (_a, ref) {
                     e.preventDefault();
                     handleTogglePassword();
                 }
-            } }, showPassword ? (React__default.createElement(ForwardRef$1, { className: toggleIconActive, "aria-hidden": "true" })) : (React__default.createElement(ForwardRef$2, { className: toggleIconInactive, "aria-hidden": "true" }))));
+            } }, showPassword ? (React__default.createElement(EyeSlashIcon, { className: toggleIconActive, "aria-hidden": "true" })) : (React__default.createElement(EyeIcon, { className: toggleIconInactive, "aria-hidden": "true" }))));
     };
     // Number input buttons component
     var NumberButtons = function () {

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

@@ -28,31 +28,38 @@ var inputTheme = {
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Content styles - prefix/suffix content with size-aware font sizes
     contentStyle: {
-        sm: "flex items-center px-3 ".concat(formsBaseTheme.sizes.sm.text, " text-[var(--color-text-muted)] shrink-0"),
-        md: "flex items-center px-3 ".concat(formsBaseTheme.sizes.md.text, " text-[var(--color-text-muted)] shrink-0"),
-        lg: "flex items-center px-3 ".concat(formsBaseTheme.sizes.lg.text, " text-[var(--color-text-muted)] shrink-0"),
+        sm: "flex items-center px-3 ".concat(formsBaseTheme.sizes.sm.text, " text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]"),
+        md: "flex items-center px-3 ".concat(formsBaseTheme.sizes.md.text, " text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]"),
+        lg: "flex items-center px-3 ".concat(formsBaseTheme.sizes.lg.text, " text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]"),
     },
     contentStartStyle: "pr-0",
     contentEndStyle: "pl-0",
     // Keyboard shortcut display
-    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10",
+    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10 " +
+        "dark:text-[var(--color-neutral-500)]",
     // Password toggle button with hover states
-    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10",
+    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
+        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
     // Number input controls
     numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
-    numberButtonStyle: "bg-surface-elevated flex items-center justify-center text-[var(--color-text-muted)] hover:bg-surface-hover hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors",
+    numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
+        "text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] " +
+        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors " +
+        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-500)] " +
+        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)]",
     // Type-specific styles organized by input type
     typeStyles: {
         password: {
-            toggleIconActive: "size-5 text-[var(--color-text-primary)]",
-            toggleIconInactive: "size-5 text-[var(--color-text-muted)]",
+            toggleIconActive: "size-5 text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+            toggleIconInactive: "size-5 text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
         },
         search: {
-            iconStyle: "text-[var(--color-text-muted)]",
+            iconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
         },
         number: {
-            incrementIconStyle: "text-[var(--color-text-muted)]",
-            decrementIconStyle: "text-[var(--color-text-muted)]",
+            incrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+            decrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
         },
     },
     // Password strength indicator with design tokens
@@ -61,23 +68,23 @@ var inputTheme = {
         labelStyle: "text-xs font-semibold mr-1",
         dotStyle: "size-1.5 rounded-full",
         dotActiveStyle: "bg-current",
-        dotInactiveStyle: "bg-border",
+        dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",
         strengthStyles: {
             weak: {
                 label: "Weak",
-                color: "text-[var(--color-danger)]",
+                color: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
             },
             moderate: {
                 label: "Moderate",
-                color: "text-[var(--color-warning)]",
+                color: "text-[var(--color-warning)] dark:text-[var(--color-warning-400)]",
             },
             strong: {
                 label: "Strong",
-                color: "text-[var(--color-success)]",
+                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
             },
             "very-strong": {
                 label: "Very Strong",
-                color: "text-[var(--color-success)]",
+                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
             },
         },
     },

package/dist/components/forms/InputAddress/InputAddress.js

@@ -1,4 +1,4 @@
-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, { useMemo, useState, useCallback } from 'react';
 import { Input } from '../Input/Input.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';

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

@@ -1,4 +1,4 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import { inputTheme } from '../Input/Input.theme.js';
 
 /**

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { InputCounterProps } from './InputCounter.types';
+import React from "react";
+import { InputCounterProps } from "./InputCounter.types";
 /**
  * InputCounter component with animated number display
  *

package/dist/components/forms/InputCounter/InputCounter.js

@@ -0,0 +1,172 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo, useEffect, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { inputCounterTheme } from './InputCounter.theme.js';
+import { Button } from '../../core/Button/Button.js';
+import { SlidingNumber } from '../../core/SlidingNumber/SlidingNumber.js';
+import { cn } from '../../../utils/cn.js';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+
+/**
+ * InputCounter component with animated number display
+ *
+ * Features:
+ * - Increment/decrement buttons
+ * - Smooth sliding number animation
+ * - Min/max value constraints
+ * - Custom step size (supports decimals)
+ * - Keyboard support (Arrow Up/Down, Page Up/Down)
+ * - Controlled component pattern
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useState(0);
+ *
+ * return (
+ *   <InputCounter
+ *     value={count}
+ *     onChange={setCount}
+ *     min={0}
+ *     max={100}
+ *     step={1}
+ *   />
+ * );
+ * ```
+ */
+var InputCounter = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, onChange = _a.onChange, min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, decimalPlaces = _a.decimalPlaces; _a.formatNumber; var className = _a.className, buttonProps = _a.buttonProps, theme = _a.theme, _e = _a.transition, transition = _e === void 0 ? { type: "spring", bounce: 0, stiffness: 300, damping: 30 } : _e, _f = _a["aria-label"], ariaLabel = _f === void 0 ? "Counter" : _f, props = __rest(_a, ["value", "onChange", "min", "max", "step", "disabled", "decimalPlaces", "formatNumber", "className", "buttonProps", "theme", "transition", "aria-label"]);
+    var shouldReduceMotion = useReducedMotion();
+    var shouldDisableAnimations = !!shouldReduceMotion;
+    // Auto-detect decimal places from step if not explicitly provided
+    var autoDecimalPlaces = useMemo(function () {
+        if (decimalPlaces !== undefined)
+            return decimalPlaces;
+        if (!step)
+            return 0;
+        var stepStr = step.toString();
+        var decimalIndex = stepStr.indexOf(".");
+        if (decimalIndex === -1)
+            return 0;
+        return stepStr.length - decimalIndex - 1;
+    }, [step, decimalPlaces]);
+    // Merge theme overrides
+    var mergedTheme = __assign(__assign({}, inputCounterTheme), theme);
+    // Auto-clamp value to min/max bounds when they change
+    useEffect(function () {
+        var clampedValue = value;
+        var needsUpdate = false;
+        // Clamp to min
+        if (min !== undefined && value < min) {
+            clampedValue = min;
+            needsUpdate = true;
+        }
+        // Clamp to max
+        if (max !== undefined && value > max) {
+            clampedValue = max;
+            needsUpdate = true;
+        }
+        if (needsUpdate) {
+            onChange(clampedValue);
+        }
+    }, [min, max, value, onChange]);
+    // Handle increment
+    var handleIncrement = useCallback(function () {
+        if (disabled)
+            return;
+        var newValue = value + step;
+        // Round to avoid floating point precision errors
+        var decimalPlaces = Math.max((step.toString().split(".")[1] || "").length, (value.toString().split(".")[1] || "").length);
+        var roundedValue = Number(newValue.toFixed(decimalPlaces));
+        // Check max constraint
+        if (max !== undefined && roundedValue > max) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn("InputCounter: Cannot increment beyond max value (".concat(max, ")"));
+            }
+            return;
+        }
+        onChange(roundedValue);
+    }, [value, step, max, disabled, onChange]);
+    // Handle decrement
+    var handleDecrement = useCallback(function () {
+        if (disabled)
+            return;
+        var newValue = value - step;
+        // Round to avoid floating point precision errors
+        var decimalPlaces = Math.max((step.toString().split(".")[1] || "").length, (value.toString().split(".")[1] || "").length);
+        var roundedValue = Number(newValue.toFixed(decimalPlaces));
+        // Check min constraint
+        if (min !== undefined && roundedValue < min) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn("InputCounter: Cannot decrement below min value (".concat(min, ")"));
+            }
+            return;
+        }
+        onChange(roundedValue);
+    }, [value, step, min, disabled, onChange]);
+    // Keyboard support
+    useEffect(function () {
+        var handleKeyDown = function (event) {
+            if (disabled)
+                return;
+            // Check if the counter is focused
+            var target = event.target;
+            if (!target.closest('[data-counter="true"]'))
+                return;
+            switch (event.key) {
+                case "ArrowUp":
+                    event.preventDefault();
+                    handleIncrement();
+                    break;
+                case "ArrowDown":
+                    event.preventDefault();
+                    handleDecrement();
+                    break;
+                case "PageUp":
+                    event.preventDefault();
+                    var pageUpValue = value + step * 10;
+                    if (max === undefined || pageUpValue <= max) {
+                        onChange(pageUpValue);
+                    }
+                    else if (max !== undefined) {
+                        onChange(max);
+                    }
+                    break;
+                case "PageDown":
+                    event.preventDefault();
+                    var pageDownValue = value - step * 10;
+                    if (min === undefined || pageDownValue >= min) {
+                        onChange(pageDownValue);
+                    }
+                    else if (min !== undefined) {
+                        onChange(min);
+                    }
+                    break;
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return function () { return window.removeEventListener("keydown", handleKeyDown); };
+    }, [
+        value,
+        step,
+        min,
+        max,
+        disabled,
+        onChange,
+        handleIncrement,
+        handleDecrement,
+    ]);
+    // Check if buttons should be disabled
+    var canDecrement = !disabled && (min === undefined || value > min);
+    var canIncrement = !disabled && (max === undefined || value < max);
+    return (React__default.createElement(motion.div, __assign({ ref: ref, "data-counter": "true", layout: true, transition: shouldDisableAnimations ? undefined : transition, className: cn(mergedTheme.baseStyle, className), role: "spinbutton", "aria-label": ariaLabel, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0 }, props),
+        React__default.createElement(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !disabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !disabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined },
+            React__default.createElement(Button, __assign({ size: "sm", variant: "link", iconOnly: true }, buttonProps, { onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement" }),
+                React__default.createElement(MinusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }))),
+        React__default.createElement(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: mergedTheme.numberStyle, transition: transition }),
+        React__default.createElement(motion.div, { className: mergedTheme.buttonWrapperStyle, whileHover: !disabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !disabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined },
+            React__default.createElement(Button, __assign({ size: "sm", variant: "link", iconOnly: true }, buttonProps, { onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment" }),
+                React__default.createElement(PlusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 })))));
+});
+InputCounter.displayName = "InputCounter";
+
+export { InputCounter };

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

@@ -0,0 +1,11 @@
+/**
+ * InputCounter theme configuration
+ * Follows Flikkui design system with CSS variables
+ */
+var inputCounterTheme = {
+    baseStyle: "flex items-center gap-3 transition-all p-1 border border-[var(--color-border)] rounded-[var(--form-rounded)] w-fit",
+    buttonWrapperStyle: "flex-shrink-0",
+    numberStyle: "min-w-fit text-center text-sm font-medium text-[var(--color-text-primary)] tabular-nums select-none",
+};
+
+export { inputCounterTheme };

package/dist/components/forms/InputCreditCard/InputCreditCard.js

@@ -1,4 +1,4 @@
-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, { useMemo, useState, useCallback } from 'react';
 import { Input } from '../Input/Input.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';

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

@@ -1,4 +1,4 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import { inputTheme } from '../Input/Input.theme.js';
 
 /**

package/dist/components/forms/InputDate/InputDate.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, useRef, useEffect, useCallback } from 'react';
 import { Input } from '../Input/Input.js';
 import '../Input/Input.theme.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __spreadArray, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __spreadArray, __assign } from '/Users/ggn/Development/ui-flik/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';

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,88 @@
+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(_a) {
+    var onSubmit = _a.onSubmit, onOptimisticUpdate = _a.onOptimisticUpdate, onSuccess = _a.onSuccess, onError = _a.onError, onRollback = _a.onRollback, retry = _a.retry, _b = _a.offlineQueue, offlineQueue = _b === void 0 ? false : _b, _c = _a.resetOnSuccess, resetOnSuccess = _c === void 0 ? false : _c, children = _a.children, className = _a.className, id = _a.id, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var theme = optimisticFormTheme;
+    var formRef = useRef(null);
+    // Use optimistic mutation hook
+    var _e = useOptimisticMutation(onSubmit, {
+        onMutate: function (data) { return data; }, // Pass form data as context
+        onOptimisticUpdate: onOptimisticUpdate
+            ? function (data, _context) { return onOptimisticUpdate(data); }
+            : undefined,
+        onSuccess: function (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: function (err, formData, _context) {
+            onError === null || onError === void 0 ? void 0 : onError(err, formData);
+            onRollback === null || onRollback === void 0 ? void 0 : onRollback(formData);
+        },
+        retry: retry,
+        offlineQueue: offlineQueue,
+    }), mutate = _e.mutate, status = _e.status, error = _e.error, isOptimistic = _e.isOptimistic, isRolledBack = _e.isRolledBack, isQueued = _e.isQueued;
+    // Handle form submission
+    var handleSubmit = useCallback(function (event) {
+        event.preventDefault();
+        if (disabled)
+            return;
+        var formElement = event.currentTarget;
+        var formData = new FormData(formElement);
+        // Convert FormData to object
+        var data = Object.fromEntries(formData.entries());
+        mutate(data);
+    }, [mutate, disabled]);
+    // Create form state for render prop
+    var formState = {
+        status: status,
+        isPending: status === "pending",
+        isOptimistic: isOptimistic,
+        isSuccess: status === "success",
+        isError: status === "error",
+        isRolledBack: isRolledBack,
+        isQueued: isQueued,
+        error: error,
+        submittedData: null, // We don't track this currently
+    };
+    // Determine children to render
+    var 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 @@
+var optimisticFormTheme = {
+    base: "transition-opacity duration-200",
+    pending: "opacity-70 pointer-events-none",
+    error: "",
+    success: "",
+};
+
+export { optimisticFormTheme };

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

@@ -0,0 +1,74 @@
+import type { RetryConfig } from "../../../utils/retryUtils";
+import type { OptimisticError } from "../../../utils/optimisticErrors";
+/**
+ * Form submission status
+ */
+export type OptimisticFormStatus = "idle" | "pending" | "success" | "error";
+/**
+ * State passed to render prop children
+ */
+export interface OptimisticFormState<TFormData = unknown> {
+    /** Current form status */
+    status: OptimisticFormStatus;
+    /** True when form is submitting */
+    isPending: boolean;
+    /** True when showing optimistic state */
+    isOptimistic: boolean;
+    /** True when submission succeeded */
+    isSuccess: boolean;
+    /** True when submission failed */
+    isError: boolean;
+    /** True when rollback occurred */
+    isRolledBack: boolean;
+    /** True when queued for offline */
+    isQueued: boolean;
+    /** Error if submission failed */
+    error: OptimisticError | null;
+    /** Last submitted form data */
+    submittedData: TFormData | null;
+}
+/**
+ * Props for OptimisticForm component
+ */
+export interface OptimisticFormProps<TData, TFormData> {
+    /** Form submission handler - returns server response */
+    onSubmit: (data: TFormData) => Promise<TData>;
+    /** Called immediately to apply optimistic update */
+    onOptimisticUpdate?: (data: TFormData) => void;
+    /** Called on successful submission */
+    onSuccess?: (response: TData, formData: TFormData) => void;
+    /** Called when submission fails */
+    onError?: (error: OptimisticError, formData: TFormData) => void;
+    /** Called when rollback is executed */
+    onRollback?: (formData: TFormData) => void;
+    /** Retry configuration */
+    retry?: RetryConfig;
+    /** Queue submissions when offline */
+    offlineQueue?: boolean;
+    /** Reset form on successful submission */
+    resetOnSuccess?: boolean;
+    /**
+     * Form content - can be static or render prop
+     * Render prop receives current form state
+     */
+    children: React.ReactNode | ((state: OptimisticFormState<TFormData>) => React.ReactNode);
+    /** Additional class names for form element */
+    className?: string;
+    /** Form ID */
+    id?: string;
+    /** Whether the form is disabled */
+    disabled?: boolean;
+}
+/**
+ * Theme configuration for OptimisticForm
+ */
+export interface OptimisticFormTheme {
+    /** Base form styles */
+    base?: string;
+    /** Styles when submitting */
+    pending?: string;
+    /** Styles when error */
+    error?: string;
+    /** Styles when success */
+    success?: string;
+}

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

@@ -0,0 +1,3 @@
+export { OptimisticForm } from "./OptimisticForm";
+export type { OptimisticFormProps, OptimisticFormState, OptimisticFormStatus, OptimisticFormTheme, } from "./OptimisticForm.types";
+export { optimisticFormTheme } from "./OptimisticForm.theme";

package/dist/components/forms/Radio/Radio.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 { radioTheme } from './Radio.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';