@sbkbs/ui 1.0.2 → 1.0.3

package/dist/oficios-ui.js

@@ -1,27 +1,77 @@
-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,
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { useState as N, useRef as z, useEffect as w, useId as B, useCallback as S, useMemo as R, useContext as _, createContext as A, isValidElement as K } from "react";
+const f = (...e) => e.filter(Boolean).join(" "), V = ({ items: e, defaultOpenId: r }) => {
+  const [a, n] = N(r ?? null), o = z(null);
+  return /* @__PURE__ */ t("div", { className: "grid gap-2", ref: o, children: e.map((s) => {
+    const d = a === s.id, v = `accordion-trigger-${s.id}`, c = `accordion-panel-${s.id}`;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: "overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--border-color)]",
+        children: [
+          /* @__PURE__ */ m(
+            "button",
+            {
+              "aria-controls": c,
+              "aria-expanded": d,
+              className: "flex w-full items-center justify-between bg-[var(--bg-secondary)] px-4 py-3 text-left text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
+              id: v,
+              onKeyDown: (i) => {
+                var h, b, g, y;
+                if (!o.current)
+                  return;
+                const l = Array.from(
+                  o.current.querySelectorAll(
+                    '[id^="accordion-trigger-"]'
+                  )
+                ), u = l.findIndex((x) => x.id === v);
+                u === -1 || l.length === 0 || (i.key === "ArrowDown" ? (i.preventDefault(), (h = l[(u + 1) % l.length]) == null || h.focus()) : i.key === "ArrowUp" ? (i.preventDefault(), (b = l[(u - 1 + l.length) % l.length]) == null || b.focus()) : i.key === "Home" ? (i.preventDefault(), (g = l[0]) == null || g.focus()) : i.key === "End" && (i.preventDefault(), (y = l[l.length - 1]) == null || y.focus()));
+              },
+              onClick: () => n((i) => i === s.id ? null : s.id),
+              type: "button",
+              children: [
+                s.title,
+                /* @__PURE__ */ t("span", { className: f("transition", d ? "rotate-180" : ""), children: "⌄" })
+              ]
+            }
+          ),
+          d && /* @__PURE__ */ t(
+            "div",
+            {
+              "aria-labelledby": v,
+              className: "bg-[var(--bg-tertiary)] px-4 py-3 text-sm text-[var(--text-secondary)]",
+              id: c,
+              role: "region",
+              children: s.content
+            }
+          )
+        ]
+      },
+      s.id
+    );
+  }) });
+}, W = ({
+  variant: e = "primary",
+  size: r = "md",
+  compact: a = !1,
   fullWidth: n = !1,
   isLoading: o = !1,
   leftIcon: s,
-  rightIcon: i,
-  children: d,
-  className: h = "",
-  disabled: c,
+  rightIcon: d,
+  children: v,
+  className: c = "",
+  disabled: i,
   palette: l,
-  style: f,
-  ...m
+  style: u,
+  ...h
 }) => {
-  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 = {
+  const b = "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)]", g = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--md-primary)]", y = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60", x = n ? "w-full" : "", p = "", k = l === "off-white" && e === "primary" ? "border-[var(--border-color)]" : "", C = {
+    xs: a ? "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: a ? "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: a ? "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: a ? "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: a ? "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)]"
+  }, j = {
     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)]",
@@ -30,13 +80,13 @@ const W = ({
     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",
+  }, I = {
+    xs: a ? "h-3 w-3" : "h-3.5 w-3.5",
+    sm: a ? "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 = {
+  }, M = {
     "verde-vibrante": {
       primary: "var(--brand-verde-vibrante)",
       hover: "var(--brand-verde-profundo)"
@@ -66,121 +116,255 @@ const W = ({
       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 = [
+  }, E = {};
+  l && e === "primary" && (E["--md-primary"] = M[l].primary, E["--primary-color-hover"] = M[l].hover, M[l].onPrimary && (E["--md-on-primary"] = M[l].onPrimary));
+  const F = [
+    b,
+    g,
+    y,
+    C[r],
+    j[e],
+    k,
     x,
     p,
-    N,
-    _[a],
-    E[t],
-    M,
-    u,
-    g,
-    h
+    c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ m(
     "button",
     {
-      className: B,
-      disabled: c || o,
-      style: { ...y, ...f },
-      ...m,
+      className: F,
+      disabled: i || o,
+      style: { ...E, ...u },
+      ...h,
       children: [
-        o && /* @__PURE__ */ e(
+        o && /* @__PURE__ */ t(
           "span",
           {
             "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" })
+            children: /* @__PURE__ */ m("svg", { fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
+              /* @__PURE__ */ t("path", { d: "M12 2 A10 10 0 0 1 22 12", strokeLinecap: "round" })
             ] })
           }
         ),
-        !o && s && /* @__PURE__ */ e(
+        !o && s && /* @__PURE__ */ t(
           "span",
           {
-            className: `mr-1 inline-flex shrink-0 items-center justify-center leading-none ${C[a]}`,
+            className: `mr-1 inline-flex shrink-0 items-center justify-center leading-none ${I[r]}`,
             children: s
           }
         ),
-        !o && /* @__PURE__ */ e("span", { className: "btn__content inline-flex items-center justify-center", children: d }),
-        !o && i && /* @__PURE__ */ e(
+        !o && /* @__PURE__ */ t("span", { className: "btn__content inline-flex items-center justify-center", children: v }),
+        !o && d && /* @__PURE__ */ t(
           "span",
           {
-            className: `ml-1 inline-flex shrink-0 items-center justify-center leading-none ${C[a]}`,
-            children: i
+            className: `ml-1 inline-flex shrink-0 items-center justify-center leading-none ${I[r]}`,
+            children: d
           }
         )
       ]
     }
   );
-}, F = ({
-  variant: t = "default",
-  padding: a = "md",
-  hoverable: r = !1,
+}, G = ({
+  title: e,
+  tone: r = "info",
+  children: a,
+  className: n,
+  ...o
+}) => {
+  const s = {
+    info: "border-[var(--info-color)]/40 bg-[var(--info-color)]/10 text-[var(--text-primary)]",
+    success: "border-[var(--success-color)]/40 bg-[var(--success-color)]/10 text-[var(--text-primary)]",
+    warning: "border-[var(--warning-color)]/40 bg-[var(--warning-color)]/10 text-[var(--text-primary)]",
+    error: "border-[var(--md-error)]/40 bg-[var(--md-error)]/10 text-[var(--text-primary)]"
+  }[r];
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: f(
+        "rounded-[var(--border-radius-md)] border p-4",
+        s,
+        n
+      ),
+      role: "alert",
+      ...o,
+      children: [
+        e && /* @__PURE__ */ t("p", { className: "mb-1 text-sm font-semibold", children: e }),
+        /* @__PURE__ */ t("div", { className: "text-sm leading-relaxed", children: a })
+      ]
+    }
+  );
+}, U = ({
+  size: e = "md",
+  tone: r = "neutral",
+  className: a,
+  children: n,
+  ...o
+}) => {
+  const s = {
+    neutral: "bg-[var(--bg-tertiary)] text-[var(--text-secondary)]",
+    primary: "bg-[var(--md-primary)] text-[var(--md-on-primary)]",
+    success: "bg-[var(--success-color)] text-white",
+    warning: "bg-[var(--warning-color)] text-white",
+    error: "bg-[var(--md-error)] text-[var(--md-on-error)]",
+    info: "bg-[var(--info-color)] text-white"
+  }[r];
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: f(
+        "inline-flex items-center rounded-full font-medium leading-none",
+        s,
+        e === "sm" ? "px-2 py-0.5 text-[0.6875rem]" : "px-2.5 py-1 text-xs",
+        a
+      ),
+      ...o,
+      children: n
+    }
+  );
+}, Y = ({
+  variant: e = "default",
+  padding: r = "md",
+  hoverable: a = !1,
   children: n,
   className: o = "",
   ...s
 }) => {
-  const i = "relative overflow-hidden rounded-[var(--border-radius-lg)] transition-[var(--transition-all)]", d = {
+  const d = "relative overflow-hidden rounded-[var(--border-radius-lg)] transition-[var(--transition-all)]", v = {
     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 = {
+  }, c = {
     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 = a ? "hover:shadow-[var(--shadow-md)]" : "", l = [
+    d,
+    v[e],
+    c[r],
     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,
-  logoAlt: r = "Logo",
+  return /* @__PURE__ */ t("div", { className: l, ...s, children: n });
+}, J = ({
+  label: e,
+  helperText: r,
+  className: a,
+  id: n,
+  ...o
+}) => {
+  const s = n || `checkbox-${Math.random().toString(36).slice(2, 9)}`;
+  return /* @__PURE__ */ m("label", { className: f("inline-flex cursor-pointer items-start gap-2", a), htmlFor: s, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        className: "mt-0.5 h-4 w-4 rounded border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--border-color-focus)]",
+        id: s,
+        type: "checkbox",
+        ...o
+      }
+    ),
+    /* @__PURE__ */ m("span", { className: "grid gap-0.5", children: [
+      e && /* @__PURE__ */ t("span", { className: "text-sm text-[var(--text-primary)]", children: e }),
+      r && /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-muted)]", children: r })
+    ] })
+  ] });
+}, L = ({
+  selected: e = !1,
+  className: r,
+  children: a,
+  ...n
+}) => /* @__PURE__ */ t(
+  "button",
+  {
+    className: f(
+      "inline-flex items-center rounded-full border px-3 py-1.5 text-sm transition",
+      e ? "border-[var(--md-primary)] bg-[color:color-mix(in_srgb,var(--md-primary)_16%,transparent)] text-[var(--md-on-surface)]" : "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+      r
+    ),
+    type: "button",
+    ...n,
+    children: a
+  }
+), Q = ({
+  orientation: e = "horizontal",
+  className: r,
+  ...a
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: f(
+      "bg-[var(--border-color)]",
+      e === "horizontal" ? "h-px w-full" : "h-full w-px",
+      r
+    ),
+    role: "separator",
+    ...a
+  }
+), X = ({
+  icon: e,
+  title: r,
+  description: a,
+  action: n,
+  className: o,
+  ...s
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    className: f(
+      "grid justify-items-center gap-3 rounded-[var(--border-radius-lg)] border border-dashed border-[var(--border-color)] bg-[var(--bg-secondary)] p-6 text-center",
+      o
+    ),
+    ...s,
+    children: [
+      e && /* @__PURE__ */ t("div", { className: "text-[var(--text-muted)]", children: e }),
+      /* @__PURE__ */ t("h3", { className: "m-0 text-lg font-semibold text-[var(--text-primary)]", children: r }),
+      a && /* @__PURE__ */ t("p", { className: "m-0 max-w-[30rem] text-sm text-[var(--text-secondary)]", children: a }),
+      n && /* @__PURE__ */ t("div", { className: "mt-1", children: n })
+    ]
+  }
+), Z = ({
+  poweredByText: e = "Powered by",
+  logoSrc: r,
+  logoAlt: a = "Logo",
   logoFallbackText: n,
   className: o = ""
 }) => {
-  const [s, i] = z(!0);
-  return /* @__PURE__ */ e(
+  const [s, d] = N(!0);
+  return /* @__PURE__ */ t(
     "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(
+      children: /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--spacing-md)]", children: [
+        e && /* @__PURE__ */ t("span", { className: "text-[0.95rem] font-normal text-[var(--text-secondary)]", children: e }),
+        (r || n) && /* @__PURE__ */ m("div", { className: "flex items-center", children: [
+          r && s && /* @__PURE__ */ t(
             "img",
             {
-              alt: r,
+              alt: a,
               className: "h-6 w-auto object-contain",
-              onError: (d) => {
-                i(!1);
+              onError: (v) => {
+                d(!1);
               },
-              src: a,
+              src: r,
               style: {
                 filter: "brightness(0)"
               }
             }
           ),
-          n && /* @__PURE__ */ e(
+          n && /* @__PURE__ */ t(
             "span",
             {
               className: "flex items-center text-base font-bold tracking-[0.1em] text-[var(--md-primary)]",
               style: {
-                display: a && s ? "none" : "flex",
+                display: r && s ? "none" : "flex",
                 fontFamily: '"Orbitron", sans-serif'
               },
               children: n
@@ -190,83 +374,83 @@ const W = ({
       ] })
     }
   );
-}, k = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", V = ({
-  logoSrc: t,
-  logoDarkSrc: a,
-  logoAlt: r = "Logo",
+}, $ = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", ee = ({
+  logoSrc: e,
+  logoDarkSrc: r,
+  logoAlt: a = "Logo",
   title: n,
   subtitle: o,
   theme: s,
-  onLogoClick: i,
-  rightContent: d,
-  className: h = ""
+  onLogoClick: d,
+  rightContent: v,
+  className: c = ""
 }) => {
-  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(() => {
+  const [i, l] = N(!1), [u, h] = N(
+    () => s ?? $()
+  ), b = u === "dark" && r ? r : e;
+  w(() => {
+    const x = () => l(window.scrollY > 10);
+    return window.addEventListener("scroll", x, { passive: !0 }), () => window.removeEventListener("scroll", x);
+  }, []), w(() => {
     if (s) {
-      m(s);
+      h(s);
       return;
     }
-    const u = () => m(k());
-    if (u(), typeof MutationObserver > "u")
+    const x = () => h($());
+    if (x(), typeof MutationObserver > "u")
       return;
-    const g = new MutationObserver(u);
-    return g.observe(document.documentElement, {
+    const p = new MutationObserver(x);
+    return p.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme"]
-    }), () => g.disconnect();
+    }), () => p.disconnect();
   }, [s]);
-  const p = () => i?.(), N = (u) => {
-    u.key === "Enter" && i?.();
+  const g = () => d == null ? void 0 : d(), y = (x) => {
+    x.key === "Enter" && (d == null || d());
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ m(
     "header",
     {
       className: [
         "fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]",
-        h
+        c
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ e("div", { className: "h-0.5 w-full bg-[var(--md-primary)]" }),
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ t("div", { className: "h-0.5 w-full bg-[var(--md-primary)]" }),
+        /* @__PURE__ */ m(
           "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)`
+              background: `color-mix(in srgb, var(--md-surface) ${i ? "14%" : "18%"}, transparent)`,
+              borderBottom: `1px solid color-mix(in srgb, var(--md-outline-variant) ${i ? "22%" : "30%"}, transparent)`
             },
             children: [
-              /* @__PURE__ */ v(
+              /* @__PURE__ */ m(
                 "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,
+                  onClick: d ? g : void 0,
+                  onKeyDown: d ? y : void 0,
+                  role: d ? "button" : void 0,
+                  tabIndex: d ? 0 : void 0,
                   children: [
-                    x && /* @__PURE__ */ v("div", { className: "flex h-16 w-16 shrink-0 items-center justify-center", children: [
-                      /* @__PURE__ */ e(
+                    b && /* @__PURE__ */ m("div", { className: "flex h-16 w-16 shrink-0 items-center justify-center", children: [
+                      /* @__PURE__ */ t(
                         "img",
                         {
-                          alt: r,
+                          alt: a,
                           className: "h-full w-full object-contain",
-                          onError: (u) => {
-                            u.target.style.display = "none";
-                            const g = u.target.nextElementSibling;
-                            g && (g.style.display = "block");
+                          onError: (x) => {
+                            x.target.style.display = "none";
+                            const p = x.target.nextElementSibling;
+                            p && (p.style.display = "block");
                           },
-                          src: x
+                          src: b
                         }
                       ),
-                      /* @__PURE__ */ v(
+                      /* @__PURE__ */ m(
                         "svg",
                         {
                           className: "hidden h-full w-full",
@@ -275,14 +459,14 @@ const W = ({
                           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" })
+                            /* @__PURE__ */ t("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                            /* @__PURE__ */ t("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(
+                    (n || o) && /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
+                      n && /* @__PURE__ */ t(
                         "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",
@@ -290,106 +474,172 @@ const W = ({
                           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 })
+                      o && /* @__PURE__ */ t("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 })
+              v && /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center gap-3 max-md:w-full max-md:flex-wrap max-md:justify-between", children: v })
             ]
           }
         )
       ]
     }
   );
-}, K = ({
-  label: t,
-  error: a,
-  helperText: r,
+}, re = ({
+  label: e,
+  error: r,
+  helperText: a,
   leftIcon: n,
   rightIcon: o,
   fullWidth: s = !1,
-  size: i = "md",
-  className: d = "",
-  id: h,
-  ...c
+  size: d = "md",
+  className: v = "",
+  id: c,
+  ...i
 }) => {
-  const l = h || `input-${Math.random().toString(36).substring(2, 9)}`, f = !!a, x = [
+  const l = c || `input-${Math.random().toString(36).substring(2, 9)}`, u = !!r, b = [
     "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)]" : "",
+    u ? "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" : "",
     {
       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
+    }[d],
+    v
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ v("div", { className: `flex flex-col gap-[var(--spacing-xs)] ${s ? "w-full" : ""}`, children: [
-    t && /* @__PURE__ */ e(
+  return /* @__PURE__ */ m("div", { className: `flex flex-col gap-[var(--spacing-xs)] ${s ? "w-full" : ""}`, children: [
+    e && /* @__PURE__ */ t(
       "label",
       {
         className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
         htmlFor: l,
-        children: t
+        children: e
       }
     ),
-    /* @__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(
+    /* @__PURE__ */ m("div", { className: "group relative flex w-full items-center", children: [
+      n && /* @__PURE__ */ t("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__ */ t(
         "input",
         {
-          "aria-describedby": a ? `${l}-error` : r ? `${l}-helper` : void 0,
-          "aria-invalid": f ? !0 : void 0,
-          className: x,
+          "aria-describedby": r ? `${l}-error` : a ? `${l}-helper` : void 0,
+          "aria-invalid": u ? !0 : void 0,
+          className: b,
           id: l,
-          ...c
+          ...i
         }
       ),
-      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 })
+      o && /* @__PURE__ */ t("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(
+    r && /* @__PURE__ */ t(
       "span",
       {
         className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-error)]",
         id: `${l}-error`,
         role: "alert",
-        children: a
+        children: r
       }
     ),
-    r && !a && /* @__PURE__ */ e(
+    a && !r && /* @__PURE__ */ t(
       "span",
       {
         className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
         id: `${l}-helper`,
-        children: r
+        children: a
       }
     )
   ] });
-}, R = ({
-  isOpen: t,
-  onClose: a,
-  title: r,
+}, ae = ({
+  size: e = "lg",
+  className: r,
+  ...a
+}) => {
+  const n = {
+    sm: "max-w-2xl",
+    md: "max-w-4xl",
+    lg: "max-w-6xl",
+    xl: "max-w-7xl",
+    full: "max-w-none"
+  }[e];
+  return /* @__PURE__ */ t("div", { className: f("mx-auto w-full px-4", n, r), ...a });
+}, te = ({
+  gap: e = "md",
+  className: r,
+  ...a
+}) => {
+  const n = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  }[e];
+  return /* @__PURE__ */ t("div", { className: f("flex flex-col", n, r), ...a });
+}, oe = ({
+  cols: e = 2,
+  gap: r = "md",
+  className: a,
+  ...n
+}) => {
+  const o = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4"
+  }[e], s = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  }[r];
+  return /* @__PURE__ */ t("div", { className: f("grid", o, s, a), ...n });
+}, ne = ({
+  isOpen: e,
+  onClose: r,
+  title: a,
   subtitle: n,
   children: o,
   size: s = "md",
-  showCloseButton: i = !0,
-  closeOnOverlayClick: d = !0,
-  className: h = ""
+  showCloseButton: d = !0,
+  closeOnOverlayClick: v = !0,
+  className: c = ""
 }) => {
-  if (b(() => (t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [t]), b(() => {
-    const m = (x) => {
-      x.key === "Escape" && t && a();
+  const i = z(null), l = z(null);
+  if (w(() => (e ? (l.current = document.activeElement, document.body.style.overflow = "hidden") : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "", l.current && l.current.focus();
+  }), [e]), w(() => {
+    const g = (x) => {
+      x.key === "Escape" && e && r();
+    }, y = (x) => {
+      if (x.key !== "Tab" || !i.current || !e)
+        return;
+      const p = i.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (p.length === 0) {
+        x.preventDefault();
+        return;
+      }
+      const k = p[0], C = p[p.length - 1], j = document.activeElement;
+      x.shiftKey && j === k ? (x.preventDefault(), C.focus()) : !x.shiftKey && j === C && (x.preventDefault(), k.focus());
+    };
+    return e && (document.addEventListener("keydown", g), document.addEventListener("keydown", y), requestAnimationFrame(() => {
+      var p;
+      const x = ((p = i.current) == null ? void 0 : p.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )) ?? i.current;
+      x == null || x.focus();
+    })), () => {
+      document.removeEventListener("keydown", g), document.removeEventListener("keydown", y);
     };
-    return t && document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
-  }, [t, a]), !t)
+  }, [e, r]), !e)
     return null;
-  const c = (m) => {
-    d && m.target === m.currentTarget && a();
-  }, f = [
+  const u = (g) => {
+    v && g.target === g.currentTarget && r();
+  }, b = [
     "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]",
@@ -398,37 +648,37 @@ const W = ({
       xl: "max-w-[56.25rem]",
       full: "max-h-[90vh] max-w-[90vw]"
     }[s],
-    h
+    c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ t(
     "div",
     {
-      "aria-labelledby": r ? "modal-title" : void 0,
+      "aria-labelledby": a ? "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: c,
+      onClick: u,
       role: "dialog",
-      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(
+      children: /* @__PURE__ */ m("div", { className: b, ref: i, tabIndex: -1, children: [
+        (a || n || d) && /* @__PURE__ */ m("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: [
+          (a || n) && /* @__PURE__ */ m("div", { className: "flex-1", children: [
+            a && /* @__PURE__ */ t(
               "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
+                children: a
               }
             ),
-            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 })
+            n && /* @__PURE__ */ t("p", { className: "m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]", children: n })
           ] }),
-          i && /* @__PURE__ */ e(
+          d && /* @__PURE__ */ t(
             "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: a,
+              onClick: r,
               type: "button",
-              children: /* @__PURE__ */ v(
+              children: /* @__PURE__ */ m(
                 "svg",
                 {
                   fill: "none",
@@ -437,99 +687,581 @@ const W = ({
                   strokeWidth: "2",
                   viewBox: "0 0 24 24",
                   children: [
-                    /* @__PURE__ */ e("line", { x1: "18", x2: "6", y1: "6", y2: "18" }),
-                    /* @__PURE__ */ e("line", { x1: "6", x2: "18", y1: "6", y2: "18" })
+                    /* @__PURE__ */ t("line", { x1: "18", x2: "6", y1: "6", y2: "18" }),
+                    /* @__PURE__ */ t("line", { x1: "6", x2: "18", y1: "6", y2: "18" })
                   ]
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]", children: o })
+        /* @__PURE__ */ t("div", { className: "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]", children: o })
       ] })
     }
   );
-}, D = ({
-  as: t = "p",
-  size: a = "md",
-  weight: r = "normal",
+}, se = ({ className: e, ...r }) => /* @__PURE__ */ t(
+  "aside",
+  {
+    className: f(
+      "h-full rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
+      e
+    ),
+    ...r
+  }
+), ie = ({ className: e, ...r }) => /* @__PURE__ */ t(
+  "header",
+  {
+    className: f(
+      "flex min-h-14 items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-4",
+      e
+    ),
+    ...r
+  }
+), le = ({
+  currentPage: e,
+  totalPages: r,
+  onPageChange: a
+}) => {
+  if (r <= 1)
+    return null;
+  const n = Array.from({ length: r }, (o, s) => s + 1);
+  return /* @__PURE__ */ m("nav", { "aria-label": "Paginação", className: "flex flex-wrap items-center gap-1", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        className: "rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50",
+        disabled: e === 1,
+        onClick: () => a(Math.max(e - 1, 1)),
+        type: "button",
+        children: "Anterior"
+      }
+    ),
+    n.map((o) => /* @__PURE__ */ t(
+      "button",
+      {
+        className: f(
+          "rounded-[var(--border-radius-sm)] border px-2.5 py-1 text-sm",
+          o === e ? "border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]" : "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+        ),
+        onClick: () => a(o),
+        type: "button",
+        children: o
+      },
+      o
+    )),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        className: "rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50",
+        disabled: e === r,
+        onClick: () => a(Math.min(e + 1, r)),
+        type: "button",
+        children: "Próxima"
+      }
+    )
+  ] });
+}, de = ({
+  as: e = "p",
+  size: r = "md",
+  weight: a = "normal",
   align: n = "left",
   muted: o = !1,
   italic: s = !1,
-  children: i,
-  className: d = "",
-  ...h
+  children: d,
+  className: v = "",
+  ...c
 }) => {
-  const c = t, l = {
+  const i = e, 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 = {
+  }, u = {
     light: "font-[var(--font-weight-light)]",
     normal: "font-[var(--font-weight-normal)]",
     medium: "font-[var(--font-weight-medium)]"
-  }, m = {
+  }, h = {
     left: "text-left",
     center: "text-center",
     right: "text-right",
     justify: "text-justify"
-  }, x = [
+  }, b = [
     "m-0 text-[var(--text-primary)] transition-[var(--transition-colors)]",
-    l[a],
-    f[r],
-    m[n],
+    l[r],
+    u[a],
+    h[n],
     s ? "italic" : "not-italic",
     o ? "text-[var(--text-muted)]" : "",
-    d
+    v
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e(c, { className: x, ...h, children: i });
-}, H = ({
-  as: t = "p",
-  size: a = "md",
-  weight: r = "normal",
+  return /* @__PURE__ */ t(i, { className: b, ...c, children: d });
+}, ce = ({
+  title: e,
+  subtitle: r,
+  actions: a,
+  className: n,
+  ...o
+}) => /* @__PURE__ */ t(
+  "header",
+  {
+    className: f(
+      "grid gap-3 rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-5 shadow-[var(--shadow-sm)]",
+      n
+    ),
+    ...o,
+    children: /* @__PURE__ */ m("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ m("div", { className: "grid gap-1", children: [
+        /* @__PURE__ */ t("h1", { className: "m-0 text-2xl font-bold text-[var(--text-primary)]", children: e }),
+        r && /* @__PURE__ */ t("p", { className: "m-0 text-sm text-[var(--text-secondary)]", children: r })
+      ] }),
+      a && /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: a })
+    ] })
+  }
+), me = ({
+  children: e,
+  content: r,
+  defaultOpen: a = !1
+}) => {
+  const [n, o] = N(a), s = z(null), d = z(null), v = z(null), c = B();
+  return w(() => {
+    const i = (l) => {
+      var u;
+      (u = s.current) != null && u.contains(l.target) || o(!1);
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, []), w(() => {
+    if (!n || !v.current)
+      return;
+    const i = v.current.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    i == null || i.focus();
+  }, [n]), w(() => {
+    const i = (l) => {
+      var u;
+      l.key === "Escape" && (o(!1), (u = d.current) == null || u.focus());
+    };
+    return n && document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [n]), /* @__PURE__ */ m("div", { className: "relative inline-flex", ref: s, children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        "aria-controls": n ? c : void 0,
+        "aria-expanded": n,
+        "aria-haspopup": "dialog",
+        className: "inline-flex",
+        onClick: () => o((i) => !i),
+        ref: d,
+        type: "button",
+        children: e
+      }
+    ),
+    n && /* @__PURE__ */ t(
+      "div",
+      {
+        className: f(
+          "absolute left-1/2 top-full z-30 mt-2 w-max -translate-x-1/2 rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-md)]"
+        ),
+        id: c,
+        ref: v,
+        role: "dialog",
+        tabIndex: -1,
+        children: r
+      }
+    )
+  ] });
+}, ve = ({
+  label: e,
+  helperText: r,
+  className: a,
+  id: n,
+  ...o
+}) => {
+  const s = n || `radio-${Math.random().toString(36).slice(2, 9)}`;
+  return /* @__PURE__ */ m("label", { className: f("inline-flex cursor-pointer items-start gap-2", a), htmlFor: s, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        className: "mt-0.5 h-4 w-4 border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--border-color-focus)]",
+        id: s,
+        type: "radio",
+        ...o
+      }
+    ),
+    /* @__PURE__ */ m("span", { className: "grid gap-0.5", children: [
+      e && /* @__PURE__ */ t("span", { className: "text-sm text-[var(--text-primary)]", children: e }),
+      r && /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-muted)]", children: r })
+    ] })
+  ] });
+}, ue = ({
+  title: e,
+  subtitle: r,
+  actions: a,
+  className: n,
+  ...o
+}) => /* @__PURE__ */ m("div", { className: f("flex items-start justify-between gap-4", n), ...o, children: [
+  /* @__PURE__ */ m("div", { className: "grid gap-1", children: [
+    /* @__PURE__ */ t("h2", { className: "m-0 text-xl font-semibold text-[var(--text-primary)]", children: e }),
+    r && /* @__PURE__ */ t("p", { className: "m-0 text-sm text-[var(--text-secondary)]", children: r })
+  ] }),
+  a && /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center gap-2", children: a })
+] }), fe = ({
+  label: e,
+  helperText: r,
+  error: a,
+  options: n,
+  size: o = "md",
+  className: s,
+  id: d,
+  ...v
+}) => {
+  const c = d || `select-${Math.random().toString(36).slice(2, 9)}`, i = {
+    sm: "min-h-8 px-3 py-1.5 text-sm",
+    md: "min-h-10 px-3.5 py-2 text-base",
+    lg: "min-h-12 px-4 py-3 text-lg"
+  }[o];
+  return /* @__PURE__ */ m("div", { className: "grid gap-1", children: [
+    e && /* @__PURE__ */ t(
+      "label",
+      {
+        className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+        htmlFor: c,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      "select",
+      {
+        className: f(
+          "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-on-surface)] outline-none transition focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)]",
+          a ? "border-[var(--md-error)]" : "",
+          i,
+          s
+        ),
+        id: c,
+        ...v,
+        children: n.map((l) => /* @__PURE__ */ t("option", { value: l.value, children: l.label }, l.value))
+      }
+    ),
+    a ? /* @__PURE__ */ t("span", { className: "text-xs text-[var(--md-error)]", children: a }) : r && /* @__PURE__ */ t("span", { className: "text-xs text-[var(--md-on-surface-variant)]", children: r })
+  ] });
+}, xe = ({
+  circle: e = !1,
+  width: r,
+  height: a,
+  className: n,
+  style: o,
+  ...s
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: f(
+      "animate-pulse bg-[var(--md-surface-container-high)]",
+      e ? "rounded-full" : "rounded-[var(--border-radius-sm)]",
+      n
+    ),
+    style: { width: r, height: a, ...o },
+    ...s
+  }
+), be = ({
+  as: e = "p",
+  size: r = "md",
+  weight: a = "normal",
   align: n = "left",
   muted: o = !1,
   italic: s = !1,
-  children: i,
-  className: d = "",
-  ...h
+  children: d,
+  className: v = "",
+  ...c
 }) => {
-  const c = t, l = {
+  const i = e, 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 = {
+  }, u = {
     normal: "font-[var(--font-weight-normal)]",
     medium: "font-[var(--font-weight-medium)]",
     semibold: "font-[var(--font-weight-semibold)]"
-  }, m = {
+  }, h = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
-  }, x = [
+  }, b = [
     "m-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]",
-    l[a],
-    f[r],
-    m[n],
+    l[r],
+    u[a],
+    h[n],
     s ? "italic" : "not-italic",
     o ? "text-[var(--text-muted)] opacity-80" : "",
-    d
+    v
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e(c, { className: x, ...h, children: i });
-}, O = ({
-  as: t = "h1",
-  size: a = "2xl",
-  weight: r = "bold",
+  return /* @__PURE__ */ t(i, { className: b, ...c, children: d });
+}, he = ({
+  checked: e = !1,
+  onCheckedChange: r,
+  label: a,
+  className: n,
+  ...o
+}) => /* @__PURE__ */ m("div", { className: f("inline-flex items-center gap-2", n), children: [
+  /* @__PURE__ */ t(
+    "button",
+    {
+      "aria-checked": e,
+      className: f(
+        "relative inline-flex h-6 w-11 items-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]",
+        e ? "border-[var(--md-primary)] bg-[var(--md-primary)]" : "border-[var(--md-outline)] bg-[var(--md-surface-container-high)]"
+      ),
+      onClick: () => r == null ? void 0 : r(!e),
+      role: "switch",
+      type: "button",
+      ...o,
+      children: /* @__PURE__ */ t(
+        "span",
+        {
+          className: f(
+            "inline-block h-5 w-5 rounded-full bg-[var(--md-surface)] shadow transition",
+            e ? "translate-x-5" : "translate-x-0.5"
+          )
+        }
+      )
+    }
+  ),
+  a && /* @__PURE__ */ t("span", { className: "text-sm text-[var(--text-primary)]", children: a })
+] }), pe = ({
+  className: e,
+  children: r,
+  onRemove: a,
+  ...n
+}) => /* @__PURE__ */ m(
+  "span",
+  {
+    className: f(
+      "inline-flex items-center gap-1 rounded-[var(--border-radius-sm)] border border-[var(--border-color)] bg-[var(--bg-secondary)] px-2.5 py-1 text-xs text-[var(--text-secondary)]",
+      e
+    ),
+    ...n,
+    children: [
+      r,
+      a && /* @__PURE__ */ t(
+        "button",
+        {
+          "aria-label": "Remover tag",
+          className: "inline-flex h-4 w-4 items-center justify-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+          onClick: a,
+          type: "button",
+          children: "×"
+        }
+      )
+    ]
+  }
+), ge = ({ items: e, defaultTabId: r }) => {
+  var v;
+  const [a, n] = N(r ?? ((v = e[0]) == null ? void 0 : v.id)), o = e.find((c) => c.id === a) ?? e[0], s = Math.max(
+    0,
+    e.findIndex((c) => c.id === (o == null ? void 0 : o.id))
+  ), d = (c) => {
+    const i = e[c];
+    if (!i)
+      return;
+    n(i.id);
+    const l = document.getElementById(`tab-${i.id}`);
+    l == null || l.focus();
+  };
+  return /* @__PURE__ */ m("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "aria-orientation": "horizontal",
+        className: "inline-flex flex-wrap gap-1 rounded-[var(--border-radius-md)] bg-[var(--bg-tertiary)] p-1",
+        role: "tablist",
+        children: e.map((c, i) => /* @__PURE__ */ t(
+          "button",
+          {
+            "aria-controls": `panel-${c.id}`,
+            "aria-selected": a === c.id,
+            className: f(
+              "rounded-[var(--border-radius-sm)] px-3 py-1.5 text-sm transition",
+              a === c.id ? "bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-xs)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+            ),
+            id: `tab-${c.id}`,
+            onClick: () => n(c.id),
+            onKeyDown: (l) => {
+              l.key === "ArrowRight" ? (l.preventDefault(), d((i + 1) % e.length)) : l.key === "ArrowLeft" ? (l.preventDefault(), d((i - 1 + e.length) % e.length)) : l.key === "Home" ? (l.preventDefault(), d(0)) : l.key === "End" && (l.preventDefault(), d(e.length - 1));
+            },
+            role: "tab",
+            tabIndex: i === s ? 0 : -1,
+            type: "button",
+            children: c.label
+          },
+          c.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "aria-labelledby": `tab-${(o == null ? void 0 : o.id) ?? ""}`,
+        className: "rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
+        id: `panel-${(o == null ? void 0 : o.id) ?? ""}`,
+        role: "tabpanel",
+        children: o == null ? void 0 : o.content
+      }
+    )
+  ] });
+}, ye = ({ className: e, children: r, ...a }) => /* @__PURE__ */ t("div", { className: "overflow-x-auto rounded-[var(--border-radius-md)] border border-[var(--border-color)]", children: /* @__PURE__ */ t(
+  "table",
+  {
+    className: f(
+      "w-full min-w-[36rem] border-collapse bg-[var(--bg-secondary)] text-left",
+      e
+    ),
+    ...a,
+    children: r
+  }
+) }), we = ({
+  label: e,
+  helperText: r,
+  error: a,
+  className: n,
+  id: o,
+  ...s
+}) => {
+  const d = o || `textarea-${Math.random().toString(36).slice(2, 9)}`;
+  return /* @__PURE__ */ m("div", { className: "grid gap-1", children: [
+    e && /* @__PURE__ */ t(
+      "label",
+      {
+        className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+        htmlFor: d,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      "textarea",
+      {
+        className: f(
+          "min-h-24 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)]",
+          a ? "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]" : "",
+          n
+        ),
+        id: d,
+        ...s
+      }
+    ),
+    a ? /* @__PURE__ */ t("span", { className: "text-xs text-[var(--md-error)]", children: a }) : r && /* @__PURE__ */ t("span", { className: "text-xs text-[var(--md-on-surface-variant)]", children: r })
+  ] });
+}, P = ({
+  tone: e = "info",
+  title: r,
+  description: a,
+  onDismiss: n,
+  className: o,
+  ...s
+}) => {
+  const d = {
+    info: "border-[var(--info-color)]/40",
+    success: "border-[var(--success-color)]/40",
+    warning: "border-[var(--warning-color)]/40",
+    error: "border-[var(--md-error)]/40"
+  }[e], v = e === "error" || e === "warning" ? "assertive" : "polite", c = e === "error" || e === "warning" ? "alert" : "status";
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: f(
+        "w-[22rem] rounded-[var(--border-radius-md)] border bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-lg)]",
+        d,
+        o
+      ),
+      "aria-atomic": "true",
+      "aria-live": v,
+      onKeyDown: (i) => {
+        i.key === "Escape" && (n == null || n());
+      },
+      role: c,
+      tabIndex: 0,
+      ...s,
+      children: [
+        /* @__PURE__ */ m("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ t("p", { className: "m-0 text-sm font-semibold text-[var(--text-primary)]", children: r }),
+          n && /* @__PURE__ */ t(
+            "button",
+            {
+              "aria-label": "Fechar notificação",
+              className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--border-radius-sm)] 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-offset-2 focus-visible:outline-[var(--border-color-focus)]",
+              onClick: n,
+              type: "button",
+              children: /* @__PURE__ */ t("span", { "aria-hidden": !0, children: "×" })
+            }
+          )
+        ] }),
+        a && /* @__PURE__ */ t("p", { className: "mt-1 text-sm text-[var(--text-secondary)]", children: a })
+      ]
+    }
+  );
+}, T = A(void 0), Ne = ({
+  children: e,
+  durationMs: r = 4e3
+}) => {
+  const [a, n] = N([]), o = z(/* @__PURE__ */ new Map()), s = S((c) => {
+    const i = o.current.get(c);
+    i && (window.clearTimeout(i), o.current.delete(c)), n((l) => l.filter((u) => u.id !== c));
+  }, []), d = S(
+    (c) => {
+      const i = c.id ?? `toast-${Math.random().toString(36).slice(2, 9)}`;
+      n((u) => [...u, { ...c, id: i }]);
+      const l = window.setTimeout(() => s(i), r);
+      o.current.set(i, l);
+    },
+    [s, r]
+  );
+  w(() => () => {
+    o.current.forEach((c) => window.clearTimeout(c)), o.current.clear();
+  }, []);
+  const v = R(
+    () => ({ toasts: a, pushToast: d, dismissToast: s }),
+    [a, d, s]
+  );
+  return /* @__PURE__ */ m(T.Provider, { value: v, children: [
+    e,
+    /* @__PURE__ */ t(q, {})
+  ] });
+}, ze = () => {
+  const e = _(T);
+  if (!e)
+    throw new Error("useToast must be used inside ToastProvider");
+  return e;
+}, q = () => {
+  const e = _(T);
+  return !e || e.toasts.length === 0 ? null : /* @__PURE__ */ t(
+    "div",
+    {
+      "aria-label": "Notificações",
+      className: "pointer-events-none fixed bottom-4 right-4 z-[1200] grid gap-2",
+      role: "region",
+      children: e.toasts.map((r) => /* @__PURE__ */ t(
+        P,
+        {
+          ...r,
+          className: "pointer-events-auto",
+          onDismiss: () => e.dismissToast(r.id)
+        },
+        r.id
+      ))
+    }
+  );
+}, ke = ({
+  as: e = "h1",
+  size: r = "2xl",
+  weight: a = "bold",
   align: n = "left",
   gradient: o = !1,
   italic: s = !1,
-  children: i,
-  className: d = "",
-  ...h
+  children: d,
+  className: v = "",
+  ...c
 }) => {
-  const c = t, l = {
+  const i = e, l = {
     xs: "text-[var(--font-size-sm)]",
     sm: "text-[var(--font-size-base)]",
     md: "text-[var(--font-size-lg)]",
@@ -538,56 +1270,117 @@ const W = ({
     "2xl": "text-[var(--font-size-3xl)]",
     "3xl": "text-[var(--font-size-4xl)]",
     "4xl": "text-[3rem]"
-  }, f = {
+  }, u = {
     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 = {
+  }, h = {
     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 = [
+  }, b = o ? "bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent" : "", g = [
     "m-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]",
-    l[a],
-    f[r],
-    m[n],
+    l[r],
+    u[a],
+    h[n],
     s ? "italic" : "not-italic",
-    x,
-    d
+    b,
+    v
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e(c, { className: p, ...h, children: i });
-}, j = P(void 0), Y = () => {
-  const t = $(j);
-  if (!t)
+  return /* @__PURE__ */ t(i, { className: g, ...c, children: d });
+}, Ce = ({
+  children: e,
+  content: r,
+  side: a = "top"
+}) => {
+  const [n, o] = N(!1), s = B(), d = a === "top" ? "bottom-full mb-2 left-1/2 -translate-x-1/2" : "top-full mt-2 left-1/2 -translate-x-1/2", v = {
+    "aria-describedby": s,
+    onBlur: () => o(!1),
+    onFocus: () => o(!0),
+    onKeyDown: (i) => {
+      i.key === "Escape" && o(!1);
+    },
+    onMouseEnter: () => o(!0),
+    onMouseLeave: () => o(!1)
+  }, c = K(e) ? /* @__PURE__ */ t("span", { className: "inline-flex", ...v, children: e }) : /* @__PURE__ */ t("span", { className: "inline-flex", tabIndex: 0, ...v, children: e });
+  return /* @__PURE__ */ m("span", { className: "relative inline-flex", children: [
+    c,
+    /* @__PURE__ */ t(
+      "span",
+      {
+        "aria-hidden": !n,
+        className: f(
+          "pointer-events-none absolute z-20 whitespace-nowrap rounded bg-[var(--brand-cinza-escuro)] px-2 py-1 text-xs text-white shadow-[var(--shadow-sm)] transition",
+          n ? "opacity-100" : "opacity-0",
+          d
+        ),
+        id: s,
+        role: "tooltip",
+        children: r
+      }
+    )
+  ] });
+}, D = A(void 0), je = () => {
+  const e = _(D);
+  if (!e)
     throw new Error("useTheme must be used within a ThemeProvider");
-  return t;
-}, q = ({
-  children: t,
-  defaultTheme: a = "light"
+  return e;
+}, Me = ({
+  children: e,
+  defaultTheme: r = "light"
 }) => {
-  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 [a, n] = N(() => typeof window > "u" ? r : window.localStorage.getItem("theme") || r);
+  w(() => {
+    typeof window > "u" || (window.localStorage.setItem("theme", a), document.documentElement.setAttribute("data-theme", a));
+  }, [a]);
   const o = () => {
     n((s) => s === "dark" ? "light" : "dark");
   };
-  return /* @__PURE__ */ e(j.Provider, { value: { theme: r, toggleTheme: o }, children: t });
+  return /* @__PURE__ */ t(D.Provider, { value: { theme: a, toggleTheme: o }, children: e });
 };
 export {
+  V as Accordion,
+  G as Alert,
+  U as Badge,
   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
+  Y as Card,
+  J as Checkbox,
+  L as Chip,
+  ae as Container,
+  Q as Divider,
+  X as EmptyState,
+  Z as Footer,
+  oe as Grid,
+  ee as Header,
+  re as Input,
+  ne as Modal,
+  ce as PageHeader,
+  le as Pagination,
+  de as Paragraph,
+  me as Popover,
+  ve as Radio,
+  ue as SectionHeader,
+  fe as Select,
+  se as Sidebar,
+  xe as Skeleton,
+  te as Stack,
+  be as Subtitle,
+  he as Switch,
+  ye as Table,
+  ge as Tabs,
+  pe as Tag,
+  we as Textarea,
+  Me as ThemeProvider,
+  ke as Title,
+  P as Toast,
+  Ne as ToastProvider,
+  q as ToastViewport,
+  Ce as Tooltip,
+  ie as Topbar,
+  je as useTheme,
+  ze as useToast
 };
 //# sourceMappingURL=oficios-ui.js.map