@flikk/ui 1.0.0-beta.14 → 1.0.0-beta.16

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useId, useState, useRef, useCallback, useEffect } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
@@ -17,7 +17,7 @@ import { cn } from '../../../utils/cn.js';
  * />
  * ```
  */
-const MorphingText = ({ texts, interval = 3000, transitionDuration = 800, loop = true, pauseOnHover = false, currentIndex: controlledIndex, onTextChange, className, ...props }) => {
+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;
@@ -80,12 +80,13 @@ const MorphingText = ({ texts, interval = 3000, transitionDuration = 800, loop =
     const currentText = texts[safeIndex];
     // Reduced motion: instant swap with no animation
     if (shouldReduceMotion) {
-        return (jsx("div", { className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: jsx("span", { children: currentText }) }));
+        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", { 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: {
+    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) })] }));
-};
+});
+MorphingText.displayName = "MorphingText";
 
 export { MorphingText };

package/dist/components/effects/Neumorphic/InsetCircleButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface InsetCircleButtonProps {
+    children: React.ReactNode;
+    size?: number;
+    className?: string;
+    classNameDisc?: string;
+    classNameHover?: string;
+    onClick?: () => void;
+}
+export declare function InsetCircleButton({ children, size, className, classNameDisc, classNameHover, onClick, }: InsetCircleButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Neumorphic/InsetCircleButton.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+
+function InsetCircleButton({ children, size = 44, className, classNameDisc, classNameHover, onClick, }) {
+    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, onClick: onClick, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
+}
+
+export { InsetCircleButton };

package/dist/components/effects/Neumorphic/InsetPill.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface InsetPillProps {
+    children: React.ReactNode;
+    className?: string;
+    padding?: string;
+    onClick?: () => void;
+}
+export declare function InsetPill({ children, className, padding, onClick, }: InsetPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Neumorphic/InsetPill.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function InsetPill({ children, className, padding = "10px 18px", onClick, }) {
+    return (jsx("div", { className: `neu-inset inline-flex items-center gap-2 cursor-pointer rounded-full bg-neutral-200/60 dark:bg-neutral-800/80 ${className !== null && className !== void 0 ? className : ""}`, style: { padding }, onClick: onClick, children: jsx("div", { className: "relative z-2 flex items-center gap-2", children: children }) }));
+}
+
+export { InsetPill };

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

@@ -0,0 +1,4 @@
+export { InsetCircleButton } from "./InsetCircleButton";
+export type { InsetCircleButtonProps } from "./InsetCircleButton";
+export { InsetPill } from "./InsetPill";
+export type { InsetPillProps } from "./InsetPill";

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

@@ -25,4 +25,4 @@ import type { NoiseOverlayProps } from "./NoiseOverlay.types";
  * </div>
  * ```
  */
-export declare const NoiseOverlay: React.FC<NoiseOverlayProps>;
+export declare const NoiseOverlay: React.ForwardRefExoticComponent<NoiseOverlayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/NoiseOverlay/NoiseOverlay.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useRef, useEffect } from 'react';
+import React__default, { useId, useRef, useEffect } from 'react';
 import { useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
@@ -28,7 +28,7 @@ import { cn } from '../../../utils/cn.js';
  * </div>
  * ```
  */
-const NoiseOverlay = ({ opacity = 0.15, frequency = 0.65, octaves = 4, blendMode = "overlay", animated = false, className, style, ...props }) => {
+const NoiseOverlay = React__default.forwardRef(({ opacity = 0.15, frequency = 0.65, octaves = 4, blendMode = "overlay", animated = false, className, style, ...props }, ref) => {
     const filterId = useId();
     const shouldReduceMotion = useReducedMotion();
     const turbulenceRef = useRef(null);
@@ -50,12 +50,12 @@ const NoiseOverlay = ({ opacity = 0.15, frequency = 0.65, octaves = 4, blendMode
             clearInterval(intervalId);
         };
     }, [isAnimating]);
-    return (jsx("div", { className: cn("absolute inset-0 pointer-events-none", className), style: {
+    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none", className), style: {
             mixBlendMode: blendMode,
             opacity,
             ...style,
         }, "aria-hidden": "true", ...props, children: jsxs("svg", { className: "absolute inset-0 w-full h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: [jsx("filter", { id: filterId, children: jsx("feTurbulence", { ref: turbulenceRef, type: "fractalNoise", baseFrequency: frequency, numOctaves: octaves, stitchTiles: "stitch", seed: 0 }) }), jsx("rect", { width: "100%", height: "100%", filter: `url(#${filterId})` })] }) }));
-};
+});
 NoiseOverlay.displayName = "NoiseOverlay";
 
 export { NoiseOverlay };

package/dist/components/effects/Overlay/Overlay.js

@@ -97,14 +97,16 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
     const finalContentAnimations = { ...contentAnimations };
     if (animationDuration) {
         if (animationDuration.enter && finalOverlayAnimations.animate) {
-            finalOverlayAnimations.animate.transition = {
-                ...finalOverlayAnimations.animate.transition,
+            const animate = finalOverlayAnimations.animate;
+            animate.transition = {
+                ...animate.transition,
                 duration: animationDuration.enter,
             };
         }
         if (animationDuration.exit && finalOverlayAnimations.exit) {
-            finalOverlayAnimations.exit.transition = {
-                ...finalOverlayAnimations.exit.transition,
+            const exit = finalOverlayAnimations.exit;
+            exit.transition = {
+                ...exit.transition,
                 duration: animationDuration.exit,
             };
         }

package/dist/components/effects/PageTransition/PageTransition.animations.d.ts

@@ -0,0 +1,8 @@
+import type { PageTransitionDirection } from './PageTransition.types';
+import type { Variants } from 'motion/react';
+export declare const buildCurtainVariants: (direction: PageTransitionDirection, duration: number) => Variants;
+export declare const buildLogoParallaxVariants: (direction: PageTransitionDirection, duration: number) => Variants;
+export declare const buildSplitVariants: (axis: "h" | "v", duration: number) => {
+    panel1: Variants;
+    panel2: Variants;
+};

package/dist/components/effects/PageTransition/PageTransition.animations.js

@@ -0,0 +1,53 @@
+const exitMap = {
+    up: { y: '-100%', x: 0 },
+    down: { y: '100%', x: 0 },
+    left: { x: '-100%', y: 0 },
+    right: { x: '100%', y: 0 },
+};
+const buildCurtainVariants = (direction, duration) => ({
+    covered: { y: 0, x: 0 },
+    exit: {
+        ...exitMap[direction],
+        transition: {
+            duration,
+            ease: [0.76, 0, 0.24, 1],
+        },
+    },
+});
+// Logo is rendered INSIDE the curtain. These are relative offsets that
+// counteract ~30% of the curtain's motion, making the logo appear to
+// move at ~70% of the curtain's speed (parallax lag effect).
+const logoInnerOffsetMap = {
+    up: { y: '30vh', x: 0 },
+    down: { y: '-30vh', x: 0 },
+    left: { x: '30vw', y: 0 },
+    right: { x: '-30vw', y: 0 },
+};
+const buildLogoParallaxVariants = (direction, duration) => ({
+    covered: { y: 0, x: 0 },
+    exit: {
+        ...logoInnerOffsetMap[direction],
+        transition: {
+            duration,
+            ease: [0.76, 0, 0.24, 1],
+        },
+    },
+});
+const buildSplitVariants = (axis, duration) => ({
+    panel1: {
+        covered: {},
+        exit: {
+            [axis === 'h' ? 'y' : 'x']: '-100%',
+            transition: { duration, ease: [0.76, 0, 0.24, 1] },
+        },
+    },
+    panel2: {
+        covered: {},
+        exit: {
+            [axis === 'h' ? 'y' : 'x']: '100%',
+            transition: { duration, ease: [0.76, 0, 0.24, 1] },
+        },
+    },
+});
+
+export { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PageTransitionProps } from "./PageTransition.types";
+export declare const PageTransition: React.FC<PageTransitionProps>;

package/dist/components/effects/PageTransition/PageTransition.js

@@ -0,0 +1,71 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants } from './PageTransition.animations.js';
+
+const PageTransition = ({ children, logo, type = "slide", direction = "up", duration = 0.8, delay = 0.8, color = "bg-[var(--color-primary)]", className, parallax = true, onStart, onComplete, }) => {
+    const [phase, setPhase] = useState("covered");
+    const [completedPanels, setCompletedPanels] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        const loadPromise = new Promise((resolve) => {
+            if (document.readyState === "complete") {
+                resolve();
+            }
+            else {
+                window.addEventListener("load", () => resolve(), { once: true });
+            }
+        });
+        const delayPromise = new Promise((resolve) => {
+            setTimeout(resolve, delay * 1000);
+        });
+        Promise.all([loadPromise, delayPromise]).then(() => {
+            if (!cancelled) {
+                setPhase("exit");
+                setTimeout(() => {
+                    if (!cancelled)
+                        onStart === null || onStart === void 0 ? void 0 : onStart();
+                }, 250);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [delay]);
+    useEffect(() => {
+        if (type === "split" && completedPanels === 2) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }
+    }, [completedPanels, type, onComplete]);
+    if (type === "split") {
+        const axis = direction === "up" || direction === "down" ? "h" : "v";
+        const splitVars = buildSplitVariants(axis, duration);
+        return (jsxs(Fragment, { children: [children, jsxs("div", { className: "fixed inset-0 z-[9999] pointer-events-none", children: [jsx(motion.div, { className: cn(axis === "h"
+                                ? "absolute inset-x-0 top-0 h-1/2"
+                                : "absolute inset-y-0 left-0 w-1/2", color, className), variants: splitVars.panel1, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                                if (def === "exit")
+                                    setCompletedPanels((n) => n + 1);
+                            } }), jsx(motion.div, { className: cn(axis === "h"
+                                ? "absolute inset-x-0 bottom-0 h-1/2"
+                                : "absolute inset-y-0 right-0 w-1/2", color, className), variants: splitVars.panel2, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                                if (def === "exit")
+                                    setCompletedPanels((n) => n + 1);
+                            } }), logo && (jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 pointer-events-none select-none", children: logo }))] })] }));
+    }
+    // Default: slide
+    const curtainVariants = buildCurtainVariants(direction, duration);
+    if (type === "slide" && parallax) {
+        const logoVariants = buildLogoParallaxVariants(direction, duration);
+        return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                        if (def === "exit")
+                            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                    }, children: logo && (jsx(motion.div, { className: "relative z-10 select-none", variants: logoVariants, initial: "covered", animate: phase, children: logo })) })] }));
+    }
+    return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
+                    if (def === "exit")
+                        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                }, children: logo && jsx("div", { className: "relative z-10 select-none", children: logo }) })] }));
+};
+
+export { PageTransition };

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

@@ -0,0 +1,15 @@
+export type PageTransitionDirection = 'up' | 'down' | 'left' | 'right';
+export type PageTransitionType = 'slide' | 'split';
+export interface PageTransitionProps {
+    children: React.ReactNode;
+    logo?: React.ReactNode;
+    type?: PageTransitionType;
+    direction?: PageTransitionDirection;
+    duration?: number;
+    delay?: number;
+    color?: string;
+    className?: string;
+    parallax?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { PageTransition } from './PageTransition';
+export type { PageTransitionProps, PageTransitionDirection } from './PageTransition.types';

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

@@ -30,3 +30,9 @@ 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 { InteractiveCharacters } from "./InteractiveCharacters";
+export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from "./InteractiveCharacters";
+export { InsetCircleButton, InsetPill } from "./Neumorphic";
+export type { InsetCircleButtonProps, InsetPillProps, } from "./Neumorphic";

package/dist/components/effects/index.js

@@ -14,3 +14,7 @@ export { Spotlight } from './Spotlight/Spotlight.js';
 export { ParallaxSection } from './ParallaxSection/ParallaxSection.js';
 export { ScrollReveal } from './ScrollReveal/ScrollReveal.js';
 export { StickyScroll } from './StickyScroll/StickyScroll.js';
+export { PageTransition } from './PageTransition/PageTransition.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.animations.d.ts

@@ -0,0 +1,14 @@
+import { Variants } from "motion/react";
+/**
+ * Checkmark SVG path draw-on animation
+ * Animates pathLength from 0 → 1 for a smooth draw effect
+ */
+export declare const checkmarkVariants: Variants;
+/**
+ * Indeterminate dash draw-on animation
+ */
+export declare const indeterminateVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no path draw
+ */
+export declare const reducedMotionVariants: Variants;

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

@@ -0,0 +1,53 @@
+const smoothEase = [0.65, 0, 0.35, 1];
+/**
+ * Checkmark SVG path draw-on animation
+ * Animates pathLength from 0 → 1 for a smooth draw effect
+ */
+const checkmarkVariants = {
+    unchecked: {
+        pathLength: 0,
+        opacity: 0,
+        transition: {
+            pathLength: { duration: 0.15, ease: smoothEase },
+            opacity: { duration: 0.1, ease: "easeOut" },
+        },
+    },
+    checked: {
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { duration: 0.2, ease: smoothEase },
+            opacity: { duration: 0.05, ease: "easeOut" },
+        },
+    },
+};
+/**
+ * Indeterminate dash draw-on animation
+ */
+const indeterminateVariants = {
+    unchecked: {
+        pathLength: 0,
+        opacity: 0,
+        transition: {
+            pathLength: { duration: 0.1, ease: smoothEase },
+            opacity: { duration: 0.08, ease: "easeOut" },
+        },
+    },
+    checked: {
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { duration: 0.15, ease: smoothEase },
+            opacity: { duration: 0.05, ease: "easeOut" },
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no path draw
+ */
+const reducedMotionVariants = {
+    unchecked: { opacity: 0 },
+    checked: { opacity: 1 },
+};
+
+export { checkmarkVariants, indeterminateVariants, reducedMotionVariants };

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

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useId, useState, useRef, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { checkboxTheme } from './Checkbox.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
-import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { useCheckboxGroupContext } from './CheckboxContext.js';
 import { CheckboxGroup } from './CheckboxGroup.js';
+import { reducedMotionVariants, indeterminateVariants, checkmarkVariants } from './Checkbox.animations.js';
 
 /**
  * Checkbox component for selecting one or more options
@@ -13,6 +14,7 @@ import { CheckboxGroup } from './CheckboxGroup.js';
 const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
     var _a, _b, _c, _d;
     const autoId = useId();
+    const shouldReduceMotion = useReducedMotion();
     const groupContext = useCheckboxGroupContext();
     // Resolve props from group context or individual props
     const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
@@ -57,7 +59,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, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))] }), (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, "data-state": isDisabled ? "disabled" : "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-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-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))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

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-secondary)] " +
+        "dark:bg-[var(--color-background-tertiary)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
         // Checked state - dark
@@ -27,7 +27,7 @@ const checkboxTheme = {
         "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
-        "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
+        "dark:disabled:bg-[var(--color-neutral-800)] dark:disabled:border-[var(--color-neutral-600)] " +
         "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
     // Description text - light and dark
     descriptionStyle: "text-base mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
@@ -38,7 +38,7 @@ const checkboxTheme = {
     // Group styles
     groupStyle: "flex flex-col gap-1.5",
     groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
-    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)] -mt-0.5 mb-1",
     groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
     groupItemsStyle: "flex flex-col gap-3",
 };

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

@@ -95,7 +95,7 @@ export interface ColorPickerContextValue {
     isOpen: boolean;
     setIsOpen: (open: boolean) => void;
     triggerRef: React.RefObject<HTMLElement>;
-    placement: string;
+    placement: import("../../../hooks/useSelectPortal").SelectPlacement;
     offset: number;
     showAlpha: boolean;
     showEyeDropper: boolean;

package/dist/components/forms/ColorPicker/ColorPickerBody.js

@@ -26,7 +26,7 @@ const ColorPickerBody = ({ children, className, portal = true, animation = true,
     const { position, cssVariables } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 4,
         autoWidth: false,
     });
@@ -52,8 +52,8 @@ const ColorPickerBody = ({ children, className, portal = true, animation = true,
         document.addEventListener('keydown', handleEscape);
         return () => document.removeEventListener('keydown', handleEscape);
     }, [isOpen, setIsOpen, triggerRef]);
-    // Extract DOM props to avoid type conflicts with Framer Motion
-    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = rest;
+    // Extract DOM event handler props that conflict with Framer Motion
+    const { onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...domProps } = rest;
     const content = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: contentRef, role: "dialog", "aria-label": "Color picker", className: cn('fixed z-50', theme.contentStyle, className), style: {
                 ...cssVariables,
                 top: `${position.top}px`,

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

@@ -95,7 +95,8 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, onClose, portal, contentRef, optionsRef, triggerRef]);
     // Theme can come from Select's theme (optionsContainerStyle) or Combobox's theme (dropdownStyle)
-    const dropdownStyle = theme.dropdownStyle ||
+    const comboboxThemeRef = theme;
+    const dropdownStyle = comboboxThemeRef.dropdownStyle ||
         theme.optionsContainerStyle ||
         comboboxTheme.dropdownStyle;
     const optionStyle = theme.optionStyle || comboboxTheme.optionStyle;
@@ -396,7 +397,8 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
                                             ? `${comboboxId}-option-${customFilteredOptions[highlightedIndex].id}`
                                             : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(XMarkIcon, { className: theme.clearIconStyle }) }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName })] }), helperText && (jsx("p", { className: cn(helperTextClasses, helperTextStateClasses), children: helperText })), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
 };
-const Combobox = React__default.forwardRef(ComboboxInner);
-Combobox.displayName = "Combobox";
+const ComboboxForwarded = React__default.forwardRef(ComboboxInner);
+ComboboxForwarded.displayName = "Combobox";
+const Combobox = ComboboxForwarded;
 
 export { Combobox };

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

@@ -213,7 +213,7 @@ const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement =
                                                     const adjustedLeft = new Date(newDate);
                                                     adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
                                                     setLeftCalendarDate(adjustedLeft);
-                                                }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: [jsx("div", { className: "text-base text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
+                                                }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-muted", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
                     // Single calendar for single mode
                     jsx("div", { className: "flex-1 p-4", children: children || (jsx(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
                                 handleDateSelect(value);

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

@@ -0,0 +1 @@
+export { createDropdownAnimations } from "../DatePicker/DatePicker.animations";

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

@@ -0,0 +1,37 @@
+import React from "react";
+import type { DateRangePickerProps, DateRangePickerState, DateRangePickerSize, DateRangePickerTheme, DateRange } from "./DateRangePicker.types";
+import { DateRangePickerTrigger } from "./DateRangePickerTrigger";
+import { DateRangePickerBody } from "./DateRangePickerBody";
+import { DateRangePickerPresets } from "./DateRangePickerPresets";
+interface DateRangePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedRange: DateRange | undefined;
+    handleRangeSelect: (range: DateRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    showToday?: boolean;
+    weekdays?: string[];
+    months?: string[];
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    size: DateRangePickerSize;
+    state: DateRangePickerState;
+    theme: DateRangePickerTheme;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const DateRangePickerContext: React.Context<DateRangePickerContextType | undefined>;
+/**
+ * DateRangePicker Component — dedicated range picker with presets and dual calendars
+ */
+declare const DateRangePickerComponent: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+declare const DateRangePickerWithCompounds: typeof DateRangePickerComponent & {
+    Trigger: typeof DateRangePickerTrigger;
+    Body: typeof DateRangePickerBody;
+    Presets: typeof DateRangePickerPresets;
+};
+export { DateRangePickerTrigger, DateRangePickerBody, DateRangePickerPresets, DateRangePickerWithCompounds as DateRangePicker, };