@snksergio/design-system 0.52.0 → 0.53.0

package/dist-lib/chunks/{panel-DA6K3a3n.mjs → panel-DsOKm4Im.mjs}

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, createContext, useContext, useId, useRef, useState, useCallback, useEffect, useMemo, Fragment as Fragment$1, useImperativeHandle, memo } from "react";
+import { createContext, forwardRef, useContext, useState, Children, isValidElement, useId, useRef, useCallback, useEffect, useMemo, Fragment as Fragment$1, useImperativeHandle, memo } from "react";
 import { A as AlertDialog, c as AlertDialogContent, f as AlertDialogHeader, i as AlertDialogTitle, d as AlertDialogDescription, e as AlertDialogFooter, b as AlertDialogCancel, a as AlertDialogAction, T as Textarea, S as Select, D as SelectTrigger, E as SelectValue, u as SelectContent, w as SelectItem, l as Checkbox, Q as Switch, C as Calendar$1, R as getPaginationRange, P as Pagination, o as PaginationFirst, t as PaginationPrevious, m as PaginationContent, p as PaginationItem, n as PaginationEllipsis, r as PaginationLink, s as PaginationNext, q as PaginationLast, N as SheetTitle, I as SheetDescription, G as SheetClose, F as Sheet, O as SheetTrigger, L as SheetOverlay } from "./sheet-DIpYkRYS.mjs";
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay, useDroppable, useDraggable, closestCenter } from "@dnd-kit/core";
 import { useSortable, sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
@@ -158,6 +158,7 @@ function getContrastTextColor(bgColor) {
   const blackContrast = contrastRatio(0, bgLum);
   return whiteContrast >= blackContrast ? "white" : "black";
 }
+const AvatarGroupContext = createContext(void 0);
 const avatarVariants = tv({
   base: [
     "inline-flex items-center justify-center",
@@ -197,21 +198,59 @@ const avatarVariants = tv({
     color: "muted"
   }
 });
+const avatarGroupRoot = tv({ base: "flex items-center" });
+const avatarGroupItem = 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 = forwardRef(
   function Avatar2({
     size,
     color,
     colorHex,
+    src,
     children,
     className,
     style,
     "aria-label": ariaLabel,
     ...rest
   }, ref) {
+    const grupo = useContext(AvatarGroupContext);
+    const sizeEfetivo = size ?? grupo?.size;
+    const [urlQueFalhou, setUrlQueFalhou] = 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
     });
@@ -224,12 +263,72 @@ const Avatar = forwardRef(
         style: computedStyle,
         ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true },
         ...rest,
-        children
+        children: mostraFoto ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: "",
+            className: "size-full object-cover",
+            draggable: false,
+            onError: () => setUrlQueFalhou(src ?? null)
+          }
+        ) : children
       }
     );
   }
 );
 Avatar.displayName = "Avatar";
+const AvatarGroup = forwardRef(
+  function AvatarGroup2({
+    size = "md",
+    max,
+    total,
+    surface = "surface",
+    children,
+    className,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) {
+    const itens = Children.toArray(children).filter(isValidElement);
+    const visiveis = typeof max === "number" ? itens.slice(0, max) : itens;
+    const escondidos = (total ?? itens.length) - visiveis.length;
+    return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: { size, surface }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: avatarGroupRoot({ className }),
+        role: "group",
+        "aria-label": ariaLabel,
+        ...rest,
+        children: [
+          visiveis.map((filho, i) => /* @__PURE__ */ 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__ */ jsx(
+            "span",
+            {
+              className: avatarGroupItem({ size, surface, primeiro: false }),
+              style: { zIndex: 0 },
+              children: /* @__PURE__ */ jsxs(Avatar, { size, color: "muted", "aria-hidden": true, children: [
+                "+",
+                escondidos
+              ] })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
 const buttonGroupVariants = tv({
   base: [
     "inline-flex items-stretch",
@@ -12987,58 +13086,61 @@ function Panel({
   ] });
 }
 export {
-  SortPanel as $,
+  SELECTION_COLUMN_WIDTH as $,
   AlertModal as A,
   BulkActionButton as B,
   ColsPanel as C,
   DataTable as D,
-  DataTableEmpty as E,
+  DataTableEditCell as E,
   FormFieldInput as F,
-  DataTableFloatingBulkBar as G,
-  DataTableLoading as H,
-  DataTableNoResults as I,
-  DataTableTotalizerRow as J,
-  FLOATING_PANEL_SIZE_PX as K,
+  DataTableEmpty as G,
+  DataTableFloatingBulkBar as H,
+  DataTableLoading as I,
+  DataTableNoResults as J,
+  DataTableTotalizerRow as K,
   ListItem as L,
-  FilterPanel as M,
-  FloatingPanelField as N,
-  FloatingPanelSection as O,
+  FLOATING_PANEL_SIZE_PX as M,
+  FilterPanel as N,
+  FloatingPanelField as O,
   Panel as P,
-  FooterTable as Q,
-  FooterTableSkeleton as R,
-  FormFieldCheckbox as S,
+  FloatingPanelSection as Q,
+  FooterTable as R,
+  FooterTableSkeleton as S,
   ToolbarToolButton as T,
-  FormFieldSwitch as U,
-  Kanban as V,
-  MoreMenu as W,
-  PanelBody as X,
-  PanelFooter as Y,
-  PanelHeader as Z,
-  SELECTION_COLUMN_WIDTH as _,
+  FormFieldCheckbox as U,
+  FormFieldSwitch as V,
+  Kanban as W,
+  MoreMenu as X,
+  PanelBody as Y,
+  PanelFooter as Z,
+  PanelHeader as _,
   FormField as a,
-  SortPopover as a0,
-  TABLE_HEADER_HEIGHT as a1,
-  Table as a2,
-  TableBody as a3,
-  TableCardRow as a4,
-  TableCell as a5,
-  TableHead as a6,
-  TableHeadCell as a7,
-  TableRow as a8,
-  TableToolbarViews as a9,
-  ToolbarDivider as aa,
-  ToolbarSaveButton as ab,
-  ToolbarSegmented as ac,
-  ToolbarSettingsMenu as ad,
-  ViewsPopover as ae,
-  avatarVariants as af,
-  floatingPanelStyles as ag,
-  panelContainer as ah,
-  savedViewsMockService as ai,
-  useColumnResize as aj,
-  useColumnWidths as ak,
-  useDataTableContext as al,
-  useFloatingPanelResize as am,
+  SortPanel as a0,
+  SortPopover as a1,
+  TABLE_HEADER_HEIGHT as a2,
+  Table as a3,
+  TableBody as a4,
+  TableCardRow as a5,
+  TableCell as a6,
+  TableHead as a7,
+  TableHeadCell as a8,
+  TableRow as a9,
+  TableToolbarViews as aa,
+  ToolbarDivider as ab,
+  ToolbarSaveButton as ac,
+  ToolbarSegmented as ad,
+  ToolbarSettingsMenu as ae,
+  ViewsPopover as af,
+  avatarGroupItem as ag,
+  avatarGroupRoot as ah,
+  avatarVariants as ai,
+  floatingPanelStyles as aj,
+  panelContainer as ak,
+  savedViewsMockService as al,
+  useColumnResize as am,
+  useColumnWidths as an,
+  useDataTableContext as ao,
+  useFloatingPanelResize as ap,
   FormFieldSelect as b,
   FormFieldTextarea as c,
   FloatingPanel as d,
@@ -13058,11 +13160,11 @@ export {
   columnTypeRegistry as r,
   List as s,
   AddViewModal as t,
-  BulkActionsBar as u,
-  ColsPopover as v,
-  Combobox as w,
-  DEFAULT_FILTER_OPERATORS as x,
-  DataTableActionsCell as y,
-  DataTableEditCell as z
+  AvatarGroup as u,
+  BulkActionsBar as v,
+  ColsPopover as w,
+  Combobox as x,
+  DEFAULT_FILTER_OPERATORS as y,
+  DataTableActionsCell as z
 };
-//# sourceMappingURL=panel-DA6K3a3n.mjs.map
+//# sourceMappingURL=panel-DsOKm4Im.mjs.map