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

package/dist/components/effects/TiltCard/TiltCard.js

@@ -0,0 +1,177 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * TiltCard wraps content in a damped 3D mouse tilt. The tilt is a pure CSS
+ * transform — no WebGL. The optional `glow` spotlight border lazy-loads the
+ * `three` peer dependency on demand (see TiltCard.glow.ts).
+ *
+ * The animation loop is demand-driven: it runs only while the pointer is near
+ * the card or the damped values are still settling, then stops — an idle
+ * TiltCard costs nothing per frame.
+ */
+const TiltCard = ({ children, tiltIntensity = 6, glow = false, variation = "rounded-rect", rounded, borderWidth = 2, glowColor = "#ffffff", spotlightSize = 0.4, spotlightEdge = 0.5, glowExtent = 20, glowIntensity = 0.6, shouldAnimate = true, className, style, ...props }) => {
+    const outerRef = useRef(null);
+    const contentRef = useRef(null);
+    const glowRef = useRef(null);
+    // Loop reads live prop values from refs so prop changes never tear down WebGL
+    const tiltRef = useRef(tiltIntensity);
+    tiltRef.current = tiltIntensity;
+    const glowParamsRef = useRef({ glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth });
+    glowParamsRef.current = { glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth };
+    // useReducedMotion is SSR-safe (null on server, real value after hydration)
+    const prefersReducedMotion = useReducedMotion();
+    const isAnimating = shouldAnimate && !prefersReducedMotion;
+    useEffect(() => {
+        const outer = outerRef.current;
+        const content = contentRef.current;
+        if (!outer || !content || !isAnimating)
+            return;
+        let disposed = false;
+        // Pointer in client coords — the handler does NO layout reads; the loop
+        // converts to content-local with one getBoundingClientRect per frame.
+        let pointer = null;
+        let cachedRect = null;
+        const st = { mx: -1e4, my: -1e4, dmx: -1e4, dmy: -1e4, rx: 0, ry: 0, raf: 0, running: false, last: 0 };
+        // How far outside the card the pointer still matters (glow lights up on approach)
+        const proximity = glow ? Math.max(glowExtent * 3, 120) : 0;
+        const loop = (now) => {
+            var _a;
+            if (disposed)
+                return;
+            const dt = Math.min(Math.max((now - st.last) / 1000, 0.001), 0.05);
+            st.last = now;
+            const rect = content.getBoundingClientRect();
+            cachedRect = rect;
+            if (pointer) {
+                const nx = pointer.x - rect.left;
+                const ny = pointer.y - rect.top;
+                // First arrival: snap the damped position instead of easing in from the
+                // far-away sentinel (easing from -10000 produces a violent tilt/glow sweep)
+                if (st.mx <= -9e3) {
+                    st.dmx = nx;
+                    st.dmy = ny;
+                }
+                st.mx = nx;
+                st.my = ny;
+            }
+            // dt-normalized damping — same feel at 60Hz and 120Hz
+            const aMouse = 1 - Math.exp(-12 * dt);
+            st.dmx += (st.mx - st.dmx) * aMouse;
+            st.dmy += (st.my - st.dmy) * aMouse;
+            const w = rect.width;
+            const h = rect.height;
+            // Gate on the DAMPED position — the tilt target derives from it, so the
+            // gate and the target must agree or transient positions leak through
+            const inside = !!pointer && st.dmx >= 0 && st.dmx <= w && st.dmy >= 0 && st.dmy <= h;
+            let targetRX = 0;
+            let targetRY = 0;
+            if (tiltRef.current > 0 && inside && w > 0 && h > 0) {
+                targetRY = (st.dmx / w - 0.5) * tiltRef.current;
+                targetRX = -(st.dmy / h - 0.5) * tiltRef.current;
+            }
+            const aTilt = 1 - Math.exp(-10 * dt);
+            st.rx += (targetRX - st.rx) * aTilt;
+            st.ry += (targetRY - st.ry) * aTilt;
+            const settledFlat = Math.abs(st.rx) < 0.01 && Math.abs(st.ry) < 0.01 && !inside;
+            outer.style.transform = settledFlat
+                ? ""
+                : `perspective(1000px) rotateX(${st.rx}deg) rotateY(${st.ry}deg)`;
+            (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.render(st.dmx, st.dmy);
+            // Idle detection: stop once everything converged — a motionless hover
+            // renders nothing new. Any pointermove (or leave) restarts the loop.
+            const mouseSettled = Math.abs(st.mx - st.dmx) < 0.1 && Math.abs(st.my - st.dmy) < 0.1;
+            const tiltSettled = Math.abs(targetRX - st.rx) < 0.005 && Math.abs(targetRY - st.ry) < 0.005;
+            if (mouseSettled && tiltSettled) {
+                st.running = false;
+                return;
+            }
+            st.raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (st.running || disposed)
+                return;
+            st.running = true;
+            st.last = performance.now();
+            st.raf = requestAnimationFrame(loop);
+        };
+        const onPointerMove = (e) => {
+            pointer = { x: e.clientX, y: e.clientY };
+            if (proximity > 0) {
+                // Document-level listener (glow reacts on approach): cheap pre-check
+                // against the cached rect so far-away moves don't wake the loop.
+                if (!cachedRect)
+                    cachedRect = content.getBoundingClientRect();
+                const r = cachedRect;
+                if (e.clientX < r.left - proximity ||
+                    e.clientX > r.right + proximity ||
+                    e.clientY < r.top - proximity ||
+                    e.clientY > r.bottom + proximity)
+                    return;
+            }
+            start();
+        };
+        const onPointerLeave = () => {
+            pointer = null;
+            st.mx = -1e4;
+            st.my = -1e4;
+            start(); // let the tilt ease back to rest, then the loop self-stops
+        };
+        const invalidateRect = () => {
+            cachedRect = null;
+        };
+        // Tilt-only: element-scoped listeners. Glow: document-scoped (the border
+        // lights up as the cursor approaches from outside).
+        const moveTarget = glow ? document : outer;
+        moveTarget.addEventListener("pointermove", onPointerMove, { passive: true });
+        const leaveTarget = glow ? document.documentElement : outer;
+        leaveTarget.addEventListener("pointerleave", onPointerLeave);
+        window.addEventListener("scroll", invalidateRect, { passive: true, capture: true });
+        const ro = new ResizeObserver(() => {
+            var _a;
+            invalidateRect();
+            (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.resize();
+            start(); // re-render the glow at the new size, then settle
+        });
+        ro.observe(content);
+        if (glow) {
+            import('./TiltCard.glow.js')
+                .then(({ createGlowEffect }) => {
+                if (disposed)
+                    return;
+                const effect = createGlowEffect({ host: outer, content, variation, glowExtent, rounded });
+                effect.setParams(glowParamsRef.current);
+                effect.resize();
+                glowRef.current = effect;
+                start();
+            })
+                .catch((err) => {
+                if (process.env.NODE_ENV !== "production") {
+                    console.error('[TiltCard] `glow` requires the optional "three" peer dependency.', err);
+                }
+            });
+        }
+        return () => {
+            var _a;
+            disposed = true;
+            moveTarget.removeEventListener("pointermove", onPointerMove);
+            leaveTarget.removeEventListener("pointerleave", onPointerLeave);
+            window.removeEventListener("scroll", invalidateRect, { capture: true });
+            ro.disconnect();
+            cancelAnimationFrame(st.raf);
+            outer.style.transform = "";
+            (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
+            glowRef.current = null;
+        };
+    }, [isAnimating, glow, variation, glowExtent, rounded]);
+    // Live-update glow uniforms without tearing down the WebGL context
+    useEffect(() => {
+        var _a;
+        (_a = glowRef.current) === null || _a === void 0 ? void 0 : _a.setParams({ glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth });
+    }, [glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth]);
+    return (jsx("div", { ref: outerRef, className: cn("relative overflow-visible", className), style: { ...style, ...(rounded ? { borderRadius: rounded } : {}) }, ...props, children: jsx("div", { ref: contentRef, className: "relative h-full w-full", style: { borderRadius: "inherit", zIndex: 20 }, children: children }) }));
+};
+
+export { TiltCard };

package/dist/components/effects/{SpotlightBorder/SpotlightBorder.shaders.d.ts → TiltCard/TiltCard.shaders.d.ts}

@@ -1,5 +1,5 @@
 /**
- * GLSL Shaders for SpotlightBorder effect
+ * GLSL Shaders for TiltCard glow border
  * Uses Signed Distance Functions (SDFs) with aspect-correct coordinates
  * Supports larger canvas for external glow and suppresses inner glow.
  */

package/dist/components/effects/{SpotlightBorder/SpotlightBorder.shaders.js → TiltCard/TiltCard.shaders.js}

@@ -1,5 +1,5 @@
 /**
- * GLSL Shaders for SpotlightBorder effect
+ * GLSL Shaders for TiltCard glow border
  * Uses Signed Distance Functions (SDFs) with aspect-correct coordinates
  * Supports larger canvas for external glow and suppresses inner glow.
  */

package/dist/components/effects/TiltCard/TiltCard.types.d.ts

@@ -0,0 +1,88 @@
+import React from "react";
+export type TiltCardVariation = "rounded-rect" | "circle" | "circle-ring" | "triangle";
+export declare const variationMap: Record<TiltCardVariation, number>;
+/**
+ * TiltCard — wraps content in a damped 3D mouse tilt (pure CSS transform,
+ * no WebGL cost), with an optional `glow` spotlight border (lazy-loads the
+ * `three` optional peer dependency only when enabled).
+ *
+ * @example Tilt only — cheap, no WebGL
+ * ```tsx
+ * <TiltCard tiltIntensity={6}>
+ *   <Card>…</Card>
+ * </TiltCard>
+ * ```
+ *
+ * @example With the spotlight border glow
+ * ```tsx
+ * <TiltCard glow glowColor="#3b82f6" borderWidth={2} glowExtent={30}>
+ *   <Card className="bg-gray-900">…</Card>
+ * </TiltCard>
+ * ```
+ */
+export interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Content to wrap with the effect */
+    children: React.ReactNode;
+    /**
+     * Max tilt in degrees as the mouse moves across the card. 0 disables the tilt.
+     * @default 6
+     */
+    tiltIntensity?: number;
+    /**
+     * Enable the WebGL spotlight border (illuminates near the cursor with a soft
+     * outer glow). Lazy-loads `three` — without it, TiltCard never touches WebGL.
+     * ⚠️ Each glowing instance owns a WebGL context; browsers cap ~8–16 live
+     * contexts, so avoid enabling it on large collections of cards.
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * Shape variation for the glow border
+     * @default 'rounded-rect'
+     */
+    variation?: TiltCardVariation;
+    /**
+     * Border radius for the container (e.g., "1rem", "var(--card-radius)").
+     * Controls both the container clip and the shader's corner roundness.
+     * @default undefined (inherits from className like rounded-xl)
+     */
+    rounded?: string;
+    /**
+     * Glow border stroke width in pixels
+     * @default 2
+     */
+    borderWidth?: number;
+    /**
+     * Color of the glow border (any CSS color three.js can parse)
+     * @default '#ffffff'
+     */
+    glowColor?: string;
+    /**
+     * Size of the mouse-following spotlight (0-1)
+     * @default 0.4
+     */
+    spotlightSize?: number;
+    /**
+     * Edge softness of the spotlight (higher = softer falloff)
+     * @default 0.5
+     */
+    spotlightEdge?: number;
+    /**
+     * How far the glow can spread outside the container in pixels.
+     * Also prevents clipping of child shadows.
+     * @default 20
+     */
+    glowExtent?: number;
+    /**
+     * Overall intensity of the glow halo (0-1)
+     * @default 0.6
+     */
+    glowIntensity?: number;
+    /**
+     * Whether to animate (respects prefers-reduced-motion)
+     * @default true
+     */
+    shouldAnimate?: boolean;
+    /** Additional className for the container */
+    className?: string;
+}

package/dist/components/effects/TiltCard/index.d.ts

@@ -0,0 +1,2 @@
+export { TiltCard } from "./TiltCard";
+export type { TiltCardProps, TiltCardVariation } from "./TiltCard.types";

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

@@ -14,8 +14,6 @@ export { Aurora } from "./Aurora";
 export type { AuroraProps } from "./Aurora";
 export { MagneticElement } from "./MagneticElement";
 export type { MagneticElementProps } from "./MagneticElement";
-export { MorphingText } from "./MorphingText";
-export type { MorphingTextProps } from "./MorphingText";
 export { GridPattern } from "./GridPattern";
 export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern";
 export { DotPattern } from "./DotPattern";
@@ -24,18 +22,12 @@ export { StripePattern } from "./StripePattern";
 export type { StripePatternProps, StripePatternFadeDirection, } from "./StripePattern";
 export { NoiseOverlay } from "./NoiseOverlay";
 export type { NoiseOverlayProps, NoiseBlendMode } from "./NoiseOverlay";
-export { Spotlight } from "./Spotlight";
-export type { SpotlightProps } from "./Spotlight";
-export { SpotlightBorder } from "./SpotlightBorder";
-export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder";
-export { ParallaxSection } from "./ParallaxSection";
-export type { ParallaxSectionProps } from "./ParallaxSection";
+export { TiltCard } from "./TiltCard";
+export type { TiltCardProps, TiltCardVariation } from "./TiltCard";
 export { ScrollReveal } from "./ScrollReveal";
 export type { ScrollRevealProps, ScrollRevealPreset } from "./ScrollReveal";
-export { StickyScroll } from "./StickyScroll";
-export type { StickyScrollProps, StickyScrollSection, } from "./StickyScroll";
-export { PageTransition } from "./PageTransition";
-export type { PageTransitionProps, PageTransitionDirection, } from "./PageTransition";
+export { Preloader } from "./Preloader";
+export type { PreloaderProps, PreloaderDirection, PreloaderType, } from "./Preloader";
 export { InteractiveCharacters } from "./InteractiveCharacters";
 export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from "./InteractiveCharacters";
 export { InsetCircleButton, InsetPill } from "./Neumorphic";

package/dist/components/effects/index.js

@@ -6,17 +6,13 @@ export { Animated } from './Animated/Animated.js';
 export { ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
 export { Aurora } from './Aurora/Aurora.js';
 export { MagneticElement } from './MagneticElement/MagneticElement.js';
-export { MorphingText } from './MorphingText/MorphingText.js';
 export { GridPattern } from './GridPattern/GridPattern.js';
 export { DotPattern } from './DotPattern/DotPattern.js';
 export { StripePattern } from './StripePattern/StripePattern.js';
 export { NoiseOverlay } from './NoiseOverlay/NoiseOverlay.js';
-export { Spotlight } from './Spotlight/Spotlight.js';
-export { SpotlightBorder } from './SpotlightBorder/SpotlightBorder.js';
-export { ParallaxSection } from './ParallaxSection/ParallaxSection.js';
+export { TiltCard } from './TiltCard/TiltCard.js';
 export { ScrollReveal } from './ScrollReveal/ScrollReveal.js';
-export { StickyScroll } from './StickyScroll/StickyScroll.js';
-export { PageTransition } from './PageTransition/PageTransition.js';
+export { Preloader } from './Preloader/Preloader.js';
 export { InteractiveCharacters } from './InteractiveCharacters/InteractiveCharacters.js';
 export { InsetCircleButton } from './Neumorphic/InsetCircleButton.js';
 export { InsetPill } from './Neumorphic/InsetPill.js';

package/dist/components/forms/Checkbox/Checkbox.js

@@ -36,6 +36,12 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
     else {
         isChecked = internalChecked;
     }
+    // A checked checkbox has been acted upon, so it should no longer read as an
+    // error: once checked it clears its own invalid styling (box border + label).
+    // The group-level error message stays under the consumer's control — this only
+    // resolves the per-item state so unchecked siblings keep signalling the error.
+    const showInvalid = isInvalid && !(isChecked && !indeterminate);
+    const visualState = isDisabled ? "disabled" : showInvalid ? "invalid" : "default";
     const inputRef = useRef(null);
     // Set indeterminate property on the input element
     useEffect(() => {
@@ -69,7 +75,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
                                 ref(node);
                             else if (ref)
                                 ref.current = node;
-                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": isInvalid || undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-white", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
+                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": showInvalid || undefined, "data-state": visualState, className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-white", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[visualState], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

package/dist/components/forms/Combobox/Combobox.js

@@ -100,7 +100,7 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
                             }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(PlusIcon, { className: "size-4 shrink-0", strokeWidth: 2 }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
                     }), filteredOptions.length > 100 && (jsxs("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] text-center border-t border-[var(--color-border)]", children: ["Showing 100 of ", filteredOptions.length, " results \u2014 refine your search"] }))] })) })) }));
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
     }
     return optionsContent;
 };

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

@@ -28,14 +28,12 @@ const comboboxTheme = {
     focusStates: formsBaseTheme.focusStates,
     // Icon positioning styles
     iconStartStyle: formsBaseTheme.iconStyles.left,
-    iconEndStyle: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-500)]",
+    iconEndStyle: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-[var(--color-text-muted)]",
     // Icon padding configuration
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Clear button styles
     clearButtonStyle: "absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer " +
-        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
-        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10",
     clearIconStyle: "size-4",
     // Dropdown styles - matches Select component for consistency
     dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",

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

@@ -10,8 +10,8 @@ import { formsBaseTheme } from '../forms.theme.js';
 const datePickerTheme = {
     containerStyle: formsBaseTheme.wrapperStyle,
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
-    // Trigger button style - bg-white for light mode; dark mode uses neutral-900
-    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Trigger button style - surface flips automatically between light/dark
+    triggerButtonStyle: "w-full cursor-pointer bg-[var(--color-surface)]",
     // Placeholder text style - matches Input placeholder styling
     placeholderTextStyle: "text-[var(--color-text-placeholder)]",
     // Selected value text style
@@ -26,23 +26,16 @@ const datePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
-    // Dropdown body - with dark mode support
-    bodyStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed " +
-        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    bodyWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
-        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    // Presets sidebar - with dark mode support
-    presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
-    // Preset button - with dark mode support
+    // Dropdown body - floating overlay surface flips automatically
+    bodyStyle: "min-w-fit max-w-none bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed",
+    bodyWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    // Presets sidebar - recessed sunken panel flips automatically
+    presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-surface-sunken)] sm:min-w-[180px]",
+    // Preset button - surface hover/active fills flip automatically
     presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
-        "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +
-        // Dark mode
-        "dark:text-[var(--color-neutral-400)] dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] " +
-        "dark:data-[active=true]:bg-[var(--color-neutral-700)] dark:data-[active=true]:text-[var(--color-neutral-100)] " +
-        "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
+        "text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sunken)] " +
+        "data-[active=true]:bg-[var(--color-surface)] data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium",
     helperTextStyle: formsBaseTheme.helperText,
     helperTextStates: {
         default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",

package/dist/components/forms/DatePicker/DatePickerTrigger.js

@@ -26,7 +26,7 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
     // Apply focused styles when open - same pattern as SelectButton
     const activeFocusState = isOpen
         ? focusStateStyle ||
-            "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
     return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
 };

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

@@ -6,7 +6,7 @@ import { formsBaseTheme } from '../forms.theme.js';
 const dateRangePickerTheme = {
     containerStyle: formsBaseTheme.wrapperStyle,
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
-    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    triggerButtonStyle: "w-full cursor-pointer bg-[var(--color-surface)]",
     placeholderTextStyle: "text-[var(--color-text-placeholder)]",
     valueTextStyle: "text-[var(--color-text-primary)]",
     triggerSizes: {
@@ -19,26 +19,19 @@ const dateRangePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
-    bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
-        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
-        "dark:bg-[var(--color-neutral-800)] ",
+    bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-surface-sunken)] sm:min-w-[180px]",
     presetButtonStyle: "w-full text-left px-3 py-2 text-sm font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
         "flex items-center justify-between gap-2 " +
-        "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +
-        "dark:hover:bg-[var(--color-neutral-700)] " +
-        "dark:data-[active=true]:bg-[var(--color-neutral-700)] dark:data-[active=true]:text-[var(--color-neutral-100)] " +
-        "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
+        "text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sunken)] " +
+        "data-[active=true]:bg-[var(--color-surface)] data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium",
     presetCheckmarkStyle: "size-4 text-[var(--color-primary)] shrink-0",
     mobilePresetsContainerStyle: "sm:hidden px-3 pt-3 pb-1",
     mobilePresetButtonStyle: "whitespace-nowrap px-3 py-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
         "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
         "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
         "data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary)] " +
-        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-300)] " +
-        "dark:hover:bg-[var(--color-neutral-700)] " +
         "dark:data-[active=true]:bg-[var(--color-primary-950)] dark:data-[active=true]:text-[var(--color-primary-300)]",
     mobileRangeDisplayStyle: "sm:hidden text-xs text-center py-2 text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
     helperTextStyle: formsBaseTheme.helperText,

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.js

@@ -24,7 +24,7 @@ const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size
     const triggerButtonStyle = theme.triggerButtonStyle || "";
     const activeFocusState = isOpen
         ? focusStateStyle ||
-            "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
     return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
 };

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

@@ -0,0 +1,29 @@
+/** Spring used for thumbnail enter and for the layout reflow when items are removed. */
+export declare const PREVIEW_LAYOUT_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Enter / exit variants for a preview thumbnail.
+ * Exit shrinks + fades so the surrounding items can flow into the gap (driven
+ * by `layout` on each item). Pair with `AnimatePresence`.
+ */
+export declare const PREVIEW_ITEM: {
+    initial: {
+        opacity: number;
+        scale: number;
+    };
+    animate: {
+        opacity: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+};

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

@@ -0,0 +1,19 @@
+/** Spring used for thumbnail enter and for the layout reflow when items are removed. */
+const PREVIEW_LAYOUT_SPRING = {
+    type: "spring",
+    stiffness: 500,
+    damping: 38,
+    mass: 0.8,
+};
+/**
+ * Enter / exit variants for a preview thumbnail.
+ * Exit shrinks + fades so the surrounding items can flow into the gap (driven
+ * by `layout` on each item). Pair with `AnimatePresence`.
+ */
+const PREVIEW_ITEM = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8, transition: { duration: 0.15 } },
+};
+
+export { PREVIEW_ITEM, PREVIEW_LAYOUT_SPRING };