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

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { SelectPlacement } from "../../../hooks/useSelectPortal";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 /**
  * Select value option type
  * @template T The type of the option value
@@ -76,7 +77,17 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     searchable?: boolean;
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
-    /** Whether to use portal rendering for dropdown (default: true) */
+    /**
+     * Whether to render the dropdown in a portal to `document.body` (default: true).
+     * Keep the default when placing a Select inside a Popover, Modal, Drawer, or any
+     * container with `overflow`/`transform`: portaling floats the dropdown ABOVE the
+     * container instead of being clipped by it, and the `data-flikkui-portal` convention
+     * keeps the ancestor overlay open when an option is picked. Setting `portal` to `false`
+     * renders the dropdown inline, where an overflow/transform ancestor (e.g. Popover.Body)
+     * clips it — only use that when the Select lives in a non-clipping, statically-positioned
+     * container and you specifically need the dropdown inside the normal flow.
+     * @default true
+     */
     portal?: boolean;
     /** Placement of the dropdown relative to trigger */
     placement?: SelectPlacement;
@@ -92,6 +103,13 @@ export interface SelectProps<T = unknown> extends SelectBaseProps {
     onCreateOption?: (inputValue: string) => void;
     /** Custom label for the create option (default: "Create '{inputValue}'") */
     createLabel?: string | ((inputValue: string) => string);
+    /**
+     * Pin the listbox surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the listbox's base rung. */
+    lift?: boolean;
 }
 /**
  * Select button props
@@ -117,6 +135,8 @@ export interface SelectButtonProps extends SelectBaseProps {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     /** Called when the button loses focus */
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Called on keydown (used to open the listbox on ArrowDown/ArrowUp while closed) */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Children to render inside the button */
     children?: React.ReactNode;
     /** Marks the button as invalid for assistive technologies */
@@ -148,6 +168,13 @@ export interface SelectOptionsProps extends SelectBaseProps {
     placement?: SelectPlacement;
     /** Offset between trigger and dropdown in pixels */
     offset?: number;
+    /**
+     * Pin the listbox surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the listbox's base rung. */
+    lift?: boolean;
 }
 /**
  * Select option props

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

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 
 /**
@@ -96,6 +97,7 @@ function useSelectState({ options = [], value, onChange, searchable = false, cre
     }, [selectedValues, onChange]);
     // Select an option
     const selectOption = useCallback((newValue, isCreateAction = false) => {
+        var _a;
         // Handle create action callback
         if (isCreateAction && onCreateOption) {
             onCreateOption(String(newValue));
@@ -120,6 +122,11 @@ function useSelectState({ options = [], value, onChange, searchable = false, cre
         // Close and reset
         setIsOpen(false);
         setSearchValue("");
+        // Restore focus to the trigger. The keyboard (Enter-to-select) path
+        // never blurs the trigger in the first place, so this is a no-op there;
+        // mouse-click selection targets a non-focusable option div and can leave
+        // focus stranded, so explicitly return it here to match.
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [selectedValue, selectedValues, onChange, onCreateOption, multiple]);
     // Reset state when closing
     useEffect(() => {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useId } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 const SelectableCardContext = createContext(undefined);

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useId, useState, useMemo, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -5,7 +6,7 @@ import { signatureTheme } from './Signature.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { Button } from '../../core/Button/Button.js';
 
-const Signature = React__default.forwardRef(({ id, label, labelClassName, helperText, helperTextClassName, wrapperClassName, size = 'md', state = 'default', required = false, disabled = false, width = 400, height = 200, strokeColor = '#000000', strokeWidth = 2, backgroundColor = 'transparent', className, theme: customTheme = {}, onChange, onClear, showControls = true, placeholder = 'Sign here', ...props }, ref) => {
+const Signature = React__default.forwardRef(({ id, label, labelClassName, helperText, errorMessage, helperTextClassName, wrapperClassName, size = 'md', state = 'default', required = false, disabled = false, width = 400, height = 200, strokeColor = '#000000', strokeWidth = 2, backgroundColor = 'transparent', className, theme: customTheme = {}, onChange, onClear, showControls = true, placeholder = 'Sign here', ...props }, ref) => {
     var _a, _b;
     const canvasRef = useRef(null);
     const [isDrawing, setIsDrawing] = useState(false);
@@ -101,6 +102,11 @@ const Signature = React__default.forwardRef(({ id, label, labelClassName, helper
         lastPointRef.current = currentPoint;
     }, [isDisabled, isDrawing, getPointFromEvent]);
     const stopDrawing = useCallback(() => {
+        // A mouseup/touchend/mouseleave can fire on a disabled pad (e.g. it was
+        // disabled mid-drag, or the browser still delivers the trailing event) —
+        // bail before touching state or emitting onChange.
+        if (isDisabled)
+            return;
         setIsDrawing(false);
         lastPointRef.current = null;
         // Only call toDataURL and onChange on mouseup/touchend, not on every draw event
@@ -109,7 +115,7 @@ const Signature = React__default.forwardRef(({ id, label, labelClassName, helper
             const dataURL = canvas.toDataURL();
             onChange(dataURL);
         }
-    }, [onChange]);
+    }, [isDisabled, onChange]);
     const clear = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -145,7 +151,11 @@ const Signature = React__default.forwardRef(({ id, label, labelClassName, helper
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || '';
     const stateClasses = ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || '';
     const helperTextClasses = theme.helperText || '';
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width, height }, children: jsxs("div", { ref: ref, className: baseClasses, ...props, children: [jsx("canvas", { ref: canvasRef, id: signatureId, className: cn(theme.canvasStyle, customTheme.canvasStyle), tabIndex: isDisabled ? -1 : 0, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, "aria-label": typeof label === 'string' ? label : 'Signature canvas', "aria-required": required, "aria-invalid": isInvalid, "aria-disabled": isDisabled }), isEmpty && placeholder && !isDisabled && (jsx("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle), children: placeholder })), showControls && !isDisabled && (jsxs("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button", children: "Clear" }), jsx(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button", children: "Save" })] }))] }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // 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))] }));
 });
 Signature.displayName = 'Signature';
 

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

@@ -56,6 +56,12 @@ export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
     labelClassName?: string;
     /** Helper text displayed below the signature */
     helperText?: ReactNode;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over `helperText` while invalid; `helperText` is
+     * unaffected/still shown as normal otherwise.
+     */
+    errorMessage?: ReactNode;
     /** Additional class name for the helper text */
     helperTextClassName?: string;
     /** Additional class name for the wrapper */

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -242,7 +243,7 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
                                         transform: "translate(-50%, -50%)",
                                         position: "absolute",
                                         top: "50%",
-                                    }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
+                                    }, 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})`,

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
@@ -45,7 +46,13 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, defa
     const resolveTrackState = (key) => { var _a; return cn(switchTheme.trackStates[key], (_a = theme === null || theme === void 0 ? void 0 : theme.trackStates) === null || _a === void 0 ? void 0 : _a[key]); };
     const trackStateClasses = cn(isChecked ? resolveTrackState("checked") : resolveTrackState("unchecked"), isDisabled && resolveTrackState("disabled"));
     // Switch toggle component
-    const switchToggle = (jsx("div", { className: "relative flex items-center h-6", children: jsxs("label", { htmlFor: switchId, className: "contents", children: [jsx("input", { ref: ref, type: "checkbox", id: switchId, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "peer sr-only", name: name, value: value, required: required, form: form }), jsxs("div", { className: cn(switchTheme.track, switchTheme.trackSizes[size], trackStateClasses, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, "aria-hidden": "true", children: [jsx(motion.div, { className: cn(switchTheme.thumb, switchTheme.thumbSizes[size], !isDisabled && "group-hover:shadow-xl", theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked
+    const switchToggle = (jsx("div", { className: "relative flex items-center h-6", children: jsxs("label", { htmlFor: switchId, className: "contents", children: [jsx("input", { ref: ref, type: "checkbox", id: switchId, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "peer sr-only", name: name, value: value, required: required, form: form }), jsxs("div", { className: cn(switchTheme.track, switchTheme.trackSizes[size], trackStateClasses, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, "aria-hidden": "true", children: [jsx(motion.div, { className: cn(switchTheme.thumb, switchTheme.thumbSizes[size], 
+                            // On the checked/primary track the white knob would vanish on a
+                            // light primary (e.g. a near-white primary in dark mode), so the
+                            // ON thumb adopts the track's contrast color: white on a dark
+                            // primary (unchanged), dark on a light primary. The OFF thumb keeps
+                            // the white gradient — it sits on the neutral off-track, never white.
+                            isChecked && "bg-none bg-[var(--color-primary-contrast)]", !isDisabled && "group-hover:shadow-xl", theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked
                                 ? thumbPositions[size].checked
                                 : thumbPositions[size].unchecked, transition: shouldReduceMotion
                                 ? { duration: 0 }
@@ -53,7 +60,7 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, defa
                                 ? { opacity: isChecked ? 1 : 0, x: 0, scale: 1 }
                                 : isChecked
                                     ? { opacity: 1, x: 0, scale: 1 }
-                                    : { opacity: 0, x: -4, scale: 0.78 }, transition: shouldReduceMotion ? { duration: 0 } : indicatorTransition, children: jsx("div", { className: "size-2 rounded-full border-[1.5px] border-white/50" }) }), jsx(motion.div, { className: "pointer-events-none absolute inset-y-0 right-1.5 inline-flex w-2.5 items-center justify-center", initial: false, animate: shouldReduceMotion
+                                    : { opacity: 0, x: -4, scale: 0.78 }, transition: shouldReduceMotion ? { duration: 0 } : indicatorTransition, children: jsx("div", { className: "size-2 rounded-full border-[1.5px] border-[var(--color-primary-contrast)]/50" }) }), jsx(motion.div, { className: "pointer-events-none absolute inset-y-0 right-1.5 inline-flex w-2.5 items-center justify-center", initial: false, animate: shouldReduceMotion
                                 ? { opacity: isChecked ? 0 : 1, x: 0, scaleY: 1 }
                                 : isChecked
                                     ? { opacity: 0, x: 4, scaleY: 0.6 }

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

@@ -21,9 +21,11 @@ const switchTheme = {
         checked: "bg-[var(--color-primary)]",
         disabled: "bg-[var(--color-background-disabled)] cursor-not-allowed",
     },
-    // Thumb knob — solid fill + soft elevation. White reads on both the sunken/raised track
-    // (light) and the primary/dark track (dark); the faint border separates it on near-white tracks.
-    thumb: "rounded-full bg-gradient-to-b from-neutral-200 via-neutral-50 to-white shadow-real-lg border border-white/80 transition-shadow duration-300 motion-reduce:transition-none",
+    // Thumb knob — soft elevation. OFF state: white gradient (it rides the neutral
+    // 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",
     description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
     trackSizes: {
         sm: "w-9 h-5",

package/dist/components/forms/Textarea/Textarea.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { textareaTheme } from './Textarea.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, onValueChange, ...props }, ref) => {
+const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, errorMessage, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, onValueChange, ...props }, ref) => {
     var _a, _b, _c, _d;
     const [isFocused, setIsFocused] = useState(false);
     const generatedId = React__default.useId();
@@ -12,6 +13,9 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     // Derived state flags for internal use
     const isDisabled = state === "disabled";
     const isInvalid = state === "invalid";
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = isInvalid && errorMessage ? errorMessage : helperText;
     // If unstyled, render only the textarea element
     if (unstyled) {
         return (jsx("textarea", { ref: ref, id: inputId, className: className, disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
@@ -39,7 +43,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
     const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": helperText ? `${inputId}-helper` : undefined, required: required, rows: rows, cols: cols, onFocus: (e) => {
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": displayedMessage ? `${inputId}-helper` : undefined, required: required, rows: rows, cols: cols, onFocus: (e) => {
                                 var _a;
                                 setIsFocused(true);
                                 (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -50,7 +54,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
                             }, onChange: (e) => {
                                 propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(e);
                                 onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
-                            }, ...restProps }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
+                            }, ...restProps }) }) }) }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${inputId}-helper`, role: isInvalid ? "alert" : undefined, className: cn(helperTextClasses, helperTextClassName), children: displayedMessage })) : (displayedMessage))] }));
 });
 Textarea.displayName = "Textarea";
 

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

@@ -15,6 +15,12 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     label?: React.ReactNode;
     /** Optional helper text below the textarea — pass a string for default styling, or a ReactNode for full control */
     helperText?: React.ReactNode;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over `helperText` while invalid; `helperText` is
+     * unaffected/still shown as normal otherwise.
+     */
+    errorMessage?: React.ReactNode;
     /** Additional class name for the textarea */
     className?: string;
     /** Additional class name for the label */

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

@@ -1,16 +1,7 @@
 import React from "react";
 import { TimePickerProps } from "./TimePicker.types";
-interface TimePickerContextType {
-    isOpen: boolean;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    theme: ReturnType<typeof Object.assign>;
-    triggerRef: React.RefObject<HTMLDivElement | null>;
-    inputRef: React.RefObject<HTMLInputElement | null>;
-    hasValue: boolean;
-    size: "sm" | "md" | "lg";
-    state: "default" | "disabled" | "invalid";
-}
-export declare const TimePickerContext: React.Context<TimePickerContextType | undefined>;
+import { TimePickerContext } from "./TimePickerContext";
+export { TimePickerContext };
 /**
  * Main TimePicker Component
  *
@@ -23,4 +14,3 @@ export declare const TimePickerContext: React.Context<TimePickerContextType | un
  * - Validation with min/max time constraints
  */
 export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
-export {};

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { timePickerTheme } from './TimePicker.theme.js';
 import { cn } from '../../../utils/cn.js';
@@ -7,8 +8,8 @@ import { TimePickerTrigger } from './TimePickerTrigger.js';
 import { TimePickerContent } from './TimePickerContent.js';
 import { WheelColumn } from './WheelColumn.js';
 import { formatTimeInput, isValidTimeInput } from '../Input/inputMasks.js';
+import { TimePickerContext } from './TimePickerContext.js';
 
-const TimePickerContext = createContext(undefined);
 /**
  * Utility functions for time handling
  */
@@ -184,7 +185,7 @@ const get24Hour = (displayHour, period) => {
  */
 const TimePicker = React__default.forwardRef(({ value, defaultValue, onChange, format = "24h", step = 1, minTime, maxTime, disabled = false, placeholder = format === "12h"
     ? "HH:MM"
-    : "HH:MM", size = "md", state = "default", clearable = true, label, helperText, iconStart, iconEnd, className, labelClassName, helperTextClassName, theme = {}, id, ...props }, ref) => {
+    : "HH:MM", size = "md", state = "default", clearable = true, label, helperText, iconStart, iconEnd, className, labelClassName, helperTextClassName, theme = {}, id, elevation, lift, ...props }, ref) => {
     var _a;
     // Internal state
     const [isOpen, setIsOpen] = useState(false);
@@ -418,6 +419,7 @@ const TimePicker = React__default.forwardRef(({ value, defaultValue, onChange, f
         // Reset sync source after processing
         syncSourceRef.current = null;
     }, [pendingTime, format]);
+    const dialogId = `${inputId}-dialog`;
     // Context value
     const contextValue = useMemo(() => ({
         isOpen,
@@ -428,7 +430,8 @@ const TimePicker = React__default.forwardRef(({ value, defaultValue, onChange, f
         hasValue: Boolean(displayValue),
         size,
         state: finalState,
-    }), [isOpen, mergedTheme, displayValue, size, finalState]);
+        dialogId,
+    }), [isOpen, mergedTheme, displayValue, size, finalState, dialogId]);
     // Current period for trigger display
     const currentPeriod = (pendingTime === null || pendingTime === void 0 ? void 0 : pendingTime.period) || currentTime.period || (format === "12h" ? "AM" : undefined);
     // Compute the value shown in the input:
@@ -447,7 +450,7 @@ const TimePicker = React__default.forwardRef(({ value, defaultValue, onChange, f
                 else if (ref) {
                     ref.current = el;
                 }
-            }, className: cn(mergedTheme.containerStyle, className), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required, children: label })) : (label)), jsx(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, iconStart: iconStart, iconEnd: iconEnd, inputValue: inputDisplayValue, onInputChange: handleInputChange, onInputFocus: handleInputFocus, onInputKeyDown: handleInputKeyDown, format: format, period: currentPeriod, onPeriodToggle: handlePeriodToggle, placeholder: placeholder, "aria-invalid": finalState === 'invalid' || undefined, "aria-describedby": helperText ? `${inputId}-helper` : undefined }), jsxs(TimePickerContent, { isOpen: isOpen, onCancel: handleCancel, onSave: handleSave, portal: true, placement: "bottom-start", offset: 4, dropdownRef: dropdownRef, children: [jsx(WheelColumn, { label: "Hour", options: hourOptions, value: getDisplayHour(wheelTime.hour, format), onChange: handleHourChange, theme: mergedTheme }), jsx(WheelColumn, { label: "Min", options: minuteOptions, value: wheelTime.minute, onChange: handleMinuteChange, theme: mergedTheme }), format === "12h" && (jsx(WheelColumn, { label: "", options: periodOptions, value: wheelTime.period || "AM", onChange: handlePeriodChange, theme: mergedTheme }))] }), (helperText || validationError) && (typeof helperText === 'string' || validationError ? (jsx("p", { id: `${inputId}-helper`, className: cn(mergedTheme.helperTextStyle, (_a = mergedTheme.helperTextStates) === null || _a === void 0 ? void 0 : _a[finalState], helperTextClassName), children: validationError || helperText })) : (helperText))] }) }));
+            }, className: cn(mergedTheme.containerStyle, className), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required, children: label })) : (label)), jsx(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, iconStart: iconStart, iconEnd: iconEnd, inputValue: inputDisplayValue, onInputChange: handleInputChange, onInputFocus: handleInputFocus, onInputKeyDown: handleInputKeyDown, format: format, period: currentPeriod, onPeriodToggle: handlePeriodToggle, placeholder: placeholder, "aria-invalid": finalState === 'invalid' || undefined, "aria-describedby": helperText ? `${inputId}-helper` : undefined }), jsxs(TimePickerContent, { isOpen: isOpen, onCancel: handleCancel, onSave: handleSave, portal: true, placement: "bottom-start", offset: 4, dropdownRef: dropdownRef, elevation: elevation, lift: lift, children: [jsx(WheelColumn, { label: "Hour", options: hourOptions, value: getDisplayHour(wheelTime.hour, format), onChange: handleHourChange, theme: mergedTheme }), jsx(WheelColumn, { label: "Min", options: minuteOptions, value: wheelTime.minute, onChange: handleMinuteChange, theme: mergedTheme }), format === "12h" && (jsx(WheelColumn, { label: "", options: periodOptions, value: wheelTime.period || "AM", onChange: handlePeriodChange, theme: mergedTheme }))] }), (helperText || validationError) && (typeof helperText === 'string' || validationError ? (jsx("p", { id: `${inputId}-helper`, className: cn(mergedTheme.helperTextStyle, (_a = mergedTheme.helperTextStates) === null || _a === void 0 ? void 0 : _a[finalState], helperTextClassName), children: validationError || helperText })) : (helperText))] }) }));
 });
 TimePicker.displayName = "TimePicker";
 

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

@@ -38,7 +38,7 @@ const timePickerTheme = {
     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)
     // Width is controlled by trigger size via estimatedWidth parameter
-    dropdownStyle: "fixed z-[1000] bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--form-radius)] shadow-lg overflow-hidden",
+    dropdownStyle: "fixed z-[1000] backdrop-blur-md border border-[var(--color-border)] rounded-[var(--form-radius)] shadow-lg overflow-hidden",
     // Dropdown size variants - primarily for internal spacing/padding
     dropdownSizes: {
         sm: "",
@@ -69,17 +69,16 @@ const timePickerTheme = {
     // Wheel item active (selected) style - stronger text color and weight
     wheelItemActiveStyle: "text-[var(--color-text-primary)] font-semibold",
     // Footer container - flexbox for action buttons
-    footerStyle: "flex justify-between items-center gap-2 px-2 py-2 border-t border-[var(--color-border)] " +
-        "dark:border-[var(--color-neutral-700)]",
+    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)]",
     // AM/PM period toggle button
-    periodToggleStyle: "px-1.5 py-0.5 text-xs font-semibold rounded " +
+    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:text-[var(--color-neutral-200)] " +
+        "dark:bg-[var(--color-neutral-700)] " +
         "dark:hover:bg-[var(--color-neutral-600)]",
 };
 

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 /**
  * TimePicker component props
  * @property {string} value - The selected time value in "HH:mm" format
@@ -59,6 +60,13 @@ export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     helperTextClassName?: string;
     /** Component-level theme overrides */
     theme?: TimePickerThemeOverrides;
+    /**
+     * Pin the dropdown surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the dropdown's base rung. */
+    lift?: boolean;
 }
 /**
  * Time display format options
@@ -258,4 +266,11 @@ export interface TimePickerContentProps {
     children?: React.ReactNode;
     /** Ref to the dropdown element (for portal-aware click-outside detection) */
     dropdownRef?: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Pin the dropdown surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the dropdown's base rung. */
+    lift?: boolean;
 }

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

@@ -1,14 +1,16 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
-import { TimePickerContext } from './TimePicker.js';
+import { TimePickerContext } from './TimePickerContext.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
+import { Button } from '../../core/Button/Button.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useDarkMode } from '../../../hooks/useDarkMode.js';
-import { Button } from '../../core/Button/Button.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
 /**
  * TimePickerContent Component - contains the time selector dropdown
@@ -19,13 +21,16 @@ import { Button } from '../../core/Button/Button.js';
  * - Wheel column children (passed as children)
  * - Footer with Cancel and Save buttons
  */
-const TimePickerContent = ({ isOpen, onCancel, onSave, portal = true, placement = "bottom-start", offset = 4, children, dropdownRef, }) => {
+const TimePickerContent = ({ isOpen, onCancel, onSave, portal = true, placement = "bottom-start", offset = 4, children, dropdownRef, elevation, lift, }) => {
     var _a, _b;
+    // Relative elevation: the dropdown lifts above its host surface (overlay base = 5)
+    // so a TimePicker inside a Popover/Modal still reads as a higher plane.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const context = useContext(TimePickerContext);
     if (!context) {
         throw new Error("TimePickerContent must be used within a TimePicker");
     }
-    const { theme, triggerRef, size } = context;
+    const { theme, triggerRef, size, dialogId } = context;
     // Detect dark mode for portal content
     const isDarkMode = useDarkMode();
     const isClient = useIsClient();
@@ -66,7 +71,7 @@ const TimePickerContent = ({ isOpen, onCancel, onSave, portal = true, placement
             onSave();
         }
     }, [onCancel, onSave]);
-    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(theme.dropdownStyle, (_b = theme.dropdownSizes) === null || _b === void 0 ? void 0 : _b[size]), style: {
+    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, id: dialogId, className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.dropdownStyle, (_b = theme.dropdownSizes) === null || _b === void 0 ? void 0 : _b[size]), style: {
                 ...cssVariables,
                 overscrollBehavior: "contain",
                 ...(portal
@@ -76,10 +81,10 @@ 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: [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: "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" })] })] }) })) }));
     // Use portal if enabled and client-side - wrap with dark class for dark mode support
     return portal && isClient
-        ? createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body)
+        ? createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body)
         : contentElement;
 };
 

package/dist/components/forms/TimePicker/TimePickerContext.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface TimePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    theme: ReturnType<typeof Object.assign>;
+    triggerRef: React.RefObject<HTMLDivElement | null>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    hasValue: boolean;
+    size: "sm" | "md" | "lg";
+    state: "default" | "disabled" | "invalid";
+    /** id applied to the wheel-picker dialog — satisfies role="combobox"'s required aria-controls */
+    dialogId: string;
+}
+export declare const TimePickerContext: React.Context<TimePickerContextType | undefined>;
+export declare const useTimePickerContext: () => TimePickerContextType;

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

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const TimePickerContext = createContext(undefined);
+
+export { TimePickerContext };

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { ClockIcon, XMarkIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { TimePickerContext } from './TimePicker.js';
+import { TimePickerContext } from './TimePickerContext.js';
 
 /**
  * TimePickerTrigger Component - combobox-style masked input
@@ -15,7 +16,7 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     if (!context) {
         throw new Error('TimePickerTrigger must be used within a TimePicker');
     }
-    const { theme, triggerRef, inputRef, hasValue } = context;
+    const { theme, triggerRef, inputRef, hasValue, setIsOpen, dialogId } = context;
     const baseStyle = theme.baseStyle || "";
     const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
     const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
@@ -30,8 +31,21 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     // Determine whether start icon is present (for input padding)
     const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;
     const iconStartPadding = theme.iconStartPadding || "";
-    return (jsx("div", { ref: triggerRef, className: "relative w-full", children: jsxs("div", { 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), "aria-expanded": isOpen, "aria-haspopup": "dialog", "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) => {
+    return (jsx("div", { ref: triggerRef, className: "relative w-full", children: jsxs("div", { onPointerDown: (e) => {
+                var _a;
+                if (disabled)
+                    return;
+                const target = e.target;
+                // The AM/PM and clear buttons handle their own clicks; the input focuses
+                // natively. Clicking anywhere else in the field (chevron, padding, icon)
+                // redirects focus to the input, which opens the dropdown via onInputFocus.
+                if (target.closest("button") || target === inputRef.current)
+                    return;
+                e.preventDefault();
+                (_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) => {
                         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" }) }))] }) }));

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useState, useCallback, useEffect } from 'react';
 
 /**

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

@@ -42,6 +42,7 @@ export declare const formsBaseTheme: {
         disabled: string;
         invalid: string;
     };
+    groupInvalidOverlayStyle: string;
     helperText: string;
     iconStyles: {
         left: string;