@wow-two-beta/ui 0.0.39 → 0.0.41

package/dist/{chunk-6QEYZJGE.js → chunk-F6R2IOQV.js}

@@ -148,7 +148,7 @@ Image.displayName = "Image";
 
 // src/display/avatar/Avatar.variants.ts
 var avatarVariants = tv({
-  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground font-medium",
+  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-medium",
   variants: {
     size: {
       xs: "h-6 w-6 text-xs",
@@ -161,13 +161,81 @@ var avatarVariants = tv({
     shape: {
       circle: "rounded-full",
       square: "rounded-md"
+    },
+    tone: {
+      // 'none' is used when autoColor takes over — prevents theme tokens from competing in the cascade.
+      none: "",
+      neutral: "bg-muted text-muted-foreground",
+      primary: "bg-primary-soft text-primary-soft-foreground",
+      danger: "bg-destructive-soft text-destructive-soft-foreground",
+      success: "bg-success-soft text-success-soft-foreground",
+      warning: "bg-warning-soft text-warning-soft-foreground"
+    },
+    bgStyle: {
+      solid: "",
+      // Gradient class composed in compoundVariants × tone.
+      gradient: ""
+    },
+    ring: {
+      none: "",
+      neutral: "ring-2 ring-offset-2 ring-border ring-offset-background",
+      primary: "ring-2 ring-offset-2 ring-primary ring-offset-background",
+      danger: "ring-2 ring-offset-2 ring-destructive ring-offset-background",
+      success: "ring-2 ring-offset-2 ring-success ring-offset-background",
+      warning: "ring-2 ring-offset-2 ring-warning ring-offset-background"
+    },
+    isLoading: {
+      true: "animate-pulse !bg-muted text-transparent",
+      false: ""
     }
   },
+  compoundVariants: [
+    // gradient × tone
+    { bgStyle: "gradient", tone: "neutral", class: "bg-gradient-to-br from-muted to-muted/40" },
+    { bgStyle: "gradient", tone: "primary", class: "bg-gradient-to-br from-primary-soft to-primary text-primary-foreground" },
+    { bgStyle: "gradient", tone: "danger", class: "bg-gradient-to-br from-destructive-soft to-destructive text-destructive-foreground" },
+    { bgStyle: "gradient", tone: "success", class: "bg-gradient-to-br from-success-soft to-success text-success-foreground" },
+    { bgStyle: "gradient", tone: "warning", class: "bg-gradient-to-br from-warning-soft to-warning text-warning-foreground" }
+  ],
   defaultVariants: {
     size: "md",
-    shape: "circle"
+    shape: "circle",
+    tone: "neutral",
+    bgStyle: "solid",
+    ring: "none",
+    isLoading: false
   }
 });
+var COMPONENT_NAME = "Avatar";
+var AUTO_COLOR_PALETTE = [
+  "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100",
+  "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-100",
+  "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100",
+  "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100",
+  "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-100",
+  "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100",
+  "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100",
+  "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-100",
+  "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-100",
+  "bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100",
+  "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100",
+  "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100",
+  "bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-100",
+  "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100",
+  "bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900 dark:text-fuchsia-100",
+  "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-100",
+  "bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-100"
+];
+function hashName(name) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) {
+    h = h * 31 + name.charCodeAt(i) | 0;
+  }
+  return Math.abs(h);
+}
+function pickAutoColor(name) {
+  return AUTO_COLOR_PALETTE[hashName(name) % AUTO_COLOR_PALETTE.length];
+}
 function getInitials(name) {
   const parts = name.trim().split(/\s+/);
   if (parts.length === 0) return "";
@@ -176,14 +244,36 @@ function getInitials(name) {
   return (first + last).toUpperCase();
 }
 var Avatar = forwardRef(
-  ({ src, name = "", fallback, alt, className, size, shape, ...props }, ref) => {
+  ({
+    src,
+    name = "",
+    fallback,
+    alt,
+    autoColor,
+    tone,
+    bgStyle,
+    ring,
+    isLoading,
+    size,
+    shape,
+    className,
+    ...props
+  }, ref) => {
     const [errored, setErrored] = useState(false);
-    const showImage = src && !errored;
+    const showImage = !!src && !errored && !isLoading;
+    const autoColorClass = autoColor && name && bgStyle !== "gradient" && (tone === void 0 || tone === "neutral") ? pickAutoColor(name) : void 0;
+    const effectiveTone = autoColorClass ? "none" : tone;
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
-        className: cn(avatarVariants({ size, shape }), className),
+        className: cn(
+          avatarVariants({ size, shape, tone: effectiveTone, bgStyle, ring, isLoading }),
+          autoColorClass,
+          className
+        ),
+        "data-loading": isLoading ? "true" : void 0,
+        "aria-busy": isLoading ? true : void 0,
         ...props,
         children: showImage ? /* @__PURE__ */ jsx(
           "img",
@@ -198,7 +288,7 @@ var Avatar = forwardRef(
     );
   }
 );
-Avatar.displayName = "Avatar";
+Avatar.displayName = COMPONENT_NAME;
 
 // src/display/badge/Badge.variants.ts
 var badgeVariants = tv({
@@ -5456,5 +5546,5 @@ var ActivityFeed = ActivityFeedInner;
 ActivityFeed.Item = ActivityItem;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, ActivityItem, AnimatedNumber, AnnotationMarker, AudioPlayer, AudioWaveform, Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Carousel, CarouselDot, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, CarouselSlides, CarouselViewport, ChatBubble, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, Comment, CommentThread, Confetti, CountBadge, CountUp, DataGrid, DataTable, DaySeparator, DescriptionList, DiffViewer, EmptyState, EventCalendar, Gantt, GradientText, Heading, HeatmapCalendar, Highlight, Image, InfoRow, KeyboardShortcut, List, ListItem, Mark, Marquee, MessageList, NodeEditor, NotificationDot, PDFViewer, Quote, ReactionBar, ScheduleView, ScrollReveal, SectionHeader, Separator, Snippet, Sparkline, Stat, Status, SwipeActions, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Text, ThreadView, Tilt, Timeline, TimelineDescription, TimelineItem, TimelineTitle, Tooltip, Tree, TreeGroup, TreeItem, Typewriter, VideoPlayer, avatarVariants, badgeVariants, codeVariants, headingVariants, textVariants };
-//# sourceMappingURL=chunk-6QEYZJGE.js.map
-//# sourceMappingURL=chunk-6QEYZJGE.js.map
+//# sourceMappingURL=chunk-F6R2IOQV.js.map
+//# sourceMappingURL=chunk-F6R2IOQV.js.map