@snksergio/design-system 0.52.0 → 0.54.0

package/dist-lib/chunks/{panel-Bly-rNP9.cjs → panel-CTbiCa0_.cjs}

@@ -176,6 +176,7 @@ function getContrastTextColor(bgColor) {
   const blackContrast = contrastRatio(0, bgLum);
   return whiteContrast >= blackContrast ? "white" : "black";
 }
+const AvatarGroupContext = React.createContext(void 0);
 const avatarVariants = avatar.tv({
   base: [
     "inline-flex items-center justify-center",
@@ -215,21 +216,59 @@ const avatarVariants = avatar.tv({
     color: "muted"
   }
 });
+const avatarGroupRoot = avatar.tv({ base: "flex items-center" });
+const avatarGroupItem = avatar.tv({
+  base: ["relative inline-flex rounded-radius-full ring-2"],
+  variants: {
+    /** Deslocamento negativo ≈ 25% do diâmetro, em token. Ver o bloco acima. */
+    size: {
+      xs: "-ml-sp-xs",
+      //  20px → 4
+      sm: "-ml-sp-sm",
+      //  24px → 6
+      md: "-ml-sp-sm",
+      //  28px → 6
+      lg: "-ml-sp-md",
+      //  32px → 8
+      xl: "-ml-sp-lg"
+      //  40px → 10
+    },
+    /** Cor do anel = superfície de trás. */
+    surface: {
+      surface: "ring-bg-surface",
+      canvas: "ring-bg-canvas",
+      subtle: "ring-bg-subtle",
+      muted: "ring-bg-muted",
+      table: "ring-bg-table"
+    },
+    /** O primeiro não desloca — senão a pilha inteira sai da margem esquerda. */
+    primeiro: { true: "ml-0" }
+  },
+  defaultVariants: {
+    size: "md",
+    surface: "surface"
+  }
+});
 const Avatar = React.forwardRef(
   function Avatar2({
     size,
     color,
     colorHex,
+    src,
     children,
     className,
     style,
     "aria-label": ariaLabel,
     ...rest
   }, ref) {
+    const grupo = React.useContext(AvatarGroupContext);
+    const sizeEfetivo = size ?? grupo?.size;
+    const [urlQueFalhou, setUrlQueFalhou] = React.useState(null);
+    const mostraFoto = typeof src === "string" && src !== "" && urlQueFalhou !== src;
     const isHex = typeof colorHex === "string" && colorHex.startsWith("#");
     const autoTextClass = isHex ? getContrastTextColor(colorHex) === "black" ? "text-black" : "text-white" : null;
     const computedClassName = avatarVariants({
-      size,
+      size: sizeEfetivo,
       color: isHex ? "_custom" : color,
       className: isHex ? [autoTextClass, className].filter(Boolean).join(" ") : className
     });
@@ -242,12 +281,72 @@ const Avatar = React.forwardRef(
         style: computedStyle,
         ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true },
         ...rest,
-        children
+        children: mostraFoto ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt: "",
+            className: "size-full object-cover",
+            draggable: false,
+            onError: () => setUrlQueFalhou(src ?? null)
+          }
+        ) : children
       }
     );
   }
 );
 Avatar.displayName = "Avatar";
+const AvatarGroup = React.forwardRef(
+  function AvatarGroup2({
+    size = "md",
+    max,
+    total,
+    surface = "surface",
+    children,
+    className,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) {
+    const itens = React.Children.toArray(children).filter(React.isValidElement);
+    const visiveis = typeof max === "number" ? itens.slice(0, max) : itens;
+    const escondidos = (total ?? itens.length) - visiveis.length;
+    return /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupContext.Provider, { value: { size, surface }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: avatarGroupRoot({ className }),
+        role: "group",
+        "aria-label": ariaLabel,
+        ...rest,
+        children: [
+          visiveis.map((filho, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: avatarGroupItem({ size, surface, primeiro: i === 0 }),
+              style: { zIndex: visiveis.length - i },
+              children: filho
+            },
+            i
+          )),
+          escondidos > 0 && /* O `+N` é `aria-hidden`: a contagem real já está no `aria-label` do grupo, e
+          anunciar "mais 9" solto não diz de quê. */
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: avatarGroupItem({ size, surface, primeiro: false }),
+              style: { zIndex: 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size, color: "muted", "aria-hidden": true, children: [
+                "+",
+                escondidos
+              ] })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
 const buttonGroupVariants = avatar.tv({
   base: [
     "inline-flex items-stretch",
@@ -13007,6 +13106,7 @@ function Panel({
 exports.AddViewModal = AddViewModal;
 exports.AlertModal = AlertModal;
 exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
 exports.BulkActionButton = BulkActionButton;
 exports.BulkActionsBar = BulkActionsBar;
 exports.ButtonGroup = ButtonGroup;
@@ -13069,6 +13169,8 @@ exports.ToolbarSimpleFilterDrawer = ToolbarSimpleFilterDrawer;
 exports.ToolbarTabs = ToolbarTabs;
 exports.ToolbarToolButton = ToolbarToolButton;
 exports.ViewsPopover = ViewsPopover;
+exports.avatarGroupItem = avatarGroupItem;
+exports.avatarGroupRoot = avatarGroupRoot;
 exports.avatarVariants = avatarVariants;
 exports.columnTypeRegistry = columnTypeRegistry;
 exports.floatingPanelStyles = floatingPanelStyles;
@@ -13081,4 +13183,4 @@ exports.useColumnResize = useColumnResize;
 exports.useColumnWidths = useColumnWidths;
 exports.useDataTableContext = useDataTableContext;
 exports.useFloatingPanelResize = useFloatingPanelResize;
-//# sourceMappingURL=panel-Bly-rNP9.cjs.map
+//# sourceMappingURL=panel-CTbiCa0_.cjs.map