@popgrids/ui 0.0.34 → 0.0.35

package/dist/index.js

@@ -1,5 +1,6 @@
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { cva } from 'class-variance-authority';
+import { createContext, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { mergeProps } from '@base-ui/react/merge-props';
@@ -88,8 +89,59 @@ var avatarVariants = cva(
     }
   }
 );
-function Avatar({ className = "", size = "md", ...props }) {
-  return /* @__PURE__ */ jsx(
+function fnv1a32(data) {
+  const bytes = new TextEncoder().encode(data);
+  let h = 2166136261;
+  for (let i = 0; i < bytes.length; i++) {
+    h ^= bytes[i];
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+var BACKGROUND_COLORS = [
+  "#DDD0BE",
+  "#E9DCBB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#C6D0CB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#E9DCBB",
+  "#DFC2C0",
+  "#CFD4C6",
+  "#D7E3E8",
+  "#CFD4C6",
+  "#D6B3B3",
+  "#E9DCBB",
+  "#CFCBDC",
+  "#BFD6D7",
+  "#E3D2C6",
+  "#D1E2E7",
+  "#D6B3B3",
+  "#BFD6D7",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#DFC2C0",
+  "#D1E2E7",
+  "#CFD4C6",
+  "#E9DCBB",
+  "#D7E3E8",
+  "#CFD4C6",
+  "#C6D0CB",
+  "#E9DCBB",
+  "#C7D1B0",
+  "#E9DCBB",
+  "#CFCBDC",
+  "#E3D2C6",
+  "#E9DCBB"
+];
+function backgroundColor(id) {
+  return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
+}
+var AvatarColorContext = createContext(void 0);
+function Avatar({ className = "", size = "md", colorKey, ...props }) {
+  const resolvedColor = colorKey ? backgroundColor(colorKey) : void 0;
+  return /* @__PURE__ */ jsx(AvatarColorContext.Provider, { value: resolvedColor, children: /* @__PURE__ */ jsx(
     Avatar$1.Root,
     {
       "data-slot": "avatar",
@@ -97,25 +149,31 @@ function Avatar({ className = "", size = "md", ...props }) {
       className: cn(avatarVariants({ size }), className),
       ...props
     }
-  );
+  ) });
 }
-function AvatarImage({ className = "", ...props }) {
+function AvatarImage({ className = "", style, ...props }) {
+  const resolvedColor = useContext(AvatarColorContext);
+  const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
   return /* @__PURE__ */ jsx(
     Avatar$1.Image,
     {
       "data-slot": "avatar-image",
-      className: cn("aspect-square size-full mask mask-squircle object-cover", className),
-      ...props
+      className: cn("mask mask-squircle aspect-square size-full object-cover", className),
+      ...props,
+      style: mergedStyle
     }
   );
 }
-function AvatarFallback({ className = "", ...props }) {
+function AvatarFallback({ className = "", style, ...props }) {
+  const resolvedColor = useContext(AvatarColorContext);
+  const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
   return /* @__PURE__ */ jsx(
     Avatar$1.Fallback,
     {
       "data-slot": "avatar-fallback",
       className: cn(
-        "mask mask-squircle flex size-full items-center justify-center bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+        "mask mask-squircle text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+        resolvedColor ? void 0 : "bg-muted",
         "group-data-[size=xs]/avatar:text-xs",
         "group-data-[size=sm]/avatar:text-sm",
         "group-data-[size=md]/avatar:text-lg",
@@ -124,7 +182,8 @@ function AvatarFallback({ className = "", ...props }) {
         "group-data-[size=xxl]/avatar:text-5xl",
         className
       ),
-      ...props
+      ...props,
+      style: mergedStyle
     }
   );
 }
@@ -134,7 +193,7 @@ function AvatarBadge({ className = "", ...props }) {
     {
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute h-[18px] min-w-[18px] z-10 select-none",
+        "absolute z-10 h-[18px] min-w-[18px] select-none",
         "leading-none",
         "group-data-[size=xs]/avatar:right-[-4px] group-data-[size=xs]/avatar:bottom-[-4px]",
         "group-data-[size=sm]/avatar:right-[-4px] group-data-[size=sm]/avatar:bottom-[-4px]",
@@ -154,7 +213,7 @@ function AvatarGroup({ className = "", ...props }) {
     {
       "data-slot": "avatar-group",
       className: cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
         className
       ),
       ...props
@@ -167,7 +226,7 @@ function AvatarGroupCount({ className = "", ...props }) {
     {
       "data-slot": "avatar-group-count",
       className: cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       ),
       ...props