@popgrids/ui 0.0.34 → 0.0.36

package/dist/index.js

@@ -88,34 +88,88 @@ var avatarVariants = cva(
     }
   }
 );
-function Avatar({ className = "", size = "md", ...props }) {
+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 AVATAR_BG_VAR = "--avatar-background";
+function Avatar({ className = "", size = "md", colorKey, style, ...props }) {
+  const resolved = colorKey ? backgroundColor(colorKey) : void 0;
+  const rootStyle = resolved !== void 0 ? { ...style, [AVATAR_BG_VAR]: resolved } : style;
   return /* @__PURE__ */ jsx(
     Avatar$1.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
       className: cn(avatarVariants({ size }), className),
-      ...props
+      ...props,
+      style: rootStyle
     }
   );
 }
-function AvatarImage({ className = "", ...props }) {
+function AvatarImage({ className = "", style, ...props }) {
   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: { backgroundColor: `var(${AVATAR_BG_VAR})`, ...style }
     }
   );
 }
-function AvatarFallback({ className = "", ...props }) {
+function AvatarFallback({ className = "", style, ...props }) {
   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",
         "group-data-[size=xs]/avatar:text-xs",
         "group-data-[size=sm]/avatar:text-sm",
         "group-data-[size=md]/avatar:text-lg",
@@ -124,7 +178,11 @@ function AvatarFallback({ className = "", ...props }) {
         "group-data-[size=xxl]/avatar:text-5xl",
         className
       ),
-      ...props
+      ...props,
+      style: {
+        backgroundColor: `var(${AVATAR_BG_VAR}, var(--color-muted))`,
+        ...style
+      }
     }
   );
 }
@@ -134,7 +192,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 +212,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 +225,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
@@ -434,7 +492,7 @@ var buttonVariants = cva(
         variant: "primary",
         outline: false,
         theme: "base",
-        class: "bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
+        class: "bg-foreground text-background hover:ring-2 active:bg-foreground active:text-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
       },
       {
         variant: "primary",
@@ -603,7 +661,8 @@ function Button({
       {
         className: cn("transition-opacity group-aria-busy/button:opacity-0", {
           "opacity-0": loading,
-          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
+          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed,
+          "ml-auto": !collapsed
         }),
         children: trailing
       }
@@ -1212,10 +1271,10 @@ var popgridsLogoLg = /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/200
   )
 ] });
 function Footer({ theme = "template", logo, tagline, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full flex-col items-center gap-8 self-stretch border-t border-t-foreground/10 px-10 py-20 lg:px-8", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "border-t-foreground/10 mx-auto flex w-full flex-col items-center gap-8 self-stretch border-t px-10 py-20 lg:px-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-[480px] flex-col items-center gap-4 self-stretch", children: [
       theme === "branding" ? popgridsLogoLg : logo != null && logo,
-      tagline != null && /* @__PURE__ */ jsx("div", { className: "text-center text-lg text-primary-foreground", children: tagline })
+      tagline != null && /* @__PURE__ */ jsx("div", { className: "text-center text-lg", children: tagline })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-[320px] flex-col items-center justify-center gap-1.5 self-stretch lg:max-w-none lg:flex-row lg:gap-1 lg:space-x-1", children }),
     theme === "branding" && /* @__PURE__ */ jsxs(
@@ -1224,7 +1283,7 @@ function Footer({ theme = "template", logo, tagline, children }) {
         className: "relative box-border flex w-full shrink-0 flex-row content-stretch items-center justify-center gap-2 px-0 py-1",
         "data-name": "Footer Info",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "relative flex shrink-0 flex-col justify-center text-nowrap text-center font-display font-normal text-base text-foreground not-italic leading-0", children: /* @__PURE__ */ jsx("p", { className: "block whitespace-pre text-sm leading-6", children: "Powered by" }) }),
+          /* @__PURE__ */ jsx("div", { className: "font-display text-foreground relative flex shrink-0 flex-col justify-center text-center text-base leading-0 font-normal text-nowrap not-italic", children: /* @__PURE__ */ jsx("p", { className: "block text-sm leading-6 whitespace-pre", children: "Powered by" }) }),
           /* @__PURE__ */ jsx(
             "div",
             {