@sbkbs/ui 1.0.0 → 1.0.2

package/dist/oficios-ui.js

@@ -1,262 +1,438 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { useState as y, useEffect as C, useContext as k, createContext as E } from "react";
-const M = ({
-  variant: a = "primary",
-  size: t = "md",
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { useState as z, useEffect as b, useContext as $, createContext as P } from "react";
+const W = ({
+  variant: t = "primary",
+  size: a = "md",
+  compact: r = !1,
   fullWidth: n = !1,
-  isLoading: s = !1,
-  leftIcon: r,
-  rightIcon: l,
-  children: o,
-  className: d = "",
-  disabled: h,
-  palette: p,
-  ...i
+  isLoading: o = !1,
+  leftIcon: s,
+  rightIcon: i,
+  children: d,
+  className: h = "",
+  disabled: c,
+  palette: l,
+  style: f,
+  ...m
 }) => {
-  const c = `btn--${a}`, b = `btn--${t}`, f = n ? "btn--full-width" : "", g = s ? "btn--loading" : "", $ = p && a === "primary" ? `btn--palette-${p}` : "", v = `btn ${c} ${b} ${f} ${g} ${$} ${d}`.trim();
-  return /* @__PURE__ */ m(
+  const x = "relative inline-flex select-none items-center justify-center overflow-hidden whitespace-nowrap rounded-[var(--border-radius-md)] border border-transparent font-semibold leading-none tracking-[0.01em] transition-[all_var(--transition-base)]", p = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--md-primary)]", N = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60", u = n ? "w-full" : "", g = "", M = l === "off-white" && t === "primary" ? "border-[var(--border-color)]" : "", _ = {
+    xs: r ? "min-h-[1.75rem] min-w-[1.75rem] gap-1 px-2 py-1 text-[var(--font-size-xs)]" : "min-h-8 min-w-8 gap-1.5 px-3 py-1.5 text-[var(--font-size-xs)]",
+    sm: r ? "min-h-8 min-w-8 gap-[0.3125rem] px-2.5 py-1.5 text-[var(--font-size-sm)]" : "min-h-9 min-w-9 gap-[0.4375rem] px-3.5 py-2 text-[var(--font-size-sm)]",
+    md: r ? "min-h-[2.375rem] min-w-[2.375rem] gap-1.5 px-3 py-2 text-[var(--font-size-base)]" : "min-h-11 min-w-11 gap-2 px-4 py-2.5 text-[var(--font-size-base)]",
+    lg: r ? "min-h-[2.625rem] min-w-[2.625rem] gap-[0.4375rem] px-3.5 py-[0.5625rem] text-[var(--font-size-lg)]" : "min-h-12 min-w-12 gap-[0.5625rem] px-6 py-4 text-[var(--font-size-lg)]",
+    xl: r ? "min-h-12 min-w-12 gap-2 px-4 py-3 text-[var(--font-size-xl)]" : "min-h-14 min-w-14 gap-2.5 px-8 py-6 text-[var(--font-size-xl)]"
+  }, E = {
+    primary: "bg-[var(--md-primary)] text-[var(--md-on-primary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--primary-color-hover)] hover:shadow-[var(--shadow-md)]",
+    secondary: "bg-[var(--md-secondary)] text-[var(--md-on-secondary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--secondary-color-light)] hover:shadow-[var(--shadow-md)]",
+    success: "bg-[var(--success-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--success-color-light)] hover:shadow-[var(--shadow-md)]",
+    error: "bg-[var(--md-error)] text-[var(--md-on-error)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--error-color-light)] hover:shadow-[var(--shadow-md)]",
+    warning: "bg-[var(--warning-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--warning-color-light)] hover:shadow-[var(--shadow-md)]",
+    info: "bg-[var(--info-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--info-color-light)] hover:shadow-[var(--shadow-md)]",
+    neutral: "bg-[var(--neutral-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--neutral-color-light)] hover:shadow-[var(--shadow-md)]",
+    ghost: "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--md-on-surface)] shadow-[var(--shadow-xs)] hover:bg-[var(--bg-hover)] hover:text-[var(--md-primary)] hover:border-[var(--border-color-hover)]"
+  }, C = {
+    xs: r ? "h-3 w-3" : "h-3.5 w-3.5",
+    sm: r ? "h-3.5 w-3.5" : "h-4 w-4",
+    md: "h-[1.125rem] w-[1.125rem]",
+    lg: "h-5 w-5",
+    xl: "h-5 w-5"
+  }, w = {
+    "verde-vibrante": {
+      primary: "var(--brand-verde-vibrante)",
+      hover: "var(--brand-verde-profundo)"
+    },
+    "verde-profundo": {
+      primary: "var(--brand-verde-profundo)",
+      hover: "var(--brand-grafite-azulado)"
+    },
+    "grafite-azulado": {
+      primary: "var(--brand-grafite-azulado)",
+      hover: "var(--brand-cinza-escuro)"
+    },
+    "azul-acinzentado": {
+      primary: "var(--brand-azul-acinzentado)",
+      hover: "var(--brand-grafite-azulado)"
+    },
+    "cinza-medio": {
+      primary: "var(--brand-cinza-medio)",
+      hover: "var(--brand-cinza-escuro)"
+    },
+    "cinza-escuro": {
+      primary: "var(--brand-cinza-escuro)",
+      hover: "var(--brand-preto)"
+    },
+    "off-white": {
+      primary: "var(--brand-off-white)",
+      hover: "var(--brand-branco)",
+      onPrimary: "var(--brand-grafite-azulado)"
+    }
+  }, y = {};
+  l && t === "primary" && (y["--md-primary"] = w[l].primary, y["--primary-color-hover"] = w[l].hover, w[l].onPrimary && (y["--md-on-primary"] = w[l].onPrimary));
+  const B = [
+    x,
+    p,
+    N,
+    _[a],
+    E[t],
+    M,
+    u,
+    g,
+    h
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ v(
     "button",
     {
-      className: v,
-      disabled: h || s,
-      ...i,
+      className: B,
+      disabled: c || o,
+      style: { ...y, ...f },
+      ...m,
       children: [
-        s && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "btn__spinner", children: /* @__PURE__ */ m(
-          "svg",
+        o && /* @__PURE__ */ e(
+          "span",
           {
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            viewBox: "0 0 24 24",
-            children: [
+            "aria-hidden": "true",
+            className: "absolute inline-flex h-[1em] w-[1em] animate-spin items-center justify-center",
+            children: /* @__PURE__ */ v("svg", { fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
               /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
               /* @__PURE__ */ e("path", { d: "M12 2 A10 10 0 0 1 22 12", strokeLinecap: "round" })
-            ]
+            ] })
           }
-        ) }),
-        !s && r && /* @__PURE__ */ e("span", { className: "btn__icon btn__icon--left", children: r }),
-        /* @__PURE__ */ e("span", { className: "btn__content", children: o }),
-        !s && l && /* @__PURE__ */ e("span", { className: "btn__icon btn__icon--right", children: l })
+        ),
+        !o && s && /* @__PURE__ */ e(
+          "span",
+          {
+            className: `mr-1 inline-flex shrink-0 items-center justify-center leading-none ${C[a]}`,
+            children: s
+          }
+        ),
+        !o && /* @__PURE__ */ e("span", { className: "btn__content inline-flex items-center justify-center", children: d }),
+        !o && i && /* @__PURE__ */ e(
+          "span",
+          {
+            className: `ml-1 inline-flex shrink-0 items-center justify-center leading-none ${C[a]}`,
+            children: i
+          }
+        )
       ]
     }
   );
-}, S = ({
-  variant: a = "default",
-  padding: t = "md",
-  hoverable: n = !1,
-  children: s,
-  className: r = "",
-  ...l
+}, F = ({
+  variant: t = "default",
+  padding: a = "md",
+  hoverable: r = !1,
+  children: n,
+  className: o = "",
+  ...s
 }) => {
-  const o = "card", d = `card--${a}`, h = `card--padding-${t}`, i = `${o} ${d} ${h} ${n ? "card--hoverable" : ""} ${r}`.trim();
-  return /* @__PURE__ */ e("div", { className: i, ...l, children: s });
-}, T = ({
-  poweredByText: a = "Powered by",
-  logoSrc: t,
-  logoAlt: n = "Logo",
-  logoFallbackText: s,
-  className: r = ""
-}) => /* @__PURE__ */ e("footer", { className: `app-footer ${r}`.trim(), children: /* @__PURE__ */ m("div", { className: "app-footer-powered", children: [
-  a && /* @__PURE__ */ e("span", { className: "app-footer-powered-text", children: a }),
-  (t || s) && /* @__PURE__ */ m("div", { className: "app-footer-logo-wrap", children: [
-    t && /* @__PURE__ */ e(
-      "img",
-      {
-        alt: n,
-        className: "app-footer-logo",
-        onError: (l) => {
-          l.target.style.display = "none";
-          const o = l.target.nextElementSibling;
-          o && (o.style.display = "flex");
-        },
-        src: t
-      }
-    ),
-    s && /* @__PURE__ */ e(
-      "span",
-      {
-        className: "app-footer-logo-fallback",
-        style: { display: t ? "none" : "flex" },
-        children: s
-      }
-    )
-  ] })
-] }) }), N = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", P = ({
+  const i = "relative overflow-hidden rounded-[var(--border-radius-lg)] transition-[var(--transition-all)]", d = {
+    default: "bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-sm)]",
+    elevated: "bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-lg)]",
+    outlined: "bg-transparent border border-[var(--md-outline-variant)] shadow-none",
+    flat: "bg-[var(--md-surface)] border-0 shadow-none"
+  }, h = {
+    none: "p-0",
+    sm: "p-[var(--spacing-md)]",
+    md: "p-[var(--spacing-lg)]",
+    lg: "p-[var(--spacing-xl)]",
+    xl: "p-[var(--spacing-2xl)]"
+  }, c = r ? "hover:shadow-[var(--shadow-md)]" : "", l = [
+    i,
+    d[t],
+    h[a],
+    c,
+    o
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { className: l, ...s, children: n });
+}, A = ({
+  poweredByText: t = "Powered by",
   logoSrc: a,
-  logoDarkSrc: t,
-  logoAlt: n = "Logo",
-  title: s,
-  subtitle: r,
-  theme: l,
-  onLogoClick: o,
+  logoAlt: r = "Logo",
+  logoFallbackText: n,
+  className: o = ""
+}) => {
+  const [s, i] = z(!0);
+  return /* @__PURE__ */ e(
+    "footer",
+    {
+      className: [
+        "relative z-[1] flex w-full shrink-0 items-center justify-center border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-[var(--spacing-2xl)] py-[var(--spacing-lg)]",
+        o
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ v("div", { className: "flex items-center gap-[var(--spacing-md)]", children: [
+        t && /* @__PURE__ */ e("span", { className: "text-[0.95rem] font-normal text-[var(--text-secondary)]", children: t }),
+        (a || n) && /* @__PURE__ */ v("div", { className: "flex items-center", children: [
+          a && s && /* @__PURE__ */ e(
+            "img",
+            {
+              alt: r,
+              className: "h-6 w-auto object-contain",
+              onError: (d) => {
+                i(!1);
+              },
+              src: a,
+              style: {
+                filter: "brightness(0)"
+              }
+            }
+          ),
+          n && /* @__PURE__ */ e(
+            "span",
+            {
+              className: "flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]",
+              style: {
+                display: a && s ? "none" : "flex",
+                fontFamily: '"Orbitron", sans-serif'
+              },
+              children: n
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}, k = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", V = ({
+  logoSrc: t,
+  logoDarkSrc: a,
+  logoAlt: r = "Logo",
+  title: n,
+  subtitle: o,
+  theme: s,
+  onLogoClick: i,
   rightContent: d,
   className: h = ""
 }) => {
-  const [p, i] = y(!1), [u, c] = y(
-    () => l ?? N()
-  ), b = u === "dark" && t ? t : a;
-  C(() => {
-    const $ = () => i(window.scrollY > 10);
-    return window.addEventListener("scroll", $, { passive: !0 }), () => window.removeEventListener("scroll", $);
-  }, []), C(() => {
-    if (l) {
-      c(l);
+  const [c, l] = z(!1), [f, m] = z(
+    () => s ?? k()
+  ), x = f === "dark" && a ? a : t;
+  b(() => {
+    const u = () => l(window.scrollY > 10);
+    return window.addEventListener("scroll", u, { passive: !0 }), () => window.removeEventListener("scroll", u);
+  }, []), b(() => {
+    if (s) {
+      m(s);
       return;
     }
-    const $ = () => c(N());
-    if ($(), typeof MutationObserver > "u")
+    const u = () => m(k());
+    if (u(), typeof MutationObserver > "u")
       return;
-    const v = new MutationObserver($);
-    return v.observe(document.documentElement, {
+    const g = new MutationObserver(u);
+    return g.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme"]
-    }), () => v.disconnect();
-  }, [l]);
-  const f = () => o?.(), g = ($) => {
-    $.key === "Enter" && o?.();
+    }), () => g.disconnect();
+  }, [s]);
+  const p = () => i?.(), N = (u) => {
+    u.key === "Enter" && i?.();
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ v(
     "header",
     {
-      className: `app-header ${p ? "scrolled" : ""} ${h}`.trim(),
+      className: [
+        "fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]",
+        h
+      ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ e("div", { className: "app-header-top-bar" }),
-        /* @__PURE__ */ m("div", { className: "app-header-content", children: [
-          /* @__PURE__ */ m(
-            "div",
-            {
-              className: "app-header-left",
-              onClick: o ? f : void 0,
-              onKeyDown: o ? g : void 0,
-              role: o ? "button" : void 0,
-              tabIndex: o ? 0 : void 0,
-              children: [
-                b && /* @__PURE__ */ m("div", { className: "app-header-logo", children: [
-                  /* @__PURE__ */ e(
-                    "img",
-                    {
-                      alt: n,
-                      onError: ($) => {
-                        $.target.style.display = "none";
-                        const v = $.target.nextElementSibling;
-                        v && (v.style.display = "block");
-                      },
-                      src: b
-                    }
-                  ),
-                  /* @__PURE__ */ m(
-                    "svg",
-                    {
-                      className: "logo-icon-fallback",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      viewBox: "0 0 24 24",
-                      children: [
-                        /* @__PURE__ */ e("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-                        /* @__PURE__ */ e("path", { d: "M2 17l10 5 10-5M2 12l10 5 10-5" })
-                      ]
-                    }
-                  )
-                ] }),
-                (s || r) && /* @__PURE__ */ m("div", { className: "app-header-title", children: [
-                  s && /* @__PURE__ */ e("h1", { children: s }),
-                  r && /* @__PURE__ */ e("p", { children: r })
-                ] })
-              ]
-            }
-          ),
-          d && /* @__PURE__ */ e("div", { className: "app-header-right", children: d })
-        ] })
+        /* @__PURE__ */ e("div", { className: "h-0.5 w-full bg-[var(--md-primary)]" }),
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: "flex items-center justify-between px-6 py-2 shadow-[var(--shadow-sm)] max-md:flex-col max-md:gap-3 max-md:px-4 max-md:py-3",
+            style: {
+              color: "var(--md-on-surface)",
+              background: `color-mix(in srgb, var(--md-surface) ${c ? "14%" : "18%"}, transparent)`,
+              borderBottom: `1px solid color-mix(in srgb, var(--md-outline-variant) ${c ? "22%" : "30%"}, transparent)`
+            },
+            children: [
+              /* @__PURE__ */ v(
+                "div",
+                {
+                  className: "flex cursor-pointer items-center gap-3 transition-opacity duration-200 ease-in-out hover:opacity-80",
+                  onClick: i ? p : void 0,
+                  onKeyDown: i ? N : void 0,
+                  role: i ? "button" : void 0,
+                  tabIndex: i ? 0 : void 0,
+                  children: [
+                    x && /* @__PURE__ */ v("div", { className: "flex h-16 w-16 shrink-0 items-center justify-center", children: [
+                      /* @__PURE__ */ e(
+                        "img",
+                        {
+                          alt: r,
+                          className: "h-full w-full object-contain",
+                          onError: (u) => {
+                            u.target.style.display = "none";
+                            const g = u.target.nextElementSibling;
+                            g && (g.style.display = "block");
+                          },
+                          src: x
+                        }
+                      ),
+                      /* @__PURE__ */ v(
+                        "svg",
+                        {
+                          className: "hidden h-full w-full",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ e("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                            /* @__PURE__ */ e("path", { d: "M2 17l10 5 10-5M2 12l10 5 10-5" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    (n || o) && /* @__PURE__ */ v("div", { className: "flex flex-col gap-1", children: [
+                      n && /* @__PURE__ */ e(
+                        "h1",
+                        {
+                          className: "m-0 inline-flex items-baseline text-[1.375rem] font-bold leading-[1.2] tracking-[0.05em] text-[var(--md-on-surface)] max-md:text-xl",
+                          style: { fontFamily: '"Orbitron", sans-serif' },
+                          children: n
+                        }
+                      ),
+                      o && /* @__PURE__ */ e("p", { className: "m-0 text-[0.8125rem] font-normal text-[var(--md-on-surface-variant)] max-md:text-xs", children: o })
+                    ] })
+                  ]
+                }
+              ),
+              d && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-3 max-md:w-full max-md:flex-wrap max-md:justify-between", children: d })
+            ]
+          }
+        )
       ]
     }
   );
-}, W = ({
-  label: a,
-  error: t,
-  helperText: n,
-  leftIcon: s,
-  rightIcon: r,
-  fullWidth: l = !1,
-  size: o = "md",
+}, K = ({
+  label: t,
+  error: a,
+  helperText: r,
+  leftIcon: n,
+  rightIcon: o,
+  fullWidth: s = !1,
+  size: i = "md",
   className: d = "",
   id: h,
-  ...p
+  ...c
 }) => {
-  const i = h || `input-${Math.random().toString(36).substring(2, 9)}`, u = !!t, c = "input", b = `input--${o}`, x = `${c} ${b} ${u ? "input--error" : ""} ${l ? "input--full-width" : ""} ${s ? "input--has-left-icon" : ""} ${r ? "input--has-right-icon" : ""} ${d}`.trim();
-  return /* @__PURE__ */ m(
-    "div",
+  const l = h || `input-${Math.random().toString(36).substring(2, 9)}`, f = !!a, x = [
+    "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] font-inherit text-[var(--md-on-surface)] outline-none transition-[var(--transition-all)] placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 hover:not-disabled:not-focus:border-[var(--border-color-hover)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:bg-[var(--md-surface-container-high)] disabled:opacity-60",
+    f ? "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]" : "",
+    n ? "pl-10" : "",
+    o ? "pr-10" : "",
     {
-      className: `input-wrapper ${l ? "input-wrapper--full-width" : ""}`,
-      children: [
-        a && /* @__PURE__ */ e("label", { className: "input-label", htmlFor: i, children: a }),
-        /* @__PURE__ */ m("div", { className: "input-container", children: [
-          s && /* @__PURE__ */ e("span", { className: "input-icon input-icon--left", children: s }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              "aria-describedby": t ? `${i}-error` : n ? `${i}-helper` : void 0,
-              "aria-invalid": u ? !0 : void 0,
-              className: x,
-              id: i,
-              ...p
-            }
-          ),
-          r && /* @__PURE__ */ e("span", { className: "input-icon input-icon--right", children: r })
-        ] }),
-        t && /* @__PURE__ */ e("span", { className: "input-error", id: `${i}-error`, role: "alert", children: t }),
-        n && !t && /* @__PURE__ */ e("span", { className: "input-helper", id: `${i}-helper`, children: n })
-      ]
-    }
-  );
-}, I = ({
-  isOpen: a,
-  onClose: t,
-  title: n,
-  subtitle: s,
-  children: r,
-  size: l = "md",
-  showCloseButton: o = !0,
+      sm: "min-h-8 px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[var(--font-size-sm)]",
+      md: "min-h-10 px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[var(--font-size-base)]",
+      lg: "min-h-12 px-[var(--spacing-xl)] py-[var(--spacing-lg)] text-[var(--font-size-lg)]"
+    }[i],
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ v("div", { className: `flex flex-col gap-[var(--spacing-xs)] ${s ? "w-full" : ""}`, children: [
+    t && /* @__PURE__ */ e(
+      "label",
+      {
+        className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+        htmlFor: l,
+        children: t
+      }
+    ),
+    /* @__PURE__ */ v("div", { className: "group relative flex w-full items-center", children: [
+      n && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: n }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          "aria-describedby": a ? `${l}-error` : r ? `${l}-helper` : void 0,
+          "aria-invalid": f ? !0 : void 0,
+          className: x,
+          id: l,
+          ...c
+        }
+      ),
+      o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute right-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: o })
+    ] }),
+    a && /* @__PURE__ */ e(
+      "span",
+      {
+        className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-error)]",
+        id: `${l}-error`,
+        role: "alert",
+        children: a
+      }
+    ),
+    r && !a && /* @__PURE__ */ e(
+      "span",
+      {
+        className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
+        id: `${l}-helper`,
+        children: r
+      }
+    )
+  ] });
+}, R = ({
+  isOpen: t,
+  onClose: a,
+  title: r,
+  subtitle: n,
+  children: o,
+  size: s = "md",
+  showCloseButton: i = !0,
   closeOnOverlayClick: d = !0,
   className: h = ""
 }) => {
-  if (C(() => (a ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  if (b(() => (t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
     document.body.style.overflow = "";
-  }), [a]), C(() => {
-    const c = (b) => {
-      b.key === "Escape" && a && t();
+  }), [t]), b(() => {
+    const m = (x) => {
+      x.key === "Escape" && t && a();
     };
-    return a && document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, [a, t]), !a)
+    return t && document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+  }, [t, a]), !t)
     return null;
-  const p = (c) => {
-    d && c.target === c.currentTarget && t();
-  }, u = `modal ${`modal--${l}`} ${h}`.trim();
+  const c = (m) => {
+    d && m.target === m.currentTarget && a();
+  }, f = [
+    "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]"
+    }[s],
+    h
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "div",
     {
-      "aria-labelledby": n ? "modal-title" : void 0,
+      "aria-labelledby": r ? "modal-title" : void 0,
       "aria-modal": "true",
-      className: "modal-overlay",
-      onClick: p,
+      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: c,
       role: "dialog",
-      children: /* @__PURE__ */ m("div", { className: u, children: [
-        (n || s || o) && /* @__PURE__ */ m("div", { className: "modal-header", children: [
-          (n || s) && /* @__PURE__ */ m("div", { className: "modal-header-content", children: [
-            n && /* @__PURE__ */ e("h2", { className: "modal-title", id: "modal-title", children: n }),
-            s && /* @__PURE__ */ e("p", { className: "modal-subtitle", children: s })
+      children: /* @__PURE__ */ v("div", { className: f, children: [
+        (r || n || i) && /* @__PURE__ */ v("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: [
+          (r || n) && /* @__PURE__ */ v("div", { className: "flex-1", children: [
+            r && /* @__PURE__ */ e(
+              "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: r
+              }
+            ),
+            n && /* @__PURE__ */ e("p", { className: "m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]", children: n })
           ] }),
-          o && /* @__PURE__ */ e(
+          i && /* @__PURE__ */ e(
             "button",
             {
               "aria-label": "Fechar modal",
-              className: "modal-close",
-              onClick: t,
+              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: a,
               type: "button",
-              children: /* @__PURE__ */ m(
+              children: /* @__PURE__ */ v(
                 "svg",
                 {
                   fill: "none",
+                  className: "h-5 w-5",
                   stroke: "currentColor",
                   strokeWidth: "2",
                   viewBox: "0 0 24 24",
@@ -269,75 +445,149 @@ const M = ({
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "modal-content", children: r })
+        /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]", children: o })
       ] })
     }
   );
-}, R = ({
-  as: a = "p",
-  size: t = "md",
-  weight: n = "normal",
-  align: s = "left",
-  muted: r = !1,
-  children: l,
-  className: o = "",
-  ...d
+}, D = ({
+  as: t = "p",
+  size: a = "md",
+  weight: r = "normal",
+  align: n = "left",
+  muted: o = !1,
+  italic: s = !1,
+  children: i,
+  className: d = "",
+  ...h
 }) => {
-  const h = a, p = "paragraph", i = `paragraph--${t}`, u = `paragraph--${n}`, c = `paragraph--align-${s}`, f = `${p} ${i} ${u} ${c} ${r ? "paragraph--muted" : ""} ${o}`.trim();
-  return /* @__PURE__ */ e(h, { className: f, ...d, children: l });
-}, A = ({
-  as: a = "p",
-  size: t = "md",
-  weight: n = "normal",
-  align: s = "left",
-  muted: r = !1,
-  children: l,
-  className: o = "",
-  ...d
+  const c = t, l = {
+    xs: "text-[var(--font-size-xs)] leading-[var(--line-height-normal)]",
+    sm: "text-[var(--font-size-sm)] leading-[var(--line-height-normal)]",
+    md: "text-[var(--font-size-base)] leading-[var(--line-height-relaxed)]",
+    lg: "text-[var(--font-size-lg)] leading-[var(--line-height-loose)]"
+  }, f = {
+    light: "font-[var(--font-weight-light)]",
+    normal: "font-[var(--font-weight-normal)]",
+    medium: "font-[var(--font-weight-medium)]"
+  }, m = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify"
+  }, x = [
+    "m-0 text-[var(--text-primary)] transition-[var(--transition-colors)]",
+    l[a],
+    f[r],
+    m[n],
+    s ? "italic" : "not-italic",
+    o ? "text-[var(--text-muted)]" : "",
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e(c, { className: x, ...h, children: i });
+}, H = ({
+  as: t = "p",
+  size: a = "md",
+  weight: r = "normal",
+  align: n = "left",
+  muted: o = !1,
+  italic: s = !1,
+  children: i,
+  className: d = "",
+  ...h
 }) => {
-  const h = a, p = "subtitle", i = `subtitle--${t}`, u = `subtitle--${n}`, c = `subtitle--align-${s}`, f = `${p} ${i} ${u} ${c} ${r ? "subtitle--muted" : ""} ${o}`.trim();
-  return /* @__PURE__ */ e(h, { className: f, ...d, children: l });
-}, j = ({
-  as: a = "h1",
-  size: t = "2xl",
-  weight: n = "bold",
-  align: s = "left",
-  gradient: r = !1,
-  children: l,
-  className: o = "",
-  ...d
+  const c = t, l = {
+    xs: "text-[var(--font-size-xs)]",
+    sm: "text-[var(--font-size-sm)]",
+    md: "text-[var(--font-size-base)]",
+    lg: "text-[var(--font-size-lg)]"
+  }, f = {
+    normal: "font-[var(--font-weight-normal)]",
+    medium: "font-[var(--font-weight-medium)]",
+    semibold: "font-[var(--font-weight-semibold)]"
+  }, m = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }, x = [
+    "m-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]",
+    l[a],
+    f[r],
+    m[n],
+    s ? "italic" : "not-italic",
+    o ? "text-[var(--text-muted)] opacity-80" : "",
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e(c, { className: x, ...h, children: i });
+}, O = ({
+  as: t = "h1",
+  size: a = "2xl",
+  weight: r = "bold",
+  align: n = "left",
+  gradient: o = !1,
+  italic: s = !1,
+  children: i,
+  className: d = "",
+  ...h
 }) => {
-  const h = a, p = "title", i = `title--${t}`, u = `title--${n}`, c = `title--align-${s}`, f = `${p} ${i} ${u} ${c} ${r ? "title--gradient" : ""} ${o}`.trim();
-  return /* @__PURE__ */ e(h, { className: f, ...d, children: l });
-}, w = E(void 0), B = () => {
-  const a = k(w);
-  if (!a)
+  const c = t, l = {
+    xs: "text-[var(--font-size-sm)]",
+    sm: "text-[var(--font-size-base)]",
+    md: "text-[var(--font-size-lg)]",
+    lg: "text-[var(--font-size-xl)]",
+    xl: "text-[var(--font-size-2xl)]",
+    "2xl": "text-[var(--font-size-3xl)]",
+    "3xl": "text-[var(--font-size-4xl)]",
+    "4xl": "text-[3rem]"
+  }, f = {
+    light: "font-[var(--font-weight-light)]",
+    normal: "font-[var(--font-weight-normal)]",
+    medium: "font-[var(--font-weight-medium)]",
+    semibold: "font-[var(--font-weight-semibold)]",
+    bold: "font-[var(--font-weight-bold)]",
+    extrabold: "font-extrabold"
+  }, m = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }, x = o ? "bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent" : "", p = [
+    "m-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]",
+    l[a],
+    f[r],
+    m[n],
+    s ? "italic" : "not-italic",
+    x,
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e(c, { className: p, ...h, children: i });
+}, j = P(void 0), Y = () => {
+  const t = $(j);
+  if (!t)
     throw new Error("useTheme must be used within a ThemeProvider");
-  return a;
-}, F = ({
-  children: a,
-  defaultTheme: t = "light"
+  return t;
+}, q = ({
+  children: t,
+  defaultTheme: a = "light"
 }) => {
-  const [n, s] = y(() => typeof window > "u" ? t : window.localStorage.getItem("theme") || t);
-  C(() => {
-    typeof window > "u" || (window.localStorage.setItem("theme", n), document.documentElement.setAttribute("data-theme", n));
-  }, [n]);
-  const r = () => {
-    s((l) => l === "dark" ? "light" : "dark");
+  const [r, n] = z(() => typeof window > "u" ? a : window.localStorage.getItem("theme") || a);
+  b(() => {
+    typeof window > "u" || (window.localStorage.setItem("theme", r), document.documentElement.setAttribute("data-theme", r));
+  }, [r]);
+  const o = () => {
+    n((s) => s === "dark" ? "light" : "dark");
   };
-  return /* @__PURE__ */ e(w.Provider, { value: { theme: n, toggleTheme: r }, children: a });
+  return /* @__PURE__ */ e(j.Provider, { value: { theme: r, toggleTheme: o }, children: t });
 };
 export {
-  M as Button,
-  S as Card,
-  T as Footer,
-  P as Header,
-  W as Input,
-  I as Modal,
-  R as Paragraph,
-  A as Subtitle,
-  F as ThemeProvider,
-  j as Title,
-  B as useTheme
+  W as Button,
+  F as Card,
+  A as Footer,
+  V as Header,
+  K as Input,
+  R as Modal,
+  D as Paragraph,
+  H as Subtitle,
+  q as ThemeProvider,
+  O as Title,
+  Y as useTheme
 };
 //# sourceMappingURL=oficios-ui.js.map