flikkui 0.1.0-beta.11

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

@@ -0,0 +1,100 @@
+import React from "react";
+/**
+ * Accordion component props
+ */
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Accordion type - single allows only one item open, multiple allows many
+     */
+    type?: "single" | "multiple";
+    /**
+     * Visual variant - separated (card-like with spacing) or stacked (unified borders)
+     */
+    variant?: "separated" | "stacked";
+    /**
+     * Whether accordion can be collapsed after being opened (for type="single")
+     */
+    collapsible?: boolean;
+    /**
+     * Default value(s) for the opened item(s)
+     */
+    defaultValue?: string | string[];
+    /**
+     * Controlled value(s) for the opened item(s)
+     */
+    value?: string | string[];
+    /**
+     * Callback when open state changes
+     */
+    onValueChange?: (value: string | string[]) => void;
+    /**
+     * Theme overrides
+     */
+    theme?: AccordionThemeOverrides;
+    children: React.ReactNode;
+}
+/**
+ * Accordion context value
+ */
+export interface AccordionContextValue {
+    type: "single" | "multiple";
+    variant: "separated" | "stacked";
+    collapsible: boolean;
+    value: string | string[] | undefined;
+    onValueChange: (value: string | string[]) => void;
+    theme: AccordionThemeOverrides & {
+        baseStyle: string;
+        triggerStyle: string;
+        contentStyle: string;
+    };
+}
+/**
+ * AccordionItem component props
+ */
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique value for the accordion item
+     */
+    value: string;
+    /**
+     * Optional className for styling
+     */
+    className?: string;
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+}
+/**
+ * AccordionItem context value - to be used by Trigger and Content
+ */
+export interface AccordionItemContextValue {
+    value: string;
+    isOpen: boolean;
+    toggle: () => void;
+}
+/**
+ * Trigger props
+ */
+export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Content props
+ */
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Theme overrides for Accordion
+ */
+export interface AccordionThemeOverrides {
+    baseStyle?: string;
+    baseStyleStacked?: string;
+    triggerStyle?: string;
+    contentStyle?: string;
+    itemStyle?: string;
+    itemStyleStacked?: string;
+}

package/dist/components/core/Accordion/AccordionContent.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionContentProps } from "./Accordion.types";
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+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(theme === null || theme === void 0 ? void 0 : theme.contentStyle, className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations }, safeProps),
+        React__default.createElement(motion.div, { className: "p-4 pt-0", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed" }, children)))));
+});
+AccordionContent.displayName = "AccordionContent";
+
+export { AccordionContent };

package/dist/components/core/Accordion/AccordionItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AccordionItemProps, AccordionItemContextValue } from "./Accordion.types";
+export declare const useAccordionItemContext: () => AccordionItemContextValue;
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,54 @@
+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, variant = _b.variant, 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
+    };
+    // Select item style based on variant
+    var itemStyleClass = variant === "stacked" ? theme === null || theme === void 0 ? void 0 : theme.itemStyleStacked : theme === null || theme === void 0 ? void 0 : theme.itemStyle;
+    return (React__default.createElement(AccordionItemContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value }, props), children)));
+});
+AccordionItem.displayName = "AccordionItem";
+
+export { AccordionItem, useAccordionItemContext };

package/dist/components/core/Accordion/AccordionTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionTriggerProps } from "./Accordion.types";
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,23 @@
+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 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';
+
+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(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, 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(ForwardRef, { className: "size-4", strokeWidth: 2 }))));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export { AccordionTrigger };

package/dist/components/core/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+import { Accordion } from "./Accordion";
+import { AccordionProps, AccordionTriggerProps, AccordionContentProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
+export { Accordion };
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AlertProps } from "./Alert.types";
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,39 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { alertTheme } from './Alert.theme.js';
+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,
+};
+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 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),
+        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)),
+            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)))),
+        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" })))));
+});
+Alert.displayName = "Alert";
+
+export { Alert };

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

@@ -0,0 +1,2 @@
+import { AlertTheme } from "./Alert.types";
+export declare const alertTheme: AlertTheme;

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

@@ -0,0 +1,24 @@
+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",
+    },
+    /**
+     * Semantic colors with ring and background styling
+     */
+    colors: {
+        neutral: "bg-[var(--color-background)]/80 text-[var(--color-text-primary)]",
+        dark: "bg-[var(--color-neutral-950)] text-white",
+        primary: "bg-[var(--color-primary-50)]/80 text-[var(--color-primary-700)]",
+        success: "bg-[var(--color-success-50)]/80 text-[var(--color-success-700)]",
+        warning: "bg-[var(--color-warning-50)]/80 text-[var(--color-warning-700)]",
+        danger: "bg-[var(--color-danger-50)]/80 text-[var(--color-danger-700)]",
+    },
+};
+
+export { alertTheme };

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

@@ -0,0 +1,43 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Alert visual variants (appearance treatment)
+ */
+export type AlertVariant = 'filled' | 'outline' | 'soft';
+/**
+ * Alert semantic colors (intent)
+ */
+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 */
+    title?: string;
+    /** Additional description text */
+    description?: string;
+    /** Whether the alert can be dismissed */
+    dismissible?: boolean;
+    /** Custom icon for the alert */
+    icon?: ReactNode;
+    /** Whether to show the default icon for the variant */
+    showIcon?: boolean;
+    /** Callback when the alert is dismissed */
+    onDismiss?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: AlertThemeOverrides;
+    /** Children content */
+    children?: ReactNode;
+}

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

@@ -0,0 +1,3 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertTheme, AlertThemeOverrides } from './Alert.types';
+export { alertTheme } from './Alert.theme';

package/dist/components/core/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { AlertDialogProps } from "./AlertDialog.types";
+export declare const AlertDialog: {
+    ({ trigger, icon, title, description, footer, className, }: AlertDialogProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+export interface AlertDialogProps {
+    /** The element that triggers the dialog to open. */
+    trigger: React.ReactNode;
+    /** An optional icon to display in the header. */
+    icon?: React.ReactNode;
+    /** The title of the dialog. */
+    title: React.ReactNode;
+    /** The main content/description of the dialog. */
+    description: React.ReactNode;
+    /**
+     * A render prop for the footer, which receives a `close` function.
+     * Use this to render action buttons.
+     */
+    footer?: (close: () => void) => React.ReactNode;
+    /** Additional class names for the dialog content container. */
+    className?: string;
+}

package/dist/components/core/AlertDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { AlertDialog } from "./AlertDialog";
+export * from "./AlertDialog.types";

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AvatarProps } from "./Avatar.types";
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,100 @@
+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
+            if (process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                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
+            if (process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                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, 1)
+            .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-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 }))));
+    // 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 };

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

@@ -0,0 +1,14 @@
+import { AvatarSize, AvatarStatus } from './Avatar.types';
+/**
+ * Internal theme structure for the Avatar component
+ */
+interface AvatarTheme {
+    baseStyle: string;
+    sizes: Record<AvatarSize, string>;
+    statuses: Record<AvatarStatus, string>;
+}
+/**
+ * Default theme for the Avatar component
+ */
+export declare const avatarTheme: AvatarTheme;
+export {};

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-[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',
+    // 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/Avatar/Avatar.types.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * Alternative text for the avatar image.
+     * Should describe the person or entity represented by the avatar.
+     * @default "Avatar"
+     */
+    alt?: string;
+    /**
+     * The size of the avatar
+     * @default "md"
+     */
+    size?: AvatarSize;
+    /**
+     * Optional status indicator
+     * @default "none"
+     */
+    status?: AvatarStatus;
+    /**
+     * Fallback content to display when image fails to load or no src is provided
+     */
+    fallback?: ReactNode;
+    /**
+     * ARIA role for the avatar
+     * Use "presentation" for purely decorative avatars
+     */
+    role?: string;
+    /**
+     * Whether to enable lazy loading for the image
+     * @default true
+     */
+    lazyLoad?: boolean;
+    /**
+     * Maximum number of times to retry loading the image if it fails
+     * @default 0
+     */
+    retryCount?: number;
+    /**
+     * Delay in milliseconds between retry attempts
+     * @default 1000
+     */
+    retryDelay?: number;
+    /**
+     * Additional contextual information about the avatar
+     * Useful for avatar groups or when more context is needed
+     */
+    contextualLabel?: string;
+    /**
+     * CSS class for the group positioning
+     * e.g. "-mr-3 ring-2 ring-white" for overlapping avatars
+     */
+    groupPosition?: string;
+    /**
+     * Whether to show a tooltip with the person's name on hover
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Number of initials to display in the fallback
+     * @default 2
+     */
+    initialsCount?: number;
+}

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarStatus, } from './Avatar.types';

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

@@ -0,0 +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
+ */
+export declare const getAvatarGroupVariants: (direction?: AvatarGroupDirection, shouldReduceMotion?: boolean | null, enableAnimations?: boolean) => Variants;
+/**
+ * Determines which animation state to use based on hover index
+ */
+export declare const getAnimationState: (currentIndex: number, hoveredIndex: number | null, enableAnimations: boolean) => string;