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

package/dist/components/effects/ProgressiveBlur/ProgressiveBlur.js

@@ -24,27 +24,27 @@ const GRADIENT_DIRECTIONS = {
  */
 const BlurInstance = forwardRef(({ position, blurLevels, size, theme, className, style, ...rest }, ref) => {
     const isVertical = position === "top" || position === "bottom";
-    const direction = GRADIENT_DIRECTIONS[position];
-    const n = blurLevels.length;
-    const containerStyle = {
-        ...(isVertical ? { height: size } : { width: size }),
-        ...style,
-    };
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, theme.positions[position], className), style: containerStyle, ...rest, children: blurLevels.map((blur, i) => {
+    const layerStyles = useMemo(() => {
+        const direction = GRADIENT_DIRECTIONS[position];
+        const step = 100 / blurLevels.length;
+        return blurLevels.map((blur, i) => {
             // MagicUI mask formula: each layer has a 1-step fade-in, 1-step solid,
             // and 1-step fade-out. Adjacent layers overlap by 2 steps, creating
             // smooth transitions. Values beyond 100% are clamped by the browser.
-            const step = 100 / n;
             const gradient = `linear-gradient(${direction}, transparent ${i * step}%, black ${(i + 1) * step}%, black ${(i + 2) * step}%, transparent ${(i + 3) * step}%)`;
-            const layerStyle = {
+            return {
                 maskImage: gradient,
                 WebkitMaskImage: gradient,
                 backdropFilter: `blur(${blur}px)`,
                 WebkitBackdropFilter: `blur(${blur}px)`,
-                zIndex: i + 1,
             };
-            return (jsx("div", { className: theme.layerStyle, style: layerStyle }, i));
-        }) }));
+        });
+    }, [position, blurLevels]);
+    const containerStyle = {
+        ...(isVertical ? { height: size } : { width: size }),
+        ...style,
+    };
+    return (jsx("div", { ref: ref, "aria-hidden": "true", className: cn(theme.baseStyle, theme.positions[position], className), style: containerStyle, ...rest, children: layerStyles.map((layerStyle, i) => (jsx("div", { className: theme.layerStyle, style: layerStyle }, i))) }));
 });
 BlurInstance.displayName = "BlurInstance";
 const ProgressiveBlur = forwardRef(({ position = "bottom", blurLevels: blurLevelsProp, layers = DEFAULT_LAYERS, blurIntensity = DEFAULT_MAX_BLUR, size = DEFAULT_SIZE, className, theme: themeOverrides, ...rest }, ref) => {
@@ -59,10 +59,21 @@ const ProgressiveBlur = forwardRef(({ position = "bottom", blurLevels: blurLevel
             layerStyle: (_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.layerStyle) !== null && _b !== void 0 ? _b : progressiveBlurTheme.layerStyle,
         });
     }, [themeOverrides]);
-    const blurLevels = useMemo(() => blurLevelsProp !== null && blurLevelsProp !== void 0 ? blurLevelsProp : generateBlurLevels(layers, blurIntensity), [blurLevelsProp, layers, blurIntensity]);
+    const blurLevels = useMemo(() => {
+        if (blurLevelsProp)
+            return blurLevelsProp;
+        const count = Math.max(1, Math.floor(layers));
+        if (process.env.NODE_ENV !== "production" && count !== layers) {
+            console.warn(`[ProgressiveBlur]: \`layers\` must be a positive integer; received ${layers}, using ${count}.`);
+        }
+        return generateBlurLevels(count, blurIntensity);
+    }, [blurLevelsProp, layers, blurIntensity]);
     const positions = Array.isArray(position)
-        ? position
+        ? Array.from(new Set(position))
         : [position];
+    if (process.env.NODE_ENV !== "production" && ref && positions.length > 1) {
+        console.warn("[ProgressiveBlur]: `ref` is ignored when `position` is an array — render one ProgressiveBlur per position if you need element refs.");
+    }
     // Single position — render directly, forward ref and remaining props
     if (positions.length === 1) {
         return (jsx(BlurInstance, { ref: ref, position: positions[0], blurLevels: blurLevels, size: size, theme: theme, className: className, ...rest }));

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

@@ -4,6 +4,8 @@ export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElemen
     /**
      * Position(s) where the blur effect should be applied.
      * Can be a single position or array of positions.
+     * With an array, one element renders per position, so `ref` is not
+     * forwarded and `id`/event props apply to every instance.
      * @default "bottom"
      */
     position?: ProgressiveBlurPosition | ProgressiveBlurPosition[];

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

@@ -0,0 +1,12 @@
+import React from "react";
+import type { TiltCardProps } from "./TiltCard.types";
+/**
+ * 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.
+ */
+export declare const TiltCard: React.FC<TiltCardProps>;

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

@@ -0,0 +1,28 @@
+import { type TiltCardVariation } from "./TiltCard.types";
+/**
+ * WebGL spotlight-border renderer for TiltCard. Kept in its own module so the
+ * `three` optional peer dependency is only loaded (dynamic import) when a
+ * TiltCard actually enables `glow` — tilt-only cards never touch WebGL.
+ */
+export interface GlowParams {
+    glowColor: string;
+    spotlightSize: number;
+    spotlightEdge: number;
+    glowIntensity: number;
+    borderWidth: number;
+}
+export interface GlowEffect {
+    /** Render one frame with the damped mouse position (content-local px). */
+    render(mouseX: number, mouseY: number): void;
+    /** Re-measure the content box and update sizes/uniforms. */
+    resize(): void;
+    setParams(params: GlowParams): void;
+    dispose(): void;
+}
+export declare function createGlowEffect(opts: {
+    host: HTMLElement;
+    content: HTMLElement;
+    variation: TiltCardVariation;
+    glowExtent: number;
+    rounded?: string;
+}): GlowEffect;

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

@@ -0,0 +1,114 @@
+import * as THREE from 'three';
+import { fragmentShader, vertexShader } from './TiltCard.shaders.js';
+import { variationMap } from './TiltCard.types.js';
+
+function createGlowEffect(opts) {
+    var _a;
+    const { host, content, variation, glowExtent, rounded } = opts;
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera();
+    camera.position.z = 1;
+    const renderer = new THREE.WebGLRenderer({ alpha: true });
+    renderer.setClearColor(0x000000, 0);
+    const canvas = renderer.domElement;
+    canvas.style.position = "absolute";
+    canvas.style.pointerEvents = "none";
+    canvas.style.zIndex = "10";
+    host.appendChild(canvas);
+    const geo = new THREE.PlaneGeometry(1, 1);
+    const material = new THREE.ShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms: {
+            u_mouse: { value: new THREE.Vector2(-1e4, -1e4) },
+            u_resolution: { value: new THREE.Vector2() },
+            u_contentResolution: { value: new THREE.Vector2() },
+            u_offset: { value: new THREE.Vector2() },
+            u_pixelRatio: { value: 1 },
+            u_color: { value: new THREE.Color("#ffffff") },
+            u_shapeSize: { value: 1.0 },
+            u_roundness: { value: 0.0 },
+            u_borderSize: { value: 0.0 },
+            u_spotlightSize: { value: 0.4 },
+            u_spotlightEdge: { value: 0.5 },
+            u_glowIntensity: { value: 0.6 },
+        },
+        defines: { VAR: (_a = variationMap[variation]) !== null && _a !== void 0 ? _a : 0 },
+        transparent: true,
+    });
+    const quad = new THREE.Mesh(geo, material);
+    scene.add(quad);
+    let borderWidthPx = 2;
+    let contextLost = false;
+    const onContextLost = (e) => {
+        e.preventDefault();
+        contextLost = true;
+    };
+    const onContextRestored = () => {
+        contextLost = false;
+        resize();
+    };
+    canvas.addEventListener("webglcontextlost", onContextLost);
+    canvas.addEventListener("webglcontextrestored", onContextRestored);
+    const resize = () => {
+        var _a;
+        const w = content.clientWidth;
+        const h = content.clientHeight;
+        if (w === 0 || h === 0)
+            return;
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        const canvasW = w + glowExtent * 2;
+        const canvasH = h + glowExtent * 2;
+        renderer.setSize(canvasW, canvasH);
+        renderer.setPixelRatio(dpr);
+        canvas.style.top = `-${glowExtent}px`;
+        canvas.style.left = `-${glowExtent}px`;
+        canvas.style.width = `${canvasW}px`;
+        canvas.style.height = `${canvasH}px`;
+        camera.left = -canvasW / 2;
+        camera.right = canvasW / 2;
+        camera.top = canvasH / 2;
+        camera.bottom = -canvasH / 2;
+        camera.updateProjectionMatrix();
+        quad.scale.set(canvasW, canvasH, 1);
+        material.uniforms.u_resolution.value.set(canvasW, canvasH).multiplyScalar(dpr);
+        material.uniforms.u_contentResolution.value.set(w, h).multiplyScalar(dpr);
+        material.uniforms.u_offset.value.set(glowExtent, glowExtent).multiplyScalar(dpr);
+        material.uniforms.u_pixelRatio.value = dpr;
+        const shortestDim = Math.min(w, h);
+        const radiusSource = rounded ? host : ((_a = content.firstElementChild) !== null && _a !== void 0 ? _a : host);
+        const radiusPx = parseFloat(getComputedStyle(radiusSource).borderRadius) || 0;
+        material.uniforms.u_roundness.value = Math.min((radiusPx / shortestDim) * 2, 1);
+        material.uniforms.u_borderSize.value = borderWidthPx / shortestDim;
+    };
+    return {
+        render(mouseX, mouseY) {
+            if (contextLost)
+                return;
+            material.uniforms.u_mouse.value.set(mouseX, mouseY);
+            renderer.render(scene, camera);
+        },
+        resize,
+        setParams({ glowColor, spotlightSize, spotlightEdge, glowIntensity, borderWidth }) {
+            material.uniforms.u_color.value.set(glowColor);
+            material.uniforms.u_spotlightSize.value = spotlightSize;
+            material.uniforms.u_spotlightEdge.value = spotlightEdge;
+            material.uniforms.u_glowIntensity.value = glowIntensity;
+            borderWidthPx = borderWidth;
+            const shortestDim = Math.min(content.clientWidth, content.clientHeight);
+            if (shortestDim > 0)
+                material.uniforms.u_borderSize.value = borderWidthPx / shortestDim;
+        },
+        dispose() {
+            canvas.removeEventListener("webglcontextlost", onContextLost);
+            canvas.removeEventListener("webglcontextrestored", onContextRestored);
+            if (host.contains(canvas))
+                host.removeChild(canvas);
+            renderer.dispose();
+            geo.dispose();
+            material.dispose();
+        },
+    };
+}
+
+export { createGlowEffect };

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/DatePicker/DatePicker.theme.js

@@ -27,8 +27,8 @@ const datePickerTheme = {
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
     // Dropdown body - floating overlay surface flips automatically
-    bodyStyle: "min-w-fit max-w-none bg-[var(--color-surface-overlay)] 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)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    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

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

@@ -19,7 +19,7 @@ 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-[var(--color-surface-overlay)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    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 " +