flikkui 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/components/charts/utils/color-utils.js

@@ -0,0 +1,175 @@
+/**
+ * Color utilities for chart components
+ * Handles color extraction, manipulation, and theme integration
+ */
+/**
+ * Extracts the fill color class from a combined class string
+ * @param classString - Combined class string like "fill-primary-base stroke-primary-base"
+ * @returns The fill class or empty string
+ */
+function extractFillClass(classString) {
+    var classes = classString.split(' ');
+    var fillClass = classes.find(function (cls) { return cls.startsWith('fill-'); });
+    return fillClass || '';
+}
+/**
+ * Extracts the stroke color class from a combined class string
+ * @param classString - Combined class string like "fill-primary-base stroke-primary-base"
+ * @returns The stroke class or empty string
+ */
+function extractStrokeClass(classString) {
+    var classes = classString.split(' ');
+    var strokeClass = classes.find(function (cls) { return cls.startsWith('stroke-'); });
+    return strokeClass || '';
+}
+/**
+ * Converts a Tailwind color class to a CSS variable
+ * @param colorClass - Tailwind color class like "fill-primary-base"
+ * @returns CSS variable string like "var(--color-primary-500)"
+ */
+function colorClassToVariable(colorClass) {
+    // Remove the prefix (fill-, stroke-, bg-, text-, etc.)
+    var colorPart = colorClass.replace(/^(fill-|stroke-|bg-|text-|border-)/, '');
+    // Convert to CSS variable format
+    if (colorPart.includes('-base')) {
+        return "var(--color-".concat(colorPart.replace('-base', '-500'), ")");
+    }
+    return "var(--color-".concat(colorPart, ")");
+}
+/**
+ * Combines multiple Tailwind classes into a single class string
+ * @param classes - Array of class strings
+ * @returns Combined class string
+ */
+function combineClasses() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+}
+/**
+ * Creates a color class string for chart elements
+ * @param baseColor - Base color (e.g., "primary", "warning")
+ * @param type - Type of element ("fill", "stroke", "both")
+ * @param shade - Color shade (e.g., "base", "400", "500")
+ * @returns Tailwind class string
+ */
+function createColorClass(baseColor, type, shade) {
+    if (type === void 0) { type = 'both'; }
+    if (shade === void 0) { shade = 'base'; }
+    var colorName = "".concat(baseColor, "-").concat(shade);
+    switch (type) {
+        case 'fill':
+            return "fill-".concat(colorName);
+        case 'stroke':
+            return "stroke-".concat(colorName);
+        case 'both':
+            return "fill-".concat(colorName, " stroke-").concat(colorName);
+        default:
+            return "fill-".concat(colorName, " stroke-").concat(colorName);
+    }
+}
+/**
+ * Generates a series of color classes for multiple data series
+ * @param baseColors - Array of base color names
+ * @param type - Type of element ("fill", "stroke", "both")
+ * @param shade - Color shade
+ * @returns Array of color class strings
+ */
+function generateSeriesColors(baseColors, type, shade) {
+    if (type === void 0) { type = 'both'; }
+    if (shade === void 0) { shade = 'base'; }
+    return baseColors.map(function (color) { return createColorClass(color, type, shade); });
+}
+/**
+ * Default color palette for charts
+ */
+var DEFAULT_CHART_COLORS = [
+    'primary',
+    'warning',
+    'success',
+    'danger',
+];
+/**
+ * Extended color palette for charts with more options
+ */
+var EXTENDED_CHART_COLORS = [
+    'primary',
+    'warning',
+    'success',
+    'danger',
+    'info',
+    'purple',
+    'pink',
+    'indigo',
+];
+/**
+ * Minimal color palette for subtle charts
+ */
+var MINIMAL_CHART_COLORS = [
+    'neutral',
+    'slate',
+    'gray',
+    'zinc',
+];
+/**
+ * Generate a color palette for charts
+ */
+function generateColorPalette(count, baseHue) {
+    if (baseHue === void 0) { baseHue = 200; }
+    var colors = [];
+    var saturation = 70;
+    var lightness = 50;
+    for (var i = 0; i < count; i++) {
+        var hue = (baseHue + (i * 360) / count) % 360;
+        colors.push("hsl(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%)"));
+    }
+    return colors;
+}
+/**
+ * Get contrast color (black or white) based on background color
+ */
+function getContrastColor(backgroundColor) {
+    // Convert hex to RGB
+    var hex = backgroundColor.replace('#', '');
+    var r = parseInt(hex.substr(0, 2), 16);
+    var g = parseInt(hex.substr(2, 2), 16);
+    var b = parseInt(hex.substr(4, 2), 16);
+    // Calculate luminance
+    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+}
+/**
+ * Comprehensive color mapping that handles all chart color class variations
+ * Returns CSS variable references to match actual chart element colors
+ * Only uses CSS variables that actually exist in the project
+ */
+var getColorValue = function (colorClass) {
+    // Normalize the color class by removing prefixes and handling variations
+    var normalizedClass = colorClass
+        .replace(/^(fill-|stroke-)/, '') // Remove fill- or stroke- prefix
+        .replace(/-(base|400|500|600)$/, ''); // Remove suffix variations
+    // Map to CSS variables that actually exist in global.css
+    var colorMap = {
+        // Primary colors (exists)
+        'primary': 'var(--color-primary-base)',
+        // Warning/Yellow colors (exists)
+        'warning': 'var(--color-warning-base)',
+        // Success/Green colors (exists)
+        'success': 'var(--color-success-base)',
+        // Error/Danger/Red colors (exists as danger)
+        'error': 'var(--color-danger-base)', // Map error to danger
+        'danger': 'var(--color-danger-base)',
+        // Fallbacks for colors that don't exist in CSS - use primary as fallback
+        'info': 'var(--color-primary-base)', // Fallback to primary
+        'secondary': 'var(--color-primary-base)', // Fallback to primary
+        // Neutral colors - fallback to primary
+        'neutral': 'var(--color-primary-base)',
+        'slate': 'var(--color-primary-base)',
+    };
+    // Return the CSS variable directly
+    return colorMap[normalizedClass] || colorMap['primary'];
+};
+
+export { DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, colorClassToVariable, combineClasses, createColorClass, extractFillClass, extractStrokeClass, generateColorPalette, generateSeriesColors, getColorValue, getContrastColor };

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

@@ -0,0 +1,45 @@
+/**
+ * Accordion animation variants for smooth, staggered open/close transitions
+ */
+var accordionAnimations = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        transition: {
+            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.25 }
+        }
+    },
+    open: {
+        height: 'auto',
+        opacity: 1,
+        transition: {
+            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.3, delay: 0.1 }
+        }
+    }
+};
+/**
+ * Content animation variants for subtle slide-in effect after container expands
+ */
+var accordionContentAnimations = {
+    collapsed: {
+        opacity: 0,
+        y: -10,
+        transition: {
+            y: { duration: 0.2, ease: 'easeOut' },
+            opacity: { duration: 0.2 }
+        }
+    },
+    open: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: 0.15, // Start after the container has begun expanding
+            y: { duration: 0.3, ease: 'easeOut' },
+            opacity: { duration: 0.3, ease: 'easeOut' }
+        }
+    }
+};
+
+export { accordionAnimations, accordionContentAnimations };

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

@@ -0,0 +1,52 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useContext, createContext, useState, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { accordionTheme } from './Accordion.theme.js';
+import { AccordionTrigger } from './AccordionTrigger.js';
+import { AccordionContent } from './AccordionContent.js';
+import { AccordionItem } from './AccordionItem.js';
+
+// Create context for the main Accordion component
+var AccordionContext = createContext(undefined);
+var useAccordionContext = function () {
+    var ctx = useContext(AccordionContext);
+    if (!ctx)
+        throw new Error("Accordion compound components must be used within <Accordion>");
+    return ctx;
+};
+var Accordion = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.type, type = _b === void 0 ? "single" : _b, _c = _a.collapsible, collapsible = _c === void 0 ? false : _c, defaultValue = _a.defaultValue, value = _a.value, onValueChange = _a.onValueChange, themeOverrides = _a.theme, props = __rest(_a, ["children", "className", "type", "collapsible", "defaultValue", "value", "onValueChange", "theme"]);
+    // State for uncontrolled component
+    var _d = useState(defaultValue || (type === "single" ? "" : [])), uncontrolledValue = _d[0], setUncontrolledValue = _d[1];
+    // Determine if component is controlled
+    var isControlled = value !== undefined;
+    var currentValue = isControlled ? value : uncontrolledValue;
+    // Handler for value changes
+    var handleValueChange = useCallback(function (newValue) {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    }, [isControlled, onValueChange]);
+    // Merge theme with any overrides
+    var theme = __assign(__assign({}, accordionTheme), (themeOverrides || {}));
+    // Context value to be provided to children
+    var contextValue = {
+        type: type,
+        collapsible: collapsible,
+        value: currentValue,
+        onValueChange: handleValueChange,
+        theme: theme,
+    };
+    return (React__default.createElement(AccordionContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ className: cn(theme.baseStyle, className, "accordion") }, props), children)));
+};
+Accordion.displayName = "Accordion";
+// Attach compound subcomponents
+var Accordion$1 = Object.assign(Accordion, {
+    Item: AccordionItem,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+});
+
+export { Accordion$1 as default, useAccordionContext };

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

@@ -0,0 +1,8 @@
+var accordionTheme = {
+    baseStyle: "w-full max-w-xl",
+    itemStyle: "border border-border rounded-[var(--form-rounded)] bg-white overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-lg data-[state=open]:shadow-neutral-500/10",
+    triggerStyle: "flex w-full items-center justify-between px-4 py-3 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-text-primary [&[data-state=open]>svg]:rotate-180",
+    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px]",
+};
+
+export { accordionTheme };

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

@@ -0,0 +1,25 @@
+import { __rest, __assign } from '../../../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 { 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"]);
+    var theme = useAccordionContext().theme;
+    var isOpen = useAccordionItemContext().isOpen;
+    // Filter out conflicting props to avoid type issues
+    rest.onDrag; rest.onDragEnd; rest.onDragStart; rest.onAnimationStart; rest.onAnimationEnd; rest.onTransitionEnd; rest.onTransitionStart; var safeProps = __rest(rest, ["onDrag", "onDragEnd", "onDragStart", "onAnimationStart", "onAnimationEnd", "onTransitionEnd", "onTransitionStart"]);
+    return (React__default.createElement(AnimatePresence, { initial: false }, isOpen && (React__default.createElement(motion.div, __assign({ ref: ref, className: cn(
+        // Default theme styles (can be overridden by className)
+        (theme === null || theme === void 0 ? void 0 : theme.contentStyle) || "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px]", "accordion-content overflow-hidden", 
+        // User className takes precedence
+        className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations }, safeProps),
+        React__default.createElement(motion.div, { className: "accordion-content-inner p-4", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed" }, children)))));
+});
+AccordionContent.displayName = "AccordionContent";
+
+export { AccordionContent };

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

@@ -0,0 +1,56 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useAccordionContext } from './Accordion.js';
+
+// Create context for AccordionItem
+var AccordionItemContext = createContext(undefined);
+// Hook to use AccordionItem context
+var useAccordionItemContext = function () {
+    var ctx = useContext(AccordionItemContext);
+    if (!ctx)
+        throw new Error("Accordion.Trigger and Accordion.Content must be used within Accordion.Item");
+    return ctx;
+};
+var AccordionItem = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, value = _a.value, props = __rest(_a, ["children", "className", "value"]);
+    var _b = useAccordionContext(), selectedValue = _b.value, onValueChange = _b.onValueChange, type = _b.type, collapsible = _b.collapsible, theme = _b.theme;
+    // Determine if this item is open
+    var isOpen = type === "single"
+        ? selectedValue === value
+        : Array.isArray(selectedValue) && selectedValue.includes(value);
+    // Toggle handler for this specific item
+    var toggle = function () {
+        if (type === "single") {
+            // For single type, either select this item or clear selection if collapsible
+            onValueChange(isOpen && collapsible ? "" : value);
+        }
+        else {
+            // For multiple type, add or remove from array
+            if (Array.isArray(selectedValue)) {
+                var newValue = isOpen
+                    ? selectedValue.filter(function (v) { return v !== value; })
+                    : __spreadArray(__spreadArray([], selectedValue, true), [value], false);
+                onValueChange(newValue);
+            }
+            else {
+                onValueChange([value]);
+            }
+        }
+    };
+    // Context value for Trigger and Content
+    var contextValue = {
+        value: value,
+        isOpen: isOpen,
+        toggle: toggle
+    };
+    return (React__default.createElement(AccordionItemContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: ref, className: cn(
+            // Default theme styles (can be overridden by className)
+            (theme === null || theme === void 0 ? void 0 : theme.itemStyle) || "border border-gray-200 rounded-lg bg-white overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-lg data-[state=open]:shadow-gray-500/10", 
+            // User className takes precedence
+            className), "data-state": isOpen ? "open" : "closed", "data-value": value }, props), children)));
+});
+AccordionItem.displayName = "AccordionItem";
+
+export { AccordionItem, useAccordionItemContext };

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

@@ -0,0 +1,32 @@
+import { __rest, __assign } from '../../../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 { PlusIcon } from '../../../icons/core/PlusIcon.js';
+import '../../../icons/core/MinusIcon.js';
+import '../../../icons/core/SearchIcon.js';
+import '../../../icons/core/LockIcon.js';
+import '../../../icons/core/DollarIcon.js';
+import '../../../icons/core/TickIcon.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var AccordionTrigger = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var theme = useAccordionContext().theme;
+    var _b = useAccordionItemContext(), isOpen = _b.isOpen, toggle = _b.toggle;
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", className: cn(
+        // Default theme styles (can be overridden by className)
+        (theme === null || theme === void 0 ? void 0 : theme.triggerStyle) || "cursor-pointer focus:outline-none transition-all flex justify-between gap-3 w-full px-4 py-2", 
+        // User className takes precedence
+        className), "aria-expanded": isOpen, "data-state": isOpen ? "open" : "closed", onClick: toggle }, props),
+        children,
+        React__default.createElement(motion.div, { animate: { rotate: isOpen ? 45 : 0 }, transition: {
+                duration: 0.2,
+                ease: [0.4, 0.0, 0.2, 1]
+            }, className: "flex items-center justify-center" },
+            React__default.createElement(PlusIcon, { size: "sm" }))));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export { AccordionTrigger };

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

@@ -0,0 +1,5 @@
+import Accordion from './Accordion.js';
+
+
+
+export { Accordion, Accordion as default };

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

@@ -0,0 +1,94 @@
+import { __rest, __assign } from '../../../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';
+import Tooltip from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+
+var Avatar = React__default.forwardRef(function (_a, ref) {
+    var src = _a.src, _b = _a.alt, alt = _b === void 0 ? "Avatar" : _b, // Default alt text for better accessibility
+    _c = _a.size, // Default alt text for better accessibility
+    size = _c === void 0 ? "md" : _c, _d = _a.status, status = _d === void 0 ? "none" : _d, fallback = _a.fallback, className = _a.className, role = _a.role, _e = _a.lazyLoad, lazyLoad = _e === void 0 ? true : _e, _f = _a.retryCount, retryCount = _f === void 0 ? 0 : _f, _g = _a.retryDelay, retryDelay = _g === void 0 ? 1000 : _g, contextualLabel = _a.contextualLabel, groupPosition = _a.groupPosition, _h = _a.showTooltip, showTooltip = _h === void 0 ? false : _h, props = __rest(_a, ["src", "alt", "size", "status", "fallback", "className", "role", "lazyLoad", "retryCount", "retryDelay", "contextualLabel", "groupPosition", "showTooltip"]);
+    var _j = useState(false), imageError = _j[0], setImageError = _j[1];
+    var _k = useState(0), retries = _k[0], setRetries = _k[1];
+    var retryTimerRef = useRef(null);
+    // Clear timeout on unmount to prevent memory leaks
+    useEffect(function () {
+        return function () {
+            if (retryTimerRef.current) {
+                clearTimeout(retryTimerRef.current);
+            }
+        };
+    }, []);
+    // Handle image loading errors with retry functionality
+    var handleImageError = function () {
+        if (retries < retryCount) {
+            // Log error and retry
+            console.warn("Avatar image load failed, retrying (".concat(retries + 1, "/").concat(retryCount, ")..."));
+            // Set up retry with delay
+            retryTimerRef.current = setTimeout(function () {
+                setRetries(function (prev) { return prev + 1; });
+                setImageError(false); // Reset error state to trigger re-render and retry
+            }, retryDelay);
+        }
+        else {
+            // Max retries reached, show fallback
+            console.warn("Avatar image load failed after maximum retries");
+            setImageError(true);
+        }
+    };
+    // Handle fallback content
+    var getFallbackContent = function () {
+        if (fallback) {
+            return fallback;
+        }
+        // If no fallback provided and no alt text, use placeholder
+        if (alt === "Avatar") {
+            return React__default.createElement("span", { "aria-hidden": "true" }, "?");
+        }
+        // Use initials from alt text
+        var initials = alt
+            .split(" ")
+            .map(function (part) { return part[0]; })
+            .slice(0, 2)
+            .join("")
+            .toUpperCase();
+        return React__default.createElement("span", { "aria-hidden": "true" }, initials);
+    };
+    // Determine status indicator size based on avatar size
+    var getStatusSize = function () {
+        switch (size) {
+            case "xs":
+                return "size-1.5 right-0 bottom-0.5";
+            case "sm":
+                return "size-2 right-0 bottom-1";
+            case "md":
+                return "size-2.5 right-0 bottom-1";
+            case "lg":
+                return "size-3 right-0 bottom-1";
+            case "xl":
+                return "size-3.5 right-0 bottom-1";
+            default:
+                return "size-2.5 right-0 bottom-1";
+        }
+    };
+    // Create full accessibility label including context if provided
+    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-block 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 }))));
+    // Conditionally wrap in tooltip
+    if (showTooltip && alt && alt !== "Avatar") {
+        return (React__default.createElement(Tooltip, { content: alt, placement: "top" }, avatarContent));
+    }
+    return avatarContent;
+});
+// Set display name for dev tools and Storybook
+Avatar.displayName = "Avatar";
+
+export { Avatar, Avatar as default };

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

@@ -0,0 +1,25 @@
+/**
+ * Default theme for the Avatar component
+ */
+var avatarTheme = {
+    // Base styles for the avatar element
+    baseStyle: 'relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-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',
+    // 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)]',
+    },
+    // Status indicator styles
+    statuses: {
+        online: 'bg-[var(--color-success)]',
+        offline: 'bg-neutral-400',
+        busy: 'bg-[var(--color-danger)]',
+        away: 'bg-[var(--color-warning)]',
+        none: '',
+    },
+};
+
+export { avatarTheme };

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

@@ -0,0 +1,79 @@
+/**
+ * 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
+ */
+var getAvatarGroupVariants = function (direction, 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 }
+        };
+    }
+    return {
+        initial: {
+            scale: 1,
+            opacity: 1,
+            x: 0,
+            filter: "blur(0px)",
+            zIndex: 10
+        },
+        hover: {
+            scale: 1.05,
+            opacity: 1,
+            x: 0,
+            filter: "blur(0px)",
+            zIndex: 20,
+            transition: {
+                type: "spring",
+                stiffness: 400,
+                damping: 25,
+                duration: 0.2
+            }
+        },
+        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
+            }
+        },
+        default: {
+            scale: 1,
+            opacity: 1,
+            x: 0,
+            filter: "blur(0px)",
+            zIndex: 10,
+            transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                duration: 0.3
+            }
+        }
+    };
+};
+/**
+ * Determines which animation state to use based on hover index
+ */
+var getAnimationState = function (currentIndex, hoveredIndex, enableAnimations) {
+    if (!enableAnimations)
+        return "default";
+    if (hoveredIndex === currentIndex)
+        return "hover";
+    if (hoveredIndex !== null && hoveredIndex !== currentIndex)
+        return "notHovered";
+    return "default";
+};
+
+export { getAnimationState, getAvatarGroupVariants };