@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

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

@@ -10,9 +10,8 @@ import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
 import { ScrollArea } from '../../core/ScrollArea/ScrollArea.js';
 import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import { ArrowUturnRightIcon, ArrowUturnLeftIcon, Bars3BottomRightIcon, Bars3Icon, Bars3BottomLeftIcon, ArrowsRightLeftIcon, ArrowsUpDownIcon, BoldIcon, UnderlineIcon, ItalicIcon } from '@heroicons/react/24/outline';
+import { ArrowUUpRight, ArrowUUpLeft, TextAlignRight, List, TextAlignLeft, PaintBrush, ArrowsLeftRight, ArrowsDownUp, TextB, TextUnderline, TextItalic } from '@phosphor-icons/react';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
-import { PaintBrushIcon } from '@heroicons/react/24/solid';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
@@ -1447,11 +1446,11 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                                     : false;
         switch (tool) {
             case "bold":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(BoldIcon, { className: "size-4" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleBold, disabled: isDisabled, "aria-label": "Bold", "aria-pressed": isActive ? "true" : "false", children: jsx(TextB, { className: "size-4" }) }, toolKey));
             case "italic":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(ItalicIcon, { className: "size-4" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleItalic, disabled: isDisabled, "aria-label": "Italic", "aria-pressed": isActive ? "true" : "false", children: jsx(TextItalic, { className: "size-4" }) }, toolKey));
             case "underline":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(UnderlineIcon, { className: "size-4" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: handleUnderline, disabled: isDisabled, "aria-label": "Underline", "aria-pressed": isActive ? "true" : "false", children: jsx(TextUnderline, { className: "size-4" }) }, toolKey));
             case "fontFamily": {
                 // The `fontFamily` tool is opt-in via toolbar config, but
                 // `fontFamilies` is also a public prop — if a consumer passes an
@@ -1487,7 +1486,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                         }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm", style: { fontFamily: option.stack || undefined }, children: option.label }), option.family && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "Google" }))] }) }, option.key));
                                 }) }) })) }), document.body)
                     : null;
-                return (jsxs("div", { className: "relative", "data-tool": "fontFamily", children: [jsx(Button, { ref: fontFamilyTriggerRef, size: "sm", color: "neutral", variant: "soft", className: cn(themeStyles.toolbarButtonStyle, "!justify-start !w-auto px-2 min-w-[4rem] gap-1"), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsxs("div", { className: "relative", "data-tool": "fontFamily", children: [jsx(Button, { ref: fontFamilyTriggerRef, size: "sm", color: "mono", variant: "soft", className: cn(themeStyles.toolbarButtonStyle, "!justify-start !w-auto px-2 min-w-[4rem] gap-1"), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
@@ -1518,12 +1517,12 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                         }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm", style: { fontWeight: option.value }, children: option.label }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: option.value })] }) }, option.key));
                                 }) }) })) }), document.body)
                     : null;
-                return (jsxs("div", { className: "relative", "data-tool": "fontWeight", children: [jsx(Button, { ref: fontWeightTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsxs("div", { className: "relative", "data-tool": "fontWeight", children: [jsx(Button, { ref: fontWeightTriggerRef, size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
                                 togglePicker("fontWeight");
-                            }, disabled: isDisabled, "aria-label": `Font weight (${currentOption.label})`, "aria-expanded": showFontWeightPicker, "aria-haspopup": "listbox", children: jsx(BoldIcon, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
+                            }, disabled: isDisabled, "aria-label": `Font weight (${currentOption.label})`, "aria-expanded": showFontWeightPicker, "aria-haspopup": "listbox", children: jsx(TextB, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
             }
             case "fontSize": {
                 const currentOption = getFontSizeOption(formattingState.fontSize);
@@ -1549,7 +1548,7 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                         }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "uppercase text-sm font-medium", children: option.label }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)]", children: [option.px, "px"] })] }) }, option.key));
                                 }) }) })) }), document.body)
                     : null;
-                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", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsxs("div", { className: "relative", "data-tool": "fontSize", children: [jsx(Button, { ref: fontSizeTriggerRef, size: "sm", color: "mono", variant: "soft", className: cn(themeStyles.toolbarButtonStyle, "px-2 min-w-[3rem] gap-1"), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
@@ -1580,12 +1579,12 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                         }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm font-medium", children: option.label }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: option.value })] }) }, option.key));
                                 }) }) })) }), document.body)
                     : null;
-                return (jsxs("div", { className: "relative", "data-tool": "lineHeight", children: [jsx(Button, { ref: lineHeightTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsxs("div", { className: "relative", "data-tool": "lineHeight", children: [jsx(Button, { ref: lineHeightTriggerRef, size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
                                 togglePicker("lineHeight");
-                            }, disabled: isDisabled, "aria-label": `Line height (${currentOption.label})`, "aria-expanded": showLineHeightPicker, "aria-haspopup": "listbox", children: jsx(ArrowsUpDownIcon, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
+                            }, disabled: isDisabled, "aria-label": `Line height (${currentOption.label})`, "aria-expanded": showLineHeightPicker, "aria-haspopup": "listbox", children: jsx(ArrowsDownUp, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
             }
             case "letterSpacing": {
                 const currentOption = getLetterSpacingOption(formattingState.letterSpacing);
@@ -1611,12 +1610,12 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                         }, role: "option", "aria-selected": selected, children: jsxs("span", { className: "flex items-center justify-between gap-3", children: [jsx("span", { className: "text-sm font-medium", children: option.label }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: option.value })] }) }, option.key));
                                 }) }) })) }), document.body)
                     : null;
-                return (jsxs("div", { className: "relative", "data-tool": "letterSpacing", children: [jsx(Button, { ref: letterSpacingTriggerRef, size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsxs("div", { className: "relative", "data-tool": "letterSpacing", children: [jsx(Button, { ref: letterSpacingTriggerRef, size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
                                 togglePicker("letterSpacing");
-                            }, disabled: isDisabled, "aria-label": `Letter spacing (${currentOption.label})`, "aria-expanded": showLetterSpacingPicker, "aria-haspopup": "listbox", children: jsx(ArrowsRightLeftIcon, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
+                            }, disabled: isDisabled, "aria-label": `Letter spacing (${currentOption.label})`, "aria-expanded": showLetterSpacingPicker, "aria-haspopup": "listbox", children: jsx(ArrowsLeftRight, { className: "w-4 h-4" }) }), renderedDropdown] }, toolKey));
             }
             case "textColor": {
                 const portalStyle = {
@@ -1646,35 +1645,35 @@ const RichTextEditor = React__default.forwardRef(({ size = "md", state = "defaul
                                 colorPortalContentRef.current = el;
                             }, "data-flikkui-portal": "", className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), themeStyles.dropdownStyle, "!max-h-none !overflow-visible"), style: portalStyle, variants: shouldReduceMotion ? undefined : colorAnimations, initial: "initial", animate: colorPortalReady ? "visible" : "initial", exit: "exit", children: jsx(SurfaceProvider, { level: surfaceLevel, children: jsx(ScrollArea, { type: "none", className: "max-h-[20rem]", children: jsxs("div", { className: themeStyles.colorPickerStyle, children: [recentColors.length > 0 && (jsxs("div", { className: "flex flex-col gap-1 pb-2 mb-1 border-b border-[var(--color-border)]", children: [jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: "Recent" }), jsx("div", { className: "flex gap-0.5", children: recentColors.map((token) => renderSwatch(resolveTailwindColor(token), token, `recent ${token}`)) })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: "Mono" }), jsx("div", { className: "flex gap-0.5", children: MONO_COLORS.map((color) => renderSwatch(color.value, color.token, color.name)) }), jsx("span", { className: "mt-2 text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: "Spectrum" }), TAILWIND_COLOR_FAMILIES.map((family) => (jsx("div", { className: "flex gap-0.5", children: getTailwindShadeTokens(family).map((token) => renderSwatch(resolveTailwindColor(token), token, token)) }, family)))] })] }) }) }) })) }), document.body)
                     : null;
-                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) => {
+                return (jsxs("div", { className: "relative", "data-tool": "textColor", children: [jsx(Button, { ref: colorTriggerRef, size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 focusEditor();
                                 togglePicker("color");
-                            }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker, children: jsx(PaintBrushIcon, { className: "w-4 h-4" }) }), renderedColorDropdown] }, toolKey));
+                            }, disabled: isDisabled, "aria-label": "Text Color", "aria-expanded": showColorPicker, children: jsx(PaintBrush, { className: "w-4 h-4" }) }), renderedColorDropdown] }, toolKey));
             }
             case "alignLeft":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", 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" }) }, toolKey));
+                    }, disabled: isDisabled, "aria-label": "Align Left", "aria-pressed": isActive ? "true" : "false", children: jsx(TextAlignLeft, { className: "w-4 h-4" }) }, toolKey));
             case "alignCenter":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", 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" }) }, toolKey));
+                    }, disabled: isDisabled, "aria-label": "Align Center", "aria-pressed": isActive ? "true" : "false", children: jsx(List, { className: "w-4 h-4" }) }, toolKey));
             case "alignRight":
-                return (jsx(Button, { size: "sm", color: "neutral", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", onMouseDown: handleMouseDown, onClick: (event) => {
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), "data-state": isActive ? "active" : "inactive", 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" }) }, toolKey));
+                    }, disabled: isDisabled, "aria-label": "Align Right", "aria-pressed": isActive ? "true" : "false", children: jsx(TextAlignRight, { className: "w-4 h-4" }) }, toolKey));
             case "undo":
-                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" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleUndo, disabled: isDisabled, "aria-label": "Undo", children: jsx(ArrowUUpLeft, { className: "w-4 h-4" }) }, toolKey));
             case "redo":
-                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" }) }, toolKey));
+                return (jsx(Button, { size: "sm", color: "mono", variant: "soft", iconOnly: true, className: cn(themeStyles.toolbarButtonStyle), onMouseDown: handleMouseDown, onClick: handleRedo, disabled: isDisabled, "aria-label": "Redo", children: jsx(ArrowUUpRight, { className: "w-4 h-4" }) }, toolKey));
             case "separator":
                 return jsx("div", { className: themeStyles.separatorStyle }, toolKey);
             default:

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

@@ -14,6 +14,8 @@ export interface SelectContextValue<T = any> extends UseSelectStateReturn<T> {
     theme: SelectThemeOverrides;
     /** Whether search is enabled */
     searchable: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder: string;
     /** Whether typeahead is enabled */
     enableTypeahead: boolean;
     /** Button ref (alias for triggerRef for backward compatibility) */
@@ -44,6 +46,8 @@ export interface SelectProviderProps<T = any> {
     theme?: SelectThemeOverrides;
     /** Whether search is enabled */
     searchable?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
     /** Whether typeahead is enabled */
     enableTypeahead?: boolean;
 }
@@ -68,7 +72,7 @@ export interface SelectProviderProps<T = any> {
  * </SelectProvider>
  * ```
  */
-export declare function SelectProvider<T = any>({ children, selectState, size, componentState, theme: themeOverrides, searchable, enableTypeahead, }: SelectProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectProvider<T = any>({ children, selectState, size, componentState, theme: themeOverrides, searchable, searchPlaceholder, enableTypeahead, }: SelectProviderProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
  * Select Button Component
  */

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

@@ -8,7 +8,7 @@ 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, PlusIcon, MagnifyingGlassIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { CaretUpDown, Plus, MagnifyingGlass, Check } from '@phosphor-icons/react';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { cn } from '../../../utils/cn.js';
 import { isValidTypeaheadChar, findNextMatchingOption, TYPEAHEAD_TIMEOUT_MS } from '../../../utils/typeaheadUtils.js';
@@ -54,7 +54,7 @@ const useSelectContext = () => {
  * </SelectProvider>
  * ```
  */
-function SelectProvider({ children, selectState, size = "md", componentState = "default", theme: themeOverrides, searchable = false, enableTypeahead = true, }) {
+function SelectProvider({ children, selectState, size = "md", componentState = "default", theme: themeOverrides, searchable = false, searchPlaceholder = "Search...", enableTypeahead = true, }) {
     const theme = useMemo(() => ({ ...selectTheme, ...(themeOverrides || {}) }), [themeOverrides]);
     // Cast triggerRef to buttonRef for backward compatibility
     const buttonRef = selectState.triggerRef;
@@ -64,9 +64,10 @@ function SelectProvider({ children, selectState, size = "md", componentState = "
         state: componentState,
         theme,
         searchable,
+        searchPlaceholder,
         enableTypeahead,
         buttonRef,
-    }), [selectState, size, componentState, theme, searchable, enableTypeahead, buttonRef]);
+    }), [selectState, size, componentState, theme, searchable, searchPlaceholder, enableTypeahead, buttonRef]);
     return (jsx(SelectContext.Provider, { value: contextValue, children: children }));
 }
 // ============================================================================
@@ -94,7 +95,7 @@ const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", ic
         ? "text-sm"
         : size === "lg"
             ? "text-base"
-            : "text-sm"} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`;
+            : "text-sm"} text-[var(--color-text-muted)] shrink-0`;
     // Use either the themed focus state or directly apply the focus classes if the theme is not working
     const activeFocusState = isOpen
         ? focusStateStyle ||
@@ -111,7 +112,7 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
     // so a Select inside a Popover/Modal still reads as a higher plane.
     const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const context = useSelectContext();
-    const { optionsRef, buttonRef, highlightedIndex, setHighlightedIndex, filteredOptions, searchable, searchValue, setSearchValue, enableTypeahead, typeaheadValue, setTypeaheadValue, typeaheadTimeoutRef, theme, selectOption, } = context;
+    const { optionsRef, buttonRef, highlightedIndex, setHighlightedIndex, filteredOptions, searchable, searchPlaceholder, searchValue, setSearchValue, enableTypeahead, typeaheadValue, setTypeaheadValue, typeaheadTimeoutRef, theme, selectOption, } = context;
     // Use custom triggerRef if provided, otherwise fall back to buttonRef
     const effectiveTriggerRef = customTriggerRef || buttonRef;
     // Detect dark mode for portal content
@@ -283,7 +284,7 @@ const SelectOptions = ({ isOpen, maxHeight = "15rem", className = "", onClose, c
                     : {
                         maxHeight: searchable ? "none" : maxHeightValue,
                     }),
-            }, role: "listbox", "aria-labelledby": ariaLabelledby, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [searchable && (jsx(Input, { placeholder: "Search...", "aria-label": "Search options", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, iconStart: jsx(MagnifyingGlassIcon, { strokeWidth: 2, className: cn("size-4 text-[var(--color-text-secodary)] transition-opacity", 
+            }, role: "listbox", "aria-labelledby": ariaLabelledby, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [searchable && (jsx(Input, { placeholder: searchPlaceholder, "aria-label": "Search options", value: searchValue, onChange: handleSearchChange, type: "search", ref: searchInputRef, iconStart: jsx(MagnifyingGlass, { weight: "bold", className: cn("size-4 text-[var(--color-text-secodary)] transition-opacity", 
                             // Focus can't drive this — the search autofocuses on open, so it's
                             // always focused while visible. Emphasize on "actively searching" instead.
                             searchValue ? "opacity-100" : "opacity-70") }), 
@@ -337,7 +338,7 @@ const SelectOption = ({ value, isSelected, disabled, className = "", onSelect, c
     const createOptionStyle = isCreateOption ? createOptionStyleTheme : "";
     return (jsxs("div", { className: cn(optionStyle, isSelected && selectedOptionStyle, 
         // Reserve room on the right so a long, truncated label never runs under the check.
-        isSelected && !isCreateOption && "pr-9", disabled && disabledOptionStyle, keyboardHighlightStyle, createOptionStyle, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-option-index": optionIndex, onMouseEnter: () => !disabled && setHighlightedIndex(optionIndex), onClick: handleClick, children: [children, isSelected && !isCreateOption && (jsx("span", { className: theme.checkIconStyle, children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
+        isSelected && !isCreateOption && "pr-9", disabled && disabledOptionStyle, keyboardHighlightStyle, createOptionStyle, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-option-index": optionIndex, onMouseEnter: () => !disabled && setHighlightedIndex(optionIndex), onClick: handleClick, children: [children, isSelected && !isCreateOption && (jsx("span", { className: theme.checkIconStyle, children: jsx(Check, { className: "size-4", weight: "bold" }) }))] }));
 };
 // ============================================================================
 // Main Select Component
@@ -366,7 +367,7 @@ const SelectOption = ({ value, isSelected, disabled, className = "", onSelect, c
  * />
  * ```
  */
-const SelectInner = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, contentStart, contentEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search options...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, multiple = false, maxDisplayedChips = 3, elevation, lift, children, }, ref) => {
+const SelectInner = ({ id, name, size = "md", state = "default", value, displayValue, placeholder = "Select an option", disabled = false, required = false, options = [], label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, contentStart, contentEnd, theme: themeOverrides, className = "", wrapperClassName = "", searchable = false, searchPlaceholder = "Search...", portal = true, placement = "bottom-start", offset = 8, enableTypeahead = true, creatable = false, onCreateOption, createLabel, multiple = false, maxDisplayedChips = 3, elevation, lift, children, }, ref) => {
     var _a;
     // Merge theme with overrides
     const theme = useMemo(() => ({ ...selectTheme, ...(themeOverrides || {}) }), [themeOverrides]);
@@ -426,7 +427,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, { className: "size-4" });
+    const defaultChevronIcon = jsx(CaretUpDown, { className: "size-4" });
     // Generate a unique ID if not provided
     const generatedId = React__default.useId();
     const selectId = id || generatedId;
@@ -434,7 +435,7 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
     // FormLabel id through to both so screen readers announce what the
     // listbox (role="listbox") is for, not just the trigger button.
     const labelId = label && typeof label === 'string' ? `${selectId}-label` : undefined;
-    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { id: `${selectId}-label`, htmlFor: selectId, required: required, state: state, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, contentStart: contentStart, contentEnd: contentEnd, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleButtonKeyDown, className: className, "aria-labelledby": labelId, "aria-invalid": state === "invalid" || undefined, "aria-describedby": helperText ? `${selectId}-helper` : undefined, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
+    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, searchPlaceholder: searchPlaceholder, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { id: `${selectId}-label`, htmlFor: selectId, required: required, state: state, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, contentStart: contentStart, contentEnd: contentEnd, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleButtonKeyDown, className: className, "aria-labelledby": labelId, "aria-invalid": state === "invalid" || undefined, "aria-describedby": helperText ? `${selectId}-helper` : undefined, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
                             ? "flex min-w-0"
                             : "block truncate", (multiple ? selectedValues.length > 0 : selectedOption)
                             ? theme.valueTextStyle
@@ -448,7 +449,7 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
                                         const isSelected = multiple
                                             ? isValueSelected(option.value)
                                             : option.value === selectedValue;
-                                        return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(PlusIcon, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : (
+                                        return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(Plus, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : (
                                             // The selected check is rendered by SelectOption itself (single +
                                             // multiple), so the call site only supplies the label.
                                             jsx("span", { className: "block truncate", children: option.label })) }, option.id));

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

@@ -30,13 +30,13 @@ const selectTheme = {
     // Hover state variants - inherited from common form theme
     hoverStates: formsBaseTheme.hoverStates,
     // Options container style - Uses position: fixed for proper scroll behavior with standardized z-index
-    // Width is controlled by trigger size via estimatedWidth parameter
-    optionsContainerStyle: formsBaseTheme.dropdownStyles.container +
-        " py-0 p-1 border border-[var(--color-border)] min-w-[8rem]",
+    // Width is controlled by trigger size via estimatedWidth parameter.
+    // Padding, radius and border all come from the shared base — only the min-width is Select's own.
+    optionsContainerStyle: formsBaseTheme.dropdownStyles.container + " min-w-[8rem]",
     // Search input style
     searchInputStyle: "group",
     // Individual option style
-    optionStyle: formsBaseTheme.dropdownStyles.option + " rounded-[var(--radius-base)]",
+    optionStyle: formsBaseTheme.dropdownStyles.option,
     // Selected option style
     selectedOptionStyle: formsBaseTheme.dropdownStyles.optionSelected,
     // Highlighted option style (keyboard navigation)

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

@@ -75,7 +75,10 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     theme?: SelectThemeOverrides;
     /** Whether the select is searchable */
     searchable?: boolean;
-    /** Placeholder text for the search input */
+    /**
+     * Placeholder text for the search input shown when `searchable` is true.
+     * @default "Search..."
+     */
     searchPlaceholder?: string;
     /**
      * Whether to render the dropdown in a portal to `document.body` (default: true).

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

@@ -1,2 +1 @@
-import type { Variants } from "motion/react";
-export declare const cardVariants: Variants;
+export declare const cardVariants: import("motion-dom").Variants;

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

@@ -1,9 +1,8 @@
-const cardVariants = {
-    idle: { scale: 1 },
-    tap: {
-        scale: 0.995,
-        transition: { type: "spring", stiffness: 400, damping: 10, duration: 0.1 },
-    },
-};
+import { createPressVariants } from '../../core/shared/interaction.animations.js';
+
+// Shared press physics (fast tween in, stiff spring out) — see
+// core/shared/interaction.animations.ts. Wire as `animate="rest"` +
+// `whileTap="press"`.
+const cardVariants = createPressVariants(0.98);
 
 export { cardVariants };

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

@@ -60,7 +60,7 @@ const SelectableCardRoot = React__default.forwardRef(({ value, disabled: cardDis
             : "checkbox";
     const animated = !shouldReduceMotion && !isDisabled;
     const motionProps = animated
-        ? { variants: cardVariants, initial: "idle", whileTap: "tap" }
+        ? { variants: cardVariants, animate: "rest", whileTap: "press" }
         : {};
     const indicatorNode = resolvedIndicator !== "none" && (jsx("div", { className: cn(theme.indicator, "pointer-events-none"), "aria-hidden": "true", children: resolvedIndicator === "radio" ? (jsx(Radio, { value: value, checked: isSelected, onChange: () => { }, state: isDisabled ? "disabled" : "default", size: indicatorSize })) : (jsx(Checkbox, { value: value, checked: isSelected, onChange: () => { }, state: isDisabled ? "disabled" : "default", size: indicatorSize })) }));
     return (jsxs(motion.div, { ref: ref, role: role, "aria-checked": isSelected, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, "data-selected": isSelected, "data-disabled": isDisabled || undefined, className: cn(theme.card, (_a = theme.cardSizes) === null || _a === void 0 ? void 0 : _a[resolvedSize], isSelected && theme.selectedCard, isDisabled && theme.disabledCard, className), onClick: handleClick, onKeyDown: handleKeyDown, ...motionProps, ...props, children: [jsx("input", { type: inputType, id: inputId, name: isStandalone ? undefined : ctx === null || ctx === void 0 ? void 0 : ctx.name, value: value, checked: isSelected, disabled: isDisabled, onChange: () => { }, className: "sr-only", tabIndex: -1, "aria-hidden": true }), resolvedIndicatorPosition === "start" && indicatorNode, jsx("div", { className: theme.contentWrapper, children: children }), resolvedIndicatorPosition === "end" && indicatorNode] }));

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

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

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

@@ -1,10 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { createPressVariants } from '../../core/shared/interaction.animations.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
+import { Tooltip } from '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
 import { sliderTheme } from './Slider.theme.js';
 import { cn } from '../../../utils/cn.js';
 
+// Shared press physics (fast tween in, stiff spring out) with a hover lift,
+// wired as `animate="rest"` + `whileTap="press"` + `whileHover="hover"`.
+const thumbPressVariants = createPressVariants(0.95, 1.12);
 const Slider = React__default.forwardRef(({ state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", min = 0, max = 100, step = 1, value, defaultValue, onChange, onChangeCommitted, showValue = false, unit = "", showMinMax = false, showTicks = false, tickStep, range = false, iconStart, iconEnd, theme = {}, required = false, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
     var _a;
     const trackRef = useRef(null);
@@ -22,6 +29,7 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
     }, []);
     const generatedId = React__default.useId();
     const sliderId = id || generatedId;
+    const shouldReduceMotion = useReducedMotion();
     const helperTextId = typeof helperText === 'string' && helperText ? `${sliderId}-helper` : undefined;
     // Handle controlled/uncontrolled value
     const [internalValue, setInternalValue] = useState((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : (range ? [min, min] : min));
@@ -231,25 +239,30 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
         }
         return `${currentValue}${unit}`;
     };
-    const filterId = `slider-liquid-lens-${sliderId}`;
-    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: sliderId, state: state, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })) : (label)), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
+    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: sliderId, state: state, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })) : (label)), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
                                         ticks.map((tick) => {
                                             const percentage = getPercentage(tick);
                                             return (jsx("div", { className: mergedTheme.tickStyle, style: { left: `${percentage}%` } }, tick));
                                         })] }), values.map((val, index) => {
                                 const percentage = getPercentage(val);
-                                return (jsxs("div", { className: cn(mergedTheme.thumbStyle, "outline-[2px] outline-[var(--color-border)]/80 ring-0 shadow-lg p-0"), style: {
+                                return (jsx(motion.div, { className: mergedTheme.thumbStyle, 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, "aria-invalid": isInvalid || undefined, 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));
+                                        x: "-50%",
+                                        y: "-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, "aria-invalid": isInvalid || undefined, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, ...(isDisabled || shouldReduceMotion
+                                        ? {}
+                                        : {
+                                            variants: thumbPressVariants,
+                                            animate: "rest",
+                                            whileHover: "hover",
+                                            whileTap: "press",
+                                        }), children: jsx(Tooltip, { content: jsxs("span", { className: "whitespace-nowrap", children: [val, unit] }), isOpen: dragIndex === index, placement: "top", disabled: isDisabled, triggerClassName: "block w-full h-full", 
+                                        // Thumb moves via left%/transform on every pointermove during
+                                        // a drag, with no scroll/resize event to key off — force the
+                                        // portal to recalc so it tracks the thumb.
+                                        recalcTrigger: val, children: jsx("div", { className: "w-full h-full", "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 && (typeof helperText === 'string' ? (jsx("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName), children: helperText })) : (helperText))] }));

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

@@ -12,9 +12,15 @@ const sliderTheme = {
     // Track (background)
     trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-surface-sunken)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full shadow-inner-real-sm",
     // 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-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)]",
+    rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
+    // Thumb (draggable handle). Solid surface bg (backdrop-filter glitches in
+    // WebKit under 3D transforms); glass look = specular inset highlights +
+    // shadow-lg-strength drop shadow, with the white speculars dialed down in
+    // dark mode where they would read as a glowing rim.
+    thumbStyle: "block h-5 w-7 rounded-full p-0 bg-[var(--color-surface)] outline-[2px] outline-[var(--color-border)]/80 ring-0 " +
+        "shadow-[inset_1px_1px_0_rgba(255,255,255,0.45),inset_1px_3px_0_rgba(0,0,0,0.03),inset_0_0_14px_rgba(255,255,255,0.15),inset_-1px_-1px_0_rgba(0,0,0,0.06),0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)] " +
+        "dark:shadow-[inset_1px_1px_0_rgba(255,255,255,0.12),inset_1px_3px_0_rgba(0,0,0,0.15),inset_0_0_14px_rgba(255,255,255,0.04),inset_-1px_-1px_0_rgba(0,0,0,0.35),0_10px_15px_-3px_rgba(0,0,0,0.45),0_4px_6px_-4px_rgba(0,0,0,0.45)] " +
+        "cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:focus-visible:ring-[var(--color-danger)]",
     // Value display
     valueDisplayStyle: "text-sm font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
     // Min/max labels

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

@@ -17,7 +17,7 @@ const switchTheme = {
     // No `invalid` key: a switch is binary — on and off are both valid values, so there is
     // nothing to validate. (See §9 carve-out: invalid only applies to controls with a value.)
     trackStates: {
-        unchecked: "bg-[var(--color-neutral-200)] dark:bg-[var(--color-neutral-700)]",
+        unchecked: "bg-[var(--color-mono-200)] dark:bg-[var(--color-mono-700)]",
         checked: "bg-[var(--color-primary)]",
         disabled: "bg-[var(--color-background-disabled)] cursor-not-allowed",
     },

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

@@ -33,7 +33,7 @@ const timePickerTheme = {
     // Placeholder text style - matches Select/Combobox placeholder styling
     placeholderTextStyle: formsBaseTheme.placeholderStyle,
     // Selected value text style
-    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    valueTextStyle: "text-[var(--color-text-primary)]",
     // Clear button styles (positioned between left content and right icon)
     clearButtonStyle: "absolute right-8 top-1/2 -translate-y-1/2 p-1 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors z-10",
     // Dropdown container styles (TimePicker-specific)
@@ -49,8 +49,8 @@ const timePickerTheme = {
     helperTextStyle: formsBaseTheme.helperText,
     // Helper text state variants
     helperTextStates: {
-        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
-        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
+        default: "text-[var(--color-text-muted)]",
+        disabled: "text-[var(--color-text-disabled)]",
         invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
     // ============================================
@@ -72,14 +72,13 @@ const timePickerTheme = {
     footerStyle: "flex justify-end items-center gap-2 px-2 py-2 border-t border-[var(--color-border)] ",
     // Inner input element style - transparent bg, no outline, tabular-nums for aligned digits
     inputStyle: "bg-transparent outline-none flex-1 tabular-nums min-w-0 " +
-        "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
-        "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
+        "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]",
     // AM/PM period toggle button
     periodToggleStyle: "px-1.5 py-0.5 text-xs font-semibold rounded-md " +
         "bg-[var(--color-surface-sunken)] text-[var(--color-text-primary)] " +
         "hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer select-none " +
-        "dark:bg-[var(--color-neutral-700)] " +
-        "dark:hover:bg-[var(--color-neutral-600)]",
+        "dark:bg-[var(--color-mono-700)] " +
+        "dark:hover:bg-[var(--color-mono-600)]",
 };
 
 export { timePickerTheme };

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

@@ -81,7 +81,7 @@ const TimePickerContent = ({ isOpen, onCancel, onSave, portal = true, placement
                         minWidth: `${position.width}px`,
                     }
                     : {}),
-            }, variants: animations, initial: "initial", animate: "visible", exit: "exit", onKeyDown: handleKeyDown, role: "dialog", "aria-modal": "true", "aria-label": "Select time", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: cn(theme.wheelContainerStyle), style: { height: 200 }, children: children }), jsxs("div", { className: cn(theme.footerStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: "neutral", onClick: onCancel, "aria-label": "Cancel time selection", className: "flex-1", children: "Cancel" }), jsx(Button, { size: "sm", onClick: onSave, "aria-label": "Save selected time", className: "flex-1", children: "Save" })] })] }) })) }));
+            }, variants: animations, initial: "initial", animate: "visible", exit: "exit", onKeyDown: handleKeyDown, role: "dialog", "aria-modal": "true", "aria-label": "Select time", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: cn(theme.wheelContainerStyle), style: { height: 200 }, children: children }), jsxs("div", { className: cn(theme.footerStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: "mono", onClick: onCancel, "aria-label": "Cancel time selection", className: "flex-1", children: "Cancel" }), jsx(Button, { size: "sm", onClick: onSave, "aria-label": "Save selected time", className: "flex-1", children: "Save" })] })] }) })) }));
     // Use portal if enabled and client-side - wrap with dark class for dark mode support
     return portal && isClient
         ? createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body)

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { ClockIcon, XMarkIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
+import { Clock, X, CaretUpDown } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePickerContext.js';
 
@@ -45,10 +45,10 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 setIsOpen(true);
             }, className: cn(baseStyle, stateStyle, hoverStateStyle, activeFocusState, 'w-full items-center', className // User overrides take highest precedence
-            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-label": "Enter time", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(ClockIcon, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
+            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-label": "Enter time", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, autoComplete: "off" }), iconStart !== undefined ? (iconStart && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(Clock, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
                         e.stopPropagation();
                         onClear === null || onClear === void 0 ? void 0 : onClear();
-                    }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(XMarkIcon, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: jsx(ChevronUpDownIcon, { className: "h-4 w-4" }) }))] }) }));
+                    }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(X, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: jsx(CaretUpDown, { className: "h-4 w-4" }) }))] }) }));
 };
 
 export { TimePickerTrigger };