@plenustech/design-system 0.2.2 → 0.2.3

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/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/** 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({ 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":"yLAuBO,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/** 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({ 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":";;;AAuBO,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"),d=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:n,icon:c,onClose:u,ref:h,role:x="dialog",surfaceClassName:v,title:y,underlayClassName:b,...g}){const a=l.useRef(null),p=I.useMergedRefs(a,h),f=l.useId(),m=`${f}-title`,j=`${f}-description`,{overlayProps:N,underlayProps:D}=d.useOverlay({isOpen:!0,onClose:u,isDismissable:o,isKeyboardDismissDisabled:!o},a);return d.usePreventScroll(),l.useEffect(()=>a.current?d.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:[v,t].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:[c&&e.jsx("span",{"aria-hidden":"true",className:r.default.icon,children:c}),e.jsxs("div",{className:r.default.heading,children:[e.jsx("h2",{className:r.default.title,id:m,children:y}),i&&e.jsx("p",{className:r.default.description,id:j,children:i})]}),o&&e.jsx("button",{className:r.default.close,type:"button","aria-label":"Fechar",onClick:u,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.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 { DialogProps } from './Dialog';\nimport styles from './Dialog.module.css';\n\nexport interface DialogFrameProps extends Omit<DialogProps, 'size'> {\n  surfaceClassName: 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={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":["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":"sVAeO,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,kBAAiBU,EACjB,mBAAkBhB,EAAciB,EAAgB,OAEhD,SAAA,CAAAQ,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,EACC7B,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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFrame.js","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 { DialogProps } from './Dialog';\nimport styles from './Dialog.module.css';\n\nexport interface DialogFrameProps extends Omit<DialogProps, 'size'> {\n  surfaceClassName: 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={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":["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":";;;;;;;;AAeO,SAASA,EAAY,EAAE,MAAAC,GAAM,GAAGC,KAA2B;AAEhE,SAAI,CAACD,KAAQ,OAAO,WAAa,MACxB,OAGFE,EAAa,gBAAAC,EAACC,GAAA,EAAoB,GAAGH,GAAO,GAAI,SAAS,IAAI;AACtE;AAEA,SAASG,EAAmB;AAAA,EAC1B,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,kBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,GAAGf;AACL,GAAmC;AACjC,QAAMgB,IAAMC,EAAuB,IAAI,GACjCC,IAAYC,EAAcH,GAAKL,CAAe,GAC9CS,IAAcC,EAAA,GACdC,IAAU,GAAGF,CAAW,UACxBG,IAAgB,GAAGH,CAAW,gBAE9B,EAAE,cAAAI,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC;AAAA,MACE,QAAQ;AAAA,MACR,SAAAhB;AAAA,MACA,eAAeH;AAAA,MACf,2BAA2B,CAACA;AAAA,IAAA;AAAA,IAE9BS;AAAA,EAAA;AAGF,SAAAW,EAAA,GAEAC,EAAU,MAAOZ,EAAI,UAAUa,EAAgB,CAACb,EAAI,OAAO,CAAC,IAAI,QAAY,EAAE,GAG5E,gBAAAd,EAAC,OAAA,EAAK,GAAGuB,GAAe,WAAWV,GACjC,UAAA,gBAAAb,EAAC4B,GAAA,EAAW,SAAO,IAAC,cAAY,IAAC,WAAS,IACxC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG/B;AAAA,MACH,GAAGwB;AAAA,MACJ,KAAKN;AAAA,MACL,WAAW,CAACL,GAAkBR,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACjE,MAAAO;AAAA,MACA,cAAW;AAAA,MACX,mBAAiBU;AAAA,MACjB,oBAAkBhB,IAAciB,IAAgB;AAAA,MAEhD,UAAA;AAAA,QAAA,gBAAAQ,EAAC,UAAA,EAAO,WAAW,CAACC,EAAO,QAAQ5B,KAAY4B,EAAO,aAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC1F,UAAA;AAAA,UAAAvB,uBACE,QAAA,EAAK,eAAY,QAAO,WAAWuB,EAAO,MACxC,UAAAvB,EAAA,CACH;AAAA,UAEF,gBAAAsB,EAAC,OAAA,EAAI,WAAWC,EAAO,SACrB,UAAA;AAAA,YAAA,gBAAA9B,EAAC,QAAG,WAAW8B,EAAO,OAAO,IAAIV,GAAU,UAAAR,GAAM;AAAA,YAChDR,uBAAgB,KAAA,EAAE,WAAW0B,EAAO,aAAa,IAAIT,GAAgB,UAAAjB,EAAA,CAAY;AAAA,UAAA,GACpF;AAAA,UACCC,KACC,gBAAAL,EAAC,UAAA,EAAO,WAAW8B,EAAO,OAAO,MAAK,UAAS,cAAW,UAAS,SAAStB,GAC1E,UAAA,gBAAAR,EAAC+B,GAAA,EAAU,MAAM,IAAI,EAAA,CACvB;AAAA,QAAA,GAEJ;AAAA,QACC7B,KAAY,gBAAAF,EAAC,OAAA,EAAI,WAAW8B,EAAO,MAAO,UAAA5B,GAAS;AAAA,QACnDI,KAAU,gBAAAN,EAAC,OAAA,EAAI,WAAW8B,EAAO,QAAS,UAAAxB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEtD,EAAA,CACF;AAEJ;"}

package/dist/components/overlays/Drawer/Drawer.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("../Dialog/DialogFrame.cjs"),e=require("./Drawer.module.css.cjs");function i({side:r="right",size:a="md",...t}){return u.jsx(l.DialogFrame,{...t,surfaceClassName:[e.default.drawer,e.default[a]].join(" "),underlayClassName:[e.default.underlay,e.default[r]].join(" ")})}exports.Drawer=i;
+//# sourceMappingURL=Drawer.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/overlays/Drawer/Drawer.tsx"],"sourcesContent":["import type { DialogProps } from '../Dialog';\nimport { DialogFrame } from '../Dialog/DialogFrame';\nimport styles from './Drawer.module.css';\n\nexport type DrawerSide = 'left' | 'right';\nexport type DrawerSize = 'sm' | 'md' | 'lg';\n\nexport interface DrawerProps extends Omit<DialogProps, 'icon' | 'role' | 'size'> {\n  side?: DrawerSide;\n  size?: DrawerSize;\n}\n\n/** Painel modal preso a lateral da tela, com a mesma mecanica do `Dialog`: foco preso, Esc fecha, a pagina nao rola. */\nexport function Drawer({ side = 'right', size = 'md', ...props }: DrawerProps) {\n  return (\n    <DialogFrame\n      {...props}\n      surfaceClassName={[styles.drawer, styles[size]].join(' ')}\n      underlayClassName={[styles.underlay, styles[side]].join(' ')}\n    />\n  );\n}\n"],"names":["Drawer","side","size","props","jsx","DialogFrame","styles"],"mappings":"iMAaO,SAASA,EAAO,CAAE,KAAAC,EAAO,QAAS,KAAAC,EAAO,KAAM,GAAGC,GAAsB,CAC7E,OACEC,EAAAA,IAACC,EAAAA,YAAA,CACE,GAAGF,EACJ,iBAAkB,CAACG,EAAAA,QAAO,OAAQA,EAAAA,QAAOJ,CAAI,CAAC,EAAE,KAAK,GAAG,EACxD,kBAAmB,CAACI,EAAAA,QAAO,SAAUA,EAAAA,QAAOL,CAAI,CAAC,EAAE,KAAK,GAAG,CAAA,CAAA,CAGjE"}

package/dist/components/overlays/Drawer/Drawer.js

@@ -0,0 +1,17 @@
+import { jsx as m } from "react/jsx-runtime";
+import { DialogFrame as i } from "../Dialog/DialogFrame.js";
+import r from "./Drawer.module.css.js";
+function l({ side: a = "right", size: e = "md", ...o }) {
+  return /* @__PURE__ */ m(
+    i,
+    {
+      ...o,
+      surfaceClassName: [r.drawer, r[e]].join(" "),
+      underlayClassName: [r.underlay, r[a]].join(" ")
+    }
+  );
+}
+export {
+  l as Drawer
+};
+//# sourceMappingURL=Drawer.js.map