@plenustech/design-system 0.2.2 → 0.2.4

package/dist/components/navigation/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Tabs.module.css';\n\nexport interface TabItem {\n  content: ReactNode;\n  disabled?: boolean;\n  key: string;\n  label: string;\n}\n\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\nexport interface TabsProps extends ComponentPropsWithRef<'div'> {\n  defaultSelectedKey?: string;\n  items: readonly TabItem[];\n  label: string;\n  onSelectionChange?: (key: string) => void;\n  orientation?: TabsOrientation;\n  selectedKey?: string;\n}\n\nexport function Tabs({\n  className,\n  defaultSelectedKey,\n  items,\n  label,\n  onSelectionChange,\n  orientation = 'horizontal',\n  selectedKey,\n  ...props\n}: TabsProps) {\n  const baseId = `tabs-${useId()}`;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const primeira = collection.find((item) => !item.disabled)?.key;\n  const selection = useSelection({\n    items: collection,\n    mode: 'single',\n    defaultSelectedKeys: selectedKey === undefined ? [defaultSelectedKey ?? primeira ?? ''] : undefined,\n    selectedKeys: selectedKey === undefined ? undefined : [selectedKey],\n    onSelectionChange: (keys) => {\n      const [escolhida] = keys;\n      if (escolhida !== undefined) {\n        onSelectionChange?.(escolhida);\n      }\n    },\n  });\n  const [ativa] = selection.selectedKeys;\n  const painel = items.find((item) => item.key === ativa);\n  // A lista sempre tem uma parada de Tab: com a escolhida inexistente ou desabilitada, nenhuma aba era alcancavel.\n  const parada = collection.some((item) => item.key === ativa && !item.disabled) ? ativa : primeira;\n\n  useEffect(() => {\n    if (selection.focusedKey) {\n      nodes.current.get(selection.focusedKey)?.focus();\n    }\n  }, [selection.focusedKey]);\n\n  // Ativacao automatica: mover o foco troca a aba, conforme o padrao do APG\n  // para paineis que carregam instantaneamente.\n  function mover(proxima: string | undefined) {\n    if (proxima) {\n      selection.select(proxima);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const atual = selection.focusedKey ?? ativa;\n    const avancar = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n    const voltar = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n    if (event.key === avancar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, 1));\n    } else if (event.key === voltar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, -1));\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      mover(collection.find((item) => !item.disabled)?.key);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      mover([...collection].reverse().find((item) => !item.disabled)?.key);\n    }\n  }\n\n  return (\n    <div {...props} className={[styles.tabs, styles[orientation], className].filter(Boolean).join(' ')}>\n      <div\n        className={styles.list}\n        role=\"tablist\"\n        aria-label={label}\n        aria-orientation={orientation}\n        onKeyDown={handleKeyDown}\n      >\n        {items.map((item) => (\n          <button\n            key={item.key}\n            ref={(node) => {\n              if (node) {\n                nodes.current.set(item.key, node);\n              } else {\n                nodes.current.delete(item.key);\n              }\n            }}\n            className={[styles.tab, ativa === item.key && styles.active].filter(Boolean).join(' ')}\n            type=\"button\"\n            role=\"tab\"\n            id={`${baseId}-${item.key}`}\n            aria-controls={ativa === item.key ? `${baseId}-${item.key}-panel` : undefined}\n            aria-selected={ativa === item.key}\n            disabled={item.disabled}\n            tabIndex={parada === item.key ? 0 : -1}\n            onClick={() => selection.select(item.key)}\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n      {painel && (\n        <div\n          className={styles.panel}\n          role=\"tabpanel\"\n          id={`${baseId}-${painel.key}-panel`}\n          aria-labelledby={`${baseId}-${painel.key}`}\n          tabIndex={0}\n        >\n          {painel.content}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Percorre em circulo, como o APG define para abas.\nfunction proximaChave(items: readonly SelectionItem[], from: string | undefined, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Tabs","className","defaultSelectedKey","items","label","onSelectionChange","orientation","selectedKey","props","baseId","useId","nodes","useRef","collection","useMemo","item","primeira","_a","selection","useSelection","keys","escolhida","ativa","painel","parada","useEffect","mover","proxima","handleKeyDown","event","atual","avancar","voltar","proximaChave","_b","styles","jsx","node","from","passo","total","inicio","i"],"mappings":"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"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Tabs.module.css';\n\nexport interface TabItem {\n  content: ReactNode;\n  disabled?: boolean;\n  key: string;\n  label: string;\n}\n\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\nexport interface TabsProps extends ComponentPropsWithRef<'div'> {\n  defaultSelectedKey?: string;\n  /** O painel ocupa a altura que sobra nas abas e rola por dentro. As abas precisam de altura, dada por quem as usa. */\n  fillHeight?: boolean;\n  /** As abas dividem a largura em partes iguais, em vez de ficar do tamanho do rotulo. */\n  fitted?: boolean;\n  items: readonly TabItem[];\n  label: string;\n  onSelectionChange?: (key: string) => void;\n  orientation?: TabsOrientation;\n  selectedKey?: string;\n}\n\nexport function Tabs({\n  className,\n  defaultSelectedKey,\n  fillHeight = false,\n  fitted = false,\n  items,\n  label,\n  onSelectionChange,\n  orientation = 'horizontal',\n  selectedKey,\n  ...props\n}: TabsProps) {\n  const baseId = `tabs-${useId()}`;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const primeira = collection.find((item) => !item.disabled)?.key;\n  const selection = useSelection({\n    items: collection,\n    mode: 'single',\n    defaultSelectedKeys: selectedKey === undefined ? [defaultSelectedKey ?? primeira ?? ''] : undefined,\n    selectedKeys: selectedKey === undefined ? undefined : [selectedKey],\n    onSelectionChange: (keys) => {\n      const [escolhida] = keys;\n      if (escolhida !== undefined) {\n        onSelectionChange?.(escolhida);\n      }\n    },\n  });\n  const [ativa] = selection.selectedKeys;\n  const painel = items.find((item) => item.key === ativa);\n  // A lista sempre tem uma parada de Tab: com a escolhida inexistente ou desabilitada, nenhuma aba era alcancavel.\n  const parada = collection.some((item) => item.key === ativa && !item.disabled) ? ativa : primeira;\n\n  useEffect(() => {\n    if (selection.focusedKey) {\n      nodes.current.get(selection.focusedKey)?.focus();\n    }\n  }, [selection.focusedKey]);\n\n  // Ativacao automatica: mover o foco troca a aba, conforme o padrao do APG\n  // para paineis que carregam instantaneamente.\n  function mover(proxima: string | undefined) {\n    if (proxima) {\n      selection.select(proxima);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const atual = selection.focusedKey ?? ativa;\n    const avancar = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n    const voltar = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n    if (event.key === avancar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, 1));\n    } else if (event.key === voltar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, -1));\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      mover(collection.find((item) => !item.disabled)?.key);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      mover([...collection].reverse().find((item) => !item.disabled)?.key);\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={[styles.tabs, styles[orientation], fitted && styles.fitted, fillHeight && styles.fillHeight, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={styles.list}\n        role=\"tablist\"\n        aria-label={label}\n        aria-orientation={orientation}\n        onKeyDown={handleKeyDown}\n      >\n        {items.map((item) => (\n          <button\n            key={item.key}\n            ref={(node) => {\n              if (node) {\n                nodes.current.set(item.key, node);\n              } else {\n                nodes.current.delete(item.key);\n              }\n            }}\n            className={[styles.tab, ativa === item.key && styles.active].filter(Boolean).join(' ')}\n            type=\"button\"\n            role=\"tab\"\n            id={`${baseId}-${item.key}`}\n            aria-controls={ativa === item.key ? `${baseId}-${item.key}-panel` : undefined}\n            aria-selected={ativa === item.key}\n            disabled={item.disabled}\n            tabIndex={parada === item.key ? 0 : -1}\n            onClick={() => selection.select(item.key)}\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n      {painel && (\n        <div\n          className={styles.panel}\n          role=\"tabpanel\"\n          id={`${baseId}-${painel.key}-panel`}\n          aria-labelledby={`${baseId}-${painel.key}`}\n          tabIndex={0}\n        >\n          {painel.content}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Percorre em circulo, como o APG define para abas.\nfunction proximaChave(items: readonly SelectionItem[], from: string | undefined, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Tabs","className","defaultSelectedKey","fillHeight","fitted","items","label","onSelectionChange","orientation","selectedKey","props","baseId","useId","nodes","useRef","collection","useMemo","item","primeira","_a","selection","useSelection","keys","escolhida","ativa","painel","parada","useEffect","mover","proxima","handleKeyDown","event","atual","avancar","voltar","proximaChave","_b","jsxs","styles","jsx","node","from","passo","total","inicio","i"],"mappings":"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"}

package/dist/components/navigation/Tabs/Tabs.js

@@ -1,96 +1,105 @@
-import { jsxs as B, jsx as $ } from "react/jsx-runtime";
-import { useId as E, useRef as M, useMemo as R, useEffect as g } from "react";
-import i from "./Tabs.module.css.js";
-import { useSelection as z } from "../../../hooks/useSelection/useSelection.js";
-function V({
+import { jsxs as E, jsx as w } from "react/jsx-runtime";
+import { useId as H, useRef as M, useMemo as R, useEffect as z } from "react";
+import l from "./Tabs.module.css.js";
+import { useSelection as L } from "../../../hooks/useSelection/useSelection.js";
+function F({
   className: c,
-  defaultSelectedKey: y,
-  items: d,
-  label: n,
-  onSelectionChange: f,
-  orientation: a = "horizontal",
-  selectedKey: t,
-  ...I
+  defaultSelectedKey: f,
+  fillHeight: p = !1,
+  fitted: t = !1,
+  items: i,
+  label: s,
+  onSelectionChange: n,
+  orientation: y = "horizontal",
+  selectedKey: v,
+  ...A
 }) {
-  var h;
-  const u = `tabs-${E()}`, p = M(/* @__PURE__ */ new Map()), o = R(
-    () => d.map((e) => ({ key: e.key, disabled: e.disabled, textValue: e.label })),
-    [d]
-  ), w = (h = o.find((e) => !e.disabled)) == null ? void 0 : h.key, s = z({
+  var D;
+  const u = `tabs-${H()}`, $ = M(/* @__PURE__ */ new Map()), o = R(
+    () => i.map((e) => ({ key: e.key, disabled: e.disabled, textValue: e.label })),
+    [i]
+  ), x = (D = o.find((e) => !e.disabled)) == null ? void 0 : D.key, d = L({
     items: o,
     mode: "single",
-    defaultSelectedKeys: t === void 0 ? [y ?? w ?? ""] : void 0,
-    selectedKeys: t === void 0 ? void 0 : [t],
+    defaultSelectedKeys: v === void 0 ? [f ?? x ?? ""] : void 0,
+    selectedKeys: v === void 0 ? void 0 : [v],
     onSelectionChange: (e) => {
-      const [l] = e;
-      l !== void 0 && (f == null || f(l));
+      const [a] = e;
+      a !== void 0 && (n == null || n(a));
     }
-  }), [r] = s.selectedKeys, b = d.find((e) => e.key === r), j = o.some((e) => e.key === r && !e.disabled) ? r : w;
-  g(() => {
+  }), [r] = d.selectedKeys, b = i.find((e) => e.key === r), N = o.some((e) => e.key === r && !e.disabled) ? r : x;
+  z(() => {
     var e;
-    s.focusedKey && ((e = p.current.get(s.focusedKey)) == null || e.focus());
-  }, [s.focusedKey]);
+    d.focusedKey && ((e = $.current.get(d.focusedKey)) == null || e.focus());
+  }, [d.focusedKey]);
   function k(e) {
-    e && s.select(e);
+    e && d.select(e);
   }
-  function A(e) {
-    var x, D;
-    const l = s.focusedKey ?? r, N = a === "vertical" ? "ArrowDown" : "ArrowRight", m = a === "vertical" ? "ArrowUp" : "ArrowLeft";
-    e.key === N ? (e.preventDefault(), k(K(o, l, 1))) : e.key === m ? (e.preventDefault(), k(K(o, l, -1))) : e.key === "Home" ? (e.preventDefault(), k((x = o.find((v) => !v.disabled)) == null ? void 0 : x.key)) : e.key === "End" && (e.preventDefault(), k((D = [...o].reverse().find((v) => !v.disabled)) == null ? void 0 : D.key));
+  function g(e) {
+    var K, I;
+    const a = d.focusedKey ?? r, m = y === "vertical" ? "ArrowDown" : "ArrowRight", B = y === "vertical" ? "ArrowUp" : "ArrowLeft";
+    e.key === m ? (e.preventDefault(), k(j(o, a, 1))) : e.key === B ? (e.preventDefault(), k(j(o, a, -1))) : e.key === "Home" ? (e.preventDefault(), k((K = o.find((h) => !h.disabled)) == null ? void 0 : K.key)) : e.key === "End" && (e.preventDefault(), k((I = [...o].reverse().find((h) => !h.disabled)) == null ? void 0 : I.key));
   }
-  return /* @__PURE__ */ B("div", { ...I, className: [i.tabs, i[a], c].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ $(
-      "div",
-      {
-        className: i.list,
-        role: "tablist",
-        "aria-label": n,
-        "aria-orientation": a,
-        onKeyDown: A,
-        children: d.map((e) => /* @__PURE__ */ $(
-          "button",
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ...A,
+      className: [l.tabs, l[y], t && l.fitted, p && l.fillHeight, c].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ w(
+          "div",
           {
-            ref: (l) => {
-              l ? p.current.set(e.key, l) : p.current.delete(e.key);
-            },
-            className: [i.tab, r === e.key && i.active].filter(Boolean).join(" "),
-            type: "button",
-            role: "tab",
-            id: `${u}-${e.key}`,
-            "aria-controls": r === e.key ? `${u}-${e.key}-panel` : void 0,
-            "aria-selected": r === e.key,
-            disabled: e.disabled,
-            tabIndex: j === e.key ? 0 : -1,
-            onClick: () => s.select(e.key),
-            children: e.label
-          },
-          e.key
-        ))
-      }
-    ),
-    b && /* @__PURE__ */ $(
-      "div",
-      {
-        className: i.panel,
-        role: "tabpanel",
-        id: `${u}-${b.key}-panel`,
-        "aria-labelledby": `${u}-${b.key}`,
-        tabIndex: 0,
-        children: b.content
-      }
-    )
-  ] });
+            className: l.list,
+            role: "tablist",
+            "aria-label": s,
+            "aria-orientation": y,
+            onKeyDown: g,
+            children: i.map((e) => /* @__PURE__ */ w(
+              "button",
+              {
+                ref: (a) => {
+                  a ? $.current.set(e.key, a) : $.current.delete(e.key);
+                },
+                className: [l.tab, r === e.key && l.active].filter(Boolean).join(" "),
+                type: "button",
+                role: "tab",
+                id: `${u}-${e.key}`,
+                "aria-controls": r === e.key ? `${u}-${e.key}-panel` : void 0,
+                "aria-selected": r === e.key,
+                disabled: e.disabled,
+                tabIndex: N === e.key ? 0 : -1,
+                onClick: () => d.select(e.key),
+                children: e.label
+              },
+              e.key
+            ))
+          }
+        ),
+        b && /* @__PURE__ */ w(
+          "div",
+          {
+            className: l.panel,
+            role: "tabpanel",
+            id: `${u}-${b.key}-panel`,
+            "aria-labelledby": `${u}-${b.key}`,
+            tabIndex: 0,
+            children: b.content
+          }
+        )
+      ]
+    }
+  );
 }
-function K(c, y, d) {
-  const n = c.length, f = c.findIndex((a) => a.key === y);
-  for (let a = 1; a <= n; a += 1) {
-    const t = c[(f + d * a + n * n) % n];
-    if (!t.disabled)
-      return t.key;
+function j(c, f, p) {
+  const t = c.length, i = c.findIndex((s) => s.key === f);
+  for (let s = 1; s <= t; s += 1) {
+    const n = c[(i + p * s + t * t) % t];
+    if (!n.disabled)
+      return n.key;
   }
-  return y;
+  return f;
 }
 export {
-  V as Tabs
+  F as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/navigation/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Tabs.module.css';\n\nexport interface TabItem {\n  content: ReactNode;\n  disabled?: boolean;\n  key: string;\n  label: string;\n}\n\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\nexport interface TabsProps extends ComponentPropsWithRef<'div'> {\n  defaultSelectedKey?: string;\n  items: readonly TabItem[];\n  label: string;\n  onSelectionChange?: (key: string) => void;\n  orientation?: TabsOrientation;\n  selectedKey?: string;\n}\n\nexport function Tabs({\n  className,\n  defaultSelectedKey,\n  items,\n  label,\n  onSelectionChange,\n  orientation = 'horizontal',\n  selectedKey,\n  ...props\n}: TabsProps) {\n  const baseId = `tabs-${useId()}`;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const primeira = collection.find((item) => !item.disabled)?.key;\n  const selection = useSelection({\n    items: collection,\n    mode: 'single',\n    defaultSelectedKeys: selectedKey === undefined ? [defaultSelectedKey ?? primeira ?? ''] : undefined,\n    selectedKeys: selectedKey === undefined ? undefined : [selectedKey],\n    onSelectionChange: (keys) => {\n      const [escolhida] = keys;\n      if (escolhida !== undefined) {\n        onSelectionChange?.(escolhida);\n      }\n    },\n  });\n  const [ativa] = selection.selectedKeys;\n  const painel = items.find((item) => item.key === ativa);\n  // A lista sempre tem uma parada de Tab: com a escolhida inexistente ou desabilitada, nenhuma aba era alcancavel.\n  const parada = collection.some((item) => item.key === ativa && !item.disabled) ? ativa : primeira;\n\n  useEffect(() => {\n    if (selection.focusedKey) {\n      nodes.current.get(selection.focusedKey)?.focus();\n    }\n  }, [selection.focusedKey]);\n\n  // Ativacao automatica: mover o foco troca a aba, conforme o padrao do APG\n  // para paineis que carregam instantaneamente.\n  function mover(proxima: string | undefined) {\n    if (proxima) {\n      selection.select(proxima);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const atual = selection.focusedKey ?? ativa;\n    const avancar = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n    const voltar = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n    if (event.key === avancar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, 1));\n    } else if (event.key === voltar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, -1));\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      mover(collection.find((item) => !item.disabled)?.key);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      mover([...collection].reverse().find((item) => !item.disabled)?.key);\n    }\n  }\n\n  return (\n    <div {...props} className={[styles.tabs, styles[orientation], className].filter(Boolean).join(' ')}>\n      <div\n        className={styles.list}\n        role=\"tablist\"\n        aria-label={label}\n        aria-orientation={orientation}\n        onKeyDown={handleKeyDown}\n      >\n        {items.map((item) => (\n          <button\n            key={item.key}\n            ref={(node) => {\n              if (node) {\n                nodes.current.set(item.key, node);\n              } else {\n                nodes.current.delete(item.key);\n              }\n            }}\n            className={[styles.tab, ativa === item.key && styles.active].filter(Boolean).join(' ')}\n            type=\"button\"\n            role=\"tab\"\n            id={`${baseId}-${item.key}`}\n            aria-controls={ativa === item.key ? `${baseId}-${item.key}-panel` : undefined}\n            aria-selected={ativa === item.key}\n            disabled={item.disabled}\n            tabIndex={parada === item.key ? 0 : -1}\n            onClick={() => selection.select(item.key)}\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n      {painel && (\n        <div\n          className={styles.panel}\n          role=\"tabpanel\"\n          id={`${baseId}-${painel.key}-panel`}\n          aria-labelledby={`${baseId}-${painel.key}`}\n          tabIndex={0}\n        >\n          {painel.content}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Percorre em circulo, como o APG define para abas.\nfunction proximaChave(items: readonly SelectionItem[], from: string | undefined, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Tabs","className","defaultSelectedKey","items","label","onSelectionChange","orientation","selectedKey","props","baseId","useId","nodes","useRef","collection","useMemo","item","primeira","_a","selection","useSelection","keys","escolhida","ativa","painel","parada","useEffect","mover","proxima","handleKeyDown","event","atual","avancar","voltar","proximaChave","_b","styles","jsx","node","from","passo","total","inicio","i"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Tabs.module.css';\n\nexport interface TabItem {\n  content: ReactNode;\n  disabled?: boolean;\n  key: string;\n  label: string;\n}\n\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\nexport interface TabsProps extends ComponentPropsWithRef<'div'> {\n  defaultSelectedKey?: string;\n  /** O painel ocupa a altura que sobra nas abas e rola por dentro. As abas precisam de altura, dada por quem as usa. */\n  fillHeight?: boolean;\n  /** As abas dividem a largura em partes iguais, em vez de ficar do tamanho do rotulo. */\n  fitted?: boolean;\n  items: readonly TabItem[];\n  label: string;\n  onSelectionChange?: (key: string) => void;\n  orientation?: TabsOrientation;\n  selectedKey?: string;\n}\n\nexport function Tabs({\n  className,\n  defaultSelectedKey,\n  fillHeight = false,\n  fitted = false,\n  items,\n  label,\n  onSelectionChange,\n  orientation = 'horizontal',\n  selectedKey,\n  ...props\n}: TabsProps) {\n  const baseId = `tabs-${useId()}`;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const primeira = collection.find((item) => !item.disabled)?.key;\n  const selection = useSelection({\n    items: collection,\n    mode: 'single',\n    defaultSelectedKeys: selectedKey === undefined ? [defaultSelectedKey ?? primeira ?? ''] : undefined,\n    selectedKeys: selectedKey === undefined ? undefined : [selectedKey],\n    onSelectionChange: (keys) => {\n      const [escolhida] = keys;\n      if (escolhida !== undefined) {\n        onSelectionChange?.(escolhida);\n      }\n    },\n  });\n  const [ativa] = selection.selectedKeys;\n  const painel = items.find((item) => item.key === ativa);\n  // A lista sempre tem uma parada de Tab: com a escolhida inexistente ou desabilitada, nenhuma aba era alcancavel.\n  const parada = collection.some((item) => item.key === ativa && !item.disabled) ? ativa : primeira;\n\n  useEffect(() => {\n    if (selection.focusedKey) {\n      nodes.current.get(selection.focusedKey)?.focus();\n    }\n  }, [selection.focusedKey]);\n\n  // Ativacao automatica: mover o foco troca a aba, conforme o padrao do APG\n  // para paineis que carregam instantaneamente.\n  function mover(proxima: string | undefined) {\n    if (proxima) {\n      selection.select(proxima);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const atual = selection.focusedKey ?? ativa;\n    const avancar = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n    const voltar = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n    if (event.key === avancar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, 1));\n    } else if (event.key === voltar) {\n      event.preventDefault();\n      mover(proximaChave(collection, atual, -1));\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      mover(collection.find((item) => !item.disabled)?.key);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      mover([...collection].reverse().find((item) => !item.disabled)?.key);\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={[styles.tabs, styles[orientation], fitted && styles.fitted, fillHeight && styles.fillHeight, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div\n        className={styles.list}\n        role=\"tablist\"\n        aria-label={label}\n        aria-orientation={orientation}\n        onKeyDown={handleKeyDown}\n      >\n        {items.map((item) => (\n          <button\n            key={item.key}\n            ref={(node) => {\n              if (node) {\n                nodes.current.set(item.key, node);\n              } else {\n                nodes.current.delete(item.key);\n              }\n            }}\n            className={[styles.tab, ativa === item.key && styles.active].filter(Boolean).join(' ')}\n            type=\"button\"\n            role=\"tab\"\n            id={`${baseId}-${item.key}`}\n            aria-controls={ativa === item.key ? `${baseId}-${item.key}-panel` : undefined}\n            aria-selected={ativa === item.key}\n            disabled={item.disabled}\n            tabIndex={parada === item.key ? 0 : -1}\n            onClick={() => selection.select(item.key)}\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n      {painel && (\n        <div\n          className={styles.panel}\n          role=\"tabpanel\"\n          id={`${baseId}-${painel.key}-panel`}\n          aria-labelledby={`${baseId}-${painel.key}`}\n          tabIndex={0}\n        >\n          {painel.content}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Percorre em circulo, como o APG define para abas.\nfunction proximaChave(items: readonly SelectionItem[], from: string | undefined, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Tabs","className","defaultSelectedKey","fillHeight","fitted","items","label","onSelectionChange","orientation","selectedKey","props","baseId","useId","nodes","useRef","collection","useMemo","item","primeira","_a","selection","useSelection","keys","escolhida","ativa","painel","parada","useEffect","mover","proxima","handleKeyDown","event","atual","avancar","voltar","proximaChave","_b","jsxs","styles","jsx","node","from","passo","total","inicio","i"],"mappings":"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"}

package/dist/components/navigation/Tabs/Tabs.module.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_tabs_runad_1",a="_horizontal_runad_7",e="_list_runad_11",n="_active_runad_17",l="_vertical_runad_23",_="_tab_runad_1",s="_panel_runad_45",o={tabs:t,horizontal:a,list:e,active:n,vertical:l,tab:_,panel:s};exports.active=n;exports.default=o;exports.horizontal=a;exports.list=e;exports.panel=s;exports.tab=_;exports.tabs=t;exports.vertical=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_tabs_cf8v3_1",e="_horizontal_cf8v3_7",i="_list_cf8v3_11",l="_active_cf8v3_17",c="_vertical_cf8v3_23",_="_tab_cf8v3_1",a="_panel_cf8v3_45",s="_fitted_cf8v3_89",o="_fillHeight_cf8v3_95",n={tabs:t,horizontal:e,list:i,active:l,vertical:c,tab:_,panel:a,fitted:s,fillHeight:o};exports.active=l;exports.default=n;exports.fillHeight=o;exports.fitted=s;exports.horizontal=e;exports.list=i;exports.panel=a;exports.tab=_;exports.tabs=t;exports.vertical=c;
 //# sourceMappingURL=Tabs.module.css.cjs.map

package/dist/components/navigation/Tabs/Tabs.module.css.js

@@ -1,20 +1,24 @@
-const t = "_tabs_runad_1", a = "_horizontal_runad_7", n = "_list_runad_11", _ = "_active_runad_17", s = "_vertical_runad_23", o = "_tab_runad_1", c = "_panel_runad_45", l = {
+const t = "_tabs_cf8v3_1", _ = "_horizontal_cf8v3_7", c = "_list_cf8v3_11", i = "_active_cf8v3_17", a = "_vertical_cf8v3_23", l = "_tab_cf8v3_1", s = "_panel_cf8v3_45", e = "_fitted_cf8v3_89", o = "_fillHeight_cf8v3_95", f = {
   tabs: t,
-  horizontal: a,
-  list: n,
-  active: _,
-  vertical: s,
-  tab: o,
-  panel: c
+  horizontal: _,
+  list: c,
+  active: i,
+  vertical: a,
+  tab: l,
+  panel: s,
+  fitted: e,
+  fillHeight: o
 };
 export {
-  _ as active,
-  l as default,
-  a as horizontal,
-  n as list,
-  c as panel,
-  o as tab,
+  i as active,
+  f as default,
+  o as fillHeight,
+  e as fitted,
+  _ as horizontal,
+  c as list,
+  s as panel,
+  l as tab,
   t as tabs,
-  s as vertical
+  a as vertical
 };
 //# sourceMappingURL=Tabs.module.css.js.map

package/dist/components/navigation/Tabs/Tabs.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"Tabs.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/navigation/TabsNav/TabsNav.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),e=require("./TabsNav.module.css.cjs");function d({as:s="a",className:t,current:n,fitted:i=!1,items:u,label:o,...c}){return l.jsx("nav",{...c,"aria-label":o,className:[e.default.tabsNav,i&&e.default.fitted,t].filter(Boolean).join(" "),children:l.jsx("ul",{className:e.default.list,children:u.map(a=>{const r=a.key===n;return l.jsx("li",{className:e.default.item,children:l.jsx(s,{"aria-current":r?"page":void 0,className:[e.default.link,r&&e.default.current].filter(Boolean).join(" "),href:a.href,...a.linkProps,children:a.label})},a.key)})})})}exports.TabsNav=d;
+//# sourceMappingURL=TabsNav.cjs.map

package/dist/components/navigation/TabsNav/TabsNav.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsNav.cjs","sources":["../../../../src/components/navigation/TabsNav/TabsNav.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ElementType } from 'react';\nimport styles from './TabsNav.module.css';\n\nexport interface TabsNavItem {\n  href?: string;\n  key: string;\n  label: string;\n  /** Propriedades entregues inteiras ao componente de link, para o roteador que não usa `href`. */\n  linkProps?: Record<string, unknown>;\n}\n\nexport interface TabsNavProps extends Omit<ComponentPropsWithRef<'nav'>, 'aria-label'> {\n  /** Componente de link da aplicação, para não acoplar o sistema a um roteador. */\n  as?: ElementType;\n  /** Chave da aba do endereço atual. */\n  current: string;\n  /** As abas dividem a largura em partes iguais, em vez de ficar do tamanho do rótulo. */\n  fitted?: boolean;\n  items: readonly TabsNavItem[];\n  label: string;\n}\n\n/** Abas que são endereços: cada uma é um link, e a da página atual leva `aria-current=\"page\"`. */\nexport function TabsNav({ as: Link = 'a', className, current, fitted = false, items, label, ...props }: TabsNavProps) {\n  return (\n    <nav {...props} aria-label={label} className={[styles.tabsNav, fitted && styles.fitted, className].filter(Boolean).join(' ')}>\n      <ul className={styles.list}>\n        {items.map((item) => {\n          const atual = item.key === current;\n\n          return (\n            <li className={styles.item} key={item.key}>\n              <Link\n                aria-current={atual ? 'page' : undefined}\n                className={[styles.link, atual && styles.current].filter(Boolean).join(' ')}\n                href={item.href}\n                {...item.linkProps}\n              >\n                {item.label}\n              </Link>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n}\n"],"names":["TabsNav","Link","className","current","fitted","items","label","props","jsx","styles","item","atual"],"mappings":"2JAuBO,SAASA,EAAQ,CAAE,GAAIC,EAAO,IAAK,UAAAC,EAAW,QAAAC,EAAS,OAAAC,EAAS,GAAO,MAAAC,EAAO,MAAAC,EAAO,GAAGC,GAAuB,CACpH,OACEC,EAAAA,IAAC,MAAA,CAAK,GAAGD,EAAO,aAAYD,EAAO,UAAW,CAACG,EAAAA,QAAO,QAASL,GAAUK,EAAAA,QAAO,OAAQP,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACzH,SAAAM,EAAAA,IAAC,KAAA,CAAG,UAAWC,EAAAA,QAAO,KACnB,SAAAJ,EAAM,IAAKK,GAAS,CACnB,MAAMC,EAAQD,EAAK,MAAQP,EAE3B,OACEK,EAAAA,IAAC,KAAA,CAAG,UAAWC,EAAAA,QAAO,KACpB,SAAAD,EAAAA,IAACP,EAAA,CACC,eAAcU,EAAQ,OAAS,OAC/B,UAAW,CAACF,EAAAA,QAAO,KAAME,GAASF,EAAAA,QAAO,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC1E,KAAMC,EAAK,KACV,GAAGA,EAAK,UAER,SAAAA,EAAK,KAAA,CAAA,CACR,EAR+BA,EAAK,GAStC,CAEJ,CAAC,EACH,EACF,CAEJ"}

package/dist/components/navigation/TabsNav/TabsNav.js

@@ -0,0 +1,21 @@
+import { jsx as l } from "react/jsx-runtime";
+import a from "./TabsNav.module.css.js";
+function h({ as: n = "a", className: s, current: i, fitted: o = !1, items: t, label: c, ...f }) {
+  return /* @__PURE__ */ l("nav", { ...f, "aria-label": c, className: [a.tabsNav, o && a.fitted, s].filter(Boolean).join(" "), children: /* @__PURE__ */ l("ul", { className: a.list, children: t.map((e) => {
+    const r = e.key === i;
+    return /* @__PURE__ */ l("li", { className: a.item, children: /* @__PURE__ */ l(
+      n,
+      {
+        "aria-current": r ? "page" : void 0,
+        className: [a.link, r && a.current].filter(Boolean).join(" "),
+        href: e.href,
+        ...e.linkProps,
+        children: e.label
+      }
+    ) }, e.key);
+  }) }) });
+}
+export {
+  h as TabsNav
+};
+//# sourceMappingURL=TabsNav.js.map

package/dist/components/navigation/TabsNav/TabsNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsNav.js","sources":["../../../../src/components/navigation/TabsNav/TabsNav.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ElementType } from 'react';\nimport styles from './TabsNav.module.css';\n\nexport interface TabsNavItem {\n  href?: string;\n  key: string;\n  label: string;\n  /** Propriedades entregues inteiras ao componente de link, para o roteador que não usa `href`. */\n  linkProps?: Record<string, unknown>;\n}\n\nexport interface TabsNavProps extends Omit<ComponentPropsWithRef<'nav'>, 'aria-label'> {\n  /** Componente de link da aplicação, para não acoplar o sistema a um roteador. */\n  as?: ElementType;\n  /** Chave da aba do endereço atual. */\n  current: string;\n  /** As abas dividem a largura em partes iguais, em vez de ficar do tamanho do rótulo. */\n  fitted?: boolean;\n  items: readonly TabsNavItem[];\n  label: string;\n}\n\n/** Abas que são endereços: cada uma é um link, e a da página atual leva `aria-current=\"page\"`. */\nexport function TabsNav({ as: Link = 'a', className, current, fitted = false, items, label, ...props }: TabsNavProps) {\n  return (\n    <nav {...props} aria-label={label} className={[styles.tabsNav, fitted && styles.fitted, className].filter(Boolean).join(' ')}>\n      <ul className={styles.list}>\n        {items.map((item) => {\n          const atual = item.key === current;\n\n          return (\n            <li className={styles.item} key={item.key}>\n              <Link\n                aria-current={atual ? 'page' : undefined}\n                className={[styles.link, atual && styles.current].filter(Boolean).join(' ')}\n                href={item.href}\n                {...item.linkProps}\n              >\n                {item.label}\n              </Link>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n}\n"],"names":["TabsNav","Link","className","current","fitted","items","label","props","jsx","styles","item","atual"],"mappings":";;AAuBO,SAASA,EAAQ,EAAE,IAAIC,IAAO,KAAK,WAAAC,GAAW,SAAAC,GAAS,QAAAC,IAAS,IAAO,OAAAC,GAAO,OAAAC,GAAO,GAAGC,KAAuB;AACpH,SACE,gBAAAC,EAAC,OAAA,EAAK,GAAGD,GAAO,cAAYD,GAAO,WAAW,CAACG,EAAO,SAASL,KAAUK,EAAO,QAAQP,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACzH,UAAA,gBAAAM,EAAC,MAAA,EAAG,WAAWC,EAAO,MACnB,UAAAJ,EAAM,IAAI,CAACK,MAAS;AACnB,UAAMC,IAAQD,EAAK,QAAQP;AAE3B,WACE,gBAAAK,EAAC,MAAA,EAAG,WAAWC,EAAO,MACpB,UAAA,gBAAAD;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,gBAAcU,IAAQ,SAAS;AAAA,QAC/B,WAAW,CAACF,EAAO,MAAME,KAASF,EAAO,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAC1E,MAAMC,EAAK;AAAA,QACV,GAAGA,EAAK;AAAA,QAER,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA,EACR,GAR+BA,EAAK,GAStC;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;"}

package/dist/components/navigation/TabsNav/TabsNav.module.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_tabsNav_13l4d_2",e="_list_13l4d_6",_="_item_13l4d_16",i="_link_13l4d_21 _tab_cf8v3_1",l="_current_13l4d_26 _active_cf8v3_17",s="_fitted_13l4d_31",n={tabsNav:t,list:e,item:_,link:i,current:l,fitted:s};exports.current=l;exports.default=n;exports.fitted=s;exports.item=_;exports.link=i;exports.list=e;exports.tabsNav=t;
+//# sourceMappingURL=TabsNav.module.css.cjs.map

package/dist/components/navigation/TabsNav/TabsNav.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsNav.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/navigation/TabsNav/TabsNav.module.css.js

@@ -0,0 +1,18 @@
+const t = "_tabsNav_13l4d_2", _ = "_list_13l4d_6", s = "_item_13l4d_16", l = "_link_13l4d_21 _tab_cf8v3_1", c = "_current_13l4d_26 _active_cf8v3_17", e = "_fitted_13l4d_31", i = {
+  tabsNav: t,
+  list: _,
+  item: s,
+  link: l,
+  current: c,
+  fitted: e
+};
+export {
+  c as current,
+  i as default,
+  e as fitted,
+  s as item,
+  l as link,
+  _ as list,
+  t as tabsNav
+};
+//# sourceMappingURL=TabsNav.module.css.js.map

package/dist/components/navigation/TabsNav/TabsNav.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsNav.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/overlays/Dialog/Dialog.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),D=require("react-dom"),q=require("@react-aria/focus"),o=require("@react-aria/overlays"),I=require("../../../hooks/useMergedRefs.cjs"),r=require("./Dialog.module.css.cjs"),P=require("../../icons/icons.cjs");function R({open:s,...a}){return!s||typeof document>"u"?null:D.createPortal(e.jsx(F,{...a}),document.body)}function F({children:s,className:a,description:i,dismissable:l=!0,footer:n,icon:u,onClose:c,ref:h,role:x="dialog",size:y="md",title:g,...v}){const t=d.useRef(null),b=I.useMergedRefs(t,h),f=d.useId(),m=`${f}-title`,j=`${f}-description`,{overlayProps:p,underlayProps:N}=o.useOverlay({isOpen:!0,onClose:c,isDismissable:l,isKeyboardDismissDisabled:!l},t);return o.usePreventScroll(),d.useEffect(()=>t.current?o.ariaHideOutside([t.current]):void 0,[]),e.jsx("div",{...N,className:r.default.underlay,children:e.jsx(q.FocusScope,{contain:!0,restoreFocus:!0,autoFocus:!0,children:e.jsxs("div",{...v,...p,ref:b,className:[r.default.dialog,r.default[y],a].filter(Boolean).join(" "),role:x,"aria-modal":"true","aria-labelledby":m,"aria-describedby":i?j:void 0,children:[e.jsxs("header",{className:[r.default.header,s&&r.default.headerDivided].filter(Boolean).join(" "),children:[u&&e.jsx("span",{"aria-hidden":"true",className:r.default.icon,children:u}),e.jsxs("div",{className:r.default.heading,children:[e.jsx("h2",{className:r.default.title,id:m,children:g}),i&&e.jsx("p",{className:r.default.description,id:j,children:i})]}),l&&e.jsx("button",{className:r.default.close,type:"button","aria-label":"Fechar",onClick:c,children:e.jsx(P.IconClose,{size:20})})]}),s&&e.jsx("div",{className:r.default.body,children:s}),n&&e.jsx("div",{className:r.default.footer,children:n})]})})})}exports.Dialog=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("./DialogFrame.cjs"),e=require("./Dialog.module.css.cjs");function u({size:a="md",...l}){return r.jsx(o.DialogFrame,{...l,surfaceClassName:[e.default.dialog,e.default[a]].join(" "),underlayClassName:e.default.underlay})}exports.Dialog=u;
 //# sourceMappingURL=Dialog.cjs.map

package/dist/components/overlays/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { FocusScope } from '@react-aria/focus';\nimport { ariaHideOutside, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { useMergedRefs } from '../../../hooks/useMergedRefs';\nimport styles from './Dialog.module.css';\nimport { IconClose } from '../../icons';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\nexport type DialogRole = 'dialog' | 'alertdialog';\n\n/** As propriedades nativas vao ao elemento do dialogo; o `className` soma ao do sistema. */\nexport interface DialogProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'title'> {\n  children?: ReactNode;\n  description?: string;\n  dismissable?: boolean;\n  footer?: ReactNode;\n  /** Opcional. Desenhado ao lado do titulo, fora da leitura: quem fala e o titulo. */\n  icon?: ReactNode;\n  onClose: () => void;\n  open: boolean;\n  /** `alertdialog` para a confirmacao que interrompe e exige resposta, como a de uma acao destrutiva. */\n  role?: DialogRole;\n  size?: DialogSize;\n  title: string;\n}\n\nexport function Dialog({ open, ...props }: DialogProps) {\n  // No servidor nao ha `document` para o portal; o Dialog nasce na hidratacao.\n  if (!open || typeof document === 'undefined') {\n    return null;\n  }\n\n  return createPortal(<DialogContent {...props} />, document.body);\n}\n\nfunction DialogContent({\n  children,\n  className,\n  description,\n  dismissable = true,\n  footer,\n  icon,\n  onClose,\n  ref: refDoConsumidor,\n  role = 'dialog',\n  size = 'md',\n  title,\n  ...props\n}: Omit<DialogProps, 'open'>) {\n  const ref = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs(ref, refDoConsumidor);\n  const generatedId = useId();\n  const titleId = `${generatedId}-title`;\n  const descriptionId = `${generatedId}-description`;\n\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      isOpen: true,\n      onClose,\n      isDismissable: dismissable,\n      isKeyboardDismissDisabled: !dismissable,\n    },\n    ref,\n  );\n\n  usePreventScroll();\n\n  useEffect(() => (ref.current ? ariaHideOutside([ref.current]) : undefined), []);\n\n  return (\n    <div {...underlayProps} className={styles.underlay}>\n      <FocusScope contain restoreFocus autoFocus>\n        <div\n          {...props}\n          {...overlayProps}\n          ref={mergedRef}\n          className={[styles.dialog, styles[size], className].filter(Boolean).join(' ')}\n          role={role}\n          aria-modal=\"true\"\n          aria-labelledby={titleId}\n          aria-describedby={description ? descriptionId : undefined}\n        >\n          <header className={[styles.header, children && styles.headerDivided].filter(Boolean).join(' ')}>\n            {icon && (\n              <span aria-hidden=\"true\" className={styles.icon}>\n                {icon}\n              </span>\n            )}\n            <div className={styles.heading}>\n              <h2 className={styles.title} id={titleId}>{title}</h2>\n              {description && <p className={styles.description} id={descriptionId}>{description}</p>}\n            </div>\n            {dismissable && (\n              <button className={styles.close} type=\"button\" aria-label=\"Fechar\" onClick={onClose}>\n                <IconClose size={20} />\n              </button>\n            )}\n          </header>\n          {children && <div className={styles.body}>{children}</div>}\n          {footer && <div className={styles.footer}>{footer}</div>}\n        </div>\n      </FocusScope>\n    </div>\n  );\n}\n"],"names":["Dialog","open","props","createPortal","jsx","DialogContent","children","className","description","dismissable","footer","icon","onClose","refDoConsumidor","role","size","title","ref","useRef","mergedRef","useMergedRefs","generatedId","useId","titleId","descriptionId","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","ariaHideOutside","styles","FocusScope","jsxs","IconClose"],"mappings":"sVA2BO,SAASA,EAAO,CAAE,KAAAC,EAAM,GAAGC,GAAsB,CAEtD,MAAI,CAACD,GAAQ,OAAO,SAAa,IACxB,KAGFE,EAAAA,aAAaC,EAAAA,IAACC,EAAA,CAAe,GAAGH,EAAO,EAAI,SAAS,IAAI,CACjE,CAEA,SAASG,EAAc,CACrB,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EACA,KAAAC,EACA,QAAAC,EACA,IAAKC,EACL,KAAAC,EAAO,SACP,KAAAC,EAAO,KACP,MAAAC,EACA,GAAGd,CACL,EAA8B,CAC5B,MAAMe,EAAMC,EAAAA,OAAuB,IAAI,EACjCC,EAAYC,EAAAA,cAAcH,EAAKJ,CAAe,EAC9CQ,EAAcC,EAAAA,MAAA,EACdC,EAAU,GAAGF,CAAW,SACxBG,EAAgB,GAAGH,CAAW,eAE9B,CAAE,aAAAI,EAAc,cAAAC,CAAA,EAAkBC,EAAAA,WACtC,CACE,OAAQ,GACR,QAAAf,EACA,cAAeH,EACf,0BAA2B,CAACA,CAAA,EAE9BQ,CAAA,EAGFW,OAAAA,mBAAA,EAEAC,YAAU,IAAOZ,EAAI,QAAUa,EAAAA,gBAAgB,CAACb,EAAI,OAAO,CAAC,EAAI,OAAY,EAAE,EAG5Eb,EAAAA,IAAC,MAAA,CAAK,GAAGsB,EAAe,UAAWK,EAAAA,QAAO,SACxC,SAAA3B,EAAAA,IAAC4B,EAAAA,WAAA,CAAW,QAAO,GAAC,aAAY,GAAC,UAAS,GACxC,SAAAC,EAAAA,KAAC,MAAA,CACE,GAAG/B,EACH,GAAGuB,EACJ,IAAKN,EACL,UAAW,CAACY,EAAAA,QAAO,OAAQA,EAAAA,QAAOhB,CAAI,EAAGR,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC5E,KAAAO,EACA,aAAW,OACX,kBAAiBS,EACjB,mBAAkBf,EAAcgB,EAAgB,OAEhD,SAAA,CAAAS,EAAAA,KAAC,SAAA,CAAO,UAAW,CAACF,EAAAA,QAAO,OAAQzB,GAAYyB,EAAAA,QAAO,aAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC1F,SAAA,CAAApB,SACE,OAAA,CAAK,cAAY,OAAO,UAAWoB,UAAO,KACxC,SAAApB,CAAA,CACH,EAEFsB,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,QACrB,SAAA,CAAA3B,MAAC,MAAG,UAAW2B,EAAAA,QAAO,MAAO,GAAIR,EAAU,SAAAP,EAAM,EAChDR,SAAgB,IAAA,CAAE,UAAWuB,EAAAA,QAAO,YAAa,GAAIP,EAAgB,SAAAhB,CAAA,CAAY,CAAA,EACpF,EACCC,GACCL,EAAAA,IAAC,SAAA,CAAO,UAAW2B,EAAAA,QAAO,MAAO,KAAK,SAAS,aAAW,SAAS,QAASnB,EAC1E,SAAAR,EAAAA,IAAC8B,EAAAA,UAAA,CAAU,KAAM,GAAI,CAAA,CACvB,CAAA,EAEJ,EACC5B,GAAYF,EAAAA,IAAC,MAAA,CAAI,UAAW2B,UAAO,KAAO,SAAAzB,EAAS,EACnDI,GAAUN,EAAAA,IAAC,MAAA,CAAI,UAAW2B,EAAAA,QAAO,OAAS,SAAArB,CAAA,CAAO,CAAA,CAAA,CAAA,EAEtD,CAAA,CACF,CAEJ"}
+{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { DialogFrame } from './DialogFrame';\nimport styles from './Dialog.module.css';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\nexport type DialogRole = 'dialog' | 'alertdialog';\n\n/** O que o `Dialog` e o `Drawer` compartilham. As propriedades nativas vao ao elemento do dialogo. */\nexport interface DialogBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'aria-label' | 'children' | 'role' | 'title'> {\n  children?: ReactNode;\n  dismissable?: boolean;\n  footer?: ReactNode;\n  onClose: () => void;\n  open: boolean;\n}\n\nexport interface DialogTitledProps {\n  'aria-label'?: never;\n  description?: string;\n  /** Opcional. Desenhado ao lado do titulo, fora da leitura: quem fala e o titulo. */\n  icon?: ReactNode;\n  title: string;\n}\n\n/** Sem titulo, sem cabecalho: o nome vem do `aria-label`, como na paleta de busca. Esc continua fechando. */\nexport interface DialogUntitledProps {\n  'aria-label': string;\n  description?: never;\n  icon?: never;\n  title?: never;\n}\n\nexport type DialogProps = DialogBaseProps &\n  (DialogTitledProps | DialogUntitledProps) & {\n    /** `alertdialog` para a confirmacao que interrompe e exige resposta, como a de uma acao destrutiva. */\n    role?: DialogRole;\n    size?: DialogSize;\n  };\n\nexport function Dialog({ size = 'md', ...props }: DialogProps) {\n  return (\n    <DialogFrame\n      {...props}\n      surfaceClassName={[styles.dialog, styles[size]].join(' ')}\n      underlayClassName={styles.underlay}\n    />\n  );\n}\n"],"names":["Dialog","size","props","jsx","DialogFrame","styles"],"mappings":"yLAuCO,SAASA,EAAO,CAAE,KAAAC,EAAO,KAAM,GAAGC,GAAsB,CAC7D,OACEC,EAAAA,IAACC,EAAAA,YAAA,CACE,GAAGF,EACJ,iBAAkB,CAACG,EAAAA,QAAO,OAAQA,EAAAA,QAAOJ,CAAI,CAAC,EAAE,KAAK,GAAG,EACxD,kBAAmBI,EAAAA,QAAO,QAAA,CAAA,CAGhC"}

package/dist/components/overlays/Dialog/Dialog.js

@@ -1,64 +1,17 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { useRef as I, useId as j, useEffect as F } from "react";
-import { createPortal as P } from "react-dom";
-import { FocusScope as x } from "@react-aria/focus";
-import { useOverlay as O, usePreventScroll as R, ariaHideOutside as B } from "@react-aria/overlays";
-import { useMergedRefs as C } from "../../../hooks/useMergedRefs.js";
-import e from "./Dialog.module.css.js";
-import { IconClose as S } from "../../icons/icons.js";
-function A({ open: i, ...t }) {
-  return !i || typeof document > "u" ? null : P(/* @__PURE__ */ r($, { ...t }), document.body);
-}
-function $({
-  children: i,
-  className: t,
-  description: a,
-  dismissable: s = !0,
-  footer: l,
-  icon: n,
-  onClose: c,
-  ref: p,
-  role: h = "dialog",
-  size: y = "md",
-  title: v,
-  ...b
-}) {
-  const o = I(null), N = C(o, p), u = j(), m = `${u}-title`, f = `${u}-description`, { overlayProps: g, underlayProps: D } = O(
-    {
-      isOpen: !0,
-      onClose: c,
-      isDismissable: s,
-      isKeyboardDismissDisabled: !s
-    },
-    o
-  );
-  return R(), F(() => o.current ? B([o.current]) : void 0, []), /* @__PURE__ */ r("div", { ...D, className: e.underlay, children: /* @__PURE__ */ r(x, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ d(
-    "div",
+import { jsx as m } from "react/jsx-runtime";
+import { DialogFrame as e } from "./DialogFrame.js";
+import r from "./Dialog.module.css.js";
+function t({ size: o = "md", ...a }) {
+  return /* @__PURE__ */ m(
+    e,
     {
-      ...b,
-      ...g,
-      ref: N,
-      className: [e.dialog, e[y], t].filter(Boolean).join(" "),
-      role: h,
-      "aria-modal": "true",
-      "aria-labelledby": m,
-      "aria-describedby": a ? f : void 0,
-      children: [
-        /* @__PURE__ */ d("header", { className: [e.header, i && e.headerDivided].filter(Boolean).join(" "), children: [
-          n && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: e.icon, children: n }),
-          /* @__PURE__ */ d("div", { className: e.heading, children: [
-            /* @__PURE__ */ r("h2", { className: e.title, id: m, children: v }),
-            a && /* @__PURE__ */ r("p", { className: e.description, id: f, children: a })
-          ] }),
-          s && /* @__PURE__ */ r("button", { className: e.close, type: "button", "aria-label": "Fechar", onClick: c, children: /* @__PURE__ */ r(S, { size: 20 }) })
-        ] }),
-        i && /* @__PURE__ */ r("div", { className: e.body, children: i }),
-        l && /* @__PURE__ */ r("div", { className: e.footer, children: l })
-      ]
+      ...a,
+      surfaceClassName: [r.dialog, r[o]].join(" "),
+      underlayClassName: r.underlay
     }
-  ) }) });
+  );
 }
 export {
-  A as Dialog
+  t as Dialog
 };
 //# sourceMappingURL=Dialog.js.map

package/dist/components/overlays/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { FocusScope } from '@react-aria/focus';\nimport { ariaHideOutside, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { useMergedRefs } from '../../../hooks/useMergedRefs';\nimport styles from './Dialog.module.css';\nimport { IconClose } from '../../icons';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\nexport type DialogRole = 'dialog' | 'alertdialog';\n\n/** As propriedades nativas vao ao elemento do dialogo; o `className` soma ao do sistema. */\nexport interface DialogProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'title'> {\n  children?: ReactNode;\n  description?: string;\n  dismissable?: boolean;\n  footer?: ReactNode;\n  /** Opcional. Desenhado ao lado do titulo, fora da leitura: quem fala e o titulo. */\n  icon?: ReactNode;\n  onClose: () => void;\n  open: boolean;\n  /** `alertdialog` para a confirmacao que interrompe e exige resposta, como a de uma acao destrutiva. */\n  role?: DialogRole;\n  size?: DialogSize;\n  title: string;\n}\n\nexport function Dialog({ open, ...props }: DialogProps) {\n  // No servidor nao ha `document` para o portal; o Dialog nasce na hidratacao.\n  if (!open || typeof document === 'undefined') {\n    return null;\n  }\n\n  return createPortal(<DialogContent {...props} />, document.body);\n}\n\nfunction DialogContent({\n  children,\n  className,\n  description,\n  dismissable = true,\n  footer,\n  icon,\n  onClose,\n  ref: refDoConsumidor,\n  role = 'dialog',\n  size = 'md',\n  title,\n  ...props\n}: Omit<DialogProps, 'open'>) {\n  const ref = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs(ref, refDoConsumidor);\n  const generatedId = useId();\n  const titleId = `${generatedId}-title`;\n  const descriptionId = `${generatedId}-description`;\n\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      isOpen: true,\n      onClose,\n      isDismissable: dismissable,\n      isKeyboardDismissDisabled: !dismissable,\n    },\n    ref,\n  );\n\n  usePreventScroll();\n\n  useEffect(() => (ref.current ? ariaHideOutside([ref.current]) : undefined), []);\n\n  return (\n    <div {...underlayProps} className={styles.underlay}>\n      <FocusScope contain restoreFocus autoFocus>\n        <div\n          {...props}\n          {...overlayProps}\n          ref={mergedRef}\n          className={[styles.dialog, styles[size], className].filter(Boolean).join(' ')}\n          role={role}\n          aria-modal=\"true\"\n          aria-labelledby={titleId}\n          aria-describedby={description ? descriptionId : undefined}\n        >\n          <header className={[styles.header, children && styles.headerDivided].filter(Boolean).join(' ')}>\n            {icon && (\n              <span aria-hidden=\"true\" className={styles.icon}>\n                {icon}\n              </span>\n            )}\n            <div className={styles.heading}>\n              <h2 className={styles.title} id={titleId}>{title}</h2>\n              {description && <p className={styles.description} id={descriptionId}>{description}</p>}\n            </div>\n            {dismissable && (\n              <button className={styles.close} type=\"button\" aria-label=\"Fechar\" onClick={onClose}>\n                <IconClose size={20} />\n              </button>\n            )}\n          </header>\n          {children && <div className={styles.body}>{children}</div>}\n          {footer && <div className={styles.footer}>{footer}</div>}\n        </div>\n      </FocusScope>\n    </div>\n  );\n}\n"],"names":["Dialog","open","props","createPortal","jsx","DialogContent","children","className","description","dismissable","footer","icon","onClose","refDoConsumidor","role","size","title","ref","useRef","mergedRef","useMergedRefs","generatedId","useId","titleId","descriptionId","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","ariaHideOutside","styles","FocusScope","jsxs","IconClose"],"mappings":";;;;;;;;AA2BO,SAASA,EAAO,EAAE,MAAAC,GAAM,GAAGC,KAAsB;AAEtD,SAAI,CAACD,KAAQ,OAAO,WAAa,MACxB,OAGFE,EAAa,gBAAAC,EAACC,GAAA,EAAe,GAAGH,GAAO,GAAI,SAAS,IAAI;AACjE;AAEA,SAASG,EAAc;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAKC;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,GAAGd;AACL,GAA8B;AAC5B,QAAMe,IAAMC,EAAuB,IAAI,GACjCC,IAAYC,EAAcH,GAAKJ,CAAe,GAC9CQ,IAAcC,EAAA,GACdC,IAAU,GAAGF,CAAW,UACxBG,IAAgB,GAAGH,CAAW,gBAE9B,EAAE,cAAAI,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC;AAAA,MACE,QAAQ;AAAA,MACR,SAAAf;AAAA,MACA,eAAeH;AAAA,MACf,2BAA2B,CAACA;AAAA,IAAA;AAAA,IAE9BQ;AAAA,EAAA;AAGF,SAAAW,EAAA,GAEAC,EAAU,MAAOZ,EAAI,UAAUa,EAAgB,CAACb,EAAI,OAAO,CAAC,IAAI,QAAY,EAAE,GAG5E,gBAAAb,EAAC,OAAA,EAAK,GAAGsB,GAAe,WAAWK,EAAO,UACxC,UAAA,gBAAA3B,EAAC4B,GAAA,EAAW,SAAO,IAAC,cAAY,IAAC,WAAS,IACxC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG/B;AAAA,MACH,GAAGuB;AAAA,MACJ,KAAKN;AAAA,MACL,WAAW,CAACY,EAAO,QAAQA,EAAOhB,CAAI,GAAGR,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5E,MAAAO;AAAA,MACA,cAAW;AAAA,MACX,mBAAiBS;AAAA,MACjB,oBAAkBf,IAAcgB,IAAgB;AAAA,MAEhD,UAAA;AAAA,QAAA,gBAAAS,EAAC,UAAA,EAAO,WAAW,CAACF,EAAO,QAAQzB,KAAYyB,EAAO,aAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC1F,UAAA;AAAA,UAAApB,uBACE,QAAA,EAAK,eAAY,QAAO,WAAWoB,EAAO,MACxC,UAAApB,EAAA,CACH;AAAA,UAEF,gBAAAsB,EAAC,OAAA,EAAI,WAAWF,EAAO,SACrB,UAAA;AAAA,YAAA,gBAAA3B,EAAC,QAAG,WAAW2B,EAAO,OAAO,IAAIR,GAAU,UAAAP,GAAM;AAAA,YAChDR,uBAAgB,KAAA,EAAE,WAAWuB,EAAO,aAAa,IAAIP,GAAgB,UAAAhB,EAAA,CAAY;AAAA,UAAA,GACpF;AAAA,UACCC,KACC,gBAAAL,EAAC,UAAA,EAAO,WAAW2B,EAAO,OAAO,MAAK,UAAS,cAAW,UAAS,SAASnB,GAC1E,UAAA,gBAAAR,EAAC8B,GAAA,EAAU,MAAM,IAAI,EAAA,CACvB;AAAA,QAAA,GAEJ;AAAA,QACC5B,KAAY,gBAAAF,EAAC,OAAA,EAAI,WAAW2B,EAAO,MAAO,UAAAzB,GAAS;AAAA,QACnDI,KAAU,gBAAAN,EAAC,OAAA,EAAI,WAAW2B,EAAO,QAAS,UAAArB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEtD,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { DialogFrame } from './DialogFrame';\nimport styles from './Dialog.module.css';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\nexport type DialogRole = 'dialog' | 'alertdialog';\n\n/** O que o `Dialog` e o `Drawer` compartilham. As propriedades nativas vao ao elemento do dialogo. */\nexport interface DialogBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'aria-label' | 'children' | 'role' | 'title'> {\n  children?: ReactNode;\n  dismissable?: boolean;\n  footer?: ReactNode;\n  onClose: () => void;\n  open: boolean;\n}\n\nexport interface DialogTitledProps {\n  'aria-label'?: never;\n  description?: string;\n  /** Opcional. Desenhado ao lado do titulo, fora da leitura: quem fala e o titulo. */\n  icon?: ReactNode;\n  title: string;\n}\n\n/** Sem titulo, sem cabecalho: o nome vem do `aria-label`, como na paleta de busca. Esc continua fechando. */\nexport interface DialogUntitledProps {\n  'aria-label': string;\n  description?: never;\n  icon?: never;\n  title?: never;\n}\n\nexport type DialogProps = DialogBaseProps &\n  (DialogTitledProps | DialogUntitledProps) & {\n    /** `alertdialog` para a confirmacao que interrompe e exige resposta, como a de uma acao destrutiva. */\n    role?: DialogRole;\n    size?: DialogSize;\n  };\n\nexport function Dialog({ size = 'md', ...props }: DialogProps) {\n  return (\n    <DialogFrame\n      {...props}\n      surfaceClassName={[styles.dialog, styles[size]].join(' ')}\n      underlayClassName={styles.underlay}\n    />\n  );\n}\n"],"names":["Dialog","size","props","jsx","DialogFrame","styles"],"mappings":";;;AAuCO,SAASA,EAAO,EAAE,MAAAC,IAAO,MAAM,GAAGC,KAAsB;AAC7D,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,kBAAkB,CAACG,EAAO,QAAQA,EAAOJ,CAAI,CAAC,EAAE,KAAK,GAAG;AAAA,MACxD,mBAAmBI,EAAO;AAAA,IAAA;AAAA,EAAA;AAGhC;"}

package/dist/components/overlays/Dialog/DialogFrame.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),q=require("react-dom"),F=require("@react-aria/focus"),n=require("@react-aria/overlays"),I=require("../../../hooks/useMergedRefs.cjs"),r=require("./Dialog.module.css.cjs"),P=require("../../icons/icons.cjs");function R({open:s,...t}){return!s||typeof document>"u"?null:q.createPortal(e.jsx(O,{...t}),document.body)}function O({children:s,className:t,description:i,dismissable:o=!0,footer:c,icon:u,onClose:f,ref:v,role:x="dialog",surfaceClassName:y,title:d,underlayClassName:b,...g}){const a=l.useRef(null),p=I.useMergedRefs(a,v),m=l.useId(),j=`${m}-title`,h=`${m}-description`,{overlayProps:N,underlayProps:D}=n.useOverlay({isOpen:!0,onClose:f,isDismissable:o,isKeyboardDismissDisabled:!o},a);return n.usePreventScroll(),l.useEffect(()=>a.current?n.ariaHideOutside([a.current]):void 0,[]),e.jsx("div",{...D,className:b,children:e.jsx(F.FocusScope,{contain:!0,restoreFocus:!0,autoFocus:!0,children:e.jsxs("div",{...g,...N,ref:p,className:[y,t].filter(Boolean).join(" "),role:x,"aria-modal":"true","aria-labelledby":d?j:void 0,"aria-describedby":i?h:void 0,children:[d&&e.jsxs("header",{className:[r.default.header,s&&r.default.headerDivided].filter(Boolean).join(" "),children:[u&&e.jsx("span",{"aria-hidden":"true",className:r.default.icon,children:u}),e.jsxs("div",{className:r.default.heading,children:[e.jsx("h2",{className:r.default.title,id:j,children:d}),i&&e.jsx("p",{className:r.default.description,id:h,children:i})]}),o&&e.jsx("button",{className:r.default.close,type:"button","aria-label":"Fechar",onClick:f,children:e.jsx(P.IconClose,{size:20})})]}),s&&e.jsx("div",{className:r.default.body,children:s}),c&&e.jsx("div",{className:r.default.footer,children:c})]})})})}exports.DialogFrame=R;
+//# sourceMappingURL=DialogFrame.cjs.map

package/dist/components/overlays/Dialog/DialogFrame.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFrame.cjs","sources":["../../../../src/components/overlays/Dialog/DialogFrame.tsx"],"sourcesContent":["import { useEffect, useId, useRef, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { FocusScope } from '@react-aria/focus';\nimport { ariaHideOutside, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { useMergedRefs } from '../../../hooks/useMergedRefs';\nimport { IconClose } from '../../icons';\nimport type { DialogBaseProps, DialogRole } from './Dialog';\nimport styles from './Dialog.module.css';\n\nexport interface DialogFrameProps extends DialogBaseProps {\n  'aria-label'?: string;\n  description?: string;\n  icon?: ReactNode;\n  role?: DialogRole;\n  surfaceClassName: string;\n  title?: string;\n  underlayClassName: string;\n}\n\n/** Mecanica modal do `Dialog` e do `Drawer`: portal, foco preso, rolagem travada, cabecalho, corpo e rodape. Interna. */\nexport function DialogFrame({ open, ...props }: DialogFrameProps) {\n  // No servidor nao ha `document` para o portal; o modal nasce na hidratacao.\n  if (!open || typeof document === 'undefined') {\n    return null;\n  }\n\n  return createPortal(<DialogFrameContent {...props} />, document.body);\n}\n\nfunction DialogFrameContent({\n  children,\n  className,\n  description,\n  dismissable = true,\n  footer,\n  icon,\n  onClose,\n  ref: refDoConsumidor,\n  role = 'dialog',\n  surfaceClassName,\n  title,\n  underlayClassName,\n  ...props\n}: Omit<DialogFrameProps, 'open'>) {\n  const ref = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs(ref, refDoConsumidor);\n  const generatedId = useId();\n  const titleId = `${generatedId}-title`;\n  const descriptionId = `${generatedId}-description`;\n\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      isOpen: true,\n      onClose,\n      isDismissable: dismissable,\n      isKeyboardDismissDisabled: !dismissable,\n    },\n    ref,\n  );\n\n  usePreventScroll();\n\n  useEffect(() => (ref.current ? ariaHideOutside([ref.current]) : undefined), []);\n\n  return (\n    <div {...underlayProps} className={underlayClassName}>\n      <FocusScope contain restoreFocus autoFocus>\n        <div\n          {...props}\n          {...overlayProps}\n          ref={mergedRef}\n          className={[surfaceClassName, className].filter(Boolean).join(' ')}\n          role={role}\n          aria-modal=\"true\"\n          aria-labelledby={title ? titleId : undefined}\n          aria-describedby={description ? descriptionId : undefined}\n        >\n          {title && (\n            <header className={[styles.header, children && styles.headerDivided].filter(Boolean).join(' ')}>\n              {icon && (\n                <span aria-hidden=\"true\" className={styles.icon}>\n                  {icon}\n                </span>\n              )}\n              <div className={styles.heading}>\n                <h2 className={styles.title} id={titleId}>{title}</h2>\n                {description && <p className={styles.description} id={descriptionId}>{description}</p>}\n              </div>\n              {dismissable && (\n                <button className={styles.close} type=\"button\" aria-label=\"Fechar\" onClick={onClose}>\n                  <IconClose size={20} />\n                </button>\n              )}\n            </header>\n          )}\n          {children && <div className={styles.body}>{children}</div>}\n          {footer && <div className={styles.footer}>{footer}</div>}\n        </div>\n      </FocusScope>\n    </div>\n  );\n}\n"],"names":["DialogFrame","open","props","createPortal","jsx","DialogFrameContent","children","className","description","dismissable","footer","icon","onClose","refDoConsumidor","role","surfaceClassName","title","underlayClassName","ref","useRef","mergedRef","useMergedRefs","generatedId","useId","titleId","descriptionId","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","ariaHideOutside","FocusScope","jsxs","styles","IconClose"],"mappings":"sVAoBO,SAASA,EAAY,CAAE,KAAAC,EAAM,GAAGC,GAA2B,CAEhE,MAAI,CAACD,GAAQ,OAAO,SAAa,IACxB,KAGFE,EAAAA,aAAaC,EAAAA,IAACC,EAAA,CAAoB,GAAGH,EAAO,EAAI,SAAS,IAAI,CACtE,CAEA,SAASG,EAAmB,CAC1B,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EACA,KAAAC,EACA,QAAAC,EACA,IAAKC,EACL,KAAAC,EAAO,SACP,iBAAAC,EACA,MAAAC,EACA,kBAAAC,EACA,GAAGf,CACL,EAAmC,CACjC,MAAMgB,EAAMC,EAAAA,OAAuB,IAAI,EACjCC,EAAYC,EAAAA,cAAcH,EAAKL,CAAe,EAC9CS,EAAcC,EAAAA,MAAA,EACdC,EAAU,GAAGF,CAAW,SACxBG,EAAgB,GAAGH,CAAW,eAE9B,CAAE,aAAAI,EAAc,cAAAC,CAAA,EAAkBC,EAAAA,WACtC,CACE,OAAQ,GACR,QAAAhB,EACA,cAAeH,EACf,0BAA2B,CAACA,CAAA,EAE9BS,CAAA,EAGFW,OAAAA,mBAAA,EAEAC,YAAU,IAAOZ,EAAI,QAAUa,EAAAA,gBAAgB,CAACb,EAAI,OAAO,CAAC,EAAI,OAAY,EAAE,EAG5Ed,EAAAA,IAAC,MAAA,CAAK,GAAGuB,EAAe,UAAWV,EACjC,SAAAb,EAAAA,IAAC4B,EAAAA,WAAA,CAAW,QAAO,GAAC,aAAY,GAAC,UAAS,GACxC,SAAAC,EAAAA,KAAC,MAAA,CACE,GAAG/B,EACH,GAAGwB,EACJ,IAAKN,EACL,UAAW,CAACL,EAAkBR,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACjE,KAAAO,EACA,aAAW,OACX,kBAAiBE,EAAQQ,EAAU,OACnC,mBAAkBhB,EAAciB,EAAgB,OAE/C,SAAA,CAAAT,GACCiB,EAAAA,KAAC,SAAA,CAAO,UAAW,CAACC,EAAAA,QAAO,OAAQ5B,GAAY4B,EAAAA,QAAO,aAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC1F,SAAA,CAAAvB,SACE,OAAA,CAAK,cAAY,OAAO,UAAWuB,UAAO,KACxC,SAAAvB,CAAA,CACH,EAEFsB,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,QACrB,SAAA,CAAA9B,MAAC,MAAG,UAAW8B,EAAAA,QAAO,MAAO,GAAIV,EAAU,SAAAR,EAAM,EAChDR,SAAgB,IAAA,CAAE,UAAW0B,EAAAA,QAAO,YAAa,GAAIT,EAAgB,SAAAjB,CAAA,CAAY,CAAA,EACpF,EACCC,GACCL,EAAAA,IAAC,SAAA,CAAO,UAAW8B,EAAAA,QAAO,MAAO,KAAK,SAAS,aAAW,SAAS,QAAStB,EAC1E,SAAAR,EAAAA,IAAC+B,EAAAA,UAAA,CAAU,KAAM,GAAI,CAAA,CACvB,CAAA,EAEJ,EAED7B,GAAYF,EAAAA,IAAC,MAAA,CAAI,UAAW8B,UAAO,KAAO,SAAA5B,EAAS,EACnDI,GAAUN,EAAAA,IAAC,MAAA,CAAI,UAAW8B,EAAAA,QAAO,OAAS,SAAAxB,CAAA,CAAO,CAAA,CAAA,CAAA,EAEtD,CAAA,CACF,CAEJ"}