@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/components/core/Tooltip/Tooltip.theme.js

@@ -1,7 +1,7 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
     baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
-        "dark:bg-neutral-800/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
+        "dark:bg-[var(--color-neutral-800)]/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 
 export { tooltipTheme };

package/dist/components/core/index.js

@@ -74,6 +74,15 @@ export { messageTheme } from './Message/Message.theme.js';
 export { messageListTheme } from './Message/MessageList.theme.js';
 export { TypeWriter } from './Message/TypeWriter.js';
 export { MessageBody } from './Message/MessageBody.js';
+export { MessageStatusIndicator } from './Message/MessageStatusIndicator.js';
+export { MessageSenderName } from './Message/MessageSenderName.js';
+export { MessageFile } from './Message/MessageFile.js';
+export { MessageImage } from './Message/MessageImage.js';
+export { MessageAudio } from './Message/MessageAudio.js';
+export { MessageLink } from './Message/MessageLink.js';
+export { MessageReply } from './Message/MessageReply.js';
+export { MessageReactions } from './Message/MessageReactions.js';
+export { MessageDateDivider } from './Message/MessageDateDivider.js';
 export { Empty } from './Empty/Empty.js';
 export { emptyTheme } from './Empty/Empty.theme.js';
 export { Masonry } from './Masonry/Masonry.js';
@@ -89,6 +98,8 @@ export { SidebarNav } from './Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
 export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
+export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
+export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
 export { useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';

package/dist/components/data-display/GanttChart/GanttChart.types.d.ts

@@ -14,7 +14,7 @@ export interface GanttTask {
     completed?: boolean;
     dependencies?: string[];
     milestone?: boolean;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 export interface GanttHoliday {
     date: Date | string;
@@ -30,7 +30,7 @@ export interface GanttGroup {
 export interface GanttColumn<T extends GanttTask = GanttTask> {
     id: string;
     header: string;
-    accessor: keyof T | ((task: T) => any);
+    accessor: keyof T | ((task: T) => ReactNode | string | number | boolean | null | undefined);
     cell?: (task: T, group: GanttGroup) => ReactNode;
     width?: number;
     align?: "left" | "center" | "right";

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -23,7 +23,7 @@ const GanttToolbar = () => {
         const targetScroll = todayOffset * dayWidth - container.clientWidth / 2;
         container.scrollTo({ left: targetScroll, behavior: "smooth" });
     };
-    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex items-center gap-3", children: [todayOffset !== null && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { className: "size-4" }), "Today"] })), jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) }), jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" })] }), jsx("div", { className: "flex items-center gap-2", children: onGroupAdd && !readonly && (jsxs(Button, { variant: "ghost", size: "sm", onClick: onGroupAdd, children: [jsx(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
+    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex items-center gap-3", children: [todayOffset !== null && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { className: "size-4" }), "Today"] })), jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) }), jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" })] }), jsx("div", { className: "flex items-center gap-2", children: onGroupAdd && !readonly && (jsxs(Button, { variant: "soft", size: "sm", onClick: onGroupAdd, children: [jsx(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
 };
 
 export { GanttToolbar };

package/dist/components/data-display/Table/Table.types.d.ts

@@ -38,13 +38,13 @@ export interface FilterOption {
 /**
  * Column definition for table data display and behavior
  */
-export interface Column<T = any> {
+export interface Column<T = unknown> {
     /** Unique identifier for the column */
     id: string;
     /** Header content - can be string or React element */
     header: string | ReactNode;
     /** Property key or function to extract cell data from row object */
-    accessor: keyof T | ((row: T) => any);
+    accessor: keyof T | ((row: T) => ReactNode | string | number | boolean | null | undefined);
     /** Optional custom renderer for cell content */
     cell?: (row: T) => ReactNode;
     /** Enable sorting for this column */
@@ -134,7 +134,7 @@ export interface TableContextType {
  *
  * @template T The type of data objects in each table row
  */
-export interface TableProps<T = any> {
+export interface TableProps<T = unknown> {
     /** Array of data objects to display - required for data-driven API */
     data?: T[];
     /** Column definitions for data display and behavior - required for data-driven API */
@@ -287,7 +287,7 @@ export interface InternalTableCellProps<T> {
 }
 export type ActionVariant = 'default' | 'danger';
 export type ActionPriority = 'high' | 'normal';
-export interface ActionItem<T = any> {
+export interface ActionItem<T = unknown> {
     /** Unique identifier for the action */
     id: string;
     /** Display label for the action */
@@ -305,7 +305,7 @@ export interface ActionItem<T = any> {
     /** Function to determine if action should be disabled */
     disabled?: (row: T) => boolean;
 }
-export interface TableActionsProps<T = any> {
+export interface TableActionsProps<T = unknown> {
     /** Array of action items to display */
     actions: ActionItem<T>[];
     /** Row data to pass to action handlers */
@@ -315,7 +315,7 @@ export interface TableActionsProps<T = any> {
     /** Additional CSS class name */
     className?: string;
 }
-export interface TableActionsMenuProps<T = any> {
+export interface TableActionsMenuProps<T = unknown> {
     /** Array of action items to display in menu */
     actions: ActionItem<T>[];
     /** Row data to pass to action handlers */
@@ -351,7 +351,7 @@ export interface TableSelectionHeaderProps {
     onClearSelection: () => void;
     className?: string;
 }
-export interface TableColumnManagerProps<T = any> {
+export interface TableColumnManagerProps<T = unknown> {
     columns: Column<T>[];
     visibleColumns: string[];
     columnOrder: string[];
@@ -359,7 +359,7 @@ export interface TableColumnManagerProps<T = any> {
     onResetToDefault: () => void;
     onColumnReorder?: (fromIndex: number, toIndex: number) => void;
 }
-export interface TableFilterProps<T = any> {
+export interface TableFilterProps<T = unknown> {
     columns: Column<T>[];
     filterConfig: FilterConfig[];
     onFilterChange: (filterConfig: FilterConfig[]) => void;

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -125,7 +125,7 @@ CustomCursorProvider.displayName = "CustomCursorProvider";
  * </CustomCursor>
  * ```
  */
-const CustomCursor = React.forwardRef(({ children, size = "md", color = "primary", variant = "default", shape = "arrow", className, style, ...props }, ref) => {
+const CustomCursor = React.forwardRef(({ children, size = "md", color = "primary", variant = "default", shape = "arrow", className, style, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     const { cursorPos, isActive, containerRef, cursorRef } = useCustomCursor();
     React.useImperativeHandle(ref, () => cursorRef.current);
     const x = useMotionValue(0);
@@ -200,7 +200,7 @@ const userVariantColors = [
     "warning",
     "danger",
 ];
-const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = "bottom-right", transition, variant = "default", avatar, name, color, className, style, ...props }, ref) => {
+const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = "bottom-right", transition, variant = "default", avatar, name, color, className, style, onAnimationStart: _onAnimationStart2, onAnimationEnd: _onAnimationEnd2, onDrag: _onDrag2, onDragStart: _onDragStart2, onDragEnd: _onDragEnd2, ...props }, ref) => {
     const { cursorPos, isActive, cursorRef } = useCustomCursor();
     const cursorFollowRef = React.useRef(null);
     const shouldReduceMotion = useReducedMotion();

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

@@ -5,4 +5,4 @@ import { GlassSurfaceProps } from "./GlassSurface.types";
  * Creates a realistic chromatic aberration glass effect using SVG filters.
  * Works as a wrapper for any content.
  */
-export declare const GlassSurface: React.FC<GlassSurfaceProps>;
+export declare const GlassSurface: React.ForwardRefExoticComponent<GlassSurfaceProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/GlassSurface/GlassSurface.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useMemo, useEffect } from 'react';
+import React__default, { useId, useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 
 /**
@@ -23,7 +23,7 @@ const useDarkMode = () => {
  * Creates a realistic chromatic aberration glass effect using SVG filters.
  * Works as a wrapper for any content.
  */
-const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness: brightnessProp, opacity: opacityProp, blur: blurProp, displace: displaceProp, backgroundOpacity: backgroundOpacityProp, backgroundColor, saturation: saturationProp, distortionScale: distortionScaleProp, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode: mixBlendModeProp, colorScheme = "auto", frosted = false, className = "", style = {}, }) => {
+const GlassSurface = React__default.forwardRef(({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness: brightnessProp, opacity: opacityProp, blur: blurProp, displace: displaceProp, backgroundOpacity: backgroundOpacityProp, backgroundColor, saturation: saturationProp, distortionScale: distortionScaleProp, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode: mixBlendModeProp, colorScheme = "auto", frosted = false, className = "", style = {}, }, forwardedRef) => {
     const uniqueId = useId().replace(/:/g, "-");
     const filterId = `glass-filter-${uniqueId}`;
     const redGradId = `red-grad-${uniqueId}`;
@@ -250,7 +250,15 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
     const focusVisibleClasses = resolvedDark
         ? "focus-visible:outline-2 focus-visible:outline-[#0A84FF] focus-visible:outline-offset-2"
         : "focus-visible:outline-2 focus-visible:outline-[#007AFF] focus-visible:outline-offset-2";
-    return (jsxs("div", { ref: containerRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", id: "redchannel", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", id: "greenchannel", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", id: "bluechannel", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 h-full rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
-};
+    const mergedRef = useCallback((node) => {
+        containerRef.current = node;
+        if (typeof forwardedRef === "function")
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef]);
+    return (jsxs("div", { ref: mergedRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", id: "redchannel", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", id: "greenchannel", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", id: "bluechannel", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 h-full rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
+});
+GlassSurface.displayName = "GlassSurface";
 
 export { GlassSurface };

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

@@ -0,0 +1,39 @@
+import type { Variants } from 'motion/react';
+import type { CharacterState } from './InteractiveCharacters.types';
+export declare const eyelidVariants: Record<CharacterState, {
+    scaleY: number;
+}>;
+export declare const blobBodyVariants: Variants;
+export declare const tallBodyVariants: Variants;
+export declare const smallBodyVariants: Variants;
+export declare const blobMouthPaths: Record<CharacterState, string>;
+export declare const tallMouthPaths: Record<CharacterState, string>;
+export declare const smallMouthPaths: Record<CharacterState, string>;
+export declare const eyebrowVariants: Record<CharacterState, {
+    rotate: number;
+    y: number;
+}>;
+export declare const springConfigs: {
+    readonly small: {
+        readonly stiffness: 300;
+        readonly damping: 20;
+    };
+    readonly blob: {
+        readonly stiffness: 150;
+        readonly damping: 25;
+    };
+    readonly tall: {
+        readonly stiffness: 80;
+        readonly damping: 30;
+    };
+};
+export declare const bodyTransition: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+};
+export declare const clickTransition: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+};

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

@@ -0,0 +1,98 @@
+// Eyelid variants — controls how much the eye is covered
+// scaleY: 0 = fully open, 1 = fully closed
+const eyelidVariants = {
+    idle: { scaleY: 0 },
+    email: { scaleY: 0 },
+    password: { scaleY: 1 },
+    peek: { scaleY: 0.6 },
+    surprised: { scaleY: 0 }, // wide open
+    love: { scaleY: 0.65 }, // happy squint ^_^
+    excited: { scaleY: 0 }, // wide open
+};
+// Body sway variants per character
+const blobBodyVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: 2, y: -2 },
+    password: { rotate: -1, y: 2, scale: 0.97 },
+    peek: { rotate: 3, y: -1 },
+    surprised: { rotate: 0, y: -8, scale: 1.05 }, // jump up, puff out
+    love: { rotate: 0, y: 0 },
+    excited: { rotate: 0, y: 0 },
+};
+const tallBodyVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: -1.5, y: 0 },
+    password: { rotate: 0, y: 3, scale: 0.96 },
+    peek: { rotate: 2, y: -2 },
+    surprised: { rotate: 0, y: 0 },
+    love: { rotate: -2, y: -3, scale: 1.03 }, // slight lean, puff up
+    excited: { rotate: 0, y: 0 },
+};
+const smallBodyVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: 3, y: -3 },
+    password: { rotate: -2, y: 1, scale: 0.95 },
+    peek: { rotate: -3, y: -2 },
+    surprised: { rotate: 0, y: 0 },
+    love: { rotate: 0, y: 0 },
+    excited: { rotate: 5, y: -10, scale: 1.08 }, // big bounce, spin
+};
+// Mouth paths for each character per state
+// All paths use M + Q for smooth interpolation between states
+const blobMouthPaths = {
+    idle: 'M -10 0 Q 0 8 10 0', // wide gentle smile
+    email: 'M -12 -2 Q 0 12 12 -2', // big happy smile
+    password: 'M -6 0 Q 0 2 6 0', // flat/neutral
+    peek: 'M -8 0 Q 0 5 8 0', // small smirk
+    surprised: 'M -5 -4 Q 0 10 5 -4', // round "O" mouth
+    love: 'M -10 0 Q 0 8 10 0', // gentle smile
+    excited: 'M -12 -2 Q 0 12 12 -2', // big grin
+};
+const tallMouthPaths = {
+    idle: 'M -6 0 Q 0 3 6 0', // subtle relaxed smile
+    email: 'M -10 -1 Q 0 10 10 -1', // big happy smile
+    password: 'M -5 0 Q 0 0 5 0', // flat line (Q-based for animation)
+    peek: 'M -5 0 Q 2 6 7 -1', // asymmetric smirk
+    surprised: 'M -5 -3 Q 0 8 5 -3', // small O
+    love: 'M -10 -2 Q 0 12 10 -2', // wide beaming smile
+    excited: 'M -8 -1 Q 0 10 8 -1', // happy grin
+};
+const smallMouthPaths = {
+    idle: 'M -7 0 Q 0 6 7 0', // sweet smile
+    email: 'M -9 -1 Q 0 9 9 -1', // big grin
+    password: 'M -4 0 Q 0 1 4 0', // tiny neutral
+    peek: 'M -4 1 Q 1 6 6 0', // cheeky smirk
+    surprised: 'M -4 -3 Q 0 8 4 -3', // little O
+    love: 'M -7 0 Q 0 6 7 0', // sweet smile
+    excited: 'M -10 -3 Q 0 14 10 -3', // huge open grin
+};
+// Eyebrow angles for Tall character
+const eyebrowVariants = {
+    idle: { rotate: 0, y: 0 },
+    email: { rotate: -5, y: -2 },
+    password: { rotate: 8, y: 2 },
+    peek: { rotate: -10, y: -1 },
+    surprised: { rotate: -12, y: -4 }, // raised high
+    love: { rotate: -6, y: -2 }, // gently raised
+    excited: { rotate: -8, y: -3 }, // raised
+};
+// Spring configs per character for mouse tracking
+const springConfigs = {
+    small: { stiffness: 300, damping: 20 },
+    blob: { stiffness: 150, damping: 25 },
+    tall: { stiffness: 80, damping: 30 },
+};
+// Body spring for state transitions
+const bodyTransition = {
+    type: 'spring',
+    stiffness: 200,
+    damping: 20,
+};
+// Bouncier transition for click reactions
+const clickTransition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 15,
+};
+
+export { blobBodyVariants, blobMouthPaths, bodyTransition, clickTransition, eyebrowVariants, eyelidVariants, smallBodyVariants, smallMouthPaths, springConfigs, tallBodyVariants, tallMouthPaths };

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

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

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { springConfigs } from './InteractiveCharacters.animations.js';
+import { useMouseTracking } from './hooks/useMouseTracking.js';
+import { useIdleAnimation } from './hooks/useIdleAnimation.js';
+import { useBlink } from './hooks/useBlink.js';
+import { BlobCharacter } from './characters/BlobCharacter.js';
+import { TallCharacter } from './characters/TallCharacter.js';
+import { SmallCharacter } from './characters/SmallCharacter.js';
+
+const sizeMap = {
+    sm: 'w-[200px]',
+    md: 'w-[320px]',
+    lg: 'w-[400px]',
+};
+/** Click reaction states per character */
+const CLICK_REACTIONS = {
+    blob: 'surprised',
+    tall: 'love',
+    small: 'excited',
+};
+/** How long click reactions last (ms) */
+const CLICK_DURATION = 1500;
+const InteractiveCharacters = ({ state = 'idle', trackMouse = true, size = 'md', className, }) => {
+    const svgRef = useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    const clickTimeoutRef = useRef(null);
+    const [clickedChar, setClickedChar] = useState(null);
+    const handleCharacterClick = useCallback((character) => {
+        if (clickTimeoutRef.current)
+            clearTimeout(clickTimeoutRef.current);
+        setClickedChar(character);
+        clickTimeoutRef.current = setTimeout(() => setClickedChar(null), CLICK_DURATION);
+    }, []);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (clickTimeoutRef.current)
+                clearTimeout(clickTimeoutRef.current);
+        };
+    }, []);
+    // Determine effective state per character (click overrides form state)
+    const blobState = clickedChar === 'blob' ? CLICK_REACTIONS.blob : state;
+    const tallState = clickedChar === 'tall' ? CLICK_REACTIONS.tall : state;
+    const smallState = clickedChar === 'small' ? CLICK_REACTIONS.small : state;
+    const isTrackingEnabled = trackMouse && state !== 'password' && !shouldReduceMotion;
+    const isIdleAnimated = !shouldReduceMotion;
+    // Mouse tracking — different spring configs per character
+    const blobEye = useMouseTracking({
+        containerRef: svgRef,
+        enabled: isTrackingEnabled,
+        ...springConfigs.blob,
+    });
+    const tallEye = useMouseTracking({
+        containerRef: svgRef,
+        enabled: isTrackingEnabled,
+        ...springConfigs.tall,
+    });
+    const smallEye = useMouseTracking({
+        containerRef: svgRef,
+        enabled: isTrackingEnabled,
+        ...springConfigs.small,
+    });
+    // Idle sway/breathing/head — each character at different rates & phase offsets
+    const blobIdle = useIdleAnimation({
+        enabled: isIdleAnimated,
+        swayAmount: 1.5,
+        swaySpeed: 0.8,
+        breathAmount: 0.008,
+        headTiltAmount: 3,
+        headNudgeAmount: 1.5,
+        phaseOffset: 0,
+    });
+    const tallIdle = useIdleAnimation({
+        enabled: isIdleAnimated,
+        swayAmount: 1,
+        swaySpeed: 0.6,
+        breathAmount: 0.006,
+        headTiltAmount: 2,
+        headNudgeAmount: 1,
+        phaseOffset: 2.5,
+    });
+    const smallIdle = useIdleAnimation({
+        enabled: isIdleAnimated,
+        swayAmount: 2.5,
+        swaySpeed: 1.2,
+        breathAmount: 0.012,
+        headTiltAmount: 4,
+        headNudgeAmount: 2,
+        phaseOffset: 5,
+    });
+    // Blink — disable during password/peek and click reactions
+    const canBlinkBlob = blobState === 'idle' || blobState === 'email';
+    const canBlinkTall = tallState === 'idle' || tallState === 'email';
+    const canBlinkSmall = smallState === 'idle' || smallState === 'email';
+    const blobBlink = useBlink({ enabled: canBlinkBlob, minInterval: 2500, maxInterval: 5000 });
+    const tallBlink = useBlink({ enabled: canBlinkTall, minInterval: 3000, maxInterval: 6000 });
+    const smallBlink = useBlink({ enabled: canBlinkSmall, minInterval: 1800, maxInterval: 4000 });
+    return (jsx("div", { className: cn(sizeMap[size], className), "data-state": state, children: jsxs("svg", { ref: svgRef, viewBox: "0 0 400 180", xmlns: "http://www.w3.org/2000/svg", className: "w-full h-auto", role: "img", "aria-label": "Interactive characters that react to form input", children: [jsx("g", { transform: "translate(200, 170)", className: "cursor-pointer", children: jsx(TallCharacter, { state: tallState, eyeOffset: { x: tallEye.x, y: tallEye.y }, idle: tallIdle, blinkAmount: tallBlink, onClick: () => handleCharacterClick('tall') }) }), jsx("g", { transform: "translate(100, 170)", className: "cursor-pointer", children: jsx(BlobCharacter, { state: blobState, eyeOffset: { x: blobEye.x, y: blobEye.y }, idle: blobIdle, blinkAmount: blobBlink, onClick: () => handleCharacterClick('blob') }) }), jsx("g", { transform: "translate(310, 170)", className: "cursor-pointer", children: jsx(SmallCharacter, { state: smallState, eyeOffset: { x: smallEye.x, y: smallEye.y }, idle: smallIdle, blinkAmount: smallBlink, onClick: () => handleCharacterClick('small') }) })] }) }));
+};
+
+export { InteractiveCharacters };

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

@@ -0,0 +1,30 @@
+import type { MotionValue } from 'motion/react';
+export type CharacterState = 'idle' | 'email' | 'password' | 'peek' | 'surprised' | 'love' | 'excited';
+export type CharacterSize = 'sm' | 'md' | 'lg';
+export interface InteractiveCharactersProps {
+    /** Current character state — controls expressions and animations */
+    state?: CharacterState;
+    /** Enable mouse/cursor tracking for eye movement (default: true) */
+    trackMouse?: boolean;
+    /** Size preset (default: 'md') */
+    size?: CharacterSize;
+    /** Additional class names for the container */
+    className?: string;
+}
+export interface CharacterProps {
+    state: CharacterState;
+    eyeOffset: {
+        x: MotionValue<number>;
+        y: MotionValue<number>;
+    };
+    idle: {
+        sway: MotionValue<number>;
+        bob: MotionValue<number>;
+        breath: MotionValue<number>;
+        headTilt: MotionValue<number>;
+        headX: MotionValue<number>;
+        headY: MotionValue<number>;
+    };
+    blinkAmount: MotionValue<number>;
+    onClick?: () => void;
+}

package/dist/components/effects/InteractiveCharacters/characters/BlobCharacter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CharacterProps } from '../InteractiveCharacters.types';
+export declare const BlobCharacter: React.FC<CharacterProps>;

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

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    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);
+    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
+    // Combine idle head movement with cursor tracking for head turning
+    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.5);
+    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.3);
+    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.5);
+    const stateEyelid = eyelidVariants[state].scaleY;
+    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
+    const isClickReaction = CLICK_STATES.has(state);
+    const transition = isClickReaction ? clickTransition : bodyTransition;
+    return (jsxs(motion.g, { animate: state, variants: blobBodyVariants, transition: transition, style: {
+            originX: '50%',
+            originY: '100%',
+            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: {
+                    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)" })] })] }));
+};
+
+export { BlobCharacter };

package/dist/components/effects/InteractiveCharacters/characters/SmallCharacter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CharacterProps } from '../InteractiveCharacters.types';
+export declare const SmallCharacter: React.FC<CharacterProps>;

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

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const SmallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    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);
+    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
+    // Combine idle head movement with cursor tracking for head turning
+    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.6);
+    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.35);
+    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.6);
+    const stateEyelid = eyelidVariants[state].scaleY;
+    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
+    const isClickReaction = CLICK_STATES.has(state);
+    const transition = isClickReaction ? clickTransition : bodyTransition;
+    return (jsxs(motion.g, { animate: state, variants: smallBodyVariants, transition: transition, style: {
+            originX: '50%',
+            originY: '100%',
+            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: {
+                    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)" })] })] }));
+};
+
+export { SmallCharacter };

package/dist/components/effects/InteractiveCharacters/characters/TallCharacter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CharacterProps } from '../InteractiveCharacters.types';
+export declare const TallCharacter: React.FC<CharacterProps>;

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 CLICK_STATES = new Set(['surprised', 'love', 'excited']);
+const TallCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    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);
+    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
+    // Combine idle head movement with cursor tracking for head turning
+    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.4);
+    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.25);
+    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.4);
+    const stateEyelid = eyelidVariants[state].scaleY;
+    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
+    const eyebrow = eyebrowVariants[state];
+    const isClickReaction = CLICK_STATES.has(state);
+    const transition = isClickReaction ? clickTransition : bodyTransition;
+    return (jsxs(motion.g, { animate: state, variants: tallBodyVariants, transition: transition, style: {
+            originX: '50%',
+            originY: '100%',
+            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: {
+                    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)" })] })] }));
+};
+
+export { TallCharacter };