@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

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

@@ -31,7 +31,16 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
      * Theme overrides
      */
     theme?: AccordionThemeOverrides;
-    children: React.ReactNode;
+    /**
+     * `Accordion.Item` children (compound API). Optional when `items` is used.
+     */
+    children?: React.ReactNode;
+    /**
+     * Data-driven items. When provided, the accordion renders from this array and
+     * any `children` are ignored (dev-warns). Omit it to use the compound API.
+     * Fully serializable (resolve rich content upstream) — ideal for generative UI.
+     */
+    items?: AccordionItemData[];
     /**
      * Force dark mode styling for the component. Use when placing the component
      * on a dark background while the page is in light mode. This applies the
@@ -65,6 +74,14 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Unique value for the accordion item
      */
     value: string;
+    /**
+     * Disables this item: the trigger becomes a native disabled button (dimmed,
+     * unfocusable, un-clickable) and roving arrow-key navigation skips it.
+     * Does not force-close the item if it's already open (e.g. via a controlled
+     * `value` that still includes it).
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Optional className for styling
      */
@@ -74,12 +91,29 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      */
     children: React.ReactNode;
 }
+/**
+ * A single accordion entry for the data-driven (`items`) API. Maps internally to
+ * `Accordion.Item` / `Accordion.Trigger` / `Accordion.Body`.
+ */
+export interface AccordionItemData {
+    /** Unique value for the accordion item (stable identity, matches Accordion.Item) */
+    value: string;
+    /** Trigger content (maps to the Accordion.Trigger children) */
+    title: React.ReactNode;
+    /** Body content (maps to the Accordion.Body children) */
+    content?: React.ReactNode;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Disables this item (maps to `Accordion.Item`'s `disabled`) */
+    disabled?: boolean;
+}
 /**
  * AccordionItem context value - to be used by Trigger and Content
  */
 export interface AccordionItemContextValue {
     value: string;
     isOpen: boolean;
+    disabled: boolean;
     toggle: () => void;
     triggerId: string;
     contentId: string;

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useAccordionContext } from './Accordion.js';
+import { useAccordionContext } from './AccordionContext.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { accordionAnimations, accordionContentAnimations } from './Accordion.animations.js';

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

@@ -0,0 +1,3 @@
+import { AccordionContextValue } from "./Accordion.types";
+export declare const AccordionContext: import("react").Context<AccordionContextValue | undefined>;
+export declare const useAccordionContext: () => AccordionContextValue;

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

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+// Lives in its own module (not Accordion.tsx) so sub-components can consume the
+// context without importing Accordion.tsx, which imports them back — that was
+// the library's one circular dependency.
+const AccordionContext = createContext(undefined);
+const useAccordionContext = () => {
+    const ctx = useContext(AccordionContext);
+    if (!ctx)
+        throw new Error("Accordion compound components must be used within <Accordion>");
+    return ctx;
+};
+
+export { AccordionContext, useAccordionContext };

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { createContext, useContext } from 'react';
+import React__default, { createContext, useCallback, useMemo, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useAccordionContext } from './Accordion.js';
+import { useAccordionContext } from './AccordionContext.js';
 
 // Create context for AccordionItem
 const AccordionItemContext = createContext(undefined);
@@ -12,14 +13,16 @@ const useAccordionItemContext = () => {
         throw new Error("Accordion.Trigger and Accordion.Body must be used within Accordion.Item");
     return ctx;
 };
-const AccordionItem = React__default.forwardRef(({ children, className, value, ...props }, ref) => {
+const AccordionItem = React__default.forwardRef(({ children, className, value, disabled = false, ...props }, ref) => {
     const { value: selectedValue, onValueChange, type, variant, collapsible, theme } = useAccordionContext();
     // Determine if this item is open
     const isOpen = type === "single"
         ? selectedValue === value
         : Array.isArray(selectedValue) && selectedValue.includes(value);
     // Toggle handler for this specific item
-    const toggle = () => {
+    const toggle = useCallback(() => {
+        if (disabled)
+            return;
         if (type === "single") {
             // For single type, either select this item or clear selection if collapsible
             onValueChange(isOpen && collapsible ? "" : value);
@@ -36,21 +39,22 @@ const AccordionItem = React__default.forwardRef(({ children, className, value, .
                 onValueChange([value]);
             }
         }
-    };
+    }, [disabled, type, isOpen, collapsible, onValueChange, selectedValue, value]);
     // Generate IDs for ARIA linkage
     const triggerId = `accordion-item-${value}-trigger`;
     const contentId = `accordion-item-${value}-content`;
     // Context value for Trigger and Content
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         value,
         isOpen,
+        disabled,
         toggle,
         triggerId,
         contentId,
-    };
+    }), [value, isOpen, disabled, toggle, triggerId, contentId]);
     // Select item style based on variant
     const itemStyleClass = variant === "stacked" ? theme === null || theme === void 0 ? void 0 : theme.itemStyleStacked : theme === null || theme === void 0 ? void 0 : theme.itemStyle;
-    return (jsx(AccordionItemContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, ...props, children: children }) }));
+    return (jsx(AccordionItemContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, "data-disabled": disabled, ...props, children: children }) }));
 });
 AccordionItem.displayName = "Accordion.Item";
 

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useAccordionContext } from './Accordion.js';
+import { useAccordionContext } from './AccordionContext.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 import { motion } from 'motion/react';
 import { PlusIcon } from '@heroicons/react/24/outline';
@@ -10,7 +11,7 @@ import { createTriggerIconVariants } from './Accordion.animations.js';
 const AccordionTrigger = React__default.forwardRef(({ children, className, chevron, chevronRotation, iconRotation, chevronPosition = "right", ...props }, ref) => {
     var _a;
     const { theme } = useAccordionContext();
-    const { isOpen, toggle, triggerId, contentId } = useAccordionItemContext();
+    const { isOpen, disabled, toggle, triggerId, contentId } = useAccordionItemContext();
     const resolvedChevronRotation = (_a = chevronRotation !== null && chevronRotation !== void 0 ? chevronRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
     // Resolve the indicator icon
     const defaultChevronIcon = jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
@@ -38,7 +39,9 @@ const AccordionTrigger = React__default.forwardRef(({ children, className, chevr
         }
         if (!container)
             return;
-        const triggers = Array.from(container.querySelectorAll('[data-accordion-trigger]'));
+        // Roving nav skips disabled triggers — matches Tabs'
+        // `[role="tab"]:not([disabled])` selector.
+        const triggers = Array.from(container.querySelectorAll('[data-accordion-trigger]:not([disabled])'));
         const currentIndex = triggers.indexOf(currentButton);
         if (event.key === 'ArrowDown') {
             event.preventDefault();
@@ -51,7 +54,7 @@ const AccordionTrigger = React__default.forwardRef(({ children, className, chevr
             prev === null || prev === void 0 ? void 0 : prev.focus();
         }
     };
-    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", "data-accordion-trigger": true, onClick: toggle, onKeyDown: handleKeyDown, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
+    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, disabled: disabled, "aria-disabled": disabled || undefined, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, "data-accordion-trigger": true, onClick: toggle, onKeyDown: handleKeyDown, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
 });
 AccordionTrigger.displayName = "Accordion.Trigger";
 

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

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

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Alert entrance/exit animation variants
  * Entrance: slide down from -8px + fade in

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -10,12 +11,11 @@ import { Button } from '../Button/Button.js';
 const defaultIcons = {
     neutral: BellIcon,
     primary: InformationCircleIcon,
-    secondary: InformationCircleIcon,
     success: CheckCircleIcon,
     warning: ExclamationTriangleIcon,
     danger: XCircleIcon,
 };
-const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
+const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
     var _a;
     const shouldReduceMotion = useReducedMotion();
     const [isDismissing, setIsDismissing] = useState(false);
@@ -42,11 +42,11 @@ const Alert = React__default.forwardRef(({ variant = "default", color = "primary
         return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
     };
     const isUrgent = color === 'danger' || color === 'warning';
-    const alertContent = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: isUrgent ? 'alert' : 'status', "aria-live": isUrgent ? undefined : 'polite', ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
+    const alertContent = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, className), role: isUrgent ? 'alert' : 'status', "aria-live": isUrgent ? undefined : 'polite', ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
                         ? jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })
                         : title), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })
-                        : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
+                        : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
     const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, initial: "hidden", animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
             if (definition === "hidden" && isDismissing) {
                 onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();

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

@@ -7,11 +7,6 @@ import { semanticTextColors } from '../../../utils/colorUtils.js';
 const alertTheme = {
     // Base styles applied to all alerts
     baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
-    // Visual style variants (structure only, no colors)
-    variants: {
-        default: "",
-        glass: "glass-effect",
-    },
     // Icon color styles per color
     iconColors: semanticTextColors,
     // State styles

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

@@ -4,18 +4,12 @@ import { SemanticColor } from "../../../utils/colorUtils";
  * Alert semantic colors (intent)
  */
 export type AlertColor = SemanticColor;
-/**
- * Alert visual variant
- */
-export type AlertVariant = "default" | "glass";
 /**
  * Theme configuration for Alert component
  */
 export interface AlertTheme {
     /** Base styles applied to all alerts */
     baseStyle: string;
-    /** Visual style variants (structure only, no colors) */
-    variants: Record<AlertVariant, string>;
     /** Icon color styles per color */
     iconColors: Record<AlertColor, string>;
     /** State styles */
@@ -24,8 +18,6 @@ export interface AlertTheme {
     };
 }
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Visual variant */
-    variant?: AlertVariant;
     /** Semantic color */
     color?: AlertColor;
     /** The main title/message of the alert */

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

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

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

@@ -1,8 +1,22 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, isValidElement, cloneElement } from 'react';
 import { Modal } from '../Modal/Modal.js';
 import { cn } from '../../../utils/cn.js';
+import { useModalContext } from '../Modal/ModalContext.js';
 
+/**
+ * Renders AlertDialog's subtitle and stamps Modal's computed `subtitleId`
+ * onto the actual element so `aria-describedby` (wired up by Modal.tsx)
+ * resolves to a real node. `Modal.Subtitle` isn't used here because it
+ * always renders a `<p>`, and AlertDialog's subtitle can carry block-level
+ * content (e.g. a nested `Select`) which is invalid inside a paragraph.
+ * Must be rendered as a descendant of `<Modal>` so `useModalContext` resolves.
+ */
+function AlertDialogSubtitle({ children }) {
+    const { subtitleId } = useModalContext();
+    return (jsx("div", { id: subtitleId, className: "text-[var(--color-text-secondary)] text-base", children: children }));
+}
 const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleOpen = () => setIsOpen(true);
@@ -10,7 +24,7 @@ const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) =>
     const triggerElement = isValidElement(trigger)
         ? cloneElement(trigger, { onClick: handleOpen })
         : null;
-    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-base", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
+    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx(AlertDialogSubtitle, { children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";
 

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

@@ -1,17 +1,51 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect, useCallback } 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';
-import { UserIcon } from '@heroicons/react/24/solid';
+import { MeshGradient } from '../../effects/MeshGradient/MeshGradient.js';
+import { MESH_PALETTE_BY_NAME, DEFAULT_MESH_COLORS, getMeshTextTone } from '../../effects/MeshGradient/MeshGradient.utils.js';
+import { CheckBadgeIcon, UserIcon } from '@heroicons/react/24/solid';
 
-const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, title, subtitle, ...props }, ref) => {
+// Number of marble shapes the gradient renders — shared by the render and the
+// text-tone calc so both read the same deterministic field. The gradient's blur
+// is resolution-independent (SVG viewBox units), so no per-size tuning is needed.
+const MESH_COUNT = 2;
+const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, gradient = false, gradientVariant = "marble", gradientColors, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, title, subtitle, verified = false, ...props }, ref) => {
+    var _a;
     const [imageError, setImageError] = useState(false);
     const [retries, setRetries] = useState(0);
     const retryTimerRef = useRef(null);
     // Normalize null to undefined for internal use
     const resolvedName = name !== null && name !== void 0 ? name : undefined;
+    // Initials derived from the name (xs shows a single initial).
+    const initials = resolvedName
+        ? resolvedName
+            .split(" ")
+            .map((part) => part[0])
+            .slice(0, size === "xs" ? 1 : initialsCount)
+            .join("")
+            .toUpperCase()
+        : "";
+    // Seed the background gradient from an explicit string, else the name.
+    const gradientSeed = typeof gradient === "string" ? gradient : (resolvedName !== null && resolvedName !== void 0 ? resolvedName : "avatar");
+    // Resolve the palette: raw `gradientColors` wins, else the named variant,
+    // falling back to the default marble set.
+    const gradientPalette = gradientColors && gradientColors.length
+        ? gradientColors
+        : ((_a = MESH_PALETTE_BY_NAME[gradientVariant]) !== null && _a !== void 0 ? _a : DEFAULT_MESH_COLORS);
+    // Auto-pick readable initials color from the gradient's luminance, using the
+    // theme-stable neutral tokens (so the choice holds in light AND dark mode).
+    const gradientTextColor = gradient
+        ? getMeshTextTone(gradientSeed, gradientPalette, MESH_COUNT) === "dark"
+            ? "text-[var(--color-neutral-950)]"
+            : "text-[var(--color-neutral-50)]"
+        : undefined;
+    // Glyph shown over the gradient: explicit fallback, else initials, else none
+    // (a clean gradient — no default user icon when there's no name).
+    const gradientGlyph = fallback !== null && fallback !== void 0 ? fallback : (initials ? jsx("span", { "aria-hidden": "true", children: initials }) : null);
     // Clear timeout on unmount to prevent memory leaks
     useEffect(() => {
         return () => {
@@ -50,14 +84,7 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
             return fallback;
         }
         // 2. Generate initials from name
-        if (resolvedName) {
-            const maxInitials = size === "xs" ? 1 : initialsCount;
-            const initials = resolvedName
-                .split(" ")
-                .map((part) => part[0])
-                .slice(0, maxInitials)
-                .join("")
-                .toUpperCase();
+        if (initials) {
             return jsx("span", { "aria-hidden": "true", children: initials });
         }
         // 3. Default placeholder icon
@@ -80,6 +107,23 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
                 return "size-2 left-0 bottom-0";
         }
     };
+    // Determine verified badge size based on avatar size
+    const getVerifiedBadgeSize = () => {
+        switch (size) {
+            case "xs":
+                return "size-2.5 -right-0.5 -bottom-0.5";
+            case "sm":
+                return "size-3.5 -right-0.5 -bottom-0.5";
+            case "md":
+                return "size-4 -right-0.5 -bottom-0.5";
+            case "lg":
+                return "size-5 -right-1 -bottom-1";
+            case "xl":
+                return "size-6 -right-1.5 -bottom-1.5";
+            default:
+                return "size-4 -right-0.5 -bottom-0.5";
+        }
+    };
     // Create full accessibility label including context if provided
     const accessibilityLabel = contextualLabel
         ? `${resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar"}${contextualLabel}`
@@ -89,7 +133,7 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
     const resolvedTitle = title !== null && title !== void 0 ? title : (subtitle ? resolvedName : undefined);
     const hasTextSection = !!(resolvedTitle || subtitle);
     // The avatar circle with status indicator
-    const avatarCircle = (jsxs("div", { className: cn("relative inline-flex avatar-wrapper shrink-0", groupPosition), children: [jsx("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: "avatar-fallback flex items-center justify-center size-full", children: getFallbackContent() })) }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status }))] }));
+    const avatarCircle = (jsxs("div", { className: cn("relative inline-flex avatar-wrapper shrink-0", groupPosition), children: [jsxs("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: [gradient && (jsx(MeshGradient, { seed: gradientSeed, colors: gradientPalette, count: MESH_COUNT })), src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "relative z-10 size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: cn("avatar-fallback relative z-10 flex items-center justify-center size-full", gradient && cn(gradientTextColor, "drop-shadow")), children: gradient ? gradientGlyph : getFallbackContent() }))] }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status })), verified && (jsx("span", { className: cn("absolute rounded-full inline-grid place-items-center ring-2 ring-[var(--color-background)] bg-white dark:bg-[var(--color-surface)] shadow-sm", getVerifiedBadgeSize()), "aria-label": "Verified", children: jsx(CheckBadgeIcon, { className: "size-full text-[var(--color-primary)]" }) }))] }));
     // Wrap circle in tooltip if needed
     const avatarWithTooltip = showTooltip && resolvedName ? (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarCircle })) : (avatarCircle);
     // If no text section, render just the avatar
@@ -98,10 +142,10 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
             // inline-flex so the inline-flex circle is a flex child, not inline-level
             // content — a plain block wrapper leaves a ~5px baseline descender below
             // the circle, inflating the box and misaligning AvatarGroup's overflow chip.
-            className: "inline-flex", role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: avatarWithTooltip }));
+            className: "inline-flex", role: ariaRole, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: avatarWithTooltip }));
     }
     // Render avatar with text section
-    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center", avatarTheme.gapSizes[size]), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [avatarWithTooltip, jsxs("div", { className: "min-w-0", children: [resolvedTitle && (jsx("div", { className: cn(avatarTheme.titleStyle, avatarTheme.textSizes[size]), children: resolvedTitle })), subtitle && (jsx("div", { className: cn(avatarTheme.subtitleStyle, avatarTheme.textSizes[size]), children: subtitle }))] })] }));
+    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center", avatarTheme.gapSizes[size]), role: ariaRole, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [avatarWithTooltip, jsxs("div", { className: "min-w-0", children: [resolvedTitle && (jsx("div", { className: cn(avatarTheme.titleStyle, avatarTheme.textSizes[size]), children: resolvedTitle })), subtitle && (jsx("div", { className: cn(avatarTheme.subtitleStyle, avatarTheme.textSizes[size]), children: subtitle }))] })] }));
 });
 // Set display name for dev tools and Storybook
 Avatar.displayName = "Avatar";

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

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
-export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+import type { MeshPaletteName } from "../../effects/MeshGradient";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | number;
 export type AvatarStatus = "online" | "offline" | "busy" | "away" | "none";
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -27,6 +28,26 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Overrides the default placeholder icon and auto-generated initials.
      */
     fallback?: ReactNode;
+    /**
+     * Render a deterministic mesh-gradient as the avatar's background layer. The
+     * image (when present) sits over it, and the initials/icon overlay on top in
+     * white — so it shows through as a colorful, identicon-style backdrop whenever
+     * there's no image. Pass `true` to seed from `name`, or a string for an
+     * explicit, stable seed (e.g. a user id).
+     * @default false
+     */
+    gradient?: boolean | string;
+    /**
+     * Curated color palette for the gradient background. Only applies when
+     * `gradient` is set. Overridden by `gradientColors` when that is provided.
+     * @default "marble"
+     */
+    gradientVariant?: MeshPaletteName;
+    /**
+     * Raw color override for the gradient background (any CSS colors). Wins over
+     * `gradientVariant`. Only applies when `gradient` is set.
+     */
+    gradientColors?: string[];
     /**
      * ARIA role for the avatar
      * Use "presentation" for purely decorative avatars
@@ -76,4 +97,8 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Subtitle text displayed below the title (e.g., email, role).
      */
     subtitle?: string;
+    /**
+     * Whether to show a verification badge overlay at the bottom right.
+     */
+    verified?: boolean;
 }

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Animation variants for AvatarGroup hover effects
  * Creates a "Fan Pop" effect where:

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 // Main badge variants with optimized transitions
 const badgeVariants = {
     initial: {

package/dist/components/core/Badge/Badge.js

@@ -1,8 +1,8 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useCallback } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { UserIcon } from '@heroicons/react/16/solid';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
@@ -126,12 +126,12 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     };
     // Render left content (priority: avatar → iconStart → dot)
     const renderLeftContent = () => {
-        var _a, _b, _c;
+        var _a, _b;
         if (avatar) {
-            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden [&_div]:!size-full", (_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], pill ? "rounded-full -ml-2" : "rounded-full -ml-0"), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: (_b = avatar.fallback) !== null && _b !== void 0 ? _b : jsx(UserIcon, { className: "size-2.5" }), initialsCount: avatar.initialsCount, size: "xs", className: cn("!size-full border-0", pill ? "rounded-full" : "rounded-md ring-0") }) }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden [&_div]:!size-full", (_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], pill ? "rounded-full -ml-2" : "rounded-full -ml-0"), children: jsx(Avatar, { src: avatar.src, name: avatar.name, gradient: avatar.gradient, gradientVariant: avatar.gradientVariant, gradientColors: avatar.gradientColors, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: cn("!size-full border-0", pill ? "rounded-full" : "rounded-md ring-0") }) }));
         }
         if (iconStart) {
-            return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0 -ml-1", (_c = theme.iconSizes) === null || _c === void 0 ? void 0 : _c[size]), "aria-hidden": "true", children: iconStart }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0 -ml-1", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
         }
         if (withDot) {
             if (shouldAnimate) {
@@ -151,7 +151,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_p = theme.dismissSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-hidden": "true" }) }))] })) : null;
+                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -mr-0.5 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_p = theme.dismissSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-hidden": "true" }) }))] })) : null;
     }
     return (jsx(AnimatePresence, { mode: "wait", children: isVisible && (jsxs(motion.span, { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", ...dataAttributes, ...props, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
                         ? {
@@ -159,7 +159,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true", strokeWidth: 2 }) }))] })) }));
+                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -mr-0.5 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true", strokeWidth: 2 }) }))] })) }));
 }));
 Badge.displayName = "Badge";