@flikk/ui 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/components/forms/Select/Select.js

@@ -13,40 +13,9 @@ import { cn } from '../../../utils/cn.js';
 import { isValidTypeaheadChar, findNextMatchingOption, TYPEAHEAD_TIMEOUT_MS } from '../../../utils/typeaheadUtils.js';
 import { Tag } from '../../core/Tag/Tag.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 import { useSelectState } from './useSelectState.js';
 
-// ============================================================================
-// Dark Mode Hook
-// ============================================================================
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = React__default.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();
-        // Observe class changes on html and body
-        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;
-};
 /**
  * SelectContext - exported for external consumption
  */
@@ -104,7 +73,7 @@ function SelectProvider({ children, selectState, size = "md", componentState = "
 /**
  * Select Button Component
  */
-const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, className = "", onClick, onFocus, onBlur, children, }) => {
+const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, contentStart, contentEnd, className = "", onClick, onFocus, onBlur, children, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, }) => {
     var _a, _b, _c, _d, _e, _f;
     const { theme, buttonRef } = useSelectContext();
     const baseStyle = theme.baseStyle || "";
@@ -118,17 +87,23 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
     const iconEndStyle = theme.iconEndStyle || "";
     const iconStartPadding = iconStart ? ((_e = theme.iconPadding) === null || _e === void 0 ? void 0 : _e.left) || "" : "";
     const iconEndPadding = iconEnd ? ((_f = theme.iconPadding) === null || _f === void 0 ? void 0 : _f.right) || "" : "";
+    // Size-aware content slot style (mirrors Input.theme contentStyle)
+    const contentSlotStyle = `flex items-center px-3 ${size === "sm"
+        ? "text-sm"
+        : size === "lg"
+            ? "text-base"
+            : "text-sm"} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`;
     // Use either the themed focus state or directly apply the focus classes if the theme is not working
     const activeFocusState = isOpen
         ? focusStateStyle ||
             "outline-2 outline-[var(--color-primary)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsx("div", { className: cn(buttonWrapperStyle), children: jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }) }));
+    return (jsxs("div", { className: cn(buttonWrapperStyle, "flex items-stretch"), children: [contentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentSlotStyle, "pr-0 border-r border-[var(--color-border)]"), children: contentStart })), jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, "flex-1 min-w-0", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, "aria-labelledby": ariaLabelledby, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }), contentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentSlotStyle, "pl-0 border-l border-[var(--color-border)]"), children: contentEnd }))] }));
 };
 /**
  * Select Options Component
  */
-const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, children, portal = true, placement = "bottom-start", offset = 4, triggerRef: customTriggerRef, }) => {
+const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, children, portal = true, placement = "bottom-start", offset = 4, triggerRef: customTriggerRef, listboxId, }) => {
     var _a;
     const context = useSelectContext();
     const { optionsRef, buttonRef, highlightedIndex, setHighlightedIndex, filteredOptions, searchable, searchValue, setSearchValue, enableTypeahead, typeaheadValue, setTypeaheadValue, typeaheadTimeoutRef, theme, selectOption, } = context;
@@ -285,22 +260,12 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
             searchInputRef.current.select();
         }
     }, [isOpen, searchable]);
-    // Add effect to measure content after render for improved positioning
-    useEffect(() => {
-        if (isOpen && contentRef.current) {
-            // Trigger recalculation after content renders
-            const timer = setTimeout(() => {
-                // Hook will remeasure automatically due to contentRef dependency
-            }, 0);
-            return () => clearTimeout(timer);
-        }
-    }, [isOpen, children, filteredOptions.length]);
     // Handle search input change
     const handleSearchChange = (e) => {
         setSearchValue(e.target.value);
         setHighlightedIndex(-1); // Reset highlighted index when search changes
     };
-    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(optionsContainerStyle, className), style: {
+    const optionsContent = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, id: listboxId, className: cn(optionsContainerStyle, className), style: {
                 ...cssVariables,
                 overscrollBehavior: "contain",
                 ...(portal
@@ -386,7 +351,7 @@ const SelectOption = ({ value, isSelected, disabled, className = "", onSelect, c
  * />
  * ```
  */
-const SelectInner = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search options...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, multiple = false, maxDisplayedChips = 3, children, }, ref) => {
+const SelectInner = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, contentStart, contentEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search options...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, multiple = false, maxDisplayedChips = 3, children, }, ref) => {
     var _a;
     // Merge theme with overrides
     const theme = useMemo(() => ({ ...selectTheme, ...(themeOverrides || {}) }), [themeOverrides]);
@@ -438,18 +403,23 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
     // Generate a unique ID if not provided
     const generatedId = React__default.useId();
     const selectId = id || generatedId;
-    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: selectId, required: required, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
+    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { id: `${selectId}-label`, htmlFor: selectId, required: required, state: state, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, contentStart: contentStart, contentEnd: contentEnd, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, "aria-labelledby": label && typeof label === 'string' ? `${selectId}-label` : undefined, "aria-invalid": state === "invalid" || undefined, "aria-describedby": helperText ? `${selectId}-helper` : undefined, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
                             ? "flex min-w-0"
                             : "block truncate", (multiple ? selectedValues.length > 0 : selectedOption)
                             ? theme.valueTextStyle
-                            : theme.placeholderTextStyle), children: computedDisplayValue }) }), jsx(SelectOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, children: children ||
-                        filteredOptions.map((option) => {
-                            const isCreateOption = option.id === "__create__";
-                            const isSelected = multiple
-                                ? isValueSelected(option.value)
-                                : option.value === selectedValue;
-                            return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(PlusIcon, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : multiple ? (jsxs(Fragment, { children: [jsx("span", { className: "block truncate", children: option.label }), isSelected && (jsx("span", { className: theme.checkIconStyle, children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
-                        }) }), helperText && (typeof helperText === 'string' ? (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
+                            : theme.placeholderTextStyle), children: computedDisplayValue }) }), jsx(SelectOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, listboxId: `${selectId}-listbox`, children: children ||
+                        (() => {
+                            const displayedOptions = filteredOptions.length > 100
+                                ? filteredOptions.slice(0, 100)
+                                : filteredOptions;
+                            return (jsxs(Fragment, { children: [displayedOptions.map((option) => {
+                                        const isCreateOption = option.id === "__create__";
+                                        const isSelected = multiple
+                                            ? isValueSelected(option.value)
+                                            : option.value === selectedValue;
+                                        return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(PlusIcon, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : multiple ? (jsxs(Fragment, { children: [jsx("span", { className: "block truncate", children: option.label }), isSelected && (jsx("span", { className: theme.checkIconStyle, children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
+                                    }), filteredOptions.length > 100 && (jsxs("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] text-center border-t border-[var(--color-border)]", children: ["Showing 100 of ", filteredOptions.length, " results \u2014 refine your search"] }))] }));
+                        })() }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${selectId}-helper`, className: cn(helperTextStyle, helperTextStateStyle), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
 };
 const SelectForwarded = React__default.forwardRef(SelectInner);
 SelectForwarded.displayName = "Select";

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

@@ -64,6 +64,10 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     iconStart?: React.ReactNode;
     /** Right icon to display in the select button (default is chevron) */
     iconEnd?: React.ReactNode;
+    /** Structural content rendered before iconStart (e.g. a prefix label or nested Select) */
+    contentStart?: React.ReactNode;
+    /** Structural content rendered after iconEnd (e.g. a suffix label or nested Select) */
+    contentEnd?: React.ReactNode;
     /** Children to render instead of default options */
     children?: React.ReactNode;
     /** Component-level theme overrides */
@@ -115,6 +119,16 @@ export interface SelectButtonProps extends SelectBaseProps {
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /** Children to render inside the button */
     children?: React.ReactNode;
+    /** Marks the button as invalid for assistive technologies */
+    "aria-invalid"?: boolean;
+    /** ID of the element that describes this button (e.g. helper text) */
+    "aria-describedby"?: string;
+    /** ID of the element that labels this button (e.g. form label) */
+    "aria-labelledby"?: string;
+    /** Structural content rendered before iconStart */
+    contentStart?: React.ReactNode;
+    /** Structural content rendered after iconEnd */
+    contentEnd?: React.ReactNode;
 }
 /**
  * Select options container props

package/dist/components/forms/Signature/Signature.js

@@ -145,7 +145,7 @@ const Signature = React__default.forwardRef(({ id, label, labelClassName, helper
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || '';
     const stateClasses = ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || '';
     const helperTextClasses = theme.helperText || '';
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required, children: label }) })), jsx("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width, height }, children: jsxs("div", { ref: ref, className: baseClasses, ...props, children: [jsx("canvas", { ref: canvasRef, id: signatureId, className: cn(theme.canvasStyle, customTheme.canvasStyle), tabIndex: isDisabled ? -1 : 0, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, "aria-label": label || 'Signature canvas', "aria-required": required, "aria-invalid": isInvalid, "aria-disabled": isDisabled }), isEmpty && placeholder && !isDisabled && (jsx("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle), children: placeholder })), showControls && !isDisabled && (jsxs("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button", children: "Clear" }), jsx(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button", children: "Save" })] }))] }) }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width, height }, children: jsxs("div", { ref: ref, className: baseClasses, ...props, children: [jsx("canvas", { ref: canvasRef, id: signatureId, className: cn(theme.canvasStyle, customTheme.canvasStyle), tabIndex: isDisabled ? -1 : 0, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, "aria-label": typeof label === 'string' ? label : 'Signature canvas', "aria-required": required, "aria-invalid": isInvalid, "aria-disabled": isDisabled }), isEmpty && placeholder && !isDisabled && (jsx("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle), children: placeholder })), showControls && !isDisabled && (jsxs("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button", children: "Clear" }), jsx(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button", children: "Save" })] }))] }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Signature.displayName = 'Signature';
 

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 /**
  * Signature component size variants
  */
@@ -51,11 +51,11 @@ export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
     /** Unique identifier for the signature field */
     id?: string;
     /** Label text for the signature */
-    label?: string;
+    label?: ReactNode;
     /** Additional class name for the label */
     labelClassName?: string;
     /** Helper text displayed below the signature */
-    helperText?: string;
+    helperText?: ReactNode;
     /** Additional class name for the helper text */
     helperTextClassName?: string;
     /** Additional class name for the wrapper */

package/dist/components/forms/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useCallback, useMemo } from 'react';
+import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { sliderTheme } from './Slider.theme.js';
 import { cn } from '../../../utils/cn.js';
@@ -7,9 +7,21 @@ import { cn } from '../../../utils/cn.js';
 const Slider = React__default.forwardRef(({ state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", min = 0, max = 100, step = 1, value, defaultValue, onChange, onChangeCommitted, showValue = false, unit = "", showMinMax = false, showTicks = false, tickStep, range = false, iconStart, iconEnd, theme = {}, required = false, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
     var _a;
     const trackRef = useRef(null);
+    // Track active pointer listeners so they can be cleaned up on unmount during a drag
+    const activeListenersRef = useRef({ move: null, up: null });
+    // Cleanup on unmount — removes any lingering listeners if component unmounts mid-drag
+    useEffect(() => {
+        return () => {
+            const { move, up } = activeListenersRef.current;
+            if (move)
+                document.removeEventListener("pointermove", move);
+            if (up)
+                document.removeEventListener("pointerup", up);
+        };
+    }, []);
     const generatedId = React__default.useId();
     const sliderId = id || generatedId;
-    const helperTextId = helperText ? `${sliderId}-helper` : undefined;
+    const helperTextId = typeof helperText === 'string' && helperText ? `${sliderId}-helper` : undefined;
     // Handle controlled/uncontrolled value
     const [internalValue, setInternalValue] = useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : (range ? [min, min] : min));
     const currentValue = value !== null && value !== void 0 ? value : internalValue;
@@ -68,11 +80,13 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
             }
         };
         const handleEnd = () => {
+            activeListenersRef.current = { move: null, up: null };
             setDragIndex(null);
             onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(currentValue);
             document.removeEventListener("pointermove", handleMove);
             document.removeEventListener("pointerup", handleEnd);
         };
+        activeListenersRef.current = { move: handleMove, up: handleEnd };
         document.addEventListener("pointermove", handleMove);
         document.addEventListener("pointerup", handleEnd);
     }, [
@@ -217,7 +231,7 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
         return `${currentValue}${unit}`;
     };
     const filterId = `slider-liquid-lens-${sliderId}`;
-    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, 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" })] }) }) }), label && (jsx(FormLabel, { htmlFor: sliderId, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
+    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, 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" })] }) }) }), label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: sliderId, state: state, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })) : (label)), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
                                         ticks.map((tick) => {
                                             const percentage = getPercentage(tick);
                                             return (jsx("div", { className: mergedTheme.tickStyle, style: { left: `${percentage}%` } }, tick));
@@ -237,7 +251,7 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
                                             }, "aria-hidden": "true" })] }, index));
                             }), name && (jsx("input", { type: "hidden", name: name, value: Array.isArray(currentValue)
                                     ? currentValue.join(",")
-                                    : currentValue }))] }), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: max })), showValue && (jsx("div", { className: cn(mergedTheme.valueDisplayStyle), children: formatValueDisplay() })), iconEnd && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconEnd }))] }), helperText && (jsx("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName), children: helperText }))] }));
+                                    : currentValue }))] }), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: max })), showValue && (jsx("div", { className: cn(mergedTheme.valueDisplayStyle), children: formatValueDisplay() })), iconEnd && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconEnd }))] }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Slider.displayName = "Slider";
 

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

@@ -26,9 +26,9 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     /** The state of the slider (default, disabled, invalid) */
     state?: SliderState;
     /** Optional label text for the slider */
-    label?: string;
+    label?: React.ReactNode;
     /** Optional helper text displayed below the slider */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Minimum value for the slider */
     min?: number;
     /** Maximum value for the slider */

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 */