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

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

@@ -1,119 +1,17 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useContext, useCallback, useState, useEffect } from 'react';
+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 '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Dropdown/Dropdown.js';
-import '../../core/Dropdown/DropdownTrigger.js';
-import '../../core/Dropdown/DropdownMenu.js';
-import '../../core/Dropdown/DropdownItem.js';
-import '../../core/Dropdown/DropdownSection.js';
-import '../../core/Dropdown/DropdownSeparator.js';
-import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Loader/Loader.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsContent.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/SocialIcon/SocialIcon.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * TimePickerContent Component - contains the time selector dropdown
  * Uses portal positioning like Select and DatePicker components
@@ -123,13 +21,16 @@ const useDarkMode = () => {
  * - 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();
@@ -170,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
@@ -180,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: "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", { 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,21 +1,22 @@
+"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 './TimePicker.js';
+import { TimePickerContext } from './TimePickerContext.js';
 
 /**
  * TimePickerTrigger Component - combobox-style masked input
  * Displays a masked time input that opens the wheel picker on focus
  * Follows the same visual pattern as DatePickerTrigger and SelectButton
  */
-const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, }) => {
+const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
     var _a, _b, _c, _d;
     const context = useContext(TimePickerContext);
     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]) || "";
@@ -25,16 +26,29 @@ const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md
     const periodToggleStyle = theme.periodToggleStyle || "";
     // Apply focused styles when open — same pattern as SelectButton and DatePickerTrigger
     const activeFocusState = isOpen
-        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
+        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
         : "";
     // 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", 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(Clock, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
                         e.stopPropagation();
                         onClear === null || onClear === void 0 ? void 0 : onClear();
-                    }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(XMarkIcon, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: jsx(ChevronUpDownIcon, { className: "h-4 w-4" }) }))] }) }));
+                    }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors", "aria-label": "Clear time", tabIndex: -1, children: jsx(X, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]", children: jsx(CaretUpDown, { className: "h-4 w-4" }) }))] }) }));
 };
 
 export { TimePickerTrigger };

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;

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

@@ -8,34 +8,39 @@ const formsBaseTheme = {
     // Common wrapper style
     wrapperStyle: "relative w-full",
     // Common input group style with focus, hover, and state variations
-    inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
-        "focus-within:outline-2 focus-within:outline-[var(--color-primary-600)] focus-within:-outline-offset-1 " +
-        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all " +
-        // Dark mode
-        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] " +
-        "dark:focus-within:outline-[var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
+    inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
+        "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-[var(--field-fill)] transition-all " +
+        // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
+        // not-focus-within so focus (primary border) always wins; the token flips for dark mode.
+        "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
+        // Dark focus mirror (fill comes from --color-surface, which flips automatically)
+        "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
     controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
-        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
-        // Dark mode
-        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
+        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none",
     // Size variants - atomic design tokens for composability
     // These tokens can be composed together or used individually for maximum flexibility
+    //
+    // `text` reads --form-text-size-* rather than a Tailwind literal so a theme can
+    // retune control type the same way it already retunes control height/padding.
+    // Note the `length:` hint — bare text-[var(--x)] resolves to the COLOUR branch of
+    // Tailwind's ambiguous arbitrary-text syntax and silently sizes nothing.
     sizes: {
         sm: {
-            text: "text-sm",
+            text: "text-[length:var(--form-text-size-sm)]/[var(--form-line-height-sm)]",
             padding: "py-[var(--form-py-sm)] px-[var(--form-px-sm)]",
             height: "h-[var(--form-min-h-sm)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-sm)*2)]",
         },
         md: {
-            text: "text-sm",
+            text: "text-[length:var(--form-text-size-md)]/[var(--form-line-height-md)]",
             padding: "py-[var(--form-py-md)] px-[var(--form-px-md)]",
             height: "h-[var(--form-min-h-md)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-md)*2)]",
         },
         lg: {
-            text: "text-base",
+            text: "text-[length:var(--form-text-size-lg)]/[var(--form-line-height-lg)]",
             padding: "py-[var(--form-py-lg)] px-[var(--form-px-lg)]",
             height: "h-[var(--form-min-h-lg)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-lg)*2)]",
@@ -44,25 +49,37 @@ const formsBaseTheme = {
     // Common state variants
     states: {
         default: "",
-        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] outline-[var(--color-border)] " +
+        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
+            // Suppress the hover-edge change while disabled (keep the resting border)
+            "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border)] " +
             "[&_input]:text-[var(--color-text-disabled)] [&_textarea]:text-[var(--color-text-disabled)] " +
             "[&_select]:text-[var(--color-text-disabled)] [&_input]:cursor-not-allowed " +
             "[&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed " +
             "[&_input]:placeholder:text-[var(--color-text-placeholder)] " +
             "[&_textarea]:placeholder:text-[var(--color-text-placeholder)] " +
-            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed " +
+            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed",
+        // (--color-background-disabled already flips for dark mode)
+        // Invalid = danger border + faint danger ring, NO surface fill. Matches the
+        // grouped-control perimeter overlay (groupInvalidOverlayStyle) 1:1, so single
+        // fields, OTP slots, and composite groups (Address/CreditCard) all read identically.
+        // The error is still unmistakable via border + ring + red message + aria-invalid —
+        // a fill is redundant signal that goes muddy in dark mode. The focus-within ring is
+        // re-asserted in danger so it overrides inputGroupBaseStyle's primary focus ring.
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
+            "focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] focus-within:ring-[var(--color-danger)]/10 " +
+            // Keep the danger border on hover (don't let the hover edge override it)
+            "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
             // Dark mode
-            "dark:bg-[var(--color-neutral-800)] dark:outline-[var(--color-neutral-700)]",
-        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] focus-within:outline-[var(--color-danger)] " +
-            // Dark mode
-            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
+            "dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20 " +
+            "dark:focus-within:ring-[var(--color-danger-500)]/20 " +
+            "dark:not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Common focus state variants
     focusStates: {
-        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 " +
-            "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
-        disabled: "outline-none",
-        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10 " +
+        default: "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
+            "dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+        disabled: "shadow-none",
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger-500)] ring-4 ring-[var(--color-danger-500)]/10 " +
             "dark:ring-[var(--color-danger-500)]/20",
     },
     // Common hover state variants
@@ -71,15 +88,24 @@ const formsBaseTheme = {
         disabled: "",
         invalid: "",
     },
+    // Grouped-control invalid perimeter overlay.
+    // Composite controls (InputAddress, InputCreditCard) stitch a single box out of several
+    // per-field inset borders. Reddening each field reads as "every field is individually wrong"
+    // (the same trap the Radio/Checkbox-group message-led pattern avoids). Instead, the group is
+    // wrapped in a `relative` container and this overlay paints ONE red perimeter ABOVE the fields'
+    // own borders (z over their focus-within:z-10) — interior seams stay the neutral hairline, and a
+    // focused field still shows its own ring glow outside the box. `pointer-events-none` so it never
+    // blocks the inputs. Children are NOT given state="invalid"; this overlay is the only red.
+    groupInvalidOverlayStyle: "pointer-events-none absolute inset-0 z-20 rounded-[var(--form-radius)] " +
+        "shadow-[inset_0_0_0_1px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
+        "dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
     // Common helper text style with state variations
-    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)] " +
-        "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
+    helperText: "text-xs text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.state-invalid_&]:text-[var(--color-danger-500)] " +
+        "dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
     iconStyles: {
-        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)] " +
-            "dark:text-[var(--color-neutral-500)]",
-        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] " +
-            "dark:text-[var(--color-neutral-500)]",
+        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)]",
+        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]",
         padding: {
             left: "pl-10",
             right: "pr-10",
@@ -87,34 +113,61 @@ const formsBaseTheme = {
     },
     // Dropdown/listbox styles for Select, Combobox, and similar components
     dropdownStyles: {
-        // Container for dropdown panel
+        // Container for dropdown panel — STRUCTURAL ONLY (radius/blur/border/ring).
+        // 🔴 This carries NO background or shadow. A panel styled with ONLY `container` renders
+        // TRANSPARENT — every consumer MUST paint its surface via the relative-elevation engine:
+        // prepend `surfaceClasses(level, {translucent:true})` (level from `useSurfaceElevation`) so
+        // the listbox lifts relative to its host (e.g. inside a Popover/Modal). All form dropdowns
+        // (Select/Combobox/DatePicker/DateRangePicker/TimePicker/Mention/InputTag) now do this.
         container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
-            "rounded-[var(--form-radius)] bg-white/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
-            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none " +
-            "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
-        // Base option style
+            // Flex column so the option rows can carry a small inter-item gap (a plain block parent
+            // ignores `gap`). Rows keep their intrinsic height (min-content floor), so this doesn't
+            // squish them — overflow still scrolls.
+            "flex flex-col gap-0.5 " +
+            // Hide the scrollbar for a clean, modern listbox. The GLOBAL `*::-webkit-scrollbar { width }`
+            // rule (global.scss) forces an always-visible *classic* scrollbar on every scroll container
+            // (defining a webkit-scrollbar width opts out of the OS auto-hiding overlay). These utilities
+            // (utilities layer ⟶ win over that base-layer rule) suppress it here; scroll still works via
+            // wheel/trackpad/keyboard. Scoped to the dropdown panel only — app scrollbars are untouched.
+            "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden " +
+            // p-1 (never py-1): the rows are rounded (see `option`), so they must inset evenly on
+            // ALL sides — with vertical-only padding a row's rounded corners and its hover ring run
+            // flush into the panel's own edge and the radius reads as a rendering glitch. This lives
+            // here rather than at each call site because every consumer needs it and, when it was a
+            // call-site decision, two of four got it wrong.
+            "p-1 " +
+            "rounded-[var(--form-radius)] backdrop-blur-md text-sm border border-[var(--color-border)] " +
+            "ring-1 ring-[var(--color-border)] focus:outline-none",
+        // Base option style — hover uses the shared `--color-surface-hover` interaction tint
+        // (§3): a translucent shade that composites over the dropdown's surface, darkening in
+        // light and lightening in dark relative to the background (same model as the surface
+        // ladder). One mode-aware token, so no separate `dark:` variant is needed.
+        // The radius belongs here, not per-consumer: `container`'s gap-0.5 and this row's inset
+        // hover ring only read correctly on a rounded, inset row, so the base already assumes
+        // this treatment — withholding the radius just let call sites drift out of it.
         option: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
-            "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +
-            "dark:hover:text-[var(--color-primary-400)] " +
-            "dark:hover:bg-[var(--color-primary-400)]/10",
+            "rounded-[var(--radius-base)] " +
+            "hover:bg-[var(--color-surface-hover)] hover:shadow-[inset_0_0_0_1px_var(--color-border)]",
         // Selected option modifier
-        optionSelected: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
-        // Highlighted option (keyboard navigation)
-        optionHighlighted: "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50 " +
-            "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-400)]/10",
+        optionSelected: "text-[var(--color-text-primary)] bg-[var(--color-surface-hover)] shadow-[inset_0_0_0_1px_var(--color-border)]",
+        // Highlighted option (keyboard navigation / active descendant). Uses the same neutral
+        // `--color-surface-hover` tint as the base option hover so the keyboard-active row and the
+        // moused row read identically, and the label text stays bright (`text-primary`) instead of
+        // dimming to a muted primary. Only `optionSelected` carries any accent.
+        optionHighlighted: "bg-[var(--color-surface-hover)]",
         // Disabled option modifier
         optionDisabled: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--color-text-primary)]",
         // Create new option style
-        optionCreate: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
+        optionCreate: "font-medium text-[var(--color-primary)] ",
         // Empty state message
-        emptyMessage: "py-3 px-3 text-center text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+        emptyMessage: "py-3 px-3 text-center text-[var(--color-text-muted)]",
     },
     // Placeholder text style (shared across input-like components)
-    placeholderStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    placeholderStyle: "text-[var(--color-text-placeholder)]",
     // Helper text state variants (beyond base helperText)
     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)] ",
     },
 };
 

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

@@ -11,20 +11,26 @@ export { FormLabel } from "./FormLabel";
 export type { FormLabelProps, FormLabelState, FormLabelTheme, } from "./FormLabel";
 export { formLabelTheme } from "./FormLabel";
 export { Radio } from "./Radio";
-export type { RadioProps, RadioSize, RadioState } from "./Radio";
+export type { RadioProps, RadioSize, RadioState, RadioGroupProps, RadioGroupOrientation, } from "./Radio";
 export { radioTheme } from "./Radio";
 export { Checkbox } from "./Checkbox";
-export type { CheckboxProps, CheckboxSize, CheckboxState } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation, } from "./Checkbox";
 export { checkboxTheme } from "./Checkbox";
 export { Switch } from "./Switch";
 export type { SwitchProps, SwitchThemeOverrides } from "./Switch";
 export { switchTheme } from "./Switch";
-export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets, } from "./DatePicker";
-export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
+export { DatePicker, DatePickerTrigger, DatePickerBody, DatePickerPresets, } from "./DatePicker";
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerBodyProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
 export { datePickerTheme } from "./DatePicker";
+export { DateRangePicker, DateRangePickerTrigger, DateRangePickerBody, DateRangePickerPresets, } from "./DateRangePicker";
+export type { DateRangePickerProps, DateRangePickerTriggerProps, DateRangePickerBodyProps, DateRangePickerPresetsProps, DateRangePickerSize, DateRangePickerState, DateRangePickerPlacement, DateRangePickerTheme, } from "./DateRangePicker";
+export { dateRangePickerTheme, DEFAULT_DATE_RANGE_PRESETS } from "./DateRangePicker";
 export { FileUpload } from "./FileUpload";
 export type { FileUploadProps, FileUploadThemeOverrides, UploadedFile, } from "./FileUpload";
 export { fileUploadTheme } from "./FileUpload";
+export { FileUploadProgress } from "./FileUpload";
+export type { FileUploadProgressProps, FileUploadProgressItem, FileUploadProgressStatus, FileUploadProgressThemeOverrides, } from "./FileUpload";
+export { fileUploadProgressTheme } from "./FileUpload";
 export { TimePicker } from "./TimePicker";
 export type { TimePickerProps, TimePickerSize, TimePickerState, TimePickerThemeOverrides, } from "./TimePicker";
 export { timePickerTheme } from "./TimePicker";
@@ -43,6 +49,7 @@ export { inputOTPTheme } from "./InputOTP";
 export { InputCreditCard } from "./InputCreditCard";
 export type { InputCreditCardProps, InputCreditCardThemeOverrides, } from "./InputCreditCard";
 export { inputCreditCardTheme } from "./InputCreditCard";
+export { isValidExpiryDate } from "./InputCreditCard";
 export { InputAddress } from "./InputAddress";
 export type { InputAddressProps, InputAddressThemeOverrides, } from "./InputAddress";
 export { inputAddressTheme } from "./InputAddress";
@@ -63,13 +70,6 @@ export * from "./ColorPicker";
 export { SelectableCard } from "./SelectableCard";
 export type { SelectableCardProps, SelectableCardGroupProps, SelectableCardType, SelectableCardIndicator, SelectableCardTheme, } from "./SelectableCard";
 export { selectableCardTheme } from "./SelectableCard";
-export { TransferList } from "./TransferList";
-export type { TransferListProps, TransferListItem, TransferListSize, TransferListTheme, } from "./TransferList";
-export { transferListTheme } from "./TransferList";
 export { Mention } from "./Mention";
 export type { MentionProps, MentionSuggestion, MentionTrigger, MentionSize, MentionTheme, MentionThemeOverrides, } from "./Mention";
 export { mentionTheme } from "./Mention";
-export { CronInput } from "./CronInput";
-export type { CronInputProps, CronInputSize, CronInputMode, CronInputTheme, CronInputThemeOverrides, CronFields, CronPreset, } from "./CronInput";
-export { cronInputTheme } from "./CronInput";
-export { parseCron, fieldsToCron, validateCron, cronToDescription, getNextRuns, formatNextRun, CRON_PRESETS, } from "./CronInput";