@snksergio/design-system 0.44.0 → 0.45.0

package/dist-lib/index.mjs

@@ -1,8 +1,8 @@
-import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List } from "./chunks/panel-CCPe1H70.mjs";
-import { t, A, B, u, C, v, w, x, D, y, z, E, G, H, I, J, K, M, d, N, O, Q, R, S, F, b, U, c, V, W, P, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, p, ai, aj, ak, al, am } from "./chunks/panel-CCPe1H70.mjs";
+import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List } from "./chunks/panel-DtQi10ps.mjs";
+import { t, A, B, u, C, v, w, x, D, y, z, E, G, H, I, J, K, M, d, N, O, Q, R, S, F, b, U, c, V, W, P, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, p, ai, aj, ak, al, am } from "./chunks/panel-DtQi10ps.mjs";
 import { C as Chip } from "./chunks/useTheme-DCmzLBUR.mjs";
 import { A as A2, a, b as b2, H as H2, c as c2, d as d2, e, f, g, M as M2, S as S2, h, i, j, k, l, m, n, U as U2, o, p as p2, q, r, s, t as t2, v as v2, w as w2, u as u2 } from "./chunks/useTheme-DCmzLBUR.mjs";
-import { t as tv, X as Popover, $ as PopoverTrigger, _ as PopoverContent, B as Button, D as Dialog, x as DialogTrigger, c as cn, p as DialogContent, w as DialogTitle, Y as PopoverAnchor, o as DialogClose, q as DialogDescription, a0 as Tooltip, a3 as TooltipTrigger, a1 as TooltipContent, y as DropdownMenu, Q as DropdownMenuTrigger, E as DropdownMenuContent, L as DropdownMenuSeparator, G as DropdownMenuItem } from "./chunks/avatar-DFWEwBKu.mjs";
+import { t as tv, X as Popover, $ as PopoverTrigger, _ as PopoverContent, B as Button, D as Dialog, x as DialogTrigger, c as cn, p as DialogContent, w as DialogTitle, Y as PopoverAnchor, o as DialogClose, q as DialogDescription, y as DropdownMenu, Q as DropdownMenuTrigger, E as DropdownMenuContent, L as DropdownMenuSeparator, G as DropdownMenuItem } from "./chunks/avatar-DFWEwBKu.mjs";
 import { R as R2, S as S3, T, U as U3, V as V2, W as W2, z as z2, H as H3, J as J2, K as K2, a9 as a92, a8 as a82 } from "./chunks/avatar-DFWEwBKu.mjs";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
@@ -3963,9 +3963,14 @@ const messageBubbleStyles = tv({
     mediaVideo: "max-w-full rounded-radius-sm focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand",
     mediaAudio: "w-full",
     mediaDoc: [
-      "flex items-center gap-gp-md",
+      "flex w-full items-center gap-gp-md text-left",
       "rounded-radius-sm bg-bg-muted",
-      "px-pad-lg py-pad-md"
+      "px-pad-lg py-pad-md",
+      // O card INTEIRO e o alvo do clique (ver o docblock do branch
+      // `document`), entao ele precisa do estado de foco e do afeto de hover
+      // que qualquer alvo clicavel tem.
+      "transition-colors hover:bg-bg-subtle",
+      "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
     ],
     mediaDocIcon: "shrink-0 text-fg-brand",
     mediaDocInfo: "flex min-w-0 flex-col",
@@ -4103,33 +4108,43 @@ function MessageMediaRenderer({
           }
         )
       ) : null });
-    case "document":
-      return /* @__PURE__ */ jsxs("div", { className: styles.mediaDoc(), children: [
-        /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: "line-file",
-            size: "lg",
-            className: styles.mediaDocIcon()
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: styles.mediaDocInfo(), children: [
-          /* @__PURE__ */ jsx("span", { className: styles.mediaDocName(), children: body2 || "Documento" }),
-          /* @__PURE__ */ jsx("span", { className: styles.mediaDocHint(), children: "Toque para baixar" })
-        ] }),
-        mediaUrl ? /* @__PURE__ */ jsx(
-          Button,
-          {
+    case "document": {
+      const abrivel = Boolean(onMediaClick);
+      const Moldura = abrivel ? "button" : "div";
+      return /* @__PURE__ */ jsxs(
+        Moldura,
+        {
+          ...abrivel ? {
             type: "button",
-            size: "xs",
-            variant: "ghost",
-            color: "primary",
-            "aria-label": "Baixar documento",
             onClick: onMediaClick,
-            children: /* @__PURE__ */ jsx(Icon, { name: "line-download-01", size: "sm" })
-          }
-        ) : null
-      ] });
+            "aria-label": `Abrir documento${body2 ? `: ${body2}` : ""}`
+          } : {},
+          className: styles.mediaDoc(),
+          children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "line-file",
+                size: "lg",
+                className: styles.mediaDocIcon()
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: styles.mediaDocInfo(), children: [
+              /* @__PURE__ */ jsx("span", { className: styles.mediaDocName(), children: body2 || "Documento" }),
+              /* @__PURE__ */ jsx("span", { className: styles.mediaDocHint(), children: abrivel ? "Toque para abrir" : "Documento recebido" })
+            ] }),
+            abrivel ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "line-download-01",
+                size: "sm",
+                className: styles.mediaDocIcon()
+              }
+            ) : null
+          ]
+        }
+      );
+    }
     case "location":
       return mediaUrl ? /* @__PURE__ */ jsxs(
         "a",
@@ -4327,7 +4342,7 @@ const messageComposerStyles = tv({
     },
     state: {
       open: {},
-      disabled: { root: "opacity-60" },
+      disabled: { field: "opacity-60" },
       "read-only": {}
     }
   },
@@ -4335,7 +4350,7 @@ const messageComposerStyles = tv({
     // disabled SEMPRE por último (L-006)
     {
       state: "disabled",
-      class: { root: "pointer-events-none" }
+      class: { field: "pointer-events-none" }
     }
   ],
   defaultVariants: {
@@ -6529,6 +6544,10 @@ function object(topology, o2) {
 const choroplethStyles = tv({
   slots: {
     root: "relative w-full",
+    // Wrapper do svg + camada de tooltip: garante que o inset-0 da camada
+    // cubra EXATAMENTE a área do mapa (sem ele, a camada cobria root inteiro
+    // — incluindo a legenda — e as % de posição saíam deslocadas).
+    canvas: "relative",
     svg: "block h-auto w-full",
     // Traço das divisas — `fg-muted` (mid-gray VISÍVEL nos DOIS temas: L≈0.50
     // no light, L≈0.70 no dark). `border-default` era L≈0.91 no light → as
@@ -6536,12 +6555,31 @@ const choroplethStyles = tv({
     // ("só 2 pontos"). hover reforça no próprio path (inline).
     path: [
       "stroke-fg-muted",
-      "transition-[fill,stroke] duration-150",
-      "hover:stroke-fg-brand"
+      "transition-[fill,stroke] duration-150"
     ],
-    // Camada de ancoragem do tooltip (não intercepta o mouse).
+    // Realce da região sob hover — uma CÓPIA do path desenhada por cima de
+    // todas as outras. Necessário porque stroke de path SVG é coberto pelos
+    // vizinhos desenhados depois: no próprio path, o contorno nunca fecha a
+    // região inteira ("mal delimitada"). Não intercepta o mouse. Stroke E fill
+    // vão inline, derivados do scaleToken (fg-{token} / bg-{token}) — o
+    // contorno acompanha a família de cor do mapa (amarelo em warning, roxo
+    // em info...), nunca verde fixo.
+    pathHighlight: "pointer-events-none",
+    // Seleção persistente (selectedId) — mesma técnica do hover (cópia por
+    // cima), tinta mais forte pra diferenciar do transitório.
+    pathSelected: "pointer-events-none",
+    // Camada do tooltip (não intercepta o mouse — nem ela nem o filho).
     tooltipLayer: "pointer-events-none absolute inset-0",
-    tooltipAnchor: "absolute",
+    // Tooltip PRÓPRIO, não Radix: renderizado dentro da camada acima, segue o
+    // cursor e só troca o conteúdo. O Tooltip do DS portala o conteúdo num
+    // wrapper do popper que captura o mouse — cursor movendo NA DIREÇÃO do
+    // tooltip o alcançava → mouseleave do svg → fecha/reabre em loop (flicker
+    // dependente de direção). Superfície = mesma receita sólida de antes.
+    tooltip: [
+      "pointer-events-none absolute z-10 w-max max-w-[16rem] select-none",
+      "rounded-radius-md border border-border-default bg-bg-surface-elevated",
+      "px-pad-lg py-pad-xs text-caption-sm shadow-sh-lg"
+    ],
     tooltipName: "font-semibold text-fg-default",
     tooltipValue: "text-fg-muted",
     legend: "mt-gp-md flex flex-col gap-gp-xs",
@@ -6559,8 +6597,10 @@ function isFeatureCollection(g2) {
 function normalizeFeatures(geography, topologyObject) {
   if (Array.isArray(geography)) return geography;
   if (isTopology(geography)) {
-    if (!topologyObject) return [];
-    const obj = geography.objects[topologyObject];
+    const keys = Object.keys(geography.objects);
+    const objectName = topologyObject ?? (keys.length === 1 ? keys[0] : void 0);
+    if (!objectName) return [];
+    const obj = geography.objects[objectName];
     if (!obj) return [];
     const out = topojsonFeature(geography, obj);
     if (out.type === "FeatureCollection") return out.features;
@@ -6588,6 +6628,7 @@ const ChoroplethMap = forwardRef(
     formatValue,
     renderTooltip,
     onFeatureClick,
+    selectedId,
     ariaLabel = "Mapa",
     className
   }, ref) {
@@ -6607,8 +6648,7 @@ const ChoroplethMap = forwardRef(
       const pathGen = geoPath(proj);
       return features.map((f2) => ({
         feature: f2,
-        d: pathGen(f2) ?? "",
-        centroid: pathGen.centroid(f2)
+        d: pathGen(f2) ?? ""
       }));
     }, [features, projection2, width, height]);
     const getId = (f2) => {
@@ -6628,6 +6668,7 @@ const ChoroplethMap = forwardRef(
     const min = domain ? domain[0] : numeric.length ? Math.min(...numeric) : 0;
     const max = domain ? domain[1] : numeric.length ? Math.max(...numeric) : 0;
     const scaleVar = `var(--color-bg-${scaleToken})`;
+    const strokeVar = `var(--color-fg-${scaleToken})`;
     const surfaceVar = "var(--color-bg-surface)";
     const noDataVar = "var(--color-bg-muted)";
     const fillFor = (value) => {
@@ -6641,69 +6682,96 @@ const ChoroplethMap = forwardRef(
     };
     const fmt = formatValue ?? ((v3) => new Intl.NumberFormat("pt-BR").format(v3));
     const [hover, setHover] = useState(null);
+    const [pos, setPos] = useState(null);
     const legendGradient = `linear-gradient(to right, ${surfaceVar}, ${scaleVar})`;
     return /* @__PURE__ */ jsxs("div", { ref, className: styles2.root({ className }), children: [
-      /* @__PURE__ */ jsx(
-        "svg",
-        {
-          viewBox: `0 0 ${width} ${height}`,
-          className: styles2.svg(),
-          role: "img",
-          "aria-label": ariaLabel,
-          onMouseLeave: () => setHover(null),
-          children: geometry.map(({ feature: feature2, d: d3, centroid }, index) => {
-            const id = getId(feature2);
-            const value = values[id];
-            return /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: d3,
-                fill: fillFor(value),
-                strokeWidth,
-                className: styles2.path(),
-                style: onFeatureClick ? { cursor: "pointer" } : void 0,
-                onMouseEnter: () => setHover({
-                  id,
-                  name: getName(feature2),
-                  value,
-                  feature: feature2,
-                  ax: centroid[0] / width * 100,
-                  ay: centroid[1] / height * 100
-                }),
-                onClick: onFeatureClick ? () => onFeatureClick({
-                  id,
-                  name: getName(feature2),
-                  value,
-                  feature: feature2
-                }) : void 0
-              },
-              `${id}-${index}`
-            );
-          })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: styles2.tooltipLayer(), children: /* @__PURE__ */ jsxs(Tooltip, { open: hover != null, onOpenChange: () => {
-      }, disableHoverableContent: true, children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "span",
+      /* @__PURE__ */ jsxs("div", { className: styles2.canvas(), children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
           {
-            "aria-hidden": "true",
-            className: styles2.tooltipAnchor(),
-            style: { left: `${hover?.ax ?? 0}%`, top: `${hover?.ay ?? 0}%` }
+            viewBox: `0 0 ${width} ${height}`,
+            className: styles2.svg(),
+            role: "img",
+            "aria-label": ariaLabel,
+            onMouseLeave: () => setHover(null),
+            onMouseMove: (e2) => {
+              const r2 = e2.currentTarget.getBoundingClientRect();
+              setPos({
+                ax: (e2.clientX - r2.left) / r2.width * 100,
+                ay: (e2.clientY - r2.top) / r2.height * 100
+              });
+            },
+            children: [
+              geometry.map(({ feature: feature2, d: d3 }, index) => {
+                const id = getId(feature2);
+                const value = values[id];
+                return /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: d3,
+                    fill: fillFor(value),
+                    strokeWidth,
+                    className: styles2.path(),
+                    style: onFeatureClick ? { cursor: "pointer" } : void 0,
+                    onMouseEnter: () => setHover({ id, name: getName(feature2), value, feature: feature2, d: d3 }),
+                    onClick: onFeatureClick ? () => onFeatureClick({
+                      id,
+                      name: getName(feature2),
+                      value,
+                      feature: feature2
+                    }) : void 0
+                  },
+                  `${id}-${index}`
+                );
+              }),
+              selectedId != null && (() => {
+                const sel = geometry.find(
+                  (g2) => getId(g2.feature) === selectedId
+                );
+                return sel ? /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: sel.d,
+                    className: styles2.pathSelected(),
+                    strokeWidth: Math.max(strokeWidth * 3, 1.5),
+                    style: {
+                      stroke: strokeVar,
+                      fill: `color-mix(in srgb, ${scaleVar} 32%, transparent)`
+                    }
+                  }
+                ) : null;
+              })(),
+              hover && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: hover.d,
+                  className: styles2.pathHighlight(),
+                  strokeWidth: Math.max(strokeWidth * 3, 1.5),
+                  style: {
+                    stroke: strokeVar,
+                    fill: `color-mix(in srgb, ${scaleVar} 18%, transparent)`
+                  }
+                }
+              )
+            ]
           }
-        ) }),
-        /* @__PURE__ */ jsx(
-          TooltipContent,
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles2.tooltipLayer(), children: hover && pos && /* @__PURE__ */ jsx(
+          "div",
           {
-            showArrow: false,
-            className: "border border-border-default bg-bg-surface-elevated shadow-sh-lg",
-            children: hover && (renderTooltip ? renderTooltip(hover) : /* @__PURE__ */ jsxs("div", { children: [
+            className: styles2.tooltip(),
+            style: {
+              left: `${pos.ax}%`,
+              top: `${pos.ay}%`,
+              transform: `translate(${pos.ax < 12 ? "0%" : pos.ax > 88 ? "-100%" : "-50%"}, ${pos.ay < 18 ? "16px" : "calc(-100% - 12px)"})`
+            },
+            children: renderTooltip ? renderTooltip(hover) : /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("div", { className: styles2.tooltipName(), children: hover.name }),
               /* @__PURE__ */ jsx("div", { className: styles2.tooltipValue(), children: hover.value != null && Number.isFinite(hover.value) ? fmt(hover.value) : "Sem dados" })
-            ] }))
+            ] })
           }
-        )
-      ] }) }),
+        ) })
+      ] }),
       showLegend && numeric.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles2.legend(), children: [
         legendTitle && /* @__PURE__ */ jsx("span", { className: styles2.legendTitle(), children: legendTitle }),
         /* @__PURE__ */ jsx(