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

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

@@ -10,7 +10,7 @@ const sliderTheme = {
     // Root container with layout
     rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
     // Track (background)
-    trackStyle: "relative w-full h-2 grow rounded-full bg-[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",
+    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)

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

@@ -1,23 +1,27 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
-import { motion } from 'motion/react';
+import { useReducedMotion, motion } from 'motion/react';
 import { switchTheme, thumbPositions } from './Switch.theme.js';
 import { cn } from '../../../utils/cn.js';
 
+const indicatorTransition = {
+    duration: 0.6,
+    ease: [0.22, 1, 0.36, 1],
+};
 /**
  * Switch component for toggling between two states
  */
 const Switch = React__default.forwardRef(({ id, checked: controlledChecked, defaultChecked, onChange, label, description, state = "default", labelPosition = "end", size = "md", theme, className, name, value, required, form, ...rest }, ref) => {
     const generatedId = React__default.useId();
     const switchId = id !== null && id !== void 0 ? id : generatedId;
+    const shouldReduceMotion = useReducedMotion();
     const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     // Determine if component is controlled or uncontrolled
     const isControlled = controlledChecked !== undefined;
     const isChecked = isControlled ? controlledChecked : internalChecked;
     // Derive state flags
     const isDisabled = state === "disabled";
-    const isInvalid = state === "invalid";
     const handleChange = (e) => {
         if (isDisabled)
             return;
@@ -30,22 +34,30 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, defa
     const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label &&
                 (typeof label === "string" ? (jsx(FormLabel, { htmlFor: switchId, state: state, children: label })) : (label)), description &&
                 (typeof description === "string" ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
-    // Build data attributes for state-based styling
+    // Hook only — emitted as `data-state` for consumer CSS / tests, NOT used for styling
     const trackDataState = isDisabled
         ? "disabled"
-        : isInvalid
-            ? "invalid"
-            : isChecked
-                ? "checked"
-                : "unchecked";
-    const filterId = `switch-liquid-lens-${switchId}`;
+        : isChecked
+            ? "checked"
+            : "unchecked";
+    // Resolve track state styling in JS (base theme + per-state theme override),
+    // layered so `className`/`theme` overrides win — see Switch.theme.ts rationale.
+    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 = (jsxs("div", { className: "relative flex items-center h-6", 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" })] }) }) }), jsxs("label", { htmlFor: switchId, className: "contents", children: [jsx("input", { ref: ref, type: "checkbox", id: switchId, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", name: name, value: value, required: required, form: form }), jsx("div", { className: cn(switchTheme.track, switchTheme.trackSizes[size], theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, "aria-hidden": "true", children: jsxs(motion.div, { className: cn(switchTheme.thumb, switchTheme.thumbSizes[size], theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 }, whileTap: isDisabled ? undefined : { scale: 1.15 }, style: { filter: `url(#${filterId})` }, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
-                                        backdropFilter: "blur(0.6px)",
-                                        WebkitBackdropFilter: "blur(0.6px)",
-                                    }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/80", "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[2] rounded-full", style: {
-                                        boxShadow: "inset 1px 1px 0 rgba(255,255,255,0.35), inset 1px 3px 0 rgba(0,0,0,0.03), inset 0 0 14px rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.06)",
-                                    }, "aria-hidden": "true" })] }) })] })] }));
+    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
+                                ? thumbPositions[size].checked
+                                : thumbPositions[size].unchecked, transition: shouldReduceMotion
+                                ? { duration: 0 }
+                                : { type: "spring", stiffness: 500, damping: 30 }, whileTap: isDisabled || shouldReduceMotion ? undefined : { scale: 0.94 } }), jsx(motion.div, { className: "pointer-events-none absolute inset-y-0 left-1.5 inline-flex w-2.5 items-center justify-center", initial: false, animate: shouldReduceMotion
+                                ? { 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: isChecked ? 0 : 1, x: 0, scaleY: 1 }
+                                : isChecked
+                                    ? { opacity: 0, x: 4, scaleY: 0.6 }
+                                    : { opacity: 1, x: 0, scaleY: 1 }, transition: shouldReduceMotion ? { duration: 0 } : indicatorTransition, children: jsx("div", { className: "w-[1.5px] h-2 rounded-full bg-white/50" }) })] })] }) }));
     return (jsxs("div", { className: cn(switchTheme.container, labelPosition === "start" ? "flex-row-reverse" : "flex-row", theme === null || theme === void 0 ? void 0 : theme.container, className), ...rest, children: [labelContent, switchToggle] }));
 });
 Switch.displayName = "Switch";

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

@@ -1,18 +1,48 @@
 import { SwitchTheme } from "./Switch.types";
 /**
  * Default theme configuration for the Switch component
+ *
+ * Gold-standard state styling: track state classes live in `trackStates` as
+ * plain utility strings and are resolved in JS at render time (see Switch.tsx),
+ * NOT as `data-[state=*]:` Tailwind variants. A data-variant compiles to a
+ * class + attribute selector (specificity 0,2,0) that beats a plain `className`
+ * override (0,1,0) regardless of order, silently breaking the shadcn rule
+ * "className override = highest priority". We still emit `data-state` on the
+ * track as a hook for consumer CSS / tests — we just don't *style* with it.
  */
 export declare const switchTheme: SwitchTheme;
 /**
  * Thumb position values for animation
  */
 export declare const thumbPositions: {
-    checked: {
-        x: number;
-        y: number;
+    sm: {
+        checked: {
+            x: number;
+            y: number;
+        };
+        unchecked: {
+            x: number;
+            y: number;
+        };
     };
-    unchecked: {
-        x: number;
-        y: number;
+    md: {
+        checked: {
+            x: number;
+            y: number;
+        };
+        unchecked: {
+            x: number;
+            y: number;
+        };
+    };
+    lg: {
+        checked: {
+            x: number;
+            y: number;
+        };
+        unchecked: {
+            x: number;
+            y: number;
+        };
     };
 };

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

@@ -1,10 +1,29 @@
 /**
  * Default theme configuration for the Switch component
+ *
+ * Gold-standard state styling: track state classes live in `trackStates` as
+ * plain utility strings and are resolved in JS at render time (see Switch.tsx),
+ * NOT as `data-[state=*]:` Tailwind variants. A data-variant compiles to a
+ * class + attribute selector (specificity 0,2,0) that beats a plain `className`
+ * override (0,1,0) regardless of order, silently breaking the shadcn rule
+ * "className override = highest priority". We still emit `data-state` on the
+ * track as a hook for consumer CSS / tests — we just don't *style* with it.
  */
 const switchTheme = {
     container: "flex w-full justify-between items-center gap-4",
-    track: "rounded-full cursor-pointer shadow-inner bg-[var(--color-surface-sunken)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)] outline outline-[var(--color-border)] transition-colors duration-300",
-    thumb: "rounded-full bg-transparent overflow-hidden border border-[var(--color-border)]/40 shadow-lg",
+    // 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)]",
+    // 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)]",
+        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",
     description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
     trackSizes: {
         sm: "w-9 h-5",
@@ -21,8 +40,18 @@ const switchTheme = {
  * Thumb position values for animation
  */
 const thumbPositions = {
-    checked: { x: 16, y: 2 },
-    unchecked: { x: 2, y: 2 },
+    sm: {
+        checked: { x: 14, y: 2 },
+        unchecked: { x: 2, y: 2 },
+    },
+    md: {
+        checked: { x: 18, y: 2 },
+        unchecked: { x: 2, y: 2 },
+    },
+    lg: {
+        checked: { x: 22, y: 2 },
+        unchecked: { x: 2, y: 2 },
+    },
 };
 
 export { switchTheme, thumbPositions };

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

@@ -3,13 +3,21 @@
  */
 export type SwitchLabelPosition = "start" | "end";
 /**
- * State variants for the switch component
+ * State variants for the switch component.
+ *
+ * No `invalid`: a switch is binary — on and off are both valid values, so there is
+ * nothing to validate (unlike Input/Checkbox, which can hold/require a specific value).
  */
-export type SwitchState = 'default' | 'disabled' | 'invalid';
+export type SwitchState = 'default' | 'disabled';
 /**
  * Size variants for the switch component
  */
 export type SwitchSize = 'sm' | 'md' | 'lg';
+/**
+ * Resolvable visual states for the track. Layered additively in JS (see Switch.tsx)
+ * rather than via `data-[state=*]:` variants, so `className`/`theme` overrides win.
+ */
+export type SwitchTrackState = 'unchecked' | 'checked' | 'disabled';
 /**
  * Switch component props
  */
@@ -49,6 +57,7 @@ export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 export interface SwitchTheme {
     container: string;
     track: string;
+    trackStates: Record<SwitchTrackState, string>;
     thumb: string;
     description: string;
     trackSizes: Record<SwitchSize, string>;
@@ -60,6 +69,7 @@ export interface SwitchTheme {
 export interface SwitchThemeOverrides {
     container?: string;
     track?: string;
+    trackStates?: Partial<Record<SwitchTrackState, string>>;
     thumb?: string;
     description?: string;
 }

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

@@ -38,8 +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-white border border-[var(--color-border)] rounded-[var(--form-radius)] shadow-lg overflow-hidden " +
-        "dark:bg-[var(--color-background-secondary)] ",
+    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",
     // Dropdown size variants - primarily for internal spacing/padding
     dropdownSizes: {
         sm: "",

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

@@ -6,95 +6,9 @@ import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePicker.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/Carousel/CarouselBody.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Drawer/DrawerBody.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/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/Popover/PopoverBody.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/TabsBody.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/Message/MessageBody.js';
-import '@heroicons/react/16/solid';
-import '@heroicons/react/24/outline';
-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/SidebarMobileTrigger.js';
-import '../../core/Sidebar/SidebarUserProfile.js';
-import '../../core/Sidebar/SidebarLogo.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/Icon/Icon.js';
-import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { Button } from '../../core/Button/Button.js';
 
 /**
  * TimePickerContent Component - contains the time selector dropdown

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

@@ -25,7 +25,7 @@ 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]) || "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 dark:shadow-[inset_0_0_0_2px_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;

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

@@ -9,11 +9,13 @@ const formsBaseTheme = {
     wrapperStyle: "relative w-full",
     // Common input group style with focus, hover, and state variations
     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_2px_var(--color-primary-600)] " +
-        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all " +
-        // Dark mode
-        "dark:bg-[var(--color-neutral-900)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] " +
-        "dark:focus-within:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
+        "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(--color-surface)] 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 " +
@@ -45,24 +47,28 @@ const formsBaseTheme = {
     states: {
         default: "",
         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 " +
-            // Dark mode
-            "dark:bg-[var(--color-neutral-800)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)]",
-        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] focus-within:shadow-[inset_0_0_0_2px_var(--color-danger)] " +
+            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed",
+        // (--color-background-disabled already flips for dark mode)
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
+            // 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-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
+            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] " +
+            "dark:not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Common focus state variants
     focusStates: {
-        default: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
-            "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+        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_2px_var(--color-danger-500)] ring-4 ring-[var(--color-danger-500)]/10 " +
+        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
@@ -89,9 +95,8 @@ const formsBaseTheme = {
     dropdownStyles: {
         // Container for dropdown panel
         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)]",
+            "rounded-[var(--form-radius)] bg-[var(--color-surface-overlay)]/80 backdrop-blur-md text-sm border border-[var(--color-border)] " +
+            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none",
         // Base option style
         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 " +

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

@@ -72,7 +72,3 @@ export { selectableCardTheme } from "./SelectableCard";
 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";

package/dist/components/forms/index.js

@@ -29,92 +29,6 @@ import 'clsx';
 import 'tailwind-merge';
 import 'motion/react';
 import 'react-dom';
-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 '../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/Carousel/CarouselBody.js';
-import '../core/CommandPalette/CommandPalette.js';
-import '../core/Separator/Separator.js';
-import '../core/Drawer/Drawer.js';
-import '../core/Drawer/DrawerBody.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/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/Popover/PopoverBody.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/TabsBody.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/Message/MessageBody.js';
-import '@heroicons/react/16/solid';
-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/SidebarMobileTrigger.js';
-import '../core/Sidebar/SidebarUserProfile.js';
-import '../core/Sidebar/SidebarLogo.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/Icon/Icon.js';
-import '../core/ImagePlaceholder/ImagePlaceholder.js';
 import './TimePicker/WheelColumn.js';
 export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
 export { Slider } from './Slider/Slider.js';
@@ -158,9 +72,6 @@ export { SelectableCard } from './SelectableCard/SelectableCard.js';
 export { selectableCardTheme } from './SelectableCard/SelectableCard.theme.js';
 export { Mention } from './Mention/Mention.js';
 export { mentionTheme } from './Mention/Mention.theme.js';
-export { CronInput } from './CronInput/CronInput.js';
-export { cronInputTheme } from './CronInput/CronInput.theme.js';
-export { CRON_PRESETS, cronToDescription, fieldsToCron, formatNextRun, getNextRuns, parseCron, validateCron } from './CronInput/CronInput.utils.js';
 export { DatePickerBody } from './DatePicker/DatePickerBody.js';
 export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';
 export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';

package/dist/components/generative/GenerativeView.d.ts

@@ -0,0 +1,21 @@
+import { UISpec } from "./types";
+import { GenerativeRegistry } from "./registry";
+import { ActionHandler } from "./actions";
+export interface GenerativeViewProps {
+    /** The serializable spec tree (one root or top-level siblings). */
+    spec: UISpec;
+    /** Component/icon/resolver registry. @default defaultRegistry */
+    registry?: GenerativeRegistry;
+    /**
+     * Receives spec actions: the EXACT descriptor from the node plus a
+     * serializable context (component, nodeId, callback data such as the
+     * clicked Table row). Omit it and action-bound elements are inert.
+     */
+    onAction?: ActionHandler;
+    className?: string;
+}
+/**
+ * Render a serializable UINode spec with the given registry.
+ * Render-only in P1 — streaming (P3) and action dispatch (P4) layer on top.
+ */
+export declare function GenerativeView({ spec, registry, onAction, className, }: GenerativeViewProps): import("react/jsx-runtime").JSX.Element;