@snksergio/design-system 0.43.3 → 0.45.0

package/dist-lib/index.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const panel = require("./chunks/panel-CvfP8eP1.cjs");
+const panel = require("./chunks/panel-4aMDou7z.cjs");
 const useTheme = require("./chunks/useTheme-C9Y6vxTf.cjs");
 const avatar = require("./chunks/avatar-eM5txRFZ.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const sheet = require("./chunks/sheet-j-d_UX7R.cjs");
 const lucideReact = require("lucide-react");
-const toggleGroup = require("./chunks/toggle-group-BEPs3e0Y.cjs");
+const toggleGroup = require("./chunks/toggle-group-BC4eS3Gt.cjs");
 const input = require("./chunks/input-az2SuVXQ.cjs");
 const kpiDelta = require("./chunks/kpi-delta-CXGg2nBx.cjs");
 const pageHeader = require("./chunks/page-header-DvAJoEfb.cjs");
@@ -3975,9 +3975,14 @@ const messageBubbleStyles = avatar.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",
@@ -4115,33 +4120,43 @@ function MessageMediaRenderer({
           }
         )
       ) : null });
-    case "document":
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mediaDoc(), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
-          {
-            name: "line-file",
-            size: "lg",
-            className: styles.mediaDocIcon()
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mediaDocInfo(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.mediaDocName(), children: body2 || "Documento" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.mediaDocHint(), children: "Toque para baixar" })
-        ] }),
-        mediaUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          avatar.Button,
-          {
+    case "document": {
+      const abrivel = Boolean(onMediaClick);
+      const Moldura = abrivel ? "button" : "div";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Moldura,
+        {
+          ...abrivel ? {
             type: "button",
-            size: "xs",
-            variant: "ghost",
-            color: "primary",
-            "aria-label": "Baixar documento",
             onClick: onMediaClick,
-            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "line-download-01", size: "sm" })
-          }
-        ) : null
-      ] });
+            "aria-label": `Abrir documento${body2 ? `: ${body2}` : ""}`
+          } : {},
+          className: styles.mediaDoc(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon,
+              {
+                name: "line-file",
+                size: "lg",
+                className: styles.mediaDocIcon()
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mediaDocInfo(), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.mediaDocName(), children: body2 || "Documento" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.mediaDocHint(), children: abrivel ? "Toque para abrir" : "Documento recebido" })
+            ] }),
+            abrivel ? /* @__PURE__ */ jsxRuntime.jsx(
+              Icon,
+              {
+                name: "line-download-01",
+                size: "sm",
+                className: styles.mediaDocIcon()
+              }
+            ) : null
+          ]
+        }
+      );
+    }
     case "location":
       return mediaUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
@@ -4339,7 +4354,7 @@ const messageComposerStyles = avatar.tv({
     },
     state: {
       open: {},
-      disabled: { root: "opacity-60" },
+      disabled: { field: "opacity-60" },
       "read-only": {}
     }
   },
@@ -4347,7 +4362,7 @@ const messageComposerStyles = avatar.tv({
     // disabled SEMPRE por último (L-006)
     {
       state: "disabled",
-      class: { root: "pointer-events-none" }
+      class: { field: "pointer-events-none" }
     }
   ],
   defaultVariants: {
@@ -6541,6 +6556,10 @@ function object(topology, o) {
 const choroplethStyles = avatar.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
@@ -6548,12 +6567,31 @@ const choroplethStyles = avatar.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",
@@ -6571,8 +6609,10 @@ function isFeatureCollection(g) {
 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;
@@ -6600,6 +6640,7 @@ const ChoroplethMap = React.forwardRef(
     formatValue,
     renderTooltip,
     onFeatureClick,
+    selectedId,
     ariaLabel = "Mapa",
     className
   }, ref) {
@@ -6619,8 +6660,7 @@ const ChoroplethMap = React.forwardRef(
       const pathGen = geoPath(proj);
       return features.map((f) => ({
         feature: f,
-        d: pathGen(f) ?? "",
-        centroid: pathGen.centroid(f)
+        d: pathGen(f) ?? ""
       }));
     }, [features, projection2, width, height]);
     const getId = (f) => {
@@ -6640,6 +6680,7 @@ const ChoroplethMap = React.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) => {
@@ -6653,69 +6694,96 @@ const ChoroplethMap = React.forwardRef(
     };
     const fmt = formatValue ?? ((v) => new Intl.NumberFormat("pt-BR").format(v));
     const [hover, setHover] = React.useState(null);
+    const [pos, setPos] = React.useState(null);
     const legendGradient = `linear-gradient(to right, ${surfaceVar}, ${scaleVar})`;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: styles2.root({ className }), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          viewBox: `0 0 ${width} ${height}`,
-          className: styles2.svg(),
-          role: "img",
-          "aria-label": ariaLabel,
-          onMouseLeave: () => setHover(null),
-          children: geometry.map(({ feature: feature2, d, centroid }, index) => {
-            const id = getId(feature2);
-            const value = values[id];
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d,
-                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__ */ jsxRuntime.jsx("div", { className: styles2.tooltipLayer(), children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.Tooltip, { open: hover != null, onOpenChange: () => {
-      }, disableHoverableContent: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(avatar.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.canvas(), children: [
+        /* @__PURE__ */ jsxRuntime.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: (e) => {
+              const r = e.currentTarget.getBoundingClientRect();
+              setPos({
+                ax: (e.clientX - r.left) / r.width * 100,
+                ay: (e.clientY - r.top) / r.height * 100
+              });
+            },
+            children: [
+              geometry.map(({ feature: feature2, d }, index) => {
+                const id = getId(feature2);
+                const value = values[id];
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d,
+                    fill: fillFor(value),
+                    strokeWidth,
+                    className: styles2.path(),
+                    style: onFeatureClick ? { cursor: "pointer" } : void 0,
+                    onMouseEnter: () => setHover({ id, name: getName(feature2), value, feature: feature2, d }),
+                    onClick: onFeatureClick ? () => onFeatureClick({
+                      id,
+                      name: getName(feature2),
+                      value,
+                      feature: feature2
+                    }) : void 0
+                  },
+                  `${id}-${index}`
+                );
+              }),
+              selectedId != null && (() => {
+                const sel = geometry.find(
+                  (g) => getId(g.feature) === selectedId
+                );
+                return sel ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          avatar.TooltipContent,
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.tooltipLayer(), children: hover && pos && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            showArrow: false,
-            className: "border border-border-default bg-bg-surface-elevated shadow-sh-lg",
-            children: hover && (renderTooltip ? renderTooltip(hover) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.tooltipName(), children: hover.name }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.tooltipValue(), children: hover.value != null && Number.isFinite(hover.value) ? fmt(hover.value) : "Sem dados" })
-            ] }))
+            ] })
           }
-        )
-      ] }) }),
+        ) })
+      ] }),
       showLegend && numeric.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.legend(), children: [
         legendTitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.legendTitle(), children: legendTitle }),
         /* @__PURE__ */ jsxRuntime.jsx(