@flikk/ui 1.0.0-beta.14 → 1.0.0-beta.16

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"

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.js

@@ -216,18 +216,25 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
         }
         return `${currentValue}${unit}`;
     };
-    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [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 &&
+    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 &&
                                         ticks.map((tick) => {
                                             const percentage = getPercentage(tick);
                                             return (jsx("div", { className: mergedTheme.tickStyle, style: { left: `${percentage}%` } }, tick));
                                         })] }), values.map((val, index) => {
                                 const percentage = getPercentage(val);
-                                return (jsx("div", { className: cn(mergedTheme.thumbStyle, "outline-[1px] outline-white/50 ring-0 shadow-none p-0 overflow-visible"), style: {
+                                return (jsxs("div", { className: cn(mergedTheme.thumbStyle, "outline-[2px] outline-[var(--color-border)]/80 ring-0 shadow-lg p-0"), style: {
                                         left: `${percentage}%`,
                                         transform: "translate(-50%, -50%)",
                                         position: "absolute",
                                         top: "50%",
-                                    }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined }, index));
+                                    }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
+                                                backdropFilter: "blur(0.6px)",
+                                                WebkitBackdropFilter: "blur(0.6px)",
+                                                filter: `url(#${filterId})`,
+                                            }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/90", "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" })] }, 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 }))] }));

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

@@ -10,17 +10,17 @@ 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 shadow-inner",
     // 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)
-    thumbStyle: "block h-5 w-8 rounded-full border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)] glass-effect-5",
+    thumbStyle: "block h-5 w-7 rounded-full bg-transparent overflow-hidden cursor-grab active:cursor-grabbing active:scale-x-110 active:scale-y-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 data-[disabled]:cursor-not-allowed data-[disabled]:hover:scale-100 data-[invalid]:focus-visible:ring-[var(--color-danger)]",
     // Value display
     valueDisplayStyle: "text-base font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
     // Min/max labels
     minMaxLabelStyle: "text-base font-medium text-[var(--color-text-muted)]",
     // Tick marks
-    tickStyle: "absolute w-0.5 h-2 bg-white/60 -translate-x-0.5 pointer-events-none",
+    tickStyle: "absolute w-0.5 h-2 bg-[var(--color-border)] -translate-x-0.5 pointer-events-none",
 };
 
 export { sliderTheme };

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

@@ -34,7 +34,9 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
         }
     };
     // 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 description === 'string' ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
+    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 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
         ? "disabled"
@@ -43,8 +45,14 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
             : isChecked
                 ? "checked"
                 : "unchecked";
+    const filterId = `switch-liquid-lens-${id}`;
     // 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("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick, children: jsx(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 } }) })] }));
+    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" })] }) })] }));
     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,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 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",
     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";
@@ -63,9 +69,6 @@ export * from "./ColorPicker";
 export { SelectableCard } from "./SelectableCard";
 export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardTheme, } from "./SelectableCard";
 export { selectableCardTheme } from "./SelectableCard";
-export { TransferList } from "./TransferList";
-export type { TransferListProps, TransferListItem, TransferListSize, TransferListTheme, } from "./TransferList";
-export { transferListTheme } from "./TransferList";
 export { Mention } from "./Mention";
 export type { MentionProps, MentionSuggestion, MentionTrigger, MentionSize, MentionTheme, MentionThemeOverrides, } from "./Mention";
 export { mentionTheme } from "./Mention";

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';
@@ -60,8 +65,6 @@ export { ColorPickerPresets } from './ColorPicker/ColorPickerPresets.js';
 export { formatHex, formatHsl, formatRgb, hexToRgb, hslToRgb, hsvToRgb, parseColor, rgbToHex, rgbToHsl, rgbToHsv, validateHex, validateRgb } from './ColorPicker/colorUtils.js';
 export { SelectableCard } from './SelectableCard/SelectableCard.js';
 export { selectableCardTheme } from './SelectableCard/SelectableCard.theme.js';
-export { TransferList } from './TransferList/TransferList.js';
-export { transferListTheme } from './TransferList/TransferList.theme.js';
 export { Mention } from './Mention/Mention.js';
 export { mentionTheme } from './Mention/Mention.theme.js';
 export { CronInput } from './CronInput/CronInput.js';
@@ -70,3 +73,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";

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to detect if a media query matches.
+ * Returns false during SSR and on first render (safe default).
+ */
+export declare const useMediaQuery: (query: string) => boolean;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to detect if a media query matches.
+ * Returns false during SSR and on first render (safe default).
+ */
+const useMediaQuery = (query) => {
+    const [matches, setMatches] = useState(false);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const mql = window.matchMedia(query);
+        setMatches(mql.matches);
+        const handler = (e) => setMatches(e.matches);
+        mql.addEventListener("change", handler);
+        return () => mql.removeEventListener("change", handler);
+    }, [query]);
+    return matches;
+};
+
+export { useMediaQuery };

package/dist/index.js

@@ -66,10 +66,15 @@ export { ContextMenu } from './components/core/ContextMenu/ContextMenu.js';
 export { CronInput } from './components/forms/CronInput/CronInput.js';
 export { CustomCursor } from './components/effects/CustomCursor/CustomCursor.js';
 export { DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, colorClassToVariable, combineClasses, createColorClass, extractFillClass, extractStrokeClass, generateColorPalette, generateSeriesColors, getContrastColor } from './components/charts/utils/color-utils.js';
+export { DEFAULT_DATE_RANGE_PRESETS } from './components/forms/DateRangePicker/dateRangePresets.js';
 export { DatePicker } from './components/forms/DatePicker/DatePicker.js';
 export { DatePickerBody } from './components/forms/DatePicker/DatePickerBody.js';
 export { DatePickerPresets } from './components/forms/DatePicker/DatePickerPresets.js';
 export { DatePickerTrigger } from './components/forms/DatePicker/DatePickerTrigger.js';
+export { DateRangePicker } from './components/forms/DateRangePicker/DateRangePicker.js';
+export { DateRangePickerBody } from './components/forms/DateRangePicker/DateRangePickerBody.js';
+export { DateRangePickerPresets } from './components/forms/DateRangePicker/DateRangePickerPresets.js';
+export { DateRangePickerTrigger } from './components/forms/DateRangePicker/DateRangePickerTrigger.js';
 export { DescriptionList } from './components/data-display/DescriptionList/DescriptionList.js';
 export { DonutChart } from './components/charts/DonutChart/DonutChart.js';
 export { DotPattern } from './components/effects/DotPattern/DotPattern.js';
@@ -86,6 +91,7 @@ export { Empty } from './components/core/Empty/Empty.js';
 export { Feed } from './components/data-display/Feed/Feed.js';
 export { FileTypeIcon } from './components/core/FileTypeIcon/FileTypeIcon.js';
 export { FileUpload } from './components/forms/FileUpload/FileUpload.js';
+export { FileUploadProgress } from './components/forms/FileUpload/FileUploadProgress.js';
 export { FormLabel } from './components/forms/FormLabel/FormLabel.js';
 export { FunnelChart } from './components/charts/FunnelChart/FunnelChart.js';
 export { GanttChart } from './components/data-display/GanttChart/GanttChart.js';
@@ -101,6 +107,9 @@ export { InputCreditCard } from './components/forms/InputCreditCard/InputCreditC
 export { InputDate } from './components/forms/InputDate/InputDate.js';
 export { InputOTP } from './components/forms/InputOTP/InputOTP.js';
 export { InputTag } from './components/forms/InputTag/InputTag.js';
+export { InsetCircleButton } from './components/effects/Neumorphic/InsetCircleButton.js';
+export { InsetPill } from './components/effects/Neumorphic/InsetPill.js';
+export { InteractiveCharacters } from './components/effects/InteractiveCharacters/InteractiveCharacters.js';
 export { KPI } from './components/data-display/KPI/KPI.js';
 export { Kbd } from './components/core/Kbd/Kbd.js';
 export { LINE_CHART_DEFAULTS } from './components/charts/LineChart/LineChart.types.js';
@@ -111,7 +120,16 @@ export { Masonry } from './components/core/Masonry/Masonry.js';
 export { Mention } from './components/forms/Mention/Mention.js';
 export { MenuItem } from './components/core/MenuItem/MenuItem.js';
 export { Message } from './components/core/Message/Message.js';
+export { MessageAudio } from './components/core/Message/MessageAudio.js';
 export { MessageBody } from './components/core/Message/MessageBody.js';
+export { MessageDateDivider } from './components/core/Message/MessageDateDivider.js';
+export { MessageFile } from './components/core/Message/MessageFile.js';
+export { MessageImage } from './components/core/Message/MessageImage.js';
+export { MessageLink } from './components/core/Message/MessageLink.js';
+export { MessageReactions } from './components/core/Message/MessageReactions.js';
+export { MessageReply } from './components/core/Message/MessageReply.js';
+export { MessageSenderName } from './components/core/Message/MessageSenderName.js';
+export { MessageStatusIndicator } from './components/core/Message/MessageStatusIndicator.js';
 export { Metric } from './components/data-display/Metric/Metric.js';
 export { Modal } from './components/core/Modal/Modal.js';
 export { ModalStack } from './components/core/ModalStack/ModalStack.js';
@@ -127,6 +145,7 @@ export { PageHeadingBackButton } from './components/core/PageHeading/PageHeading
 export { PageHeadingIcon } from './components/core/PageHeading/PageHeadingIcon.js';
 export { PageHeadingSubtitle } from './components/core/PageHeading/PageHeadingSubtitle.js';
 export { PageHeadingTitle } from './components/core/PageHeading/PageHeadingTitle.js';
+export { PageTransition } from './components/effects/PageTransition/PageTransition.js';
 export { Pagination } from './components/core/Pagination/Pagination.js';
 export { ParallaxSection } from './components/effects/ParallaxSection/ParallaxSection.js';
 export { Pill } from './components/core/Pill/Pill.js';
@@ -186,7 +205,6 @@ export { Timeline } from './components/data-display/Timeline/Timeline.js';
 export { Toast } from './components/core/Toast/Toast.js';
 export { ToastProvider, useToastContext } from './components/core/Toast/ToastProvider.js';
 export { Tooltip } from './components/core/Tooltip/Tooltip.js';
-export { TransferList } from './components/forms/TransferList/TransferList.js';
 export { Tree } from './components/core/Tree/Tree.js';
 export { TypeWriter } from './components/core/Message/TypeWriter.js';
 export { XAxis } from './components/charts/shared/ChartAxis/XAxis.js';
@@ -204,8 +222,10 @@ export { commandPaletteTheme } from './components/core/CommandPalette/CommandPal
 export { contextMenuTheme } from './components/core/ContextMenu/ContextMenu.theme.js';
 export { cronInputTheme } from './components/forms/CronInput/CronInput.theme.js';
 export { datePickerTheme } from './components/forms/DatePicker/DatePicker.theme.js';
+export { dateRangePickerTheme } from './components/forms/DateRangePicker/DateRangePicker.theme.js';
 export { dropdownTheme } from './components/core/Dropdown/Dropdown.theme.js';
 export { emptyTheme } from './components/core/Empty/Empty.theme.js';
+export { fileUploadProgressTheme } from './components/forms/FileUpload/FileUploadProgress.theme.js';
 export { fileUploadTheme } from './components/forms/FileUpload/FileUpload.theme.js';
 export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels } from './components/data-display/Table/Table.filterUtils.js';
 export { formLabelTheme } from './components/forms/FormLabel/FormLabel.theme.js';
@@ -242,7 +262,6 @@ export { tagTheme } from './components/core/Tag/Tag.theme.js';
 export { textareaTheme } from './components/forms/Textarea/Textarea.theme.js';
 export { timePickerTheme } from './components/forms/TimePicker/TimePicker.theme.js';
 export { toastTheme } from './components/core/Toast/Toast.theme.js';
-export { transferListTheme } from './components/forms/TransferList/TransferList.theme.js';
 export { treeTheme } from './components/core/Tree/Tree.theme.js';
 export { useChartAccessibility } from './components/charts/hooks/useChartAccessibility.js';
 export { useChartTheme } from './components/charts/hooks/useChartTheme.js';