@sbkbs/ui 1.0.6 → 2.0.0

package/dist/components/Modal/Modal.js

@@ -1,113 +1,144 @@
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import { useRef as b, useEffect as y } from "react";
-const K = ({
-  isOpen: t,
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { useRef as p, useId as w, useEffect as L } from "react";
+import { createPortal as q } from "react-dom";
+import { X as K } from "lucide-react";
+import { cn as l } from "../../utils/cn.js";
+import { focusRing as M, transitionColors as P, buttonReset as T } from "../../utils/styles.js";
+const C = {
+  sm: "max-w-[25rem]",
+  md: "max-w-[32rem]",
+  lg: "max-w-[44rem]",
+  xl: "max-w-[56rem]",
+  full: "max-w-[calc(100vw-2rem)] h-[calc(100dvh-2rem)]"
+}, N = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', F = ({
+  isOpen: d,
   onClose: o,
-  title: l,
+  title: s,
   subtitle: i,
-  children: g,
-  size: w = "md",
-  showCloseButton: m = !0,
-  closeOnOverlayClick: u = !0,
-  className: p = ""
+  children: E,
+  footer: f,
+  size: j = "md",
+  variant: A = "default",
+  showCloseButton: u = !0,
+  closeOnOverlayClick: S = !0,
+  closeOnEscape: b = !0,
+  closeLabel: D = "Fechar modal",
+  className: I
 }) => {
-  const d = b(null), s = b(null);
-  if (y(() => (t ? (s.current = document.activeElement, document.body.style.overflow = "hidden") : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "", s.current && s.current.focus();
-  }), [t]), y(() => {
-    const r = (e) => {
-      e.key === "Escape" && t && o();
-    }, f = (e) => {
-      if (e.key !== "Tab" || !d.current || !t)
+  const a = p(null), h = p(o);
+  h.current = o;
+  const x = w(), v = w();
+  if (L(() => {
+    if (!d) return;
+    const t = document.activeElement, R = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const z = requestAnimationFrame(() => {
+      var r;
+      const e = ((r = a.current) == null ? void 0 : r.querySelector(N)) ?? a.current;
+      e == null || e.focus();
+    }), g = (e) => {
+      if (e.key === "Escape" && b) {
+        e.stopPropagation(), h.current();
         return;
-      const a = d.current.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      if (a.length === 0) {
+      }
+      if (e.key !== "Tab" || !a.current) return;
+      const r = Array.from(a.current.querySelectorAll(N));
+      if (r.length === 0) {
         e.preventDefault();
         return;
       }
-      const v = a[0], x = a[a.length - 1], h = document.activeElement;
-      e.shiftKey && h === v ? (e.preventDefault(), x.focus()) : !e.shiftKey && h === x && (e.preventDefault(), v.focus());
+      const k = r[0], y = r[r.length - 1];
+      e.shiftKey && document.activeElement === k ? (e.preventDefault(), y.focus()) : !e.shiftKey && document.activeElement === y && (e.preventDefault(), k.focus());
     };
-    return t && (document.addEventListener("keydown", r), document.addEventListener("keydown", f), requestAnimationFrame(() => {
-      var a;
-      const e = ((a = d.current) == null ? void 0 : a.querySelector(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      )) ?? d.current;
-      e == null || e.focus();
-    })), () => {
-      document.removeEventListener("keydown", r), document.removeEventListener("keydown", f);
+    return document.addEventListener("keydown", g), () => {
+      var e;
+      cancelAnimationFrame(z), document.removeEventListener("keydown", g), document.body.style.overflow = R, (e = t == null ? void 0 : t.focus) == null || e.call(t);
     };
-  }, [t, o]), !t)
-    return null;
-  const k = (r) => {
-    u && r.target === r.currentTarget && o();
-  }, E = (r) => {
-    u && (r.key === "Enter" || r.key === " ") && r.target === r.currentTarget && o();
-  }, N = [
-    "relative z-[var(--z-index-modal)] m-auto flex w-full max-h-[90vh] max-w-full flex-col overflow-hidden rounded-[var(--border-radius-2xl)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] shadow-[var(--shadow-2xl)]",
-    {
-      sm: "max-w-[25rem]",
-      md: "max-w-[31.25rem]",
-      lg: "max-w-[43.75rem]",
-      xl: "max-w-[56.25rem]",
-      full: "max-h-[90vh] max-w-[90vw]"
-    }[w],
-    p
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      "aria-labelledby": l ? "modal-title" : void 0,
-      "aria-modal": "true",
-      className: "fixed inset-0 z-[var(--z-index-modal-backdrop)] flex min-h-[100dvh] items-center justify-center overflow-y-auto bg-black/50 p-[var(--spacing-lg)] backdrop-blur-[8px]",
-      onClick: k,
-      onKeyDown: E,
-      role: "dialog",
-      children: /* @__PURE__ */ c("div", { className: N, ref: d, tabIndex: -1, children: [
-        (l || i || m) && /* @__PURE__ */ c("div", { className: "flex shrink-0 items-start justify-between gap-[var(--spacing-lg)] border-b border-[var(--md-outline-variant)] p-[var(--spacing-2xl)]", children: [
-          (l || i) && /* @__PURE__ */ c("div", { className: "flex-1", children: [
-            l && /* @__PURE__ */ n(
-              "h2",
-              {
-                className: "mb-[var(--spacing-xs)] mt-0 text-[var(--font-size-2xl)] font-[var(--font-weight-semibold)] leading-[var(--line-height-tight)] text-[var(--md-on-surface)]",
-                id: "modal-title",
-                children: l
-              }
+  }, [d, b]), !d || typeof document > "u") return null;
+  const c = A === "glass";
+  return q(
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "fixed inset-0 z-[var(--sbk-z-modal)] flex items-center justify-center overflow-y-auto bg-sbk-overlay p-4 animate-sbk-fade-in",
+        "data-testid": "modal-overlay",
+        onMouseDown: (t) => {
+          S && t.target === t.currentTarget && o();
+        },
+        children: /* @__PURE__ */ m(
+          "div",
+          {
+            ref: a,
+            "aria-describedby": i ? v : void 0,
+            "aria-labelledby": s ? x : void 0,
+            "aria-modal": "true",
+            className: l(
+              "relative flex max-h-[calc(100dvh-2rem)] w-full flex-col overflow-hidden rounded-sbk-lg text-sbk-fg outline-none animate-sbk-scale-in motion-reduce:animate-none",
+              c ? "sbk-glass sbk-glass-strong" : "border border-sbk-line bg-sbk-surface shadow-sbk-md",
+              C[j],
+              I
             ),
-            i && /* @__PURE__ */ n("p", { className: "m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]", children: i })
-          ] }),
-          m && /* @__PURE__ */ n(
-            "button",
-            {
-              "aria-label": "Fechar modal",
-              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--border-radius-md)] border-0 bg-[var(--md-surface-container-high)] text-[var(--md-on-surface)] transition-[var(--transition-all)] hover:bg-[color:color-mix(in_srgb,var(--md-error)_15%,var(--md-surface))] hover:text-[var(--md-error)]",
-              onClick: o,
-              type: "button",
-              children: /* @__PURE__ */ c(
-                "svg",
+            role: "dialog",
+            tabIndex: -1,
+            children: [
+              (s || i || u) && /* @__PURE__ */ m(
+                "div",
                 {
-                  fill: "none",
-                  className: "h-5 w-5",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  viewBox: "0 0 24 24",
+                  className: l(
+                    "flex shrink-0 items-start justify-between gap-4 px-6 pb-4 pt-6",
+                    !c && "border-b border-sbk-line"
+                  ),
                   children: [
-                    /* @__PURE__ */ n("line", { x1: "18", x2: "6", y1: "6", y2: "18" }),
-                    /* @__PURE__ */ n("line", { x1: "6", x2: "18", y1: "6", y2: "18" })
+                    /* @__PURE__ */ m("div", { className: "grid flex-1 gap-1", children: [
+                      s && /* @__PURE__ */ n(
+                        "h2",
+                        {
+                          className: "m-0 text-xl font-semibold leading-tight text-sbk-fg-heading",
+                          id: x,
+                          children: s
+                        }
+                      ),
+                      i && /* @__PURE__ */ n("p", { className: "m-0 text-sm font-light text-sbk-fg-muted", id: v, children: i })
+                    ] }),
+                    u && /* @__PURE__ */ n(
+                      "button",
+                      {
+                        "aria-label": D,
+                        className: l(
+                          T,
+                          "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-sbk-sm text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+                          P,
+                          M
+                        ),
+                        onClick: o,
+                        type: "button",
+                        children: /* @__PURE__ */ n(K, { "aria-hidden": "true", className: "size-5" })
+                      }
+                    )
                   ]
                 }
+              ),
+              /* @__PURE__ */ n("div", { className: "min-h-0 flex-1 overflow-y-auto px-6 py-5 font-light", children: E }),
+              f && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: l(
+                    "flex shrink-0 items-center justify-end gap-2 px-6 py-4",
+                    !c && "border-t border-sbk-line bg-sbk-surface-sunken"
+                  ),
+                  children: f
+                }
               )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ n("div", { className: "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]", children: g })
-      ] })
-    }
+            ]
+          }
+        )
+      }
+    ),
+    document.body
   );
 };
+F.displayName = "Modal";
 export {
-  K as Modal
+  F as Modal
 };
 //# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport interface ModalProps {\n  children: React.ReactNode;\n  className?: string;\n  closeOnOverlayClick?: boolean;\n  isOpen: boolean;\n  onClose: () => void;\n  showCloseButton?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  subtitle?: string;\n  title?: string | React.ReactNode;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  children,\n  size = 'md',\n  showCloseButton = true,\n  closeOnOverlayClick = true,\n  className = '',\n}) => {\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const lastFocusedElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      lastFocusedElementRef.current = document.activeElement as HTMLElement | null;\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n      if (lastFocusedElementRef.current) {\n        lastFocusedElementRef.current.focus();\n      }\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen) {\n        onClose();\n      }\n    };\n    const handleTabTrap = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab' || !dialogRef.current || !isOpen) {\n        return;\n      }\n\n      const focusable = dialogRef.current.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      );\n\n      if (focusable.length === 0) {\n        e.preventDefault();\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n\n      if (e.shiftKey && active === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape);\n      document.addEventListener('keydown', handleTabTrap);\n      requestAnimationFrame(() => {\n        const initialTarget =\n          dialogRef.current?.querySelector<HTMLElement>(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n          ) ?? dialogRef.current;\n        initialTarget?.focus();\n      });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n      document.removeEventListener('keydown', handleTabTrap);\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && e.target === e.currentTarget) {\n      onClose();\n    }\n  };\n\n  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (\n      closeOnOverlayClick &&\n      (e.key === 'Enter' || e.key === ' ') &&\n      e.target === e.currentTarget\n    ) {\n      onClose();\n    }\n  };\n\n  const sizeClassMap: Record<NonNullable<ModalProps['size']>, string> = {\n    sm: 'max-w-[25rem]',\n    md: 'max-w-[31.25rem]',\n    lg: 'max-w-[43.75rem]',\n    xl: 'max-w-[56.25rem]',\n    full: 'max-h-[90vh] max-w-[90vw]',\n  };\n  const combinedClass = [\n    'relative z-[var(--z-index-modal)] m-auto flex w-full max-h-[90vh] max-w-full flex-col overflow-hidden rounded-[var(--border-radius-2xl)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] shadow-[var(--shadow-2xl)]',\n    sizeClassMap[size],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      aria-labelledby={title ? 'modal-title' : undefined}\n      aria-modal=\"true\"\n      className=\"fixed inset-0 z-[var(--z-index-modal-backdrop)] flex min-h-[100dvh] items-center justify-center overflow-y-auto bg-black/50 p-[var(--spacing-lg)] backdrop-blur-[8px]\"\n      onClick={handleOverlayClick}\n      onKeyDown={handleOverlayKeyDown}\n      role=\"dialog\"\n    >\n      <div className={combinedClass} ref={dialogRef} tabIndex={-1}>\n        {(title || subtitle || showCloseButton) && (\n          <div className=\"flex shrink-0 items-start justify-between gap-[var(--spacing-lg)] border-b border-[var(--md-outline-variant)] p-[var(--spacing-2xl)]\">\n            {(title || subtitle) && (\n              <div className=\"flex-1\">\n                {title && (\n                  <h2\n                    className=\"mb-[var(--spacing-xs)] mt-0 text-[var(--font-size-2xl)] font-[var(--font-weight-semibold)] leading-[var(--line-height-tight)] text-[var(--md-on-surface)]\"\n                    id=\"modal-title\"\n                  >\n                    {title}\n                  </h2>\n                )}\n                {subtitle && (\n                  <p className=\"m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]\">\n                    {subtitle}\n                  </p>\n                )}\n              </div>\n            )}\n            {showCloseButton && (\n              <button\n                aria-label=\"Fechar modal\"\n                className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--border-radius-md)] border-0 bg-[var(--md-surface-container-high)] text-[var(--md-on-surface)] transition-[var(--transition-all)] hover:bg-[color:color-mix(in_srgb,var(--md-error)_15%,var(--md-surface))] hover:text-[var(--md-error)]\"\n                onClick={onClose}\n                type=\"button\"\n              >\n                <svg\n                  fill=\"none\"\n                  className=\"h-5 w-5\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <line x1=\"18\" x2=\"6\" y1=\"6\" y2=\"18\" />\n                  <line x1=\"6\" x2=\"18\" y1=\"6\" y2=\"18\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Modal","isOpen","onClose","title","subtitle","children","size","showCloseButton","closeOnOverlayClick","className","dialogRef","useRef","lastFocusedElementRef","useEffect","handleEscape","handleTabTrap","focusable","first","last","active","initialTarget","_a","handleOverlayClick","e","handleOverlayKeyDown","combinedClass","jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { useEffect, useId, useRef } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { X } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\r\n\r\nexport interface ModalProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  closeOnEscape?: boolean;\r\n  closeOnOverlayClick?: boolean;\r\n  /** Rótulo do botão de fechar. Padrão: \"Fechar modal\". */\r\n  closeLabel?: string;\r\n  /** Rodapé fixo (ações). */\r\n  footer?: React.ReactNode;\r\n  isOpen: boolean;\r\n  onClose: () => void;\r\n  showCloseButton?: boolean;\r\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\r\n  subtitle?: React.ReactNode;\r\n  title?: React.ReactNode;\r\n  variant?: 'default' | 'glass';\r\n}\r\n\r\nconst SIZE_CLASS: Record<NonNullable<ModalProps['size']>, string> = {\r\n  sm: 'max-w-[25rem]',\r\n  md: 'max-w-[32rem]',\r\n  lg: 'max-w-[44rem]',\r\n  xl: 'max-w-[56rem]',\r\n  full: 'max-w-[calc(100vw-2rem)] h-[calc(100dvh-2rem)]',\r\n};\r\n\r\nconst FOCUSABLE =\r\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n\r\n/**\r\n * Diálogo modal com focus trap, restauração de foco, Esc e bloqueio de rolagem.\r\n * Renderizado em portal no <body>.\r\n */\r\nexport const Modal = ({\r\n  isOpen,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  children,\r\n  footer,\r\n  size = 'md',\r\n  variant = 'default',\r\n  showCloseButton = true,\r\n  closeOnOverlayClick = true,\r\n  closeOnEscape = true,\r\n  closeLabel = 'Fechar modal',\r\n  className,\r\n}: ModalProps) => {\r\n  const dialogRef = useRef<HTMLDivElement>(null);\r\n  const onCloseRef = useRef(onClose);\r\n  onCloseRef.current = onClose;\r\n  const titleId = useId();\r\n  const subtitleId = useId();\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const previouslyFocused = document.activeElement as HTMLElement | null;\r\n    const previousOverflow = document.body.style.overflow;\r\n    document.body.style.overflow = 'hidden';\r\n\r\n    const frame = requestAnimationFrame(() => {\r\n      const target = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE) ?? dialogRef.current;\r\n      target?.focus();\r\n    });\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        e.stopPropagation();\r\n        onCloseRef.current();\r\n        return;\r\n      }\r\n      if (e.key !== 'Tab' || !dialogRef.current) return;\r\n      const focusable = Array.from(dialogRef.current.querySelectorAll<HTMLElement>(FOCUSABLE));\r\n      if (focusable.length === 0) {\r\n        e.preventDefault();\r\n        return;\r\n      }\r\n      const first = focusable[0];\r\n      const last = focusable[focusable.length - 1];\r\n      if (e.shiftKey && document.activeElement === first) {\r\n        e.preventDefault();\r\n        last.focus();\r\n      } else if (!e.shiftKey && document.activeElement === last) {\r\n        e.preventDefault();\r\n        first.focus();\r\n      }\r\n    };\r\n    document.addEventListener('keydown', handleKeyDown);\r\n\r\n    return () => {\r\n      cancelAnimationFrame(frame);\r\n      document.removeEventListener('keydown', handleKeyDown);\r\n      document.body.style.overflow = previousOverflow;\r\n      previouslyFocused?.focus?.();\r\n    };\r\n  }, [isOpen, closeOnEscape]);\r\n\r\n  if (!isOpen || typeof document === 'undefined') return null;\r\n\r\n  const isGlass = variant === 'glass';\r\n\r\n  return createPortal(\r\n    <div\r\n      className=\"fixed inset-0 z-[var(--sbk-z-modal)] flex items-center justify-center overflow-y-auto bg-sbk-overlay p-4 animate-sbk-fade-in\"\r\n      data-testid=\"modal-overlay\"\r\n      onMouseDown={(e) => {\r\n        if (closeOnOverlayClick && e.target === e.currentTarget) onClose();\r\n      }}\r\n    >\r\n      <div\r\n        ref={dialogRef}\r\n        aria-describedby={subtitle ? subtitleId : undefined}\r\n        aria-labelledby={title ? titleId : undefined}\r\n        aria-modal=\"true\"\r\n        className={cn(\r\n          'relative flex max-h-[calc(100dvh-2rem)] w-full flex-col overflow-hidden rounded-sbk-lg text-sbk-fg outline-none animate-sbk-scale-in motion-reduce:animate-none',\r\n          isGlass\r\n            ? 'sbk-glass sbk-glass-strong'\r\n            : 'border border-sbk-line bg-sbk-surface shadow-sbk-md',\r\n          SIZE_CLASS[size],\r\n          className,\r\n        )}\r\n        role=\"dialog\"\r\n        tabIndex={-1}\r\n      >\r\n        {(title || subtitle || showCloseButton) && (\r\n          <div\r\n            className={cn(\r\n              'flex shrink-0 items-start justify-between gap-4 px-6 pb-4 pt-6',\r\n              !isGlass && 'border-b border-sbk-line',\r\n            )}\r\n          >\r\n            <div className=\"grid flex-1 gap-1\">\r\n              {title && (\r\n                <h2\r\n                  className=\"m-0 text-xl font-semibold leading-tight text-sbk-fg-heading\"\r\n                  id={titleId}\r\n                >\r\n                  {title}\r\n                </h2>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"m-0 text-sm font-light text-sbk-fg-muted\" id={subtitleId}>\r\n                  {subtitle}\r\n                </p>\r\n              )}\r\n            </div>\r\n            {showCloseButton && (\r\n              <button\r\n                aria-label={closeLabel}\r\n                className={cn(\r\n                  buttonReset,\r\n                  'inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-sbk-sm text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\r\n                  transitionColors,\r\n                  focusRing,\r\n                )}\r\n                onClick={onClose}\r\n                type=\"button\"\r\n              >\r\n                <X aria-hidden=\"true\" className=\"size-5\" />\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"min-h-0 flex-1 overflow-y-auto px-6 py-5 font-light\">{children}</div>\r\n        {footer && (\r\n          <div\r\n            className={cn(\r\n              'flex shrink-0 items-center justify-end gap-2 px-6 py-4',\r\n              !isGlass && 'border-t border-sbk-line bg-sbk-surface-sunken',\r\n            )}\r\n          >\r\n            {footer}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>,\r\n    document.body,\r\n  );\r\n};\r\n\r\nModal.displayName = 'Modal';\r\n"],"names":["SIZE_CLASS","FOCUSABLE","Modal","isOpen","onClose","title","subtitle","children","footer","size","variant","showCloseButton","closeOnOverlayClick","closeOnEscape","closeLabel","className","dialogRef","useRef","onCloseRef","titleId","useId","subtitleId","useEffect","previouslyFocused","previousOverflow","frame","target","_a","handleKeyDown","focusable","first","last","isGlass","createPortal","jsx","e","jsxs","cn","buttonReset","transitionColors","focusRing","X"],"mappings":"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"}

package/dist/components/Navigation/Navigation.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
 }
+/** Container lateral simples. Para menu de navegação completo, use SideNav. */
 export declare const Sidebar: React.FC<SidebarProps>;
 export interface TopbarProps extends React.HTMLAttributes<HTMLElement> {
 }

package/dist/components/Navigation/Navigation.js

@@ -1,26 +1,26 @@
-import { jsx as o } from "react/jsx-runtime";
-import { cn as a } from "../../utils/cn.js";
-const s = ({ className: r, ...e }) => /* @__PURE__ */ o(
+import { jsx as s } from "react/jsx-runtime";
+import { cn as b } from "../../utils/cn.js";
+const a = ({ className: e, ...r }) => /* @__PURE__ */ s(
   "aside",
   {
-    className: a(
-      "h-full rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
-      r
+    className: b(
+      "h-full rounded-sbk-md border border-sbk-line bg-sbk-surface p-4 text-sbk-fg",
+      e
     ),
-    ...e
+    ...r
   }
-), c = ({ className: r, ...e }) => /* @__PURE__ */ o(
+), d = ({ className: e, ...r }) => /* @__PURE__ */ s(
   "header",
   {
-    className: a(
-      "flex min-h-14 items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-4",
-      r
+    className: b(
+      "flex min-h-14 items-center justify-between gap-4 border-b border-sbk-line bg-sbk-surface px-4 text-sbk-fg",
+      e
     ),
-    ...e
+    ...r
   }
 );
 export {
-  s as Sidebar,
-  c as Topbar
+  a as Sidebar,
+  d as Topbar
 };
 //# sourceMappingURL=Navigation.js.map

package/dist/components/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {}\nexport const Sidebar: React.FC<SidebarProps> = ({ className, ...props }) => (\n  <aside\n    className={cn(\n      'h-full rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4',\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport interface TopbarProps extends React.HTMLAttributes<HTMLElement> {}\nexport const Topbar: React.FC<TopbarProps> = ({ className, ...props }) => (\n  <header\n    className={cn(\n      'flex min-h-14 items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-4',\n      className,\n    )}\n    {...props}\n  />\n);\n"],"names":["Sidebar","className","props","jsx","cn","Topbar"],"mappings":";;AAIO,MAAMA,IAAkC,CAAC,EAAE,WAAAC,GAAW,GAAGC,QAC9D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,GAIWG,IAAgC,CAAC,EAAE,WAAAJ,GAAW,GAAGC,QAC5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;"}
+{"version":3,"file":"Navigation.js","sources":["../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {}\r\n/** Container lateral simples. Para menu de navegação completo, use SideNav. */\r\nexport const Sidebar: React.FC<SidebarProps> = ({ className, ...props }) => (\r\n  <aside\r\n    className={cn(\r\n      'h-full rounded-sbk-md border border-sbk-line bg-sbk-surface p-4 text-sbk-fg',\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n);\r\n\r\nexport interface TopbarProps extends React.HTMLAttributes<HTMLElement> {}\r\nexport const Topbar: React.FC<TopbarProps> = ({ className, ...props }) => (\r\n  <header\r\n    className={cn(\r\n      'flex min-h-14 items-center justify-between gap-4 border-b border-sbk-line bg-sbk-surface px-4 text-sbk-fg',\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n);\r\n"],"names":["Sidebar","className","props","jsx","cn","Topbar"],"mappings":";;AAKO,MAAMA,IAAkC,CAAC,EAAE,WAAAC,GAAW,GAAGC,QAC9D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,GAIWG,IAAgC,CAAC,EAAE,WAAAJ,GAAW,GAAGC,QAC5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;"}

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value' | 'defaultValue'> {
+    defaultValue?: number;
     error?: string;
     helperText?: string;
-    label?: string;
+    label?: React.ReactNode;
     max?: number;
     min?: number;
     onChange?: (value: number | null) => void;
     size?: 'sm' | 'md' | 'lg';
     step?: number;
+    value?: number | null;
 }
+/** Campo numérico com botões de incremento. Controlado via `value` + `onChange`. */
 export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/NumberInput/NumberInput.js

@@ -1,135 +1,105 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import _ from "react";
-import { cn as l } from "../../utils/cn.js";
-const M = _.forwardRef(
+import { jsx as r, jsxs as E } from "react/jsx-runtime";
+import R, { useId as T } from "react";
+import { Minus as _, Plus as M } from "lucide-react";
+import { cn as s } from "../../utils/cn.js";
+import { describedBy as P, focusRing as j, transitionColors as F, buttonReset as N } from "../../utils/styles.js";
+import { Field as z } from "../Field/Field.js";
+const A = { sm: "min-h-8 text-sm", md: "min-h-10 text-base", lg: "min-h-12 text-lg" }, B = {
+  sm: "w-8 [&_svg]:size-3.5",
+  md: "w-10 [&_svg]:size-4",
+  lg: "w-12 [&_svg]:size-5"
+}, G = (c, t, o) => Math.min(o ?? Number.POSITIVE_INFINITY, Math.max(t ?? Number.NEGATIVE_INFINITY, c)), H = R.forwardRef(
   ({
-    label: x,
-    error: i,
-    helperText: v,
-    size: u = "md",
-    min: s,
-    max: n,
-    step: m = 1,
-    onChange: r,
-    className: w,
-    id: y,
-    value: b,
-    defaultValue: a,
-    disabled: c,
-    ...g
-  }, z) => {
-    const e = y || `number-input-${Math.random().toString(36).slice(2, 9)}`, p = !!i, $ = {
-      sm: "min-h-8 text-[var(--font-size-sm)]",
-      md: "min-h-10 text-[var(--font-size-base)]",
-      lg: "min-h-12 text-[var(--font-size-lg)]"
-    }, h = {
-      sm: "h-8 w-7 text-sm",
-      md: "h-10 w-8 text-base",
-      lg: "h-12 w-9 text-lg"
-    }, d = b !== void 0 ? Number(b) : void 0, j = () => {
-      const t = (d ?? (a !== void 0 ? Number(a) : 0)) - m;
-      (s === void 0 || t >= s) && (r == null || r(t));
-    }, k = () => {
-      const t = (d ?? (a !== void 0 ? Number(a) : 0)) + m;
-      (n === void 0 || t <= n) && (r == null || r(t));
-    }, I = (f) => {
-      const t = f.target.value;
-      r == null || r(t === "" ? null : Number(t));
-    };
-    return /* @__PURE__ */ N("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
-      x && /* @__PURE__ */ o(
-        "label",
-        {
-          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
-          htmlFor: e,
-          children: x
-        }
-      ),
-      /* @__PURE__ */ N(
-        "div",
-        {
-          className: l(
-            "inline-flex overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] transition focus-within:border-[var(--border-color-focus)] focus-within:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)]",
-            p && "border-[var(--md-error)] focus-within:border-[var(--md-error)]",
-            c && "cursor-not-allowed opacity-60"
+    label: c,
+    error: t,
+    helperText: o,
+    size: m = "md",
+    min: n,
+    max: a,
+    step: p = 1,
+    onChange: e,
+    className: x,
+    id: w,
+    value: d,
+    defaultValue: f,
+    disabled: b,
+    required: k,
+    ...y
+  }, g) => {
+    const h = T(), i = w ?? h, u = d ?? f ?? 0, I = (l) => e == null ? void 0 : e(G(u + l * p, n, a)), v = s(
+      "flex shrink-0 cursor-pointer items-center justify-center bg-sbk-surface-sunken text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg disabled:cursor-not-allowed disabled:opacity-50",
+      F,
+      j,
+      B[m]
+    );
+    return /* @__PURE__ */ r(z, { error: t, helperText: o, id: i, label: c, required: k, children: /* @__PURE__ */ E(
+      "div",
+      {
+        className: s(
+          "inline-flex overflow-hidden rounded-sbk-sm border border-sbk-line-strong bg-sbk-surface",
+          "focus-within:border-sbk-primary",
+          t && "border-sbk-error",
+          b && "opacity-60"
+        ),
+        children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              "aria-controls": i,
+              "aria-label": "Diminuir",
+              className: s(N, v, "border-r border-sbk-line"),
+              disabled: b || n !== void 0 && u <= n,
+              onClick: () => I(-1),
+              tabIndex: -1,
+              type: "button",
+              children: /* @__PURE__ */ r(_, { "aria-hidden": "true" })
+            }
           ),
-          children: [
-            /* @__PURE__ */ o(
-              "button",
-              {
-                "aria-label": "Diminuir",
-                className: l(
-                  "flex shrink-0 items-center justify-center border-r border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-color-focus)]",
-                  h[u]
-                ),
-                disabled: c || s !== void 0 && (d ?? 0) <= s,
-                onClick: j,
-                type: "button",
-                children: "−"
-              }
-            ),
-            /* @__PURE__ */ o(
-              "input",
-              {
-                ref: z,
-                "aria-describedby": i ? `${e}-error` : v ? `${e}-helper` : void 0,
-                "aria-invalid": p ? !0 : void 0,
-                className: l(
-                  "w-full min-w-0 bg-transparent px-3 text-center text-[var(--md-on-surface)] outline-none",
-                  $[u],
-                  w
-                ),
-                defaultValue: a,
-                disabled: c,
-                id: e,
-                max: n,
-                min: s,
-                step: m,
-                type: "number",
-                value: b,
-                onChange: I,
-                ...g
-              }
-            ),
-            /* @__PURE__ */ o(
-              "button",
-              {
-                "aria-label": "Aumentar",
-                className: l(
-                  "flex shrink-0 items-center justify-center border-l border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-color-focus)]",
-                  h[u]
-                ),
-                disabled: c || n !== void 0 && (d ?? 0) >= n,
-                onClick: k,
-                type: "button",
-                children: "+"
-              }
-            )
-          ]
-        }
-      ),
-      i && /* @__PURE__ */ o(
-        "span",
-        {
-          className: "text-[var(--font-size-xs)] text-[var(--md-error)]",
-          id: `${e}-error`,
-          role: "alert",
-          children: i
-        }
-      ),
-      v && !i && /* @__PURE__ */ o(
-        "span",
-        {
-          className: "text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
-          id: `${e}-helper`,
-          children: v
-        }
-      )
-    ] });
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: g,
+              "aria-describedby": P(i, t, o),
+              "aria-invalid": t ? !0 : void 0,
+              className: s(
+                "w-full min-w-0 bg-transparent px-3 text-center font-light text-sbk-fg outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                A[m],
+                x
+              ),
+              defaultValue: d === void 0 ? f : void 0,
+              disabled: b,
+              id: i,
+              inputMode: "decimal",
+              max: a,
+              min: n,
+              onChange: (l) => e == null ? void 0 : e(l.target.value === "" ? null : Number(l.target.value)),
+              required: k,
+              step: p,
+              type: "number",
+              value: d === void 0 ? void 0 : d ?? "",
+              ...y
+            }
+          ),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              "aria-controls": i,
+              "aria-label": "Aumentar",
+              className: s(N, v, "border-l border-sbk-line"),
+              disabled: b || a !== void 0 && u >= a,
+              onClick: () => I(1),
+              tabIndex: -1,
+              type: "button",
+              children: /* @__PURE__ */ r(M, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
-M.displayName = "NumberInput";
+H.displayName = "NumberInput";
 export {
-  M as NumberInput
+  H as NumberInput
 };
 //# sourceMappingURL=NumberInput.js.map