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

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 }));
 }
 // ============================================================================
@@ -75,7 +76,7 @@ function SelectProvider({ children, selectState, size = "md", componentState = "
 /**
  * Select Button Component
  */
-const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, contentStart, contentEnd, className = "", onClick, onFocus, onBlur, onKeyDown, children, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, }) => {
+const SelectButton = ({ id, disabled, isOpen, state = "default", size = "md", iconStart, iconEnd, contentStart, contentEnd, className = "", onClick, onFocus, onBlur, onKeyDown, children, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, }) => {
     var _a, _b, _c, _d, _e, _f;
     const { theme, buttonRef } = useSelectContext();
     const baseStyle = theme.baseStyle || "";
@@ -94,13 +95,13 @@ 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 ||
             "shadow-[inset_0_0_0_1px_var(--color-primary)] ring-4 ring-[var(--color-primary)]/10"
         : "";
-    return (jsxs("div", { className: cn(buttonWrapperStyle, "flex items-stretch"), children: [contentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentSlotStyle, "pr-0 border-r border-[var(--color-border)]"), children: contentStart })), jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, "flex-1 min-w-0", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, "aria-labelledby": ariaLabelledby, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }), contentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentSlotStyle, "pl-0 border-l border-[var(--color-border)]"), children: contentEnd }))] }));
+    return (jsxs("div", { className: cn(buttonWrapperStyle, "flex items-stretch"), children: [contentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentSlotStyle, "pr-0 border-r border-[var(--color-border)]"), children: contentStart })), jsxs("button", { ref: buttonRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, buttonStyle, "flex-1 min-w-0", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen && id ? `${id}-listbox` : undefined, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [iconStart && jsx("span", { className: iconStartStyle, children: iconStart }), children, iconEnd && jsx("span", { className: iconEndStyle, children: iconEnd })] }), contentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentSlotStyle, "pl-0 border-l border-[var(--color-border)]"), children: contentEnd }))] }));
 };
 /**
  * Select Options Component
@@ -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, "aria-label": ariaLabel, 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-label": ariaLabel, "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

@@ -26,7 +26,7 @@ export interface SelectBaseProps {
  * Select component props
  * @template T The type of the select value
  */
-export interface SelectProps<T = unknown> extends SelectBaseProps {
+export interface SelectCommonProps<T = unknown> extends SelectBaseProps {
     /** ID for the select component */
     id?: string;
     /** Name for the select component */
@@ -35,8 +35,6 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     size?: SelectSize;
     /** Current state of the select component */
     state?: SelectState;
-    /** Currently selected option */
-    value?: T;
     /** Custom display value to show in trigger (overrides selected option label) */
     displayValue?: React.ReactNode;
     /** Placeholder text when no option is selected */
@@ -51,12 +49,8 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     label?: React.ReactNode;
     /** Helper text below the select — pass a string for default styling, or a ReactNode for full control */
     helperText?: React.ReactNode;
-    /** Enable multi-select mode — value becomes T[] and chips are rendered in trigger */
-    multiple?: boolean;
     /** Maximum number of chips to display before showing "+N more" (default: 3) */
     maxDisplayedChips?: number;
-    /** Called when the selection changes */
-    onChange?: (value: T) => void;
     /** Called when the select receives focus */
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /** Called when the select loses focus */
@@ -75,7 +69,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).
@@ -110,7 +107,74 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     elevation?: SurfaceElevation;
     /** `false` opts out of the relative lift — paints at the listbox's base rung. */
     lift?: boolean;
+    /**
+     * Accessible name for a Select with no visible `label` — e.g. a control sitting
+     * in a toolbar. `aria-labelledby` wins over this when both are present.
+     *
+     * 🔴 Declared explicitly because TypeScript does NOT check hyphenated JSX
+     * attributes against a component's props type: before this existed,
+     * `<Select aria-label="…" />` typechecked cleanly and was then dropped at
+     * runtime, leaving the trigger with no accessible name at all.
+     */
+    "aria-label"?: string;
+}
+/**
+ * Single-select props — the default mode.
+ * `value` is one `T` and `onChange` receives one `T`.
+ */
+export interface SelectSingleProps<T = unknown> extends SelectCommonProps<T> {
+    /** Enable multi-select mode. Omit or pass `false` for single-select. */
+    multiple?: false;
+    /**
+     * Currently selected option.
+     * 🔴 `NoInfer` matters: without it TS treats this as an inference site for `T`,
+     * so `<Select multiple value={["a"]} />` infers `T = string[]` from THIS branch
+     * and then demands `SelectOption<string[]>[]` for `options`. Inference must come
+     * from `options` alone; the value/onChange shapes follow from it.
+     */
+    value?: NoInfer<T>;
+    /** Called when the selection changes */
+    onChange?: (value: NoInfer<T>) => void;
+}
+/**
+ * Multi-select props — `multiple` is `true`, so `value` is an ARRAY and
+ * `onChange` receives the full next array (not the toggled item).
+ */
+export interface SelectMultipleProps<T = unknown> extends SelectCommonProps<T> {
+    /** Enable multi-select mode — chips are rendered in the trigger. */
+    multiple: true;
+    /** Currently selected options. `NoInfer` for the reason given on the single variant. */
+    value?: NoInfer<T>[];
+    /** Called with the complete next selection whenever it changes */
+    onChange?: (value: NoInfer<T>[]) => void;
 }
+/**
+ * Select component props — a discriminated union on `multiple`.
+ *
+ * 🔴 `value`/`onChange` change shape with the mode, which a single
+ * `value?: T` could not express: multi-select genuinely hands back a `T[]`.
+ * The implementation always did this and lied about it with
+ * `onChange?.(updated as unknown as T)`, so `<Select multiple value={["a"]} />`
+ * — correct usage, and what the JSDoc documented — failed to type-check while
+ * `onChange` handlers were silently typed as the element type instead of the
+ * array. Narrow with `multiple` to get the right shape on both.
+ *
+ * @template T The type of an individual option value (NOT the array)
+ */
+export type SelectProps<T = unknown> = SelectSingleProps<T> | SelectMultipleProps<T>;
+/**
+ * @internal Widened shape the implementation destructures. A union cannot be
+ * destructured and then called (`onChange` would be a union of incompatible
+ * signatures), so the mode-dependent members are widened exactly once, here,
+ * and the public `Select` export casts back to the precise union. This is the
+ * single sanctioned cast — it replaces three `as unknown as T` casts that
+ * previously misreported the runtime contract to consumers.
+ */
+export type SelectInternalProps<T = unknown> = SelectCommonProps<T> & {
+    multiple?: boolean;
+    value?: T | T[];
+    onChange?: (value: T | T[]) => void;
+};
 /**
  * Select button props
  */
@@ -145,6 +209,8 @@ export interface SelectButtonProps extends SelectBaseProps {
     "aria-describedby"?: string;
     /** ID of the element that labels this button (e.g. form label) */
     "aria-labelledby"?: string;
+    /** Accessible name for a Select with no visible `label` (e.g. a toolbar control) */
+    "aria-label"?: string;
     /** Structural content rendered before iconStart */
     contentStart?: React.ReactNode;
     /** Structural content rendered after iconEnd */

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

@@ -5,10 +5,16 @@ import type { SelectOption } from "./Select.types";
 export interface UseSelectStateProps<T = any> {
     /** Array of available options */
     options: SelectOption<T>[];
-    /** Currently selected value (controlled) */
-    value?: T;
+    /** Currently selected value (controlled). `T[]` when `multiple` is set. */
+    value?: T | T[];
     /** Callback when selection changes */
-    onChange?: (value: T) => void;
+    /**
+     * Called when the selection changes. In `multiple` mode the payload is the
+     * complete next `T[]`, not the toggled item — which is why this is widened
+     * rather than `(value: T) => void`. The public `SelectProps` union narrows it
+     * back to the exact shape per mode.
+     */
+    onChange?: (value: T | T[]) => void;
     /** Whether filtering/search is enabled */
     searchable?: boolean;
     /** Whether new options can be created */

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

@@ -23,7 +23,10 @@ import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 function useSelectState({ options = [], value, onChange, searchable = false, creatable = false, onCreateOption, createLabel, enableTypeahead = true, multiple = false, }) {
     // Core state
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedValue, setSelectedValue] = useState(value);
+    // `value` is widened to `T | T[]` because multi-select hands back an array;
+    // this single-value slot only ever holds the non-array branch (the array lives
+    // in `selectedValues` below), matching the Array.isArray idiom used throughout.
+    const [selectedValue, setSelectedValue] = useState(Array.isArray(value) ? undefined : value);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const [searchValue, setSearchValue] = useState("");
     // Multi-select state

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

@@ -5,6 +5,7 @@ import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { Radio } from '../Radio/Radio.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Ripple } from '../../core/shared/Ripple.js';
 import { useOptionalSelectableCardContext } from './SelectableCardContext.js';
 import { selectableCardTheme } from './SelectableCard.theme.js';
 import { SelectableCardGroup } from './SelectableCardGroup.js';
@@ -60,10 +61,10 @@ 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] }));
+    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, jsx(Ripple, { disabled: isDisabled })] }));
 });
 SelectableCardRoot.displayName = "SelectableCard";
 // ─── Compound Export ─────────────────────────────────────────────────────────

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

@@ -2,7 +2,7 @@ const selectableCardTheme = {
     group: "flex flex-col gap-3",
     card: 
     // Base layout — no justify-between; indicator position handled by render order
-    "relative flex items-start gap-3 rounded-[var(--radius-base)] cursor-pointer transition-[border-color,background-color,box-shadow,outline] duration-200 " +
+    "relative flex items-start gap-3 rounded-[var(--radius-base)] cursor-pointer transition-[border-color,background-color,box-shadow,outline] duration-[var(--motion-duration-base)] " +
         // Default state
         "border border-[var(--color-border)] bg-[var(--color-surface)] " +
         "dark:bg-[var(--color-background)] " +

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

@@ -12,12 +12,12 @@
 const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
     // Structural base only — no state colors (those live in `trackStates`)
-    track: "group rounded-full cursor-pointer shadow-inner-real-sm transition-colors duration-500 motion-reduce:transition-none outline-1 outline-[var(--color-border)] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--color-primary-600)]",
+    track: "group rounded-full cursor-pointer shadow-inner-real-sm transition-colors duration-[var(--motion-duration-slowest)] motion-reduce:transition-none outline-1 outline-[var(--color-border)] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--color-primary-600)]",
     // Resolved in JS and layered via cn() so later keys win (tailwind-merge dedupes bg-*).
     // 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",
     },
@@ -25,7 +25,7 @@ const switchTheme = {
     // off-track, which is never white). ON state: Switch.tsx swaps the fill to
     // --color-primary-contrast so the knob stays visible on any primary track — white
     // on a dark primary, dark on a light primary (the near-white-primary case).
-    thumb: "rounded-full bg-gradient-to-b from-neutral-200 via-neutral-50 to-white shadow-real-lg border-t border-white/80 dark:border-white/20 transition-shadow duration-300 motion-reduce:transition-none",
+    thumb: "rounded-full bg-gradient-to-b from-neutral-200 via-neutral-50 to-white shadow-real-lg border-t border-white/80 dark:border-white/20 transition-shadow duration-[var(--motion-duration-slow)] motion-reduce:transition-none",
     description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
     trackSizes: {
         sm: "w-9 h-5",

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

@@ -33,9 +33,9 @@ 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",
+    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-surface)] transition-colors z-10",
     // Dropdown container styles (TimePicker-specific)
     // Width is controlled by trigger size via estimatedWidth parameter
     dropdownStyle: "fixed z-[1000] backdrop-blur-md border border-[var(--color-border)] rounded-[var(--form-radius)] shadow-lg overflow-hidden",
@@ -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-surface)] 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 };