@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

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

@@ -4,12 +4,7 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
 import { inputTheme } from './Input.theme.js';
 import { cn } from '../../../utils/cn.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';
-import '../../../icons/core/LockIcon.js';
-import '../../../icons/core/DollarIcon.js';
-import '../../../icons/core/TickIcon.js';
+import { MagnifyingGlassIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { validateMaskedInput, applyInputMask, getAdjustedCursorPosition } from './inputMasks.js';
 
 const PasswordToggleButton = ({ showPassword, onToggle, passwordToggleClasses, }) => {
@@ -31,10 +26,10 @@ const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement,
     return (jsxs("div", { className: numberButtonsContainerClasses, children: [jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onDecrement();
-                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(MinusIcon, { size: "xs", className: decrementIconStyle, "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
+                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(MinusIcon, { className: cn("size-4", decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onIncrement();
-                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(PlusIcon, { size: "xs", className: incrementIconStyle, "aria-hidden": "true" }) })] }));
+                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(PlusIcon, { className: cn("size-4", incrementIconStyle), "aria-hidden": "true" }) })] }));
 };
 const getActiveDots = (strength) => {
     switch (strength) {
@@ -72,7 +67,7 @@ const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator,
 // ============================================================================
 // Main Input Component
 // ============================================================================
-const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, ...props }, ref) => {
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const generatedId = React__default.useId();
@@ -88,7 +83,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const cursorPositionRef = useRef(null);
     // Default icons based on input type
     const defaultPasswordIcon = type === "password" && !iconStart ? (jsx(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
-    const defaultSearchIcon = type === "search" && !iconStart ? (jsx(SearchIcon, { size: "sm", className: inputTheme.typeStyles.search.iconStyle })) : null;
+    const defaultSearchIcon = type === "search" && !iconStart ? (jsx(MagnifyingGlassIcon, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
     // Use the provided iconStart or the default icon based on input type
     const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
     // Derived state flags for internal use
@@ -275,14 +270,14 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         numberValue !== undefined &&
         typeof min === "number" &&
         numberValue <= min;
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })) : (jsxs("div", { className: "flex justify-between items-center", children: [label, showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] }))), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
-                                        iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, darkMode && "dark", wrapperClassName), children: [label && (typeof label === 'string' ? (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })) : (jsxs("div", { className: "flex justify-between items-center", children: [label, showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] }))), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
+                                        iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": helperText ? `${inputId}-helper` : undefined, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
                                         setIsFocused(true);
                                         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                                     }, onBlur: (e) => {
                                         setIsFocused(false);
                                         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
+                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Input.displayName = "Input";
 

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

@@ -61,6 +61,12 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     passwordStrengthIndicator?: PasswordStrengthIndicator;
     /** Number of decimal places for currency inputs (default: 2). Only applies when type="currency" */
     currencyDecimalPlaces?: number;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputState = 'default' | 'disabled' | 'invalid';

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

@@ -23,7 +23,7 @@ const inputAddressTheme = {
     postalCodeInput: {
         ...inputTheme,
     },
-    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4',
+    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-[var(--color-text-muted)] sm:size-4',
 };
 /**
  * Styled theme matching the reference design

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

@@ -33,7 +33,7 @@ import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
  * );
  * ```
  */
-const InputCounter = React__default.forwardRef(({ value, onChange, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", ...props }, ref) => {
+const InputCounter = React__default.forwardRef(({ value, onChange, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
     // Auto-detect decimal places from step if not explicitly provided

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

@@ -26,7 +26,7 @@ const inputCreditCardTheme = {
     cvcInput: {
         ...inputTheme,
     },
-    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4',
+    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-[var(--color-text-muted)] sm:size-4',
 };
 /**
  * Styled theme matching the reference design

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

@@ -10,7 +10,7 @@ const inputOTPTheme = {
     // OTP input container
     containerStyle: 'flex items-center gap-3',
     // Individual input field styles with design tokens
-    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full',
+    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full !p-0',
     // Input group wrapper for grouped inputs (overrides default Input styling)
     inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
     // Separator between input groups

package/dist/components/forms/Radio/Radio.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from "motion/react";
+/**
+ * Radio dot spring animation
+ * Scales in with a subtle bounce on select, fades out smoothly on deselect
+ */
+export declare const radioDotVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no scale
+ */
+export declare const reducedMotionDotVariants: Variants;

package/dist/components/forms/Radio/Radio.animations.js

@@ -0,0 +1,33 @@
+/**
+ * Radio dot spring animation
+ * Scales in with a subtle bounce on select, fades out smoothly on deselect
+ */
+const radioDotVariants = {
+    unchecked: {
+        scale: 0,
+        opacity: 0,
+        transition: {
+            duration: 0.15,
+            ease: "easeOut",
+        },
+    },
+    checked: {
+        scale: 1,
+        opacity: 1,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 15,
+            mass: 0.5,
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no scale
+ */
+const reducedMotionDotVariants = {
+    unchecked: { opacity: 0 },
+    checked: { opacity: 1 },
+};
+
+export { radioDotVariants, reducedMotionDotVariants };

package/dist/components/forms/Radio/Radio.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useId } from 'react';
+import React__default, { useId, useState } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { useRadioGroupContext } from './RadioContext.js';
 import { RadioGroup } from './RadioGroup.js';
+import { reducedMotionDotVariants, radioDotVariants } from './Radio.animations.js';
 
 /**
  * Radio component for selecting one option from a group
@@ -12,6 +14,7 @@ import { RadioGroup } from './RadioGroup.js';
 const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: checkedProp, defaultChecked, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
     var _a, _b, _c, _d;
     const autoId = useId();
+    const shouldReduceMotion = useReducedMotion();
     const groupContext = useRadioGroupContext();
     // Resolve props from group context or individual props
     const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
@@ -23,9 +26,15 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const isInGroup = groupContext !== undefined;
     const checked = isInGroup ? groupContext.value === value : checkedProp;
     const isControlled = checked !== undefined;
+    // Track internal state for uncontrolled radios (defaultChecked)
+    const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
+    const isChecked = isControlled ? !!checked : internalChecked;
     const handleChange = (e) => {
         if (isDisabled)
             return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
         if (isInGroup) {
             groupContext.onChange(value);
         }
@@ -34,7 +43,7 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const inputProps = isControlled
         ? { checked }
         : { defaultChecked };
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2.5 top-0.25" : "size-3") })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, isDisabled && "saturate-0 opacity-80", size === "sm" ? "size-2.5" : "size-3"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
 });
 RadioComponent.displayName = "Radio";
 const Radio = Object.assign(RadioComponent, { Group: RadioGroup });

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

@@ -9,11 +9,11 @@ const radioTheme = {
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
-        "dark:bg-[var(--color-background-secondary)] " +
+        "dark:bg-[var(--color-background-tertiary)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)]  " +
         // Checked state - dark
-        " " +
+        "checked:bg-[var(--color-neutral-200)] " +
         // Checked outline - light
         "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
         // Checked outline - dark
@@ -28,7 +28,7 @@ const radioTheme = {
         // Disabled state - dark
         "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
         "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
-    dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400 peer-checked:opacity-100 peer-data-[state=disabled]:saturate-0 peer-data-[state=disabled]:peer-checked:opacity-80",
+    dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)]",
     descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
     sizes: {
         sm: "size-5 mt-0.25",

package/dist/components/forms/RichTextEditor/RichTextEditor.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import React__default, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -73,7 +73,7 @@ const DEFAULT_TOOLBAR = {
         "redo",
     ],
 };
-const RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", value = "", onChange, placeholder = "Start typing...", id, required, minHeight = 120, maxHeight, toolbar: toolbarProp = DEFAULT_TOOLBAR, theme = {}, ...props }, ref) => {
+const RichTextEditor = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", value = "", onChange, placeholder = "Start typing...", id, required, minHeight = 120, maxHeight, toolbar: toolbarProp = DEFAULT_TOOLBAR, theme = {}, sanitize, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showToolbar, setShowToolbar] = useState(false);
     const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });
@@ -82,6 +82,15 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     const [showColorPicker, setShowColorPicker] = useState(false);
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
+    // Built-in basic sanitizer: strips <script> tags and on* event handlers
+    const sanitizeHtml = useCallback((html) => {
+        if (sanitize)
+            return sanitize(html);
+        // Basic sanitization — strips script tags and inline event handlers
+        return html
+            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+            .replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
+    }, [sanitize]);
     const editorRef = useRef(null);
     const toolbarRef = useRef(null);
     const fontSizeTriggerRef = useRef(null);
@@ -512,10 +521,10 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
     }, [toolbarConfig.position]);
     useEffect(() => {
         if (editorRef.current && value !== editorRef.current.innerHTML) {
-            editorRef.current.innerHTML = value;
+            editorRef.current.innerHTML = sanitizeHtml(value);
             updateFormattingState();
         }
-    }, [updateFormattingState, value]);
+    }, [updateFormattingState, value, sanitizeHtml]);
     const renderToolbarTool = (tool, index) => {
         var _a, _b;
         const isActive = tool === "bold"
@@ -540,11 +549,11 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
         };
         switch (tool) {
             case "bold":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "w-4 h-4" }) }, index));
             case "italic":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "w-4 h-4" }) }, index));
             case "underline":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "w-4 h-4" }) }, index));
             case "fontSize": {
                 const currentOption = getFontSizeOption(formattingState.fontSize);
                 const dropdownClassName = themeStyles.dropdownStyle;
@@ -584,7 +593,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                         fontSizePortalContentRef.current = null;
                     }
                 }
-                return (jsxs("div", { className: "relative", "data-tool": "fontSize", children: [jsx(Button, { ref: fontSizeTriggerRef, size: "sm", color: "neutral", variant: "ghost", className: cn(themeStyles.toolbarButtonStyle, "px-2 min-w-[3rem] gap-1"), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsxs("div", { className: "relative", "data-tool": "fontSize", children: [jsx(Button, { ref: fontSizeTriggerRef, size: "sm", color: "neutral", variant: "soft", className: cn(themeStyles.toolbarButtonStyle, "px-2 min-w-[3rem] gap-1"), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
@@ -629,7 +638,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                             colorPortalContentRef.current = null;
                         }
                     }
-                    return (jsxs("div", { className: "relative", "data-tool": "textColor", children: [jsx(Button, { ref: colorTriggerRef, size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: (event) => {
+                    return (jsxs("div", { className: "relative", "data-tool": "textColor", children: [jsx(Button, { ref: colorTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: (event) => {
                                     event.preventDefault();
                                     event.stopPropagation();
                                     focusEditor();
@@ -638,27 +647,27 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                 }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker, children: jsx(PaintBrushIcon, { className: "w-4 h-4" }) }), isFloatingToolbar ? null : renderedColorDropdown, isFloatingToolbar ? renderedColorDropdown : null] }, index));
                 }
             case "alignLeft":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("left");
                     }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomLeftIcon, { className: "w-4 h-4" }) }, index));
             case "alignCenter":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("center");
                     }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3Icon, { className: "w-4 h-4" }) }, index));
             case "alignRight":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", "data-pressed": isActive ? "true" : "false", onMouseDown: handleMouseDown, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         handleAlign("right");
                     }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false", children: jsx(Bars3BottomRightIcon, { className: "w-4 h-4" }) }, index));
             case "undo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUturnLeftIcon, { className: "w-4 h-4" }) }, index));
             case "redo":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "ghost", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, index));
+                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUturnRightIcon, { className: "w-4 h-4" }) }, index));
             case "separator":
                 return jsx("div", { className: themeStyles.separatorStyle }, index);
             default:

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

@@ -28,9 +28,9 @@ const richTextEditorTheme = {
     // Toolbar styling (RTE-specific)
     toolbarStyle: "flex items-center gap-1 p-2 border-b border-[var(--color-border)] bg-white dark:bg-[var(--color-background-secondary)]",
     // Toolbar button styling
-    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-white active:bg-gray-200 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-tertiary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:hover:bg-[var(--color-primary-50)] border border-transparent data-[pressed=true]:bg-[var(--color-primary-50)] data-[pressed=true]:text-[var(--color-primary-900)] data-[pressed=true]:shadow-inner data-[pressed=true]:border-[var(--color-primary-200)]",
+    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-white active:bg-[var(--color-background-tertiary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-tertiary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:hover:bg-[var(--color-primary-50)] border border-transparent data-[pressed=true]:bg-[var(--color-primary-50)] data-[pressed=true]:text-[var(--color-primary-900)] data-[pressed=true]:shadow-inner data-[pressed=true]:border-[var(--color-primary-200)]",
     // Dropdown styling (font size, color picker)
-    dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-slate-200 focus:outline-none",
+    dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
     // Dropdown item styling
     dropdownItemStyle: "block w-full px-3 py-2 text-left text-base text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
     // Separator between toolbar sections

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

@@ -48,6 +48,17 @@ export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivEl
     toolbar?: ToolbarConfig;
     /** Component-level theme overrides */
     theme?: RichTextEditorThemeOverrides;
+    /**
+     * Optional HTML sanitizer function applied before setting innerHTML.
+     * Receives raw HTML string, must return sanitized HTML string.
+     * Recommended: pass DOMPurify.sanitize for robust XSS protection.
+     * If not provided, a basic built-in sanitizer strips script tags and on* event handlers.
+     *
+     * @example
+     * import DOMPurify from 'dompurify';
+     * <RichTextEditor sanitize={DOMPurify.sanitize} />
+     */
+    sanitize?: (html: string) => string;
 }
 export type RichTextEditorSize = 'sm' | 'md' | 'lg';
 export type RichTextEditorState = 'default' | 'disabled' | 'invalid';

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

@@ -88,6 +88,6 @@ export declare const SelectOptions: React.FC<SelectOptionsExtendedProps>;
  * Select Option Component
  */
 export declare const SelectOption: <T extends any>({ value, isSelected, disabled, className, onSelect, children, }: SelectOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const Select: <T extends any>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Select: <T = unknown>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 export { useSelectState };
 export type { UseSelectStateProps, UseSelectStateReturn };

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

@@ -7,11 +7,10 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
 import { Input } from '../Input/Input.js';
 import '../Input/Input.theme.js';
 import { createDropdownAnimations } from './Select.animations.js';
-import { ChevronUpDownIcon } from '../../../icons/core/ChevronUpDown.js';
+import { ChevronUpDownIcon, PlusIcon, CheckIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { cn } from '../../../utils/cn.js';
 import { isValidTypeaheadChar, findNextMatchingOption, TYPEAHEAD_TIMEOUT_MS } from '../../../utils/typeaheadUtils.js';
-import { PlusIcon, CheckIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { Tag } from '../../core/Tag/Tag.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useSelectState } from './useSelectState.js';
@@ -124,7 +123,7 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
         ? 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", children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }) }));
+    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 })] }) }));
 };
 /**
  * Select Options Component
@@ -316,7 +315,7 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
                     }),
             }, role: "listbox", tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: [searchable && (jsx("div", { className: `sticky top-0 py-1 bg-[var(--color-background)] z-[10000] border-b border-[var(--color-border)] ${searchInputStyle}`, style: {
                         "--form-radius": "0",
-                    }, children: jsx(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, className: "w-full block bg-[var(--color-background)] border-none outline-none !min-h-8 py-2 ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", iconStart: jsx(MagnifyingGlassIcon, { strokeWidth: 2, className: "size-4 text-[var(--color-text-muted)] group-focus-within:text-[var(--color-primary)]" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
+                    }, children: jsx(Input, { placeholder: "Search...", "aria-label": "Search options", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, className: "w-full block bg-[var(--color-background)] border-none outline-none !min-h-8 py-2 ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", iconStart: jsx(MagnifyingGlassIcon, { strokeWidth: 2, className: "size-4 text-[var(--color-text-muted)] group-focus-within:text-[var(--color-primary)]" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
                             border: "none",
                             outline: "none",
                             boxShadow: "none",
@@ -435,7 +434,7 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
     // Container style
     const containerStyle = theme.containerStyle || "";
     // Default chevron icon if no iconEnd provided
-    const defaultChevronIcon = jsx(ChevronUpDownIcon, { size: 16, className: "" });
+    const defaultChevronIcon = jsx(ChevronUpDownIcon, { className: "size-4" });
     // Generate a unique ID if not provided
     const generatedId = React__default.useId();
     const selectId = id || generatedId;
@@ -452,7 +451,8 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
                             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) : "" }))] }) }));
 };
-const Select = React__default.forwardRef(SelectInner);
-Select.displayName = "Select";
+const SelectForwarded = React__default.forwardRef(SelectInner);
+SelectForwarded.displayName = "Select";
+const Select = SelectForwarded;
 
 export { Select, SelectButton, SelectContext, SelectOption, SelectOptions, SelectProvider, useSelectContext, useSelectState };

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

@@ -4,7 +4,7 @@ import type { SelectPlacement } from "../../../hooks/useSelectPortal";
  * Select value option type
  * @template T The type of the option value
  */
-export interface SelectOption<T = any> {
+export interface SelectOption<T = unknown> {
     /** Unique identifier for the option */
     id: string | number;
     /** Display label for the option */
@@ -25,7 +25,7 @@ export interface SelectBaseProps {
  * Select component props
  * @template T The type of the select value
  */
-export interface SelectProps<T = any> extends SelectBaseProps {
+export interface SelectProps<T = unknown> extends SelectBaseProps {
     /** ID for the select component */
     id?: string;
     /** Name for the select component */
@@ -138,7 +138,7 @@ export interface SelectOptionsProps extends SelectBaseProps {
 /**
  * Select option props
  */
-export interface SelectOptionProps<T = any> extends SelectBaseProps {
+export interface SelectOptionProps<T = unknown> extends SelectBaseProps {
     /** Option value */
     value: T;
     /** Whether the option is currently selected */

package/dist/components/forms/SelectableCard/SelectableCard.js

@@ -16,7 +16,7 @@ const CheckboxIndicator = ({ checked }) => (jsx("div", { className: cn("flex-shr
         ? "border-[var(--color-primary)] bg-[var(--color-primary)]"
         : "border-[var(--color-border)] bg-[var(--color-background)]"), children: checked && jsx(CheckIcon, { className: "size-3.5 stroke-white", strokeWidth: 3 }) }));
 // ─── SelectableCard ──────────────────────────────────────────────────────────
-const SelectableCardRoot = React__default.forwardRef(({ value, disabled: cardDisabled, className, children, ...props }, ref) => {
+const SelectableCardRoot = React__default.forwardRef(({ value, disabled: cardDisabled, className, children, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
     const content = children;
     const ctx = useSelectableCardContext();
     const inputId = useId();

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

@@ -10,7 +10,7 @@ const sliderTheme = {
     // Root container with layout
     rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
     // Track (background)
-    trackStyle: "relative w-full h-2 grow rounded-full bg-neutral-200 overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full",
+    trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-background-tertiary)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full",
     // Range (filled portion) - rounded to match track clipping
     rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
     // Thumb (draggable handle)

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

@@ -3,15 +3,15 @@
  */
 const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
-    track: "w-12 h-6 rounded-full transition-colors cursor-pointer shadow-inner bg-[var(--color-border)] 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)]",
-    thumb: "w-7 h-5 rounded-full shadow-md glass-effect !bg-white/80",
+    track: "w-12 h-6 rounded-full transition-colors 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)]",
+    thumb: "w-7 h-5 rounded-full shadow-real-md  bg-gradient-to-b from-neutral-100 via-neutral-200 to-neutral-50 border-t border-[var(--color-white)]/80 ",
     description: "text-base text-[var(--color-text-muted)] -mt-1.5",
 };
 /**
  * Thumb position values for animation
  */
 const thumbPositions = {
-    checked: { x: 18, y: 2 },
+    checked: { x: 16, y: 2 },
     unchecked: { x: 2, y: 2 },
 };
 

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

@@ -72,7 +72,7 @@ const formsBaseTheme = {
         invalid: "",
     },
     // Common helper text style with state variations
-    helperText: "text-sm text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)] " +
+    helperText: "text-sm text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.state-invalid_&]:text-[var(--color-danger-500)] " +
         "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
     iconStyles: {

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

@@ -22,9 +22,15 @@ export { switchTheme } from "./Switch";
 export { DatePicker, DatePickerTrigger, DatePickerBody, DatePickerPresets, } from "./DatePicker";
 export type { DatePickerProps, DatePickerTriggerProps, DatePickerBodyProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
 export { datePickerTheme } from "./DatePicker";
+export { DateRangePicker, DateRangePickerTrigger, DateRangePickerBody, DateRangePickerPresets, } from "./DateRangePicker";
+export type { DateRangePickerProps, DateRangePickerTriggerProps, DateRangePickerBodyProps, DateRangePickerPresetsProps, DateRangePickerSize, DateRangePickerState, DateRangePickerPlacement, DateRangePickerTheme, } from "./DateRangePicker";
+export { dateRangePickerTheme, DEFAULT_DATE_RANGE_PRESETS } from "./DateRangePicker";
 export { FileUpload } from "./FileUpload";
 export type { FileUploadProps, FileUploadThemeOverrides, UploadedFile, } from "./FileUpload";
 export { fileUploadTheme } from "./FileUpload";
+export { FileUploadProgress } from "./FileUpload";
+export type { FileUploadProgressProps, FileUploadProgressItem, FileUploadProgressStatus, FileUploadProgressThemeOverrides, } from "./FileUpload";
+export { fileUploadProgressTheme } from "./FileUpload";
 export { TimePicker } from "./TimePicker";
 export type { TimePickerProps, TimePickerSize, TimePickerState, TimePickerThemeOverrides, } from "./TimePicker";
 export { timePickerTheme } from "./TimePicker";

package/dist/components/forms/index.js

@@ -14,8 +14,13 @@ export { Switch } from './Switch/Switch.js';
 export { switchTheme } from './Switch/Switch.theme.js';
 export { DatePicker } from './DatePicker/DatePicker.js';
 export { datePickerTheme } from './DatePicker/DatePicker.theme.js';
+export { DateRangePicker } from './DateRangePicker/DateRangePicker.js';
+export { dateRangePickerTheme } from './DateRangePicker/DateRangePicker.theme.js';
+export { DEFAULT_DATE_RANGE_PRESETS } from './DateRangePicker/dateRangePresets.js';
 export { FileUpload } from './FileUpload/FileUpload.js';
 export { fileUploadTheme } from './FileUpload/FileUpload.theme.js';
+export { FileUploadProgress } from './FileUpload/FileUploadProgress.js';
+export { fileUploadProgressTheme } from './FileUpload/FileUploadProgress.theme.js';
 export { TimePicker } from './TimePicker/TimePicker.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -70,3 +75,6 @@ export { CRON_PRESETS, cronToDescription, fieldsToCron, formatNextRun, getNextRu
 export { DatePickerBody } from './DatePicker/DatePickerBody.js';
 export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';
 export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';
+export { DateRangePickerBody } from './DateRangePicker/DateRangePickerBody.js';
+export { DateRangePickerPresets } from './DateRangePicker/DateRangePickerPresets.js';
+export { DateRangePickerTrigger } from './DateRangePicker/DateRangePickerTrigger.js';

package/dist/hooks/index.d.ts

@@ -13,3 +13,4 @@ export { useIsClient } from "./useIsClient";
 export { useClickOutside } from "./useClickOutside";
 export { useScaleBackground } from "./useScaleBackground";
 export type { UseScaleBackgroundOptions } from "./useScaleBackground";
+export { useMediaQuery } from "./useMediaQuery";