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

package/dist/components/effects/Aurora/Aurora.js

@@ -1,8 +1,13 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
 const DEFAULT_COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4'];
+const clamp = (value, min, max) => {
+    if (Number.isNaN(value))
+        return min;
+    return Math.min(Math.max(value, min), max);
+};
 /**
  * Each blob follows a unique organic path using keyframed x/y translations
  * and scale changes. The durations are intentionally varied so the blobs
@@ -37,16 +42,32 @@ const blobAnimations = [
         scale: [1, 0.95, 1.1, 0.9, 1],
         baseDuration: 31,
     },
+    {
+        // Blob 4 -- slow vertical ribbon sweep
+        x: ['0%', '12%', '-18%', '20%', '0%'],
+        y: ['0%', '-35%', '-5%', '24%', '0%'],
+        scale: [1, 1.25, 0.95, 1.1, 1],
+        baseDuration: 29,
+    },
+    {
+        // Blob 5 -- small counter drift to keep dense palettes from syncing
+        x: ['0%', '-18%', '10%', '28%', '0%'],
+        y: ['0%', '12%', '-22%', '-8%', '0%'],
+        scale: [1, 0.88, 1.18, 0.98, 1],
+        baseDuration: 34,
+    },
 ];
 /**
  * Positions each blob at a different quadrant of the container so they
  * begin spread out. Additional blobs beyond 4 cycle through positions.
  */
 const blobPositions = [
-    { top: '10%', left: '15%' },
-    { top: '5%', right: '10%' },
-    { bottom: '10%', left: '20%' },
-    { bottom: '5%', right: '15%' },
+    { top: '8%', left: '12%' },
+    { top: '0%', right: '8%' },
+    { bottom: '8%', left: '18%' },
+    { bottom: '0%', right: '12%' },
+    { top: '34%', left: '36%' },
+    { bottom: '28%', right: '34%' },
 ];
 /**
  * Aurora creates an animated multi-color gradient background effect.
@@ -71,49 +92,67 @@ const blobPositions = [
  */
 const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3, size = 1, className, style, ...props }) => {
     const shouldReduceMotion = useReducedMotion();
+    const safeColors = colors.length > 0 ? colors : DEFAULT_COLORS;
+    const safeBlur = Math.max(0, blur);
+    const safeSpeed = Math.max(0.1, speed);
+    const safeOpacity = clamp(opacity, 0, 1);
+    const safeSize = Math.max(0.1, size);
     // Compute base blob dimension from the size multiplier.
     // Using percentage-based sizing so it scales with the container.
-    const blobDimension = `${40 * size}%`;
-    return (jsx("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
-            opacity,
-            filter: `blur(${blur}px)`,
+    const blobDimension = `${40 * safeSize}%`;
+    const bleed = safeBlur * 1.5;
+    const wash = safeColors
+        .slice(0, 4)
+        .map((color, index) => {
+        const stops = [
+            '20% 30%',
+            '80% 20%',
+            '30% 80%',
+            '75% 75%',
+        ];
+        return `radial-gradient(circle at ${stops[index]}, ${color}55, transparent 42%)`;
+    })
+        .join(', ');
+    return (jsxs("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
             ...style,
-        }, "aria-hidden": "true", ...props, children: colors.map((color, index) => {
-            const anim = blobAnimations[index % blobAnimations.length];
-            const position = blobPositions[index % blobPositions.length];
-            const duration = anim.baseDuration / speed;
-            // When reduced motion is preferred, render static blobs with no animation.
-            if (shouldReduceMotion) {
-                return (jsx("div", { style: {
-                        position: 'absolute',
-                        ...position,
-                        width: blobDimension,
-                        height: blobDimension,
-                        borderRadius: '50%',
-                        background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
-                        mixBlendMode: 'screen',
-                    } }, index));
-            }
-            return (jsx(motion.div, { animate: {
-                    x: anim.x,
-                    y: anim.y,
-                    scale: anim.scale,
-                }, transition: {
-                    duration,
-                    repeat: Infinity,
-                    repeatType: 'loop',
-                    ease: 'easeInOut',
-                }, style: {
+        }, "aria-hidden": "true", ...props, children: [jsx("div", { className: "absolute inset-0", style: {
+                    background: wash,
+                    opacity: safeOpacity * 0.65,
+                    mixBlendMode: 'screen',
+                } }), safeColors.map((color, index) => {
+                const anim = blobAnimations[index % blobAnimations.length];
+                const position = blobPositions[index % blobPositions.length];
+                const duration = anim.baseDuration / safeSpeed;
+                const blobStyle = {
                     position: 'absolute',
                     ...position,
                     width: blobDimension,
                     height: blobDimension,
-                    borderRadius: '50%',
-                    background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                    borderRadius: '9999px',
+                    background: `radial-gradient(circle at center, ${color}, transparent 68%)`,
+                    filter: `blur(${safeBlur}px)`,
                     mixBlendMode: 'screen',
-                    willChange: 'transform',
-                } }, index));
-        }) }));
+                    opacity: safeOpacity,
+                    margin: -bleed,
+                };
+                // When reduced motion is preferred, render static blobs with no animation.
+                if (shouldReduceMotion) {
+                    return (jsx("div", { style: blobStyle }, index));
+                }
+                return (jsx(motion.div, { animate: {
+                        x: anim.x,
+                        y: anim.y,
+                        scale: anim.scale,
+                    }, transition: {
+                        duration,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: 'easeInOut',
+                    }, style: {
+                        ...blobStyle,
+                        willChange: 'transform',
+                    } }, index));
+            })] }));
 };
 
 export { Aurora };

package/dist/components/effects/InteractiveCharacters/InteractiveCharacters.js

@@ -15,7 +15,7 @@ const sizeMap = {
     md: 'w-[320px]',
     lg: 'w-[400px]',
 };
-/** Click reaction states per character */
+/** Click reaction states per abstract character */
 const CLICK_REACTIONS = {
     blob: 'surprised',
     tall: 'love',
@@ -47,7 +47,7 @@ const InteractiveCharacters = ({ state = 'idle', trackMouse = true, size = 'md',
     const smallState = clickedChar === 'small' ? CLICK_REACTIONS.small : state;
     const isTrackingEnabled = trackMouse && state !== 'password' && !shouldReduceMotion;
     const isIdleAnimated = !shouldReduceMotion;
-    // Mouse tracking — different spring configs per character
+    // Mouse tracking: each abstract form gets a slightly different response.
     const blobEye = useMouseTracking({
         containerRef: svgRef,
         enabled: isTrackingEnabled,
@@ -63,7 +63,7 @@ const InteractiveCharacters = ({ state = 'idle', trackMouse = true, size = 'md',
         enabled: isTrackingEnabled,
         ...springConfigs.small,
     });
-    // Idle sway/breathing/head — each character at different rates & phase offsets
+    // Idle sway/breathing/head movement runs at different rates and phase offsets.
     const blobIdle = useIdleAnimation({
         enabled: isIdleAnimated,
         swayAmount: 1.5,

package/dist/components/effects/InteractiveCharacters/characters/BlobCharacter.js

@@ -1,11 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
 import { useTransform, motion } from 'motion/react';
 import { eyelidVariants, clickTransition, bodyTransition, blobBodyVariants, blobMouthPaths } from '../InteractiveCharacters.animations.js';
 
-const LEFT_EYE = { cx: 32, cy: -50 };
-const RIGHT_EYE = { cx: 68, cy: -50 };
+const LEFT_EYE = { cx: 32, cy: -58 };
+const RIGHT_EYE = { cx: 62, cy: -58 };
 const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
 const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const id = useId().replace(/:/g, '');
+    const leftClipId = `${id}-aura-eye-l`;
+    const rightClipId = `${id}-aura-eye-r`;
+    const bodyGradientId = `${id}-aura-body`;
     const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
     const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
     const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
@@ -24,13 +29,17 @@ const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
             x: idle.sway,
             y: idle.bob,
             scale: idle.breath,
-        }, onClick: onClick, children: [jsx("path", { d: "M 0 0 Q 0 -95 65 -95 Q 100 -95 100 -50 Q 100 0 100 0 Z", fill: "#F97316" }), jsxs(motion.g, { style: {
+        }, onClick: onClick, children: [jsx("defs", { children: jsxs("linearGradient", { id: bodyGradientId, x1: "15", y1: "-105", x2: "92", y2: "-5", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#16B8A6" }), jsx("stop", { offset: "1", stopColor: "#0F766E" })] }) }), jsx(motion.path, { d: "M 19 -99 C 40 -113 78 -101 92 -75 C 108 -45 91 -10 58 -1 C 26 8 -2 -13 -5 -47 C -8 -72 3 -89 19 -99 Z", fill: `url(#${bodyGradientId})`, animate: {
+                    d: state === 'surprised'
+                        ? 'M 19 -105 C 42 -121 82 -106 97 -78 C 115 -43 94 -6 57 1 C 21 8 -9 -17 -10 -52 C -11 -79 2 -96 19 -105 Z'
+                        : 'M 19 -99 C 40 -113 78 -101 92 -75 C 108 -45 91 -10 58 -1 C 26 8 -2 -13 -5 -47 C -8 -72 3 -89 19 -99 Z',
+                }, transition: transition }), jsx("path", { d: "M 72 -91 C 91 -78 98 -52 88 -30", fill: "none", stroke: "#7DD3C7", strokeWidth: 5, strokeLinecap: "round", opacity: 0.38 }), jsx("ellipse", { cx: 11, cy: -31, rx: 8, ry: 12, fill: "#5EEAD4", opacity: 0.34, transform: "rotate(-24 11 -31)" }), jsxs(motion.g, { style: {
                     originX: '50px',
                     originY: '-50px',
                     rotate: combinedHeadRotate,
                     x: combinedHeadX,
                     y: combinedHeadY,
-                }, children: [jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-l", children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 4, cy: LEFT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 3, cy: LEFT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 14, y: LEFT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-r", children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 4, cy: RIGHT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 3, cy: RIGHT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 14, y: RIGHT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: 18, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx("ellipse", { cx: 82, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx(motion.path, { d: blobMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { d: blobMouthPaths[state] }, transition: transition, transform: "translate(50, -24)" })] })] }));
+                }, children: [jsxs("g", { children: [jsx("clipPath", { id: leftClipId, children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 12, ry: 14, fill: "#F8FAFC" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 7, fill: "#122A33", clipPath: `url(#${leftClipId})` }), jsx("circle", { cx: LEFT_EYE.cx + 4, cy: LEFT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 3, cy: LEFT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 12, y: LEFT_EYE.cy - 14, width: 24, height: 28, fill: "#16B8A6", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: rightClipId, children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 12, ry: 14, fill: "#F8FAFC" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 7, fill: "#122A33", clipPath: `url(#${rightClipId})` }), jsx("circle", { cx: RIGHT_EYE.cx + 4, cy: RIGHT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 3, cy: RIGHT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 12, y: RIGHT_EYE.cy - 14, width: 24, height: 28, fill: "#16B8A6", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: 20, cy: -37, rx: 6, ry: 3.5, fill: "#99F6E4", opacity: state === 'surprised' ? 0.72 : 0.45 }), jsx("ellipse", { cx: 76, cy: -36, rx: 6, ry: 3.5, fill: "#99F6E4", opacity: state === 'surprised' ? 0.72 : 0.45 }), jsx(motion.path, { d: blobMouthPaths[state], fill: "none", stroke: "#122A33", strokeWidth: 2.4, strokeLinecap: "round", animate: { d: blobMouthPaths[state] }, transition: transition, transform: "translate(47, -30)" })] })] }));
 };
 
 export { BlobCharacter };

package/dist/components/effects/InteractiveCharacters/characters/SmallCharacter.js

@@ -1,11 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
 import { useTransform, motion } from 'motion/react';
 import { eyelidVariants, clickTransition, bodyTransition, smallBodyVariants, smallMouthPaths } from '../InteractiveCharacters.animations.js';
 
-const LEFT_EYE = { cx: -14, cy: -32 };
-const RIGHT_EYE = { cx: 14, cy: -32 };
+const LEFT_EYE = { cx: -13, cy: -34 };
+const RIGHT_EYE = { cx: 12, cy: -34 };
 const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
 const SmallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const id = useId().replace(/:/g, '');
+    const leftClipId = `${id}-glyph-eye-l`;
+    const rightClipId = `${id}-glyph-eye-r`;
+    const bodyGradientId = `${id}-glyph-body`;
     const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
     const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
     const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
@@ -24,13 +29,17 @@ const SmallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
             x: idle.sway,
             y: idle.bob,
             scale: idle.breath,
-        }, onClick: onClick, children: [jsx("path", { d: "M -45 0 Q -45 -60 0 -60 Q 45 -60 45 0 Z", fill: "#FACC15" }), jsxs(motion.g, { style: {
+        }, onClick: onClick, children: [jsx("defs", { children: jsxs("linearGradient", { id: bodyGradientId, x1: "-48", y1: "-73", x2: "38", y2: "0", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#FDA4AF" }), jsx("stop", { offset: "1", stopColor: "#FB7185" })] }) }), jsx(motion.path, { d: "M -38 -28 C -43 -57 -18 -78 13 -67 C 39 -58 50 -27 31 -8 C 13 10 -29 3 -38 -28 Z", fill: `url(#${bodyGradientId})`, animate: {
+                    d: state === 'excited'
+                        ? 'M -40 -31 C -47 -63 -17 -85 17 -72 C 45 -61 56 -27 33 -5 C 12 15 -31 5 -40 -31 Z'
+                        : 'M -38 -28 C -43 -57 -18 -78 13 -67 C 39 -58 50 -27 31 -8 C 13 10 -29 3 -38 -28 Z',
+                }, transition: transition }), jsx("path", { d: "M 20 -59 C 38 -47 42 -26 31 -13", fill: "none", stroke: "#FFE4E6", strokeWidth: 4, strokeLinecap: "round", opacity: 0.5 }), jsx("circle", { cx: -44, cy: -61, r: 7, fill: "#38BDF8", opacity: state === 'excited' ? 0.95 : 0.65 }), jsxs(motion.g, { style: {
                     originX: '0px',
                     originY: '-30px',
                     rotate: combinedHeadRotate,
                     x: combinedHeadX,
                     y: combinedHeadY,
-                }, children: [jsxs("g", { children: [jsx("clipPath", { id: "small-eye-l", children: jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10 }) }), jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 6, fill: "#1E293B", clipPath: "url(#small-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 3, cy: LEFT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 2, cy: LEFT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 10, y: LEFT_EYE.cy - 10, width: 20, height: 20, fill: "#FACC15", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "small-eye-r", children: jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10 }) }), jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 6, fill: "#1E293B", clipPath: "url(#small-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 3, cy: RIGHT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 2, cy: RIGHT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 10, y: RIGHT_EYE.cy - 10, width: 20, height: 20, fill: "#FACC15", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -22, cy: -18, rx: 6, ry: 4, fill: "#FDE68A", opacity: state === 'excited' ? 0.85 : 0.6 }), jsx("ellipse", { cx: 22, cy: -18, rx: 6, ry: 4, fill: "#FDE68A", opacity: state === 'excited' ? 0.85 : 0.6 }), jsx(motion.path, { d: smallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: smallMouthPaths[state] }, transition: transition, transform: "translate(0, -14)" })] })] }));
+                }, children: [jsxs("g", { children: [jsx("clipPath", { id: leftClipId, children: jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 10 }) }), jsx("circle", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, r: 8.5, fill: "#FFF7ED" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 5.5, fill: "#253040", clipPath: `url(#${leftClipId})` }), jsx("circle", { cx: LEFT_EYE.cx + 3, cy: LEFT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 2, cy: LEFT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 8.5, y: LEFT_EYE.cy - 8.5, width: 17, height: 17, fill: "#FB7B8C", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: rightClipId, children: jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 10 }) }), jsx("circle", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, r: 8.5, fill: "#FFF7ED" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 5.5, fill: "#253040", clipPath: `url(#${rightClipId})` }), jsx("circle", { cx: RIGHT_EYE.cx + 3, cy: RIGHT_EYE.cy - 4, r: 2.2, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 2, cy: RIGHT_EYE.cy + 3, r: 1.1, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 8.5, y: RIGHT_EYE.cy - 8.5, width: 17, height: 17, fill: "#FB7B8C", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -25, cy: -20, rx: 5, ry: 3, fill: "#FFE4E6", opacity: state === 'excited' ? 0.9 : 0.55 }), jsx("ellipse", { cx: 23, cy: -20, rx: 5, ry: 3, fill: "#FFE4E6", opacity: state === 'excited' ? 0.9 : 0.55 }), jsx(motion.path, { d: smallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: smallMouthPaths[state] }, transition: transition, transform: "translate(0, -17)" })] })] }));
 };
 
 export { SmallCharacter };

package/dist/components/effects/InteractiveCharacters/characters/TallCharacter.js

@@ -1,11 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
 import { useTransform, motion } from 'motion/react';
 import { eyelidVariants, clickTransition, bodyTransition, tallBodyVariants, eyebrowVariants, tallMouthPaths } from '../InteractiveCharacters.animations.js';
 
-const LEFT_EYE = { cx: -12, cy: -82 };
-const RIGHT_EYE = { cx: 12, cy: -82 };
+const LEFT_EYE = { cx: -12, cy: -73 };
+const RIGHT_EYE = { cx: 12, cy: -73 };
 const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
 const TallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const id = useId().replace(/:/g, '');
+    const leftClipId = `${id}-stack-eye-l`;
+    const rightClipId = `${id}-stack-eye-r`;
+    const topGradientId = `${id}-stack-top`;
+    const baseGradientId = `${id}-stack-base`;
     const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
     const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
     const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
@@ -25,13 +31,17 @@ const TallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
             x: idle.sway,
             y: idle.bob,
             scale: idle.breath,
-        }, onClick: onClick, children: [jsx("rect", { x: -30, y: -140, width: 60, height: 140, rx: 22, fill: "#8B5CF6" }), jsxs(motion.g, { style: {
+        }, onClick: onClick, children: [jsxs("defs", { children: [jsxs("linearGradient", { id: topGradientId, x1: "-33", y1: "-128", x2: "34", y2: "-54", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#A5B4FC" }), jsx("stop", { offset: "1", stopColor: "#6366F1" })] }), jsxs("linearGradient", { id: baseGradientId, x1: "-46", y1: "-69", x2: "45", y2: "0", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#67E8F9" }), jsx("stop", { offset: "1", stopColor: "#14B8A6" })] })] }), jsx(motion.path, { d: "M -20 -132 C 8 -146 37 -124 34 -94 C 32 -70 8 -57 -16 -65 C -42 -74 -47 -117 -20 -132 Z", fill: `url(#${topGradientId})`, animate: {
+                    d: state === 'love'
+                        ? 'M -22 -136 C 9 -153 42 -126 37 -92 C 34 -66 8 -53 -18 -63 C -48 -74 -51 -120 -22 -136 Z'
+                        : 'M -20 -132 C 8 -146 37 -124 34 -94 C 32 -70 8 -57 -16 -65 C -42 -74 -47 -117 -20 -132 Z',
+                }, transition: transition }), jsx("path", { d: "M -39 -63 C -15 -86 31 -78 43 -47 C 55 -13 28 9 -10 4 C -47 -1 -66 -35 -39 -63 Z", fill: `url(#${baseGradientId})` }), jsx("path", { d: "M -25 -121 C -6 -132 15 -129 25 -112", fill: "none", stroke: "#E0E7FF", strokeLinecap: "round", strokeWidth: 4, opacity: 0.48 }), jsxs(motion.g, { style: {
                     originX: '0px',
                     originY: '-70px',
                     rotate: combinedHeadRotate,
                     x: combinedHeadX,
                     y: combinedHeadY,
-                }, children: [jsx(motion.line, { x1: -22, y1: -103, x2: -4, y2: -103, stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { rotate: eyebrow.rotate, y: eyebrow.y }, transition: transition, style: { originX: '50%', originY: '50%', transformBox: 'fill-box' } }), jsx(motion.line, { x1: 4, y1: -103, x2: 22, y2: -103, stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { rotate: -eyebrow.rotate, y: eyebrow.y }, transition: transition, style: { originX: '50%', originY: '50%', transformBox: 'fill-box' } }), jsxs("g", { children: [jsx("clipPath", { id: "tall-eye-l", children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 11, ry: 14 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 11, ry: 14, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 6.5, fill: "#1E293B", clipPath: "url(#tall-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 3.5, cy: LEFT_EYE.cy - 5, r: 2.5, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 2.5, cy: LEFT_EYE.cy + 3, r: 1.2, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 11, y: LEFT_EYE.cy - 14, width: 22, height: 28, fill: "#8B5CF6", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "tall-eye-r", children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 11, ry: 14 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 11, ry: 14, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 6.5, fill: "#1E293B", clipPath: "url(#tall-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 3.5, cy: RIGHT_EYE.cy - 5, r: 2.5, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 2.5, cy: RIGHT_EYE.cy + 3, r: 1.2, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 11, y: RIGHT_EYE.cy - 14, width: 22, height: 28, fill: "#8B5CF6", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -22, cy: -62, rx: 7, ry: 5, fill: "#F9A8D4", opacity: state === 'love' ? 0.65 : 0.45 }), jsx("ellipse", { cx: 22, cy: -62, rx: 7, ry: 5, fill: "#F9A8D4", opacity: state === 'love' ? 0.65 : 0.45 }), jsx(motion.path, { d: tallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: tallMouthPaths[state] }, transition: transition, transform: "translate(0, -55)" })] })] }));
+                }, children: [jsx(motion.line, { x1: -23, y1: -94, x2: -5, y2: -94, stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { rotate: eyebrow.rotate, y: eyebrow.y }, transition: transition, style: { originX: '50%', originY: '50%', transformBox: 'fill-box' } }), jsx(motion.line, { x1: 5, y1: -94, x2: 23, y2: -94, stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { rotate: -eyebrow.rotate, y: eyebrow.y }, transition: transition, style: { originX: '50%', originY: '50%', transformBox: 'fill-box' } }), jsxs("g", { children: [jsx("clipPath", { id: leftClipId, children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 11, ry: 14 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 10, ry: 12, fill: "#F8FAFC" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 6.5, fill: "#1E293B", clipPath: `url(#${leftClipId})` }), jsx("circle", { cx: LEFT_EYE.cx + 3.5, cy: LEFT_EYE.cy - 5, r: 2.5, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 2.5, cy: LEFT_EYE.cy + 3, r: 1.2, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 10, y: LEFT_EYE.cy - 12, width: 20, height: 24, fill: "#7C83F3", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: rightClipId, children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 11, ry: 14 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 10, ry: 12, fill: "#F8FAFC" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 6.5, fill: "#1E293B", clipPath: `url(#${rightClipId})` }), jsx("circle", { cx: RIGHT_EYE.cx + 3.5, cy: RIGHT_EYE.cy - 5, r: 2.5, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 2.5, cy: RIGHT_EYE.cy + 3, r: 1.2, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 10, y: RIGHT_EYE.cy - 12, width: 20, height: 24, fill: "#7C83F3", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: -25, cy: -57, rx: 6, ry: 3.5, fill: "#C4B5FD", opacity: state === 'love' ? 0.75 : 0.45 }), jsx("ellipse", { cx: 25, cy: -57, rx: 6, ry: 3.5, fill: "#C4B5FD", opacity: state === 'love' ? 0.75 : 0.45 }), jsx(motion.path, { d: tallMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2, strokeLinecap: "round", animate: { d: tallMouthPaths[state] }, transition: transition, transform: "translate(0, -49)" })] })] }));
 };
 
 export { TallCharacter };

package/dist/components/effects/MorphingText/MorphingText.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useId, useState, useRef, useCallback, useEffect } from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import React__default, { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 /**
  * MorphingText smoothly morphs between different text strings using a blur/fade
  * transition. Two overlapping text layers cross-fade with a Gaussian blur effect
@@ -18,11 +19,12 @@ import { cn } from '../../../utils/cn.js';
  * ```
  */
 const MorphingText = React__default.forwardRef(({ texts, interval = 3000, transitionDuration = 800, loop = true, pauseOnHover = false, currentIndex: controlledIndex, onTextChange, className, ...props }, ref) => {
-    const filterId = useId();
     const shouldReduceMotion = useReducedMotion();
     const isControlled = controlledIndex !== undefined;
     const [internalIndex, setInternalIndex] = useState(0);
     const activeIndex = isControlled ? controlledIndex : internalIndex;
+    const measureRefs = useRef([]);
+    const [textRects, setTextRects] = useState([]);
     const [isPaused, setIsPaused] = useState(false);
     const intervalRef = useRef(null);
     const hasReachedEnd = useRef(false);
@@ -59,6 +61,28 @@ const MorphingText = React__default.forwardRef(({ texts, interval = 3000, transi
     useEffect(() => {
         hasReachedEnd.current = false;
     }, [loop, texts]);
+    useIsomorphicLayoutEffect(() => {
+        const measure = () => {
+            setTextRects(texts.map((_, index) => {
+                var _a, _b, _c;
+                const rect = (_a = measureRefs.current[index]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                return {
+                    width: (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0,
+                    height: (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0,
+                };
+            }));
+        };
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(measure);
+        measureRefs.current.forEach((element) => {
+            if (element)
+                observer.observe(element);
+        });
+        return () => observer.disconnect();
+    }, [texts]);
     // Fire onTextChange for controlled index changes
     useEffect(() => {
         if (isControlled) {
@@ -78,14 +102,23 @@ const MorphingText = React__default.forwardRef(({ texts, interval = 3000, transi
     }
     const durationSeconds = transitionDuration / 1000;
     const currentText = texts[safeIndex];
+    const currentRect = textRects[safeIndex];
+    const measuredSize = (currentRect === null || currentRect === void 0 ? void 0 : currentRect.width) && (currentRect === null || currentRect === void 0 ? void 0 : currentRect.height)
+        ? { width: currentRect.width, height: currentRect.height }
+        : undefined;
     // Reduced motion: instant swap with no animation
     if (shouldReduceMotion) {
         return (jsx("div", { ref: ref, className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: jsx("span", { children: currentText }) }));
     }
-    return (jsxs("div", { ref: ref, className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: [jsx("svg", { className: "absolute h-0 w-0", "aria-hidden": "true", children: jsx("defs", { children: jsx("filter", { id: `${filterId}-blur`, children: jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0" }) }) }) }), jsx("span", { className: "invisible block", "aria-hidden": "true", children: currentText }), jsx(AnimatePresence, { mode: "popLayout", initial: false, children: jsx(motion.span, { className: "absolute inset-0 flex items-center", initial: { opacity: 0, filter: 'blur(8px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, exit: { opacity: 0, filter: 'blur(8px)' }, transition: {
-                        duration: durationSeconds,
-                        ease: 'easeInOut',
-                    }, children: currentText }, safeIndex) })] }));
+    return (jsx("div", { ref: ref, className: cn('relative inline-block align-bottom', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: jsxs(motion.span, { className: "relative inline-block align-bottom", initial: false, animate: measuredSize, transition: {
+                duration: durationSeconds,
+                ease: 'easeInOut',
+            }, children: [jsx("span", { className: "pointer-events-none invisible absolute left-0 top-0 whitespace-nowrap", "aria-hidden": "true", children: texts.map((text, index) => (jsx("span", { ref: (element) => {
+                            measureRefs.current[index] = element;
+                        }, className: "block w-fit whitespace-nowrap", children: text }, `${text}-${index}`))) }), !measuredSize && (jsx("span", { className: "whitespace-nowrap", children: currentText })), measuredSize && (jsx(AnimatePresence, { mode: "popLayout", initial: false, children: jsx(motion.span, { className: "absolute left-0 top-0 flex whitespace-nowrap", initial: { opacity: 0, filter: 'blur(8px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, exit: { opacity: 0, filter: 'blur(8px)' }, transition: {
+                            duration: durationSeconds,
+                            ease: 'easeInOut',
+                        }, children: currentText }, safeIndex) }))] }) }));
 });
 MorphingText.displayName = "MorphingText";
 

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

@@ -0,0 +1,18 @@
+import React from "react";
+import type { StripePatternProps } from "./StripePattern.types";
+/**
+ * StripePattern renders an SVG-based diagonal stripe background pattern.
+ *
+ * Use it as an absolute-positioned decorative or placeholder fill inside a
+ * container with `position: relative`. The pattern is non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-40 rounded-lg">
+ *   <StripePattern />
+ *   <div className="relative z-10">Empty cover slot</div>
+ * </div>
+ * ```
+ */
+export declare const StripePattern: React.ForwardRefExoticComponent<StripePatternProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/StripePattern/StripePattern.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+function buildMaskImage(direction, fadeSize) {
+    const stop = Math.max(0, Math.min(100, fadeSize));
+    if (direction === "radial") {
+        return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
+    }
+    const directionMap = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return `linear-gradient(${directionMap[direction]}, black ${100 - stop}%, transparent 100%)`;
+}
+/**
+ * StripePattern renders an SVG-based diagonal stripe background pattern.
+ *
+ * Use it as an absolute-positioned decorative or placeholder fill inside a
+ * container with `position: relative`. The pattern is non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-40 rounded-lg">
+ *   <StripePattern />
+ *   <div className="relative z-10">Empty cover slot</div>
+ * </div>
+ * ```
+ */
+const StripePattern = React__default.forwardRef(({ spacing = 12, strokeWidth = 6, angle = -45, color = "color-mix(in srgb, var(--color-border) 50%, transparent)", fade = false, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
+    const patternId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const enableAnimation = animated && !shouldReduceMotion;
+    const maskImage = useMemo(() => (fade ? buildMaskImage(fadeDirection, fadeSize) : undefined), [fade, fadeDirection, fadeSize]);
+    const containerStyle = {
+        ...style,
+        ...(maskImage
+            ? {
+                maskImage,
+                WebkitMaskImage: maskImage,
+            }
+            : {}),
+    };
+    const lineX = spacing / 2;
+    const lineElement = enableAnimation ? (jsx(motion.line, { x1: lineX, y1: 0, x2: lineX, y2: spacing, stroke: color, strokeWidth: strokeWidth, animate: { opacity: [0.4, 1, 0.4] }, transition: { duration: 4, ease: "easeInOut", repeat: Infinity } })) : (jsx("line", { x1: lineX, y1: 0, x2: lineX, y2: spacing, stroke: color, strokeWidth: strokeWidth }));
+    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsx("pattern", { id: patternId, x: "0", y: "0", width: spacing, height: spacing, patternUnits: "userSpaceOnUse", patternTransform: `rotate(${angle})`, children: lineElement }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }) }));
+});
+StripePattern.displayName = "StripePattern";
+
+export { StripePattern };

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

@@ -0,0 +1,53 @@
+import React from "react";
+/** Direction for the fade gradient mask */
+export type StripePatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
+export interface StripePatternProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Distance between adjacent stripes in pixels (center to center).
+     * @default 12
+     */
+    spacing?: number;
+    /**
+     * Thickness of each stripe in pixels.
+     * @default 6
+     */
+    strokeWidth?: number;
+    /**
+     * Stripe rotation in degrees. `-45` runs bottom-left to top-right.
+     * @default -45
+     */
+    angle?: number;
+    /**
+     * Stroke color of the stripes.
+     * Accepts any valid CSS color value or CSS variable.
+     * @default "color-mix(in srgb, var(--color-border) 50%, transparent)"
+     */
+    color?: string;
+    /**
+     * Whether to apply a gradient mask that fades the pattern at the edges.
+     * Defaults to `false` so the pattern reads as a flat fill — useful for
+     * placeholder surfaces. Set to `true` for decorative backgrounds.
+     * @default false
+     */
+    fade?: boolean;
+    /**
+     * Direction of the fade gradient.
+     * - "radial" fades from center outward
+     * - "top" | "bottom" | "left" | "right" fades toward that edge
+     * @default "radial"
+     */
+    fadeDirection?: StripePatternFadeDirection;
+    /**
+     * Size of the fade area as a percentage (0-100).
+     * @default 50
+     */
+    fadeSize?: number;
+    /**
+     * Whether to apply a subtle pulse animation to the stripes.
+     * Respects prefers-reduced-motion automatically.
+     * @default false
+     */
+    animated?: boolean;
+    /** Additional className for style overrides (shadcn pattern). */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { StripePattern } from "./StripePattern";
+export type { StripePatternProps, StripePatternFadeDirection, } from "./StripePattern.types";

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

@@ -20,10 +20,14 @@ export { GridPattern } from "./GridPattern";
 export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern";
 export { DotPattern } from "./DotPattern";
 export type { DotPatternProps, DotPatternFadeDirection, } from "./DotPattern";
+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 { ScrollReveal } from "./ScrollReveal";
@@ -36,3 +40,8 @@ export { InteractiveCharacters } from "./InteractiveCharacters";
 export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from "./InteractiveCharacters";
 export { InsetCircleButton, InsetPill } from "./Neumorphic";
 export type { InsetCircleButtonProps, InsetPillProps, } from "./Neumorphic";
+export { AIOrb } from "./AIOrb";
+export type { AIOrbProps, OrbState } from "./AIOrb";
+export type { DotSphereProps, LiquidProps, AuraProps } from "./AIOrb";
+export { Particles } from "./Particles";
+export type { ParticlesProps } from "./Particles";

package/dist/components/effects/index.js

@@ -9,8 +9,10 @@ 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 { ScrollReveal } from './ScrollReveal/ScrollReveal.js';
 export { StickyScroll } from './StickyScroll/StickyScroll.js';
@@ -18,3 +20,5 @@ export { PageTransition } from './PageTransition/PageTransition.js';
 export { InteractiveCharacters } from './InteractiveCharacters/InteractiveCharacters.js';
 export { InsetCircleButton } from './Neumorphic/InsetCircleButton.js';
 export { InsetPill } from './Neumorphic/InsetPill.js';
+export { AIOrb } from './AIOrb/AIOrb.js';
+export { Particles } from './Particles/Particles.js';

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

@@ -10,7 +10,7 @@ const checkboxTheme = {
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
-        "dark:bg-[var(--color-background-tertiary)] " +
+        "dark:bg-[var(--color-surface-raised)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
         // Checked state - dark