@flikk/ui 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/components/forms/Switch/Switch.js

@@ -8,8 +8,10 @@ import { cn } from '../../../utils/cn.js';
 /**
  * Switch component for toggling between two states
  */
-const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onChange, label, description, state = "default", labelPosition = "end", theme, className, ...rest }, ref) => {
-    const [internalChecked, setInternalChecked] = useState(false);
+const Switch = React__default.forwardRef(({ id, checked: controlledChecked, defaultChecked, onChange, label, description, state = "default", labelPosition = "end", size = "md", theme, className, name, value, required, form, ...rest }, ref) => {
+    const generatedId = React__default.useId();
+    const switchId = id !== null && id !== void 0 ? id : generatedId;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     // Determine if component is controlled or uncontrolled
     const isControlled = controlledChecked !== undefined;
     const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -24,18 +26,9 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
     };
-    const handleTrackClick = () => {
-        if (!isDisabled) {
-            const newValue = !isChecked;
-            if (!isControlled) {
-                setInternalChecked(newValue);
-            }
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-    };
     // Label and description content
     const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label &&
-                (typeof label === "string" ? (jsx(FormLabel, { htmlFor: id, state: state, children: label })) : (label)), description &&
+                (typeof label === "string" ? (jsx(FormLabel, { htmlFor: switchId, state: state, children: label })) : (label)), description &&
                 (typeof description === "string" ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
     // Build data attributes for state-based styling
     const trackDataState = isDisabled
@@ -45,14 +38,14 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
             : isChecked
                 ? "checked"
                 : "unchecked";
-    const filterId = `switch-liquid-lens-${id}`;
+    const filterId = `switch-liquid-lens-${switchId}`;
     // Switch toggle component
-    const switchToggle = (jsxs("div", { className: "relative flex items-center h-6", children: [jsx("input", { ref: ref, type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }), jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), jsx("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick, children: jsxs(motion.div, { className: cn(switchTheme.thumb, theme === null || theme === void 0 ? void 0 : theme.thumb, ""), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 }, whileTap: isDisabled ? undefined : { scale: 1.15 }, style: { filter: `url(#${filterId})` }, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
-                                backdropFilter: "blur(0.6px)",
-                                WebkitBackdropFilter: "blur(0.6px)",
-                            }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/80", "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[2] rounded-full", style: {
-                                boxShadow: "inset 1px 1px 0 rgba(255,255,255,0.35), inset 1px 3px 0 rgba(0,0,0,0.03), inset 0 0 14px rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.06)",
-                            }, "aria-hidden": "true" })] }) })] }));
+    const switchToggle = (jsxs("div", { className: "relative flex items-center h-6", children: [jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), jsxs("label", { htmlFor: switchId, className: "contents", children: [jsx("input", { ref: ref, type: "checkbox", id: switchId, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", name: name, value: value, required: required, form: form }), jsx("div", { className: cn(switchTheme.track, switchTheme.trackSizes[size], theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, "aria-hidden": "true", children: jsxs(motion.div, { className: cn(switchTheme.thumb, switchTheme.thumbSizes[size], theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 }, whileTap: isDisabled ? undefined : { scale: 1.15 }, style: { filter: `url(#${filterId})` }, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
+                                        backdropFilter: "blur(0.6px)",
+                                        WebkitBackdropFilter: "blur(0.6px)",
+                                    }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/80", "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[2] rounded-full", style: {
+                                        boxShadow: "inset 1px 1px 0 rgba(255,255,255,0.35), inset 1px 3px 0 rgba(0,0,0,0.03), inset 0 0 14px rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.06)",
+                                    }, "aria-hidden": "true" })] }) })] })] }));
     return (jsxs("div", { className: cn(switchTheme.container, labelPosition === "start" ? "flex-row-reverse" : "flex-row", theme === null || theme === void 0 ? void 0 : theme.container, className), ...rest, children: [labelContent, switchToggle] }));
 });
 Switch.displayName = "Switch";

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

@@ -3,9 +3,19 @@
  */
 const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
-    track: "w-12 h-6 rounded-full cursor-pointer shadow-inner bg-[var(--color-background-tertiary)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)] outline outline-[var(--color-border)] transition-colors duration-300",
-    thumb: "w-7 h-5 rounded-full bg-transparent overflow-hidden border border-[var(--color-border)]/40 shadow-lg",
+    track: "rounded-full cursor-pointer shadow-inner bg-[var(--color-background-tertiary)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)] outline outline-[var(--color-border)] transition-colors duration-300",
+    thumb: "rounded-full bg-transparent overflow-hidden border border-[var(--color-border)]/40 shadow-lg",
     description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
+    trackSizes: {
+        sm: "w-9 h-5",
+        md: "w-12 h-6",
+        lg: "w-14 h-7",
+    },
+    thumbSizes: {
+        sm: "w-5 h-4",
+        md: "w-7 h-5",
+        lg: "w-8 h-6",
+    },
 };
 /**
  * Thumb position values for animation

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

@@ -6,14 +6,20 @@ export type SwitchLabelPosition = "start" | "end";
  * State variants for the switch component
  */
 export type SwitchState = 'default' | 'disabled' | 'invalid';
+/**
+ * Size variants for the switch component
+ */
+export type SwitchSize = 'sm' | 'md' | 'lg';
 /**
  * Switch component props
  */
 export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /** Unique identifier for the switch input */
-    id: string;
+    /** Unique identifier for the switch input — if omitted, one is generated via React.useId() */
+    id?: string;
     /** Whether the switch is checked (controlled mode) */
     checked?: boolean;
+    /** Initial checked state for uncontrolled mode */
+    defaultChecked?: boolean;
     /** Function called when the switch state changes */
     onChange?: (checked: boolean) => void;
     /** Label for the switch — pass a string for default styling, or a ReactNode for full control */
@@ -24,8 +30,18 @@ export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     state?: SwitchState;
     /** Position of the label relative to the switch */
     labelPosition?: SwitchLabelPosition;
+    /** Size of the switch track and thumb */
+    size?: SwitchSize;
     /** Optional theme overrides */
     theme?: SwitchThemeOverrides;
+    /** HTML name attribute for the hidden input */
+    name?: string;
+    /** HTML value attribute for the hidden input */
+    value?: string;
+    /** Whether the hidden input is required */
+    required?: boolean;
+    /** The id of the form this input belongs to */
+    form?: string;
 }
 /**
  * Switch theme configuration
@@ -35,6 +51,8 @@ export interface SwitchTheme {
     track: string;
     thumb: string;
     description: string;
+    trackSizes: Record<SwitchSize, string>;
+    thumbSizes: Record<SwitchSize, string>;
 }
 /**
  * Switch theme overrides

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

@@ -4,7 +4,7 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
 import { textareaTheme } from './Textarea.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, ...props }, ref) => {
+const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, onValueChange, ...props }, ref) => {
     var _a, _b, _c, _d;
     const [isFocused, setIsFocused] = useState(false);
     const generatedId = React__default.useId();
@@ -30,6 +30,8 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
         : isDisabled
             ? "state-disabled"
             : "state-default";
+    // Pull onChange out of props so the explicit handler below isn't overwritten by the spread
+    const { onChange: propsOnChange, ...restProps } = props;
     // Get theme classes
     const wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
     const inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
@@ -37,7 +39,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
     const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": helperText ? `${inputId}-helper` : undefined, required: required, rows: rows, cols: cols, onFocus: (e) => {
                                 var _a;
                                 setIsFocused(true);
                                 (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -45,7 +47,10 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
                                 var _a;
                                 setIsFocused(false);
                                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                            }, ...props }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
+                            }, onChange: (e) => {
+                                propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(e);
+                                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
+                            }, ...restProps }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Textarea.displayName = "Textarea";
 

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

@@ -35,6 +35,8 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     cols?: number;
     /** Render only the textarea element without wrapper, label, or helper text */
     unstyled?: boolean;
+    /** Callback fired with the raw string value on every change — convenience alternative to reading e.target.value from onChange */
+    onValueChange?: (value: string) => void;
 }
 export type TextareaSize = 'sm' | 'md' | 'lg';
 export type TextareaState = 'default' | 'disabled' | 'invalid';

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

@@ -447,7 +447,7 @@ const TimePicker = React__default.forwardRef(({ value, defaultValue, onChange, f
                 else if (ref) {
                     ref.current = el;
                 }
-            }, className: cn(mergedTheme.containerStyle, className), children: [label && (jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required, children: label })), jsx(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, iconStart: iconStart, iconEnd: iconEnd, inputValue: inputDisplayValue, onInputChange: handleInputChange, onInputFocus: handleInputFocus, onInputKeyDown: handleInputKeyDown, format: format, period: currentPeriod, onPeriodToggle: handlePeriodToggle, placeholder: placeholder }), jsxs(TimePickerContent, { isOpen: isOpen, onCancel: handleCancel, onSave: handleSave, portal: true, placement: "bottom-start", offset: 4, dropdownRef: dropdownRef, children: [jsx(WheelColumn, { label: "Hour", options: hourOptions, value: getDisplayHour(wheelTime.hour, format), onChange: handleHourChange, theme: mergedTheme }), jsx(WheelColumn, { label: "Min", options: minuteOptions, value: wheelTime.minute, onChange: handleMinuteChange, theme: mergedTheme }), format === "12h" && (jsx(WheelColumn, { label: "", options: periodOptions, value: wheelTime.period || "AM", onChange: handlePeriodChange, theme: mergedTheme }))] }), (helperText || validationError) && (jsx("p", { className: cn(mergedTheme.helperTextStyle, (_a = mergedTheme.helperTextStates) === null || _a === void 0 ? void 0 : _a[finalState], helperTextClassName), children: validationError || helperText }))] }) }));
+            }, className: cn(mergedTheme.containerStyle, className), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required, children: label })) : (label)), jsx(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, iconStart: iconStart, iconEnd: iconEnd, inputValue: inputDisplayValue, onInputChange: handleInputChange, onInputFocus: handleInputFocus, onInputKeyDown: handleInputKeyDown, format: format, period: currentPeriod, onPeriodToggle: handlePeriodToggle, placeholder: placeholder, "aria-invalid": finalState === 'invalid' || undefined, "aria-describedby": helperText ? `${inputId}-helper` : undefined }), jsxs(TimePickerContent, { isOpen: isOpen, onCancel: handleCancel, onSave: handleSave, portal: true, placement: "bottom-start", offset: 4, dropdownRef: dropdownRef, children: [jsx(WheelColumn, { label: "Hour", options: hourOptions, value: getDisplayHour(wheelTime.hour, format), onChange: handleHourChange, theme: mergedTheme }), jsx(WheelColumn, { label: "Min", options: minuteOptions, value: wheelTime.minute, onChange: handleMinuteChange, theme: mergedTheme }), format === "12h" && (jsx(WheelColumn, { label: "", options: periodOptions, value: wheelTime.period || "AM", onChange: handlePeriodChange, theme: mergedTheme }))] }), (helperText || validationError) && (typeof helperText === 'string' || validationError ? (jsx("p", { id: `${inputId}-helper`, className: cn(mergedTheme.helperTextStyle, (_a = mergedTheme.helperTextStates) === null || _a === void 0 ? void 0 : _a[finalState], helperTextClassName), children: validationError || helperText })) : (helperText))] }) }));
 });
 TimePicker.displayName = "TimePicker";
 

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

@@ -44,9 +44,9 @@ export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     /** Whether to show a clear button */
     clearable?: boolean;
     /** Optional label text */
-    label?: string;
+    label?: React.ReactNode;
     /** Optional helper text */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Icon to display at the start (left side) */
     iconStart?: React.ReactNode;
     /** Icon to display at the end (right side) */
@@ -175,6 +175,10 @@ export interface TimePickerTriggerProps {
     id?: string;
     /** Whether the trigger is disabled */
     disabled?: boolean;
+    /** Whether the trigger has an invalid value */
+    "aria-invalid"?: boolean;
+    /** ID of the element that describes the trigger */
+    "aria-describedby"?: string;
     /** Whether the dropdown is open */
     isOpen?: boolean;
     /** Visual state of the trigger */

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useContext, useCallback, useState, useEffect } from 'react';
+import { useContext, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
@@ -93,35 +93,8 @@ import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * TimePickerContent Component - contains the time selector dropdown
  * Uses portal positioning like Select and DatePicker components

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

@@ -9,7 +9,7 @@ import { TimePickerContext } from './TimePicker.js';
  * Displays a masked time input that opens the wheel picker on focus
  * Follows the same visual pattern as DatePickerTrigger and SelectButton
  */
-const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, }) => {
+const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
     var _a, _b, _c, _d;
     const context = useContext(TimePickerContext);
     if (!context) {
@@ -31,7 +31,7 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;
     const iconStartPadding = theme.iconStartPadding || "";
     return (jsx("div", { ref: triggerRef, className: "relative w-full", children: jsxs("div", { className: cn(baseStyle, stateStyle, hoverStateStyle, activeFocusState, 'w-full items-center', className // User overrides take highest precedence
-            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Enter time", autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(ClockIcon, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
+            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Enter time", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(ClockIcon, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
                         e.stopPropagation();
                         onClear === null || onClear === void 0 ? void 0 : onClear();
                     }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(XMarkIcon, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: jsx(ChevronUpDownIcon, { className: "h-4 w-4" }) }))] }) }));

package/dist/components/forms/index.js

@@ -138,7 +138,7 @@ export { inputTagTheme } from './InputTag/InputTag.theme.js';
 export { Combobox } from './Combobox/Combobox.js';
 export { comboboxTheme } from './Combobox/Combobox.theme.js';
 export { ColorPicker } from './ColorPicker/ColorPicker.js';
-export { ColorPickerContext, useColorPicker } from './ColorPicker/ColorPickerContext.js';
+export { useColorPicker } from './ColorPicker/ColorPickerContext.js';
 export { ColorPickerTrigger } from './ColorPicker/ColorPickerTrigger.js';
 export { ColorPickerBody } from './ColorPicker/ColorPickerBody.js';
 export { ColorPicker2DCanvas } from './ColorPicker/ColorPicker2DCanvas.js';

package/dist/components/layout/index.js

@@ -0,0 +1,4 @@
+export { FormLayout } from './FormLayout/FormLayout.js';
+export { formLayoutTheme } from './FormLayout/FormLayout.theme.js';
+export { PageLayout } from './PageLayout/PageLayout.js';
+export { pageLayoutTheme } from './PageLayout/PageLayout.theme.js';

package/dist/hooks/index.d.ts

@@ -14,3 +14,4 @@ export { useClickOutside } from "./useClickOutside";
 export { useScaleBackground } from "./useScaleBackground";
 export type { UseScaleBackgroundOptions } from "./useScaleBackground";
 export { useMediaQuery } from "./useMediaQuery";
+export { useDarkMode } from './useDarkMode';

package/dist/hooks/useClickOutside.d.ts

@@ -1,7 +1,13 @@
 import { RefObject } from 'react';
 /**
- * Custom hook that handles clicks outside of the specified element
- * @param ref The reference to the element to detect clicks outside of
- * @param handler The callback function to execute when a click outside is detected
+ * Overload 1 — legacy API: useClickOutside(ref, handler)
+ * Preserves backward compatibility with existing callers.
  */
-export declare const useClickOutside: <T extends HTMLElement | null>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void) => void;
+export declare function useClickOutside<T extends HTMLElement | null>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void): void;
+/**
+ * Overload 2 — new API: useClickOutside(callback, isActive?, additionalRefs?)
+ * Returns a ref to attach to the primary element.
+ * Accepts an optional array of additional refs whose contents count as "inside"
+ * (useful for trigger+content patterns).
+ */
+export declare function useClickOutside(callback: () => void, isActive?: boolean, additionalRefs?: RefObject<HTMLElement | null>[]): RefObject<HTMLElement | null>;

package/dist/hooks/useClickOutside.js

@@ -1,28 +1,48 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
-/**
- * Custom hook that handles clicks outside of the specified element
- * @param ref The reference to the element to detect clicks outside of
- * @param handler The callback function to execute when a click outside is detected
- */
-const useClickOutside = (ref, handler) => {
-    const handlerRef = useRef(handler);
-    handlerRef.current = handler;
-    useEffect(() => {
-        const listener = (event) => {
-            const el = ref.current;
-            if (!el || el.contains(event.target)) {
+// Implementation
+function useClickOutside(refOrCallback, handlerOrIsActive, additionalRefs) {
+    const internalRef = useRef(null);
+    const legacyHandlerRef = useRef(null);
+    // Keep legacy handler ref current
+    if (typeof refOrCallback !== 'function' && typeof handlerOrIsActive === 'function') {
+        legacyHandlerRef.current = handlerOrIsActive;
+    }
+    const isLegacy = typeof refOrCallback !== 'function';
+    const isActive = isLegacy
+        ? true
+        : typeof handlerOrIsActive === 'boolean'
+            ? handlerOrIsActive
+            : true;
+    const handleClickOutside = useCallback((event) => {
+        var _a;
+        const target = event.target;
+        if (isLegacy) {
+            const legacyRef = refOrCallback;
+            const el = legacyRef.current;
+            if (!el || el.contains(target))
+                return;
+            (_a = legacyHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(legacyHandlerRef, event);
+        }
+        else {
+            if (internalRef.current && internalRef.current.contains(target))
                 return;
-            }
-            handlerRef.current(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref]);
-};
+            if (additionalRefs === null || additionalRefs === void 0 ? void 0 : additionalRefs.some(r => { var _a; return (_a = r.current) === null || _a === void 0 ? void 0 : _a.contains(target); }))
+                return;
+            refOrCallback();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLegacy, additionalRefs]);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [handleClickOutside, isActive]);
+    if (isLegacy) {
+        return;
+    }
+    return internalRef;
+}
 
 export { useClickOutside };

package/dist/hooks/useDarkMode.d.ts

@@ -0,0 +1 @@
+export declare function useDarkMode(): boolean;

package/dist/hooks/useDarkMode.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+const _subscribers = new Set();
+let _observer = null;
+function _getIsDark() {
+    if (typeof document === 'undefined')
+        return false;
+    return (document.documentElement.classList.contains('dark') ||
+        document.body.classList.contains('dark') ||
+        document.querySelector('.dark') !== null);
+}
+function _ensureObserver() {
+    if (_observer || typeof document === 'undefined')
+        return;
+    _getIsDark();
+    _observer = new MutationObserver(() => {
+        _getIsDark();
+        _subscribers.forEach((fn) => fn());
+    });
+    _observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class'],
+    });
+    _observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['class'],
+    });
+}
+function useDarkMode() {
+    const [, rerender] = useState(0);
+    useEffect(() => {
+        _ensureObserver();
+        const notify = () => rerender((n) => n + 1);
+        _subscribers.add(notify);
+        return () => {
+            _subscribers.delete(notify);
+        };
+    }, []);
+    return typeof document === 'undefined' ? false : _getIsDark();
+}
+
+export { useDarkMode };

package/dist/hooks/useFormStateMachine.d.ts

@@ -1,5 +1,5 @@
 import { StateMachineConfig, StateIdentifier } from "../utils/stateMachine";
-export interface UseFormStateMachineOptions<TData = any> {
+export interface UseFormStateMachineOptions<TData = unknown> {
     /** Initial form data */
     initialData?: TData;
     /** Callback when state changes */

package/dist/hooks/useNetworkStatus.js

@@ -32,7 +32,7 @@ const getConnection = () => {
  * }
  */
 const useNetworkStatus = () => {
-    const [isOnline, setIsOnline] = useState(() => typeof navigator !== "undefined" ? navigator.onLine : true);
+    const [isOnline, setIsOnline] = useState(true);
     const [wasOffline, setWasOffline] = useState(false);
     const [networkInfo, setNetworkInfo] = useState({});
     const updateNetworkInfo = useCallback(() => {

package/dist/hooks/useOverlay.js

@@ -7,6 +7,8 @@ let lockCount = 0;
 let savedOverflow = '';
 let savedPaddingRight = '';
 function lockScroll() {
+    if (typeof window === 'undefined')
+        return;
     lockCount++;
     if (lockCount === 1) {
         const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
@@ -23,6 +25,8 @@ function lockScroll() {
     }
 }
 function unlockScroll() {
+    if (typeof window === 'undefined')
+        return;
     lockCount = Math.max(0, lockCount - 1);
     if (lockCount === 0) {
         document.body.style.overflow = savedOverflow;

package/dist/hooks/useScaleBackground.js

@@ -1,6 +1,7 @@
-import { useRef, useLayoutEffect, useEffect } from 'react';
+import { useRef, useEffect, useLayoutEffect } from 'react';
 import { animate } from 'motion/react';
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const WRAPPER_SELECTOR = "[data-flik-drawer-wrapper]";
 /**
  * useScaleBackground
@@ -22,7 +23,9 @@ function useScaleBackground({ isOpen, scale = 0.94, borderRadius = 24, position
     const controlsRef = useRef(null);
     // Track current animation progress so rapid toggling picks up where it left off
     const progressRef = useRef(0);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         // Skip if no scaling needed
         if (scale >= 1)
             return;

package/dist/hooks/useSelectPortal.js

@@ -1,5 +1,6 @@
-import { useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**
  * Fixed dropdown positioning hook
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
@@ -288,7 +289,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         contentRef.current.style.left = `${left}px`;
     }, [triggerRef, measureDropdownHeight, measureDropdownWidth, offset]);
     // Reset initial render flag when dropdown opens
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen) {
             if (rafIdRef.current !== null) {
                 cancelAnimationFrame(rafIdRef.current);
@@ -319,7 +322,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         };
     }, [isOpen, calculatePosition]);
     // Initial position calculation
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen)
             return;
         calculatePosition();
@@ -363,7 +368,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         });
     }, [calculatePosition]);
     // Update position on scroll and resize - rAF-synced for smooth tracking
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen)
             return;
         window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
@@ -378,7 +385,9 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         };
     }, [isOpen, handleScroll, handleResize]);
     // Recalculate when dropdown content resizes (e.g. search filtering)
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         if (!isOpen)
             return;
         if (!contentRef.current)

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 export * from "./components/core";
 export * from "./components/data-display";
 export * from "./components/forms";
-export * from "./components/charts";
 export * from "./components/layout";
-export * from "./components/effects";
 export { cn } from "./utils/cn";
 export { debounce } from "./utils/debounce";
 export { useClickOutside } from "./hooks/useClickOutside";