flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/core/Accordion/AccordionContent.js

@@ -1,11 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 import { useAccordionItemContext } from './AccordionItem.js';
+import { AnimatePresence, motion } from 'motion/react';
 import { accordionAnimations, accordionContentAnimations } from './Accordion.animations.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 var AccordionContent = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);

package/dist/components/core/Accordion/AccordionItem.js

@@ -1,4 +1,4 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';

package/dist/components/core/Accordion/AccordionTrigger.js

@@ -1,10 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 import { useAccordionItemContext } from './AccordionItem.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/PlusIcon.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { motion } from 'motion/react';
+import { PlusIcon } from '@heroicons/react/24/outline';
 
 var AccordionTrigger = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
@@ -16,7 +16,7 @@ var AccordionTrigger = React__default.forwardRef(function (_a, ref) {
                 duration: 0.2,
                 ease: [0.4, 0.0, 0.2, 1]
             }, className: "flex items-center justify-center" },
-            React__default.createElement(ForwardRef, { className: "size-4", strokeWidth: 2 }))));
+            React__default.createElement(PlusIcon, { className: "size-4", strokeWidth: 2 }))));
 });
 AccordionTrigger.displayName = "AccordionTrigger";
 

package/dist/components/core/Alert/Alert.js

@@ -1,38 +1,34 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { alertTheme } from './Alert.theme.js';
+import { XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import { Button } from '../Button/Button.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/ExclamationTriangleIcon.js';
-import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js';
-import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/solid/esm/InformationCircleIcon.js';
-import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js';
 
 var colorIcons = {
-    neutral: ForwardRef$3,
-    dark: ForwardRef$3,
-    primary: ForwardRef$3,
-    success: ForwardRef$2,
-    warning: ForwardRef$1,
-    danger: ForwardRef,
+    neutral: InformationCircleIcon,
+    dark: InformationCircleIcon,
+    primary: InformationCircleIcon,
+    success: CheckCircleIcon,
+    warning: ExclamationTriangleIcon,
+    danger: XCircleIcon,
 };
 var Alert = React__default.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var _f = _a.variant, variant = _f === void 0 ? "filled" : _f, _g = _a.color, color = _g === void 0 ? "primary" : _g, title = _a.title, description = _a.description, _h = _a.dismissible, dismissible = _h === void 0 ? false : _h, icon = _a.icon, _j = _a.showIcon, showIcon = _j === void 0 ? true : _j, onDismiss = _a.onDismiss, className = _a.className, _k = _a.theme, customTheme = _k === void 0 ? {} : _k, children = _a.children, props = __rest(_a, ["variant", "color", "title", "description", "dismissible", "icon", "showIcon", "onDismiss", "className", "theme", "children"]);
+    var _b, _c;
+    var _d = _a.color, color = _d === void 0 ? "primary" : _d, title = _a.title, description = _a.description, _e = _a.dismissible, dismissible = _e === void 0 ? false : _e, icon = _a.icon, _f = _a.showIcon, showIcon = _f === void 0 ? true : _f, onDismiss = _a.onDismiss, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, children = _a.children, props = __rest(_a, ["color", "title", "description", "dismissible", "icon", "showIcon", "onDismiss", "className", "theme", "children"]);
     var IconComponent = colorIcons[color];
     var handleDismiss = function () {
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     };
     var hasContent = title || description || children;
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn(alertTheme.baseStyle, ((_b = alertTheme.variants) === null || _b === void 0 ? void 0 : _b[variant]) || "", ((_c = alertTheme.colors) === null || _c === void 0 ? void 0 : _c[color]) || "", customTheme.baseStyle, (_d = customTheme.variants) === null || _d === void 0 ? void 0 : _d[variant], (_e = customTheme.colors) === null || _e === void 0 ? void 0 : _e[color], className), role: "alert" }, props),
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(alertTheme.baseStyle, ((_b = alertTheme.colors) === null || _b === void 0 ? void 0 : _b[color]) || "", customTheme.baseStyle, (_c = customTheme.colors) === null || _c === void 0 ? void 0 : _c[color], className), role: "alert" }, props),
         showIcon && (React__default.createElement("div", { className: "flex-shrink-0 size-5 mt-0.5" }, icon || React__default.createElement(IconComponent, { className: "size-5" }))),
         hasContent && (React__default.createElement("div", { className: "flex-1 min-w-0" },
-            title && (React__default.createElement("div", { className: "font-medium text-sm" }, title)),
+            title && React__default.createElement("div", { className: "font-medium text-sm" }, title),
             description && (React__default.createElement("div", { className: "text-sm mt-0.5 text-[var(--color-text-secondary)]" }, description)),
-            children && (React__default.createElement("div", { className: "mt-1" }, children)))),
+            children && React__default.createElement("div", { className: "mt-1" }, children))),
         dismissible && (React__default.createElement(Button, { variant: "link", color: "primary", size: "sm", iconOnly: true, onClick: handleDismiss, className: "absolute top-2 right-2 flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity cursor-pointer" },
-            React__default.createElement(ForwardRef$4, { className: "size-4" })))));
+            React__default.createElement(XMarkIcon, { className: "size-4" })))));
 });
 Alert.displayName = "Alert";
 

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

@@ -1,13 +1,5 @@
 var alertTheme = {
-    baseStyle: "relative flex items-start gap-3 rounded-xl p-4 text-sm glass-effect",
-    /**
-     * Visual style variants (appearance treatment)
-     */
-    variants: {
-        filled: "ring-[1px]",
-        outline: "bg-transparent ring-2",
-        soft: "ring-[1px] ring-transparent",
-    },
+    baseStyle: "relative flex items-start gap-3 rounded-xl p-4 text-sm glass-effect ring-[1px]",
     /**
      * Semantic colors with ring and background styling
      */

package/dist/components/core/Alert/Alert.types.d.ts

@@ -1,25 +1,17 @@
-import { HTMLAttributes, ReactNode } from 'react';
-/**
- * Alert visual variants (appearance treatment)
- */
-export type AlertVariant = 'filled' | 'outline' | 'soft';
+import { HTMLAttributes, ReactNode } from "react";
 /**
  * Alert semantic colors (intent)
  */
-export type AlertColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export type AlertColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
 export interface AlertTheme {
     baseStyle: string;
-    variants: Record<AlertVariant, string>;
     colors: Record<AlertColor, string>;
 }
 export interface AlertThemeOverrides {
     baseStyle?: string;
-    variants?: Partial<Record<AlertVariant, string>>;
     colors?: Partial<Record<AlertColor, string>>;
 }
 export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-    /** Visual style variant (filled, outline, soft) */
-    variant?: AlertVariant;
     /** Semantic color (neutral, dark, primary, success, warning, danger) */
     color?: AlertColor;
     /** The main title/message of the alert */

package/dist/components/core/AlertDialog/AlertDialog.js

@@ -0,0 +1,29 @@
+import React__default, { useState, isValidElement, cloneElement } from 'react';
+import { Modal } from '../Modal/Modal.js';
+import { cn } from '../../../utils/cn.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+var AlertDialog = function (_a) {
+    var trigger = _a.trigger, icon = _a.icon, title = _a.title, description = _a.description, footer = _a.footer, className = _a.className;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handleOpen = function () { return setIsOpen(true); };
+    var handleClose = function () { return setIsOpen(false); };
+    var triggerElement = isValidElement(trigger)
+        ? cloneElement(trigger, { onClick: handleOpen })
+        : null;
+    return (React__default.createElement(React__default.Fragment, null,
+        triggerElement,
+        React__default.createElement(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, className: cn("!overflow-visible", className) },
+            React__default.createElement(Modal.Header, null,
+                icon && (React__default.createElement("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5" }, icon)),
+                React__default.createElement(Modal.Title, null, title)),
+            React__default.createElement(Modal.Body, { className: "pt-2" },
+                React__default.createElement("div", { className: "text-[var(--color-text-secondary)] text-sm" }, description)),
+            footer && (React__default.createElement(Modal.Footer, { className: "pb-6" }, footer(handleClose))))));
+};
+AlertDialog.displayName = "AlertDialog";
+
+export { AlertDialog };

package/dist/components/core/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { avatarTheme } from './Avatar.theme.js';
@@ -24,7 +24,7 @@ var Avatar = React__default.forwardRef(function (_a, ref) {
     var handleImageError = function () {
         if (retries < retryCount) {
             // Log error and retry
-            if (process.env.NODE_ENV !== 'production') {
+            if (process.env.NODE_ENV !== "production") {
                 // eslint-disable-next-line no-console
                 console.warn("Avatar image load failed, retrying (".concat(retries + 1, "/").concat(retryCount, ")..."));
             }
@@ -36,7 +36,7 @@ var Avatar = React__default.forwardRef(function (_a, ref) {
         }
         else {
             // Max retries reached, show fallback
-            if (process.env.NODE_ENV !== 'production') {
+            if (process.env.NODE_ENV !== "production") {
                 // eslint-disable-next-line no-console
                 console.warn("Avatar image load failed after maximum retries");
             }
@@ -65,29 +65,29 @@ var Avatar = React__default.forwardRef(function (_a, ref) {
     var getStatusSize = function () {
         switch (size) {
             case "xs":
-                return "size-1.5 right-0 bottom-0.5";
+                return "size-1.5 left-0 bottom-0.5";
             case "sm":
-                return "size-2 right-0 bottom-1";
+                return "size-2 left-0 bottom-0";
             case "md":
-                return "size-2.5 right-0 bottom-1";
+                return "size-2 left-0 bottom-0";
             case "lg":
-                return "size-3 right-0 bottom-1";
+                return "size-2.5 left-0 bottom-0";
             case "xl":
-                return "size-3.5 right-0 bottom-1";
+                return "size-3 left-0 bottom-0";
             default:
-                return "size-2.5 right-0 bottom-1";
+                return "size-2 left-0 bottom-0";
         }
     };
     // Create full accessibility label including context if provided
-    var accessibilityLabel = contextualLabel ? "".concat(alt).concat(contextualLabel) : alt;
+    var accessibilityLabel = contextualLabel
+        ? "".concat(alt).concat(contextualLabel)
+        : alt;
     // Determine appropriate ARIA role
     var ariaRole = role || (src ? undefined : "img");
     // Avatar content to potentially wrap in tooltip
-    var avatarContent = (React__default.createElement("div", __assign({ ref: ref, className: cn("relative inline-flex avatar-wrapper", groupPosition // Apply group positioning classes if provided
-        ), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false" }, props),
-        React__default.createElement("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className // User overrides take precedence
-            ), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size }, src && !imageError ? (React__default.createElement("img", { src: src, alt: alt, className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (React__default.createElement("div", { className: "avatar-fallback" }, getFallbackContent()))),
-        status !== "none" && (React__default.createElement("span", { className: cn("absolute rounded-full ring-2 ring-white", getStatusSize(), avatarTheme.statuses[status]), "aria-label": "Status: ".concat(status), role: "status", "data-status": status }))));
+    var avatarContent = (React__default.createElement("div", __assign({ ref: ref, className: cn("relative inline-flex avatar-wrapper", groupPosition), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false" }, props),
+        React__default.createElement("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size }, src && !imageError ? (React__default.createElement("img", { src: src, alt: alt, className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (React__default.createElement("div", { className: "avatar-fallback" }, getFallbackContent()))),
+        status !== "none" && (React__default.createElement("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": "Status: ".concat(status), role: "status", "data-status": status }))));
     // Conditionally wrap in tooltip
     if (showTooltip && alt && alt !== "Avatar") {
         return (React__default.createElement(Tooltip, { content: alt, placement: "top" }, avatarContent));

package/dist/components/core/Avatar/Avatar.theme.d.ts

@@ -1,4 +1,4 @@
-import { AvatarSize, AvatarStatus } from './Avatar.types';
+import { AvatarSize, AvatarStatus } from "./Avatar.types";
 /**
  * Internal theme structure for the Avatar component
  */

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

@@ -3,22 +3,22 @@
  */
 var avatarTheme = {
     // Base styles for the avatar element
-    baseStyle: 'relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-semibold tracking-tighter rounded-[var(--avatar-rounded)] ring-2 ring-[var(--color-primary)]/10 border border-white transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 glass-effect',
+    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-semibold tracking-tighter rounded-[var(--avatar-rounded)] ring-2 ring-[var(--color-primary)]/10 border border-[var(--border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 glass-effect",
     // Size variants using CSS variables
     sizes: {
-        xs: 'size-[var(--avatar-size-xs)] text-[var(--avatar-text-xs)]',
-        sm: 'size-[var(--avatar-size-sm)] text-[var(--avatar-text-sm)]',
-        md: 'size-[var(--avatar-size-md)] text-[var(--avatar-text-md)]',
-        lg: 'size-[var(--avatar-size-lg)] text-[var(--avatar-text-lg)]',
-        xl: 'size-[var(--avatar-size-xl)] text-[var(--avatar-text-xl)]',
+        xs: "size-[var(--avatar-size-xs)] text-[var(--avatar-text-xs)]",
+        sm: "size-[var(--avatar-size-sm)] text-[var(--avatar-text-sm)]",
+        md: "size-[var(--avatar-size-md)] text-[var(--avatar-text-md)]",
+        lg: "size-[var(--avatar-size-lg)] text-[var(--avatar-text-lg)]",
+        xl: "size-[var(--avatar-size-xl)] text-[var(--avatar-text-xl)]",
     },
     // Status indicator styles
     statuses: {
-        online: 'bg-[var(--color-success)]',
-        offline: 'bg-neutral-400',
-        busy: 'bg-[var(--color-danger)]',
-        away: 'bg-[var(--color-warning)]',
-        none: '',
+        online: "bg-[var(--color-success)]",
+        offline: "bg-neutral-400",
+        busy: "bg-[var(--color-danger)]",
+        away: "bg-[var(--color-warning)]",
+        none: "",
     },
 };
 

package/dist/components/core/AvatarGroup/AvatarGroup.animations.d.ts

@@ -1,11 +1,12 @@
 import { Variants } from "motion/react";
-import { AvatarGroupDirection } from "./AvatarGroup.types";
 /**
  * Animation variants for AvatarGroup hover effects
- * Creates a creative sliding and focus effect where hovered avatars scale up
- * while non-hovered avatars slide closer together and fade slightly
+ * Creates a "Fan Pop" effect where:
+ * 1. Hovered avatar leaps forward (scales up + lifts)
+ * 2. Neighboring avatars rotate slightly away ("bow out") and recede
+ * 3. Keeps visual footprint compact while adding dynamic interest
  */
-export declare const getAvatarGroupVariants: (direction?: AvatarGroupDirection, shouldReduceMotion?: boolean | null, enableAnimations?: boolean) => Variants;
+export declare const getAvatarGroupVariants: (shouldReduceMotion?: boolean | null, enableAnimations?: boolean) => Variants;
 /**
  * Determines which animation state to use based on hover index
  */

package/dist/components/core/AvatarGroup/AvatarGroup.animations.js

@@ -1,17 +1,19 @@
 /**
  * Animation variants for AvatarGroup hover effects
- * Creates a creative sliding and focus effect where hovered avatars scale up
- * while non-hovered avatars slide closer together and fade slightly
+ * Creates a "Fan Pop" effect where:
+ * 1. Hovered avatar leaps forward (scales up + lifts)
+ * 2. Neighboring avatars rotate slightly away ("bow out") and recede
+ * 3. Keeps visual footprint compact while adding dynamic interest
  */
-var getAvatarGroupVariants = function (direction, shouldReduceMotion, enableAnimations) {
+var getAvatarGroupVariants = function (shouldReduceMotion, enableAnimations) {
     if (shouldReduceMotion === void 0) { shouldReduceMotion = false; }
     if (enableAnimations === void 0) { enableAnimations = true; }
     if (shouldReduceMotion || !enableAnimations) {
         return {
-            initial: { scale: 1, opacity: 1, zIndex: 10 },
-            hover: { scale: 1, zIndex: 10 }, // Keep same z-index when animations disabled
-            notHovered: { scale: 1, opacity: 1, zIndex: 10 },
-            default: { scale: 1, opacity: 1, zIndex: 10 }
+            initial: { scale: 1, opacity: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
+            hover: { scale: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
+            notHovered: { scale: 1, opacity: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
+            default: { scale: 1, opacity: 1, zIndex: 10, x: 0, y: 0, rotate: 0 },
         };
     }
     return {
@@ -19,48 +21,74 @@ var getAvatarGroupVariants = function (direction, shouldReduceMotion, enableAnim
             scale: 1,
             opacity: 1,
             x: 0,
-            filter: "blur(0px)",
-            zIndex: 10
+            y: 0,
+            rotate: 0,
+            filter: "saturate(1)",
+            zIndex: 10,
         },
         hover: {
             scale: 1.05,
+            y: -2,
+            rotate: 0,
             opacity: 1,
-            x: 0,
-            filter: "blur(0px)",
-            zIndex: 20,
+            filter: "saturate(1)",
+            zIndex: 50,
             transition: {
                 type: "spring",
                 stiffness: 400,
-                damping: 25,
-                duration: 0.2
-            }
+                damping: 15,
+                mass: 0.8,
+            },
         },
-        notHovered: {
-            scale: 0.95,
-            //   opacity: 0.4,
-            //   x: direction === "row" ? -8 : 8, // Slide towards the center
-            filter: "blur(0px) saturate(0) brightness(1.15)",
-            zIndex: 5,
-            transition: {
-                type: "spring",
-                stiffness: 300,
-                damping: 20,
-                duration: 0.3
+        notHovered: function (custom) {
+            var index = custom.index, hoveredIndex = custom.hoveredIndex, direction = custom.direction;
+            if (hoveredIndex === null)
+                return {};
+            // Calculate relative position
+            var isBefore = index < hoveredIndex;
+            var isRowReverse = direction === "row-reverse";
+            // Fan rotation: tilt away from the focused item
+            // If before: tilt left (-deg). If after: tilt right (+deg).
+            var rotateAmount = 15;
+            var rotation = 0;
+            var xOffset = 0;
+            if (!isRowReverse) {
+                rotation = isBefore ? -rotateAmount : rotateAmount;
+                // Slight nudge to separate just a tiny bit without claiming space
+                xOffset = isBefore ? -2 : 2;
+            }
+            else {
+                rotation = isBefore ? rotateAmount : -rotateAmount;
+                xOffset = isBefore ? 2 : -2;
             }
+            return {
+                scale: 0.85,
+                y: 4, // Sink slightly
+                x: xOffset,
+                rotate: rotation,
+                filter: "saturate(0)", // Black and white, no blur
+                zIndex: 5, // Lower z-index for non-hovered items
+                transition: {
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 20,
+                },
+            };
         },
         default: {
             scale: 1,
             opacity: 1,
             x: 0,
-            filter: "blur(0px)",
+            y: 0,
+            rotate: 0,
+            filter: "saturate(1)",
             zIndex: 10,
             transition: {
                 type: "spring",
                 stiffness: 300,
                 damping: 20,
-                duration: 0.3
-            }
-        }
+            },
+        },
     };
 };
 /**
@@ -71,8 +99,8 @@ var getAnimationState = function (currentIndex, hoveredIndex, enableAnimations)
         return "default";
     if (hoveredIndex === currentIndex)
         return "hover";
-    if (hoveredIndex !== null && hoveredIndex !== currentIndex)
-        return "notHovered";
+    if (hoveredIndex !== null)
+        return "notHovered"; // Apply to ALL other items
     return "default";
 };
 

package/dist/components/core/AvatarGroup/AvatarGroup.js

@@ -1,11 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { Avatar } from '../Avatar/Avatar.js';
 import { cn } from '../../../utils/cn.js';
 import { avatarGroupTheme } from './AvatarGroup.theme.js';
 import { getAnimationState, getAvatarGroupVariants } from './AvatarGroup.animations.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 var AvatarGroup = React__default.forwardRef(function (_a, ref) {
     var _b = _a.avatars, avatars = _b === void 0 ? [] : _b, _c = _a.max, max = _c === void 0 ? 5 : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.spacing, spacing = _e === void 0 ? "normal" : _e, _f = _a.direction, direction = _f === void 0 ? "row" : _f, overflowIndicator = _a.overflowIndicator, className = _a.className, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? "Group of users" : _g, _h = _a.shouldAnimate, shouldAnimate = _h === void 0 ? true : _h, props = __rest(_a, ["avatars", "max", "size", "spacing", "direction", "overflowIndicator", "className", "ariaLabel", "shouldAnimate"]);
@@ -17,7 +16,9 @@ var AvatarGroup = React__default.forwardRef(function (_a, ref) {
         var visibleAvatars = avatars.slice(0, max);
         var overflowCount = avatars.length > max ? avatars.length - max : 0;
         var spacingClass = avatarGroupTheme.spacingStyles[spacing];
-        var spacingHoverClass = enableAnimations ? avatarGroupTheme.spacingHoverStyles[spacing] : '';
+        var spacingHoverClass = enableAnimations
+            ? avatarGroupTheme.spacingHoverStyles[spacing]
+            : "";
         var directionClass = direction === "row-reverse" ? "flex-row-reverse" : "flex-row";
         var totalPeople = avatars.length;
         var groupDescription = avatars
@@ -30,24 +31,30 @@ var AvatarGroup = React__default.forwardRef(function (_a, ref) {
             spacingHoverClass: spacingHoverClass,
             directionClass: directionClass,
             totalPeople: totalPeople,
-            groupDescription: groupDescription
+            groupDescription: groupDescription,
         };
     }, [avatars, max, spacing, direction, enableAnimations]);
     var visibleAvatars = memoizedData.visibleAvatars, overflowCount = memoizedData.overflowCount, spacingClass = memoizedData.spacingClass, spacingHoverClass = memoizedData.spacingHoverClass, directionClass = memoizedData.directionClass, totalPeople = memoizedData.totalPeople, groupDescription = memoizedData.groupDescription;
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className // User overrides take precedence
-        ), role: "group", "aria-label": ariaLabel, "aria-description": "Contains ".concat(totalPeople, " users: ").concat(groupDescription), "data-size": size, "data-spacing": spacing, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: function () { return enableAnimations && setHoveredIndex(null); } }, props),
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className), role: "group", "aria-label": ariaLabel, "aria-description": "Contains ".concat(totalPeople, " users: ").concat(groupDescription), "data-size": size, "data-spacing": spacing, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: function () { return enableAnimations && setHoveredIndex(null); } }, props),
         visibleAvatars.map(function (avatarProps, index) {
             // Create contextual label for individual avatars in a group
             var position = index + 1;
-            var contextLabel = avatarProps.contextualLabel ||
-                " (".concat(position, " of ").concat(totalPeople, ")");
+            var contextLabel = avatarProps.contextualLabel || " (".concat(position, " of ").concat(totalPeople, ")");
             var MotionDiv = enableAnimations ? motion.div : "div";
-            var motionProps = enableAnimations ? {
-                variants: getAvatarGroupVariants(direction, shouldReduceMotion, enableAnimations),
-                animate: getAnimationState(index, hoveredIndex, enableAnimations),
-                onHoverStart: function () { return setHoveredIndex(index); },
-                whileHover: "hover"
-            } : {};
+            var motionProps = enableAnimations
+                ? {
+                    custom: {
+                        index: index,
+                        hoveredIndex: hoveredIndex,
+                        direction: direction,
+                        totalPeople: visibleAvatars.length,
+                    },
+                    variants: getAvatarGroupVariants(shouldReduceMotion, enableAnimations),
+                    animate: getAnimationState(index, hoveredIndex, enableAnimations),
+                    onHoverStart: function () { return setHoveredIndex(index); },
+                    whileHover: "hover",
+                }
+                : {};
             return (React__default.createElement(MotionDiv, __assign({ key: index, className: cn(
                 // First avatar doesn't need negative margin
                 index > 0 ? spacingClass : "z-10", 
@@ -57,7 +64,8 @@ var AvatarGroup = React__default.forwardRef(function (_a, ref) {
                     // Ensure that groupPosition is not passed to avoid conflicts
                     groupPosition: undefined }))));
         }),
-        overflowCount > 0 && (React__default.createElement("div", { className: cn(spacingClass, enableAnimations && "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount }, overflowIndicator ? (overflowIndicator(overflowCount)) : (React__default.createElement(Avatar, { size: size, alt: "+".concat(overflowCount, " more"), fallback: React__default.createElement("span", null,
+        overflowCount > 0 && (React__default.createElement("div", { className: cn(spacingClass, enableAnimations &&
+                "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount }, overflowIndicator ? (overflowIndicator(overflowCount)) : (React__default.createElement(Avatar, { size: size, alt: "+".concat(overflowCount, " more"), fallback: React__default.createElement("span", null,
                 "+",
                 overflowCount), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": "+ ".concat(overflowCount, " more users") }))))));
 });

package/dist/components/core/AvatarGroup/AvatarGroup.theme.d.ts

@@ -1,4 +1,4 @@
-import { AvatarGroupSpacing } from './AvatarGroup.types';
+import { AvatarGroupSpacing } from "./AvatarGroup.types";
 /**
  * Internal theme structure for the AvatarGroup component
  */

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

@@ -3,21 +3,21 @@
  */
 var avatarGroupTheme = {
     // Base styles for the avatar group
-    baseStyle: 'flex items-start',
+    baseStyle: "flex items-start",
     // Spacing options - separated from hover effects
     spacingStyles: {
-        tight: '-ml-5 z-10',
-        normal: '-ml-3 z-10',
-        loose: '-ml-2 z-10',
+        tight: "-ml-5 z-10",
+        normal: "-ml-3 z-10",
+        loose: "-ml-2 z-10",
     },
     // Hover z-index effects - applied separately when animations enabled
     spacingHoverStyles: {
-        tight: 'hover:z-20',
-        normal: 'hover:z-20',
-        loose: 'hover:z-20',
+        tight: "hover:z-20",
+        normal: "hover:z-20",
+        loose: "hover:z-20",
     },
     // Overflow avatar styles
-    overflowAvatarStyle: 'bg-neutral-100 text-neutral-800 font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200',
+    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
 };
 
 export { avatarGroupTheme };