@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Toast/Toast.js

@@ -1,110 +1,164 @@
-import { jsxs as v, jsx as a } from "react/jsx-runtime";
-import { useState as x, useRef as p, useCallback as b, useEffect as w, useMemo as g, useContext as h, createContext as T } from "react";
-import { cn as y } from "../../utils/cn.js";
-const N = ({
-  tone: e = "info",
-  title: o,
-  description: c,
-  onDismiss: s,
-  className: n,
-  ...i
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useState as E, useRef as M, useCallback as k, useEffect as z, useMemo as P, useContext as N, createContext as j } from "react";
+import { XCircle as O, AlertTriangle as R, CheckCircle2 as F, Info as S, X as V } from "lucide-react";
+import { cn as b } from "../../utils/cn.js";
+import { focusRing as T, buttonReset as w } from "../../utils/styles.js";
+const X = {
+  info: { bar: "bg-sbk-info", icon: "text-sbk-info-fg", Icon: S },
+  success: { bar: "bg-sbk-success", icon: "text-sbk-success-fg", Icon: F },
+  warning: { bar: "bg-sbk-warning", icon: "text-sbk-warning-fg", Icon: R },
+  error: { bar: "bg-sbk-error", icon: "text-sbk-error-fg", Icon: O }
+}, C = ({
+  tone: s = "info",
+  variant: a = "default",
+  title: c,
+  description: r,
+  action: t,
+  onDismiss: i,
+  durationMs: l,
+  className: u,
+  ...d
 }) => {
-  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], l = e === "error" || e === "warning" ? "assertive" : "polite", r = e === "error" || e === "warning" ? "alert" : "status";
-  return /* @__PURE__ */ v(
+  const { bar: f, icon: g, Icon: h } = X[s], m = s === "error" || s === "warning";
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: y(
-        "w-[22rem] rounded-[var(--border-radius-md)] border bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-lg)]",
-        d,
-        n
-      ),
       "aria-atomic": "true",
-      "aria-live": l,
-      onKeyDown: (t) => {
-        t.key === "Escape" && (s == null || s());
-      },
-      role: r,
+      "aria-live": m ? "assertive" : "polite",
+      className: b(
+        "relative flex w-[22rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid max-w-[calc(100vw-2rem)] items-start gap-3 overflow-hidden rounded-sbk-sm py-3 pl-4 pr-3 text-sbk-fg animate-sbk-scale-in motion-reduce:animate-none",
+        a === "glass" ? "sbk-glass sbk-glass-strong" : "border border-sbk-line bg-sbk-surface shadow-sbk-md",
+        u
+      ),
+      onKeyDown: (e) => e.key === "Escape" && (i == null ? void 0 : i()),
+      role: m ? "alert" : "status",
       tabIndex: 0,
-      ...i,
+      ...d,
       children: [
-        /* @__PURE__ */ v("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ a("p", { className: "m-0 text-sm font-semibold text-[var(--text-primary)]", children: o }),
-          s && /* @__PURE__ */ a(
+        /* @__PURE__ */ o("span", { "aria-hidden": "true", className: b("absolute inset-y-0 left-0 w-1", f) }),
+        /* @__PURE__ */ o(h, { "aria-hidden": "true", className: b("mt-0.5 size-5 shrink-0", g), strokeWidth: 1.75 }),
+        /* @__PURE__ */ x("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [
+          /* @__PURE__ */ o("p", { className: "m-0 text-sm font-semibold text-sbk-fg-heading", children: c }),
+          r && /* @__PURE__ */ o("p", { className: "m-0 text-sm font-light text-sbk-fg-muted", children: r }),
+          t && /* @__PURE__ */ o(
             "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: s,
+              className: b(
+                w,
+                "mt-1 w-fit cursor-pointer text-sm font-semibold text-sbk-primary underline-offset-4 hover:underline",
+                T
+              ),
+              onClick: t.onClick,
               type: "button",
-              children: /* @__PURE__ */ a("span", { "aria-hidden": !0, children: "×" })
+              children: t.label
             }
           )
         ] }),
-        c && /* @__PURE__ */ a("p", { className: "mt-1 text-sm text-[var(--text-secondary)]", children: c })
+        i && /* @__PURE__ */ o(
+          "button",
+          {
+            "aria-label": "Fechar notificação",
+            className: b(
+              w,
+              "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sbk-xs text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+              T
+            ),
+            onClick: i,
+            type: "button",
+            children: /* @__PURE__ */ o(V, { "aria-hidden": "true", className: "size-4" })
+          }
+        )
       ]
     }
   );
-}, f = T(void 0), I = ({ children: e, durationMs: o = 4e3 }) => {
-  const [c, s] = x([]), n = p(/* @__PURE__ */ new Map()), i = b((r) => {
-    const t = n.current.get(r);
-    t && (window.clearTimeout(t), n.current.delete(r)), s((u) => u.filter((m) => m.id !== r));
-  }, []), d = b(
-    (r) => {
-      const t = r.id ?? `toast-${Math.random().toString(36).slice(2, 9)}`;
-      s((m) => [...m, { ...r, id: t }]);
-      const u = window.setTimeout(() => i(t), o);
-      n.current.set(t, u);
+};
+C.displayName = "Toast";
+const v = j(void 0);
+let A = 0;
+const q = ({
+  children: s,
+  durationMs: a = 5e3,
+  max: c = 4,
+  position: r = "bottom-right"
+}) => {
+  const [t, i] = E([]), l = M(/* @__PURE__ */ new Map()), u = k((e) => {
+    clearTimeout(l.current.get(e)), l.current.delete(e), i((n) => n.filter((p) => p.id !== e));
+  }, []), d = k(
+    (e, n) => {
+      n > 0 && l.current.set(
+        e,
+        setTimeout(() => u(e), n)
+      );
     },
-    [i, o]
+    [u]
+  ), f = k(
+    (e) => {
+      const n = e.id ?? `sbk-toast-${++A}`;
+      return i((p) => [...p.filter((I) => I.id !== n), { ...e, id: n }].slice(-c)), d(n, e.durationMs ?? a), n;
+    },
+    [a, c, d]
   );
-  w(() => {
-    const r = n.current;
+  z(() => {
+    const e = l.current;
     return () => {
-      r.forEach((t) => window.clearTimeout(t)), r.clear();
+      e.forEach(clearTimeout), e.clear();
     };
   }, []);
-  const l = g(
-    () => ({ toasts: c, pushToast: d, dismissToast: i }),
-    [c, d, i]
+  const g = () => {
+    l.current.forEach(clearTimeout), l.current.clear();
+  }, h = () => t.forEach((e) => d(e.id, e.durationMs ?? a)), m = P(
+    () => ({ toasts: t, pushToast: f, dismissToast: u }),
+    [t, f, u]
   );
-  return /* @__PURE__ */ v(f.Provider, { value: l, children: [
-    e,
-    /* @__PURE__ */ a(C, {})
+  return /* @__PURE__ */ x(v.Provider, { value: m, children: [
+    s,
+    /* @__PURE__ */ o(y, { onPause: g, onResume: h, position: r })
   ] });
-}, M = () => {
-  const e = h(f);
-  if (!e)
-    throw new Error("useToast must be used inside ToastProvider");
-  return e;
-}, C = () => {
-  const e = h(f);
-  return !e || e.toasts.length === 0 ? null : /* @__PURE__ */ a(
-    "div",
+}, G = () => {
+  const s = N(v);
+  if (!s) throw new Error("useToast deve ser usado dentro de ToastProvider");
+  return s;
+}, B = {
+  "top-right": "top-4 right-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+  "bottom-left": "bottom-4 left-4"
+}, y = ({
+  position: s = "bottom-right",
+  onPause: a,
+  onResume: c
+}) => {
+  const r = N(v);
+  return !r || r.toasts.length === 0 ? null : /* @__PURE__ */ o(
+    "section",
     {
       "aria-label": "Notificações",
-      className: "pointer-events-none fixed bottom-4 right-4 z-[1200] grid gap-2",
-      role: "region",
-      children: e.toasts.map((o) => /* @__PURE__ */ a(
-        N,
+      className: b(
+        "pointer-events-none fixed z-[var(--sbk-z-toast)] grid gap-2",
+        B[s]
+      ),
+      onBlur: c,
+      onFocus: a,
+      onMouseEnter: a,
+      onMouseLeave: c,
+      children: r.toasts.map((t) => /* @__PURE__ */ o(
+        C,
         {
-          ...o,
+          ...t,
           className: "pointer-events-auto",
-          onDismiss: () => e.dismissToast(o.id)
+          onDismiss: () => r.dismissToast(t.id)
         },
-        o.id
+        t.id
       ))
     }
   );
 };
+y.displayName = "ToastViewport";
 export {
-  N as Toast,
-  I as ToastProvider,
-  C as ToastViewport,
-  M as useToast
+  C as Toast,
+  q as ToastProvider,
+  y as ToastViewport,
+  G as useToast
 };
 //# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  id?: string;\n  description?: React.ReactNode;\n  onDismiss?: () => void;\n  title: React.ReactNode;\n  tone?: 'info' | 'success' | 'warning' | 'error';\n}\n\nexport const Toast: React.FC<ToastProps> = ({\n  tone = 'info',\n  title,\n  description,\n  onDismiss,\n  className,\n  ...props\n}) => {\n  const toneClass = {\n    info: 'border-[var(--info-color)]/40',\n    success: 'border-[var(--success-color)]/40',\n    warning: 'border-[var(--warning-color)]/40',\n    error: 'border-[var(--md-error)]/40',\n  }[tone];\n  const liveMode = tone === 'error' || tone === 'warning' ? 'assertive' : 'polite';\n  const role = tone === 'error' || tone === 'warning' ? 'alert' : 'status';\n\n  return (\n    <div\n      className={cn(\n        'w-[22rem] rounded-[var(--border-radius-md)] border bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-lg)]',\n        toneClass,\n        className,\n      )}\n      aria-atomic=\"true\"\n      aria-live={liveMode}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          onDismiss?.();\n        }\n      }}\n      role={role}\n      tabIndex={0}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <p className=\"m-0 text-sm font-semibold text-[var(--text-primary)]\">{title}</p>\n        {onDismiss && (\n          <button\n            aria-label=\"Fechar notificação\"\n            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)]\"\n            onClick={onDismiss}\n            type=\"button\"\n          >\n            <span aria-hidden>×</span>\n          </button>\n        )}\n      </div>\n      {description && <p className=\"mt-1 text-sm text-[var(--text-secondary)]\">{description}</p>}\n    </div>\n  );\n};\n\ninterface ToastContextValue {\n  dismissToast: (id: string) => void;\n  pushToast: (toast: Omit<ToastProps, 'id'> & { id?: string }) => void;\n  toasts: Array<ToastProps & { id: string }>;\n}\n\nconst ToastContext = createContext<ToastContextValue | undefined>(undefined);\n\nexport interface ToastProviderProps {\n  children: React.ReactNode;\n  durationMs?: number;\n}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children, durationMs = 4000 }) => {\n  const [toasts, setToasts] = useState<Array<ToastProps & { id: string }>>([]);\n  const timeoutIdsRef = useRef<Map<string, number>>(new Map());\n\n  const dismissToast = useCallback((id: string) => {\n    const timeoutId = timeoutIdsRef.current.get(id);\n    if (timeoutId) {\n      window.clearTimeout(timeoutId);\n      timeoutIdsRef.current.delete(id);\n    }\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const pushToast = useCallback(\n    (toast: Omit<ToastProps, 'id'> & { id?: string }) => {\n      const id = toast.id ?? `toast-${Math.random().toString(36).slice(2, 9)}`;\n      setToasts((prev) => [...prev, { ...toast, id }]);\n      const timeoutId = window.setTimeout(() => dismissToast(id), durationMs);\n      timeoutIdsRef.current.set(id, timeoutId);\n    },\n    [dismissToast, durationMs],\n  );\n\n  useEffect(() => {\n    const ids = timeoutIdsRef.current;\n    return () => {\n      ids.forEach((timeoutId) => window.clearTimeout(timeoutId));\n      ids.clear();\n    };\n  }, []);\n\n  const value = useMemo(\n    () => ({ toasts, pushToast, dismissToast }),\n    [toasts, pushToast, dismissToast],\n  );\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <ToastViewport />\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = (): ToastContextValue => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used inside ToastProvider');\n  }\n  return context;\n};\n\nexport const ToastViewport: React.FC = () => {\n  const context = useContext(ToastContext);\n  if (!context || context.toasts.length === 0) {\n    return null;\n  }\n  return (\n    <div\n      aria-label=\"Notificações\"\n      className=\"pointer-events-none fixed bottom-4 right-4 z-[1200] grid gap-2\"\n      role=\"region\"\n    >\n      {context.toasts.map((toast) => (\n        <Toast\n          key={toast.id}\n          {...toast}\n          className=\"pointer-events-auto\"\n          onDismiss={() => context.dismissToast(toast.id)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["Toast","tone","title","description","onDismiss","className","props","toneClass","liveMode","role","jsxs","cn","event","jsx","ToastContext","createContext","ToastProvider","children","durationMs","toasts","setToasts","useState","timeoutIdsRef","useRef","dismissToast","useCallback","id","timeoutId","prev","toast","pushToast","useEffect","ids","value","useMemo","ToastViewport","useToast","context","useContext"],"mappings":";;;AAoBO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAY;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EAAA,EACPN,CAAI,GACAO,IAAWP,MAAS,WAAWA,MAAS,YAAY,cAAc,UAClEQ,IAAOR,MAAS,WAAWA,MAAS,YAAY,UAAU;AAEhE,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,QACAF;AAAA,MAAA;AAAA,MAEF,eAAY;AAAA,MACZ,aAAWG;AAAA,MACX,WAAW,CAACI,MAAU;AACpB,QAAIA,EAAM,QAAQ,aAChBR,KAAA,QAAAA;AAAA,MAEJ;AAAA,MACA,MAAAK;AAAA,MACA,UAAU;AAAA,MACT,GAAGH;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,UAAA,gBAAAG,EAAC,KAAA,EAAE,WAAU,wDAAwD,UAAAX,GAAM;AAAA,UAC1EE,KACC,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cACV,SAAST;AAAA,cACT,MAAK;AAAA,cAEL,UAAA,gBAAAS,EAAC,QAAA,EAAK,eAAW,IAAC,UAAA,IAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACrB,GAEJ;AAAA,QACCV,KAAe,gBAAAU,EAAC,KAAA,EAAE,WAAU,6CAA6C,UAAAV,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5F,GAQMW,IAAeC,EAA6C,MAAS,GAO9DC,IAA8C,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,UAAW;AAC9F,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAA6C,CAAA,CAAE,GACrEC,IAAgBC,EAA4B,oBAAI,KAAK,GAErDC,IAAeC,EAAY,CAACC,MAAe;AAC/C,UAAMC,IAAYL,EAAc,QAAQ,IAAII,CAAE;AAC9C,IAAIC,MACF,OAAO,aAAaA,CAAS,GAC7BL,EAAc,QAAQ,OAAOI,CAAE,IAEjCN,EAAU,CAACQ,MAASA,EAAK,OAAO,CAACC,MAAUA,EAAM,OAAOH,CAAE,CAAC;AAAA,EAC7D,GAAG,CAAA,CAAE,GAECI,IAAYL;AAAA,IAChB,CAACI,MAAoD;AACnD,YAAMH,IAAKG,EAAM,MAAM,SAAS,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AACtE,MAAAT,EAAU,CAACQ,MAAS,CAAC,GAAGA,GAAM,EAAE,GAAGC,GAAO,IAAAH,EAAA,CAAI,CAAC;AAC/C,YAAMC,IAAY,OAAO,WAAW,MAAMH,EAAaE,CAAE,GAAGR,CAAU;AACtE,MAAAI,EAAc,QAAQ,IAAII,GAAIC,CAAS;AAAA,IACzC;AAAA,IACA,CAACH,GAAcN,CAAU;AAAA,EAAA;AAG3B,EAAAa,EAAU,MAAM;AACd,UAAMC,IAAMV,EAAc;AAC1B,WAAO,MAAM;AACX,MAAAU,EAAI,QAAQ,CAACL,MAAc,OAAO,aAAaA,CAAS,CAAC,GACzDK,EAAI,MAAA;AAAA,IACN;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAMC,IAAQC;AAAA,IACZ,OAAO,EAAE,QAAAf,GAAQ,WAAAW,GAAW,cAAAN;IAC5B,CAACL,GAAQW,GAAWN,CAAY;AAAA,EAAA;AAGlC,SACE,gBAAAd,EAACI,EAAa,UAAb,EAAsB,OAAAmB,GACpB,UAAA;AAAA,IAAAhB;AAAA,sBACAkB,GAAA,CAAA,CAAc;AAAA,EAAA,GACjB;AAEJ,GAEaC,IAAW,MAAyB;AAC/C,QAAMC,IAAUC,EAAWxB,CAAY;AACvC,MAAI,CAACuB;AACH,UAAM,IAAI,MAAM,4CAA4C;AAE9D,SAAOA;AACT,GAEaF,IAA0B,MAAM;AAC3C,QAAME,IAAUC,EAAWxB,CAAY;AACvC,SAAI,CAACuB,KAAWA,EAAQ,OAAO,WAAW,IACjC,OAGP,gBAAAxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAU;AAAA,MACV,MAAK;AAAA,MAEJ,UAAAwB,EAAQ,OAAO,IAAI,CAACR,MACnB,gBAAAhB;AAAA,QAACb;AAAA,QAAA;AAAA,UAEE,GAAG6B;AAAA,UACJ,WAAU;AAAA,UACV,WAAW,MAAMQ,EAAQ,aAAaR,EAAM,EAAE;AAAA,QAAA;AAAA,QAHzCA,EAAM;AAAA,MAAA,CAKd;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AlertTriangle, CheckCircle2, Info, X, XCircle } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing } from '../../utils/styles';\n\nexport type ToastTone = 'info' | 'success' | 'warning' | 'error';\n\nexport interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Ação opcional (ex.: \"Desfazer\"). */\n  action?: { label: string; onClick: () => void };\n  description?: React.ReactNode;\n  /** Tempo até fechar (ms). 0 mantém aberto. Sobrescreve o padrão do provider. */\n  durationMs?: number;\n  id?: string;\n  onDismiss?: () => void;\n  title: React.ReactNode;\n  tone?: ToastTone;\n  variant?: 'default' | 'glass';\n}\n\nconst TONE: Record<ToastTone, { bar: string; icon: string; Icon: typeof Info }> = {\n  info: { bar: 'bg-sbk-info', icon: 'text-sbk-info-fg', Icon: Info },\n  success: { bar: 'bg-sbk-success', icon: 'text-sbk-success-fg', Icon: CheckCircle2 },\n  warning: { bar: 'bg-sbk-warning', icon: 'text-sbk-warning-fg', Icon: AlertTriangle },\n  error: { bar: 'bg-sbk-error', icon: 'text-sbk-error-fg', Icon: XCircle },\n};\n\nexport const Toast = ({\n  tone = 'info',\n  variant = 'default',\n  title,\n  description,\n  action,\n  onDismiss,\n  durationMs: _durationMs,\n  className,\n  ...props\n}: ToastProps) => {\n  const { bar, icon, Icon } = TONE[tone];\n  const urgent = tone === 'error' || tone === 'warning';\n\n  return (\n    <div\n      aria-atomic=\"true\"\n      aria-live={urgent ? 'assertive' : 'polite'}\n      className={cn(\n        'relative flex w-[22rem] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid max-w-[calc(100vw-2rem)] items-start gap-3 overflow-hidden rounded-sbk-sm py-3 pl-4 pr-3 text-sbk-fg animate-sbk-scale-in motion-reduce:animate-none',\n        variant === 'glass'\n          ? 'sbk-glass sbk-glass-strong'\n          : 'border border-sbk-line bg-sbk-surface shadow-sbk-md',\n        className,\n      )}\n      onKeyDown={(e) => e.key === 'Escape' && onDismiss?.()}\n      role={urgent ? 'alert' : 'status'}\n      tabIndex={0}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className={cn('absolute inset-y-0 left-0 w-1', bar)} />\n      <Icon aria-hidden=\"true\" className={cn('mt-0.5 size-5 shrink-0', icon)} strokeWidth={1.75} />\n      <div className=\"grid min-w-0 flex-1 gap-0.5\">\n        <p className=\"m-0 text-sm font-semibold text-sbk-fg-heading\">{title}</p>\n        {description && <p className=\"m-0 text-sm font-light text-sbk-fg-muted\">{description}</p>}\n        {action && (\n          <button\n            className={cn(\n              buttonReset,\n              'mt-1 w-fit cursor-pointer text-sm font-semibold text-sbk-primary underline-offset-4 hover:underline',\n              focusRing,\n            )}\n            onClick={action.onClick}\n            type=\"button\"\n          >\n            {action.label}\n          </button>\n        )}\n      </div>\n      {onDismiss && (\n        <button\n          aria-label=\"Fechar notificação\"\n          className={cn(\n            buttonReset,\n            'inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sbk-xs text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\n            focusRing,\n          )}\n          onClick={onDismiss}\n          type=\"button\"\n        >\n          <X aria-hidden=\"true\" className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n};\nToast.displayName = 'Toast';\n\ntype ToastInput = Omit<ToastProps, 'id'> & { id?: string };\ntype ToastItem = ToastProps & { id: string };\n\ninterface ToastContextValue {\n  dismissToast: (id: string) => void;\n  /** Adiciona um toast e retorna o id. */\n  pushToast: (toast: ToastInput) => string;\n  toasts: ToastItem[];\n}\n\nconst ToastContext = createContext<ToastContextValue | undefined>(undefined);\n\nexport type ToastPosition =\n  | 'top-right'\n  | 'top-center'\n  | 'bottom-right'\n  | 'bottom-center'\n  | 'bottom-left';\n\nexport interface ToastProviderProps {\n  children: React.ReactNode;\n  /** Duração padrão (ms). Padrão: 5000. */\n  durationMs?: number;\n  /** Quantidade máxima visível; os mais antigos saem primeiro. Padrão: 4. */\n  max?: number;\n  position?: ToastPosition;\n}\n\nlet toastCounter = 0;\n\nexport const ToastProvider = ({\n  children,\n  durationMs = 5000,\n  max = 4,\n  position = 'bottom-right',\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());\n\n  const dismissToast = useCallback((id: string) => {\n    clearTimeout(timers.current.get(id));\n    timers.current.delete(id);\n    setToasts((prev) => prev.filter((t) => t.id !== id));\n  }, []);\n\n  const schedule = useCallback(\n    (id: string, ms: number) => {\n      if (ms > 0)\n        timers.current.set(\n          id,\n          setTimeout(() => dismissToast(id), ms),\n        );\n    },\n    [dismissToast],\n  );\n\n  const pushToast = useCallback(\n    (toast: ToastInput) => {\n      const id = toast.id ?? `sbk-toast-${++toastCounter}`;\n      setToasts((prev) => [...prev.filter((t) => t.id !== id), { ...toast, id }].slice(-max));\n      schedule(id, toast.durationMs ?? durationMs);\n      return id;\n    },\n    [durationMs, max, schedule],\n  );\n\n  useEffect(() => {\n    const map = timers.current;\n    return () => {\n      map.forEach(clearTimeout);\n      map.clear();\n    };\n  }, []);\n\n  /** Pausa os timers enquanto o usuário interage (WCAG 2.2.1). */\n  const pause = () => {\n    timers.current.forEach(clearTimeout);\n    timers.current.clear();\n  };\n  const resume = () => toasts.forEach((t) => schedule(t.id, t.durationMs ?? durationMs));\n\n  const value = useMemo(\n    () => ({ toasts, pushToast, dismissToast }),\n    [toasts, pushToast, dismissToast],\n  );\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <ToastViewport onPause={pause} onResume={resume} position={position} />\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = (): ToastContextValue => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('useToast deve ser usado dentro de ToastProvider');\n  return context;\n};\n\nconst POSITION: Record<ToastPosition, string> = {\n  'top-right': 'top-4 right-4',\n  'top-center': 'top-4 left-1/2 -translate-x-1/2',\n  'bottom-right': 'bottom-4 right-4',\n  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n  'bottom-left': 'bottom-4 left-4',\n};\n\nexport interface ToastViewportProps {\n  onPause?: () => void;\n  onResume?: () => void;\n  position?: ToastPosition;\n}\n\nexport const ToastViewport = ({\n  position = 'bottom-right',\n  onPause,\n  onResume,\n}: ToastViewportProps) => {\n  const context = useContext(ToastContext);\n  if (!context || context.toasts.length === 0) return null;\n  return (\n    <section\n      aria-label=\"Notificações\"\n      className={cn(\n        'pointer-events-none fixed z-[var(--sbk-z-toast)] grid gap-2',\n        POSITION[position],\n      )}\n      onBlur={onResume}\n      onFocus={onPause}\n      onMouseEnter={onPause}\n      onMouseLeave={onResume}\n    >\n      {context.toasts.map((toast) => (\n        <Toast\n          key={toast.id}\n          {...toast}\n          className=\"pointer-events-auto\"\n          onDismiss={() => context.dismissToast(toast.id)}\n        />\n      ))}\n    </section>\n  );\n};\nToastViewport.displayName = 'ToastViewport';\n"],"names":["TONE","Info","CheckCircle2","AlertTriangle","XCircle","Toast","tone","variant","title","description","action","onDismiss","_durationMs","className","props","bar","icon","Icon","urgent","jsxs","cn","jsx","buttonReset","focusRing","X","ToastContext","createContext","toastCounter","ToastProvider","children","durationMs","max","position","toasts","setToasts","useState","timers","useRef","dismissToast","useCallback","id","prev","t","schedule","ms","pushToast","toast","useEffect","map","pause","resume","value","useMemo","ToastViewport","useToast","context","useContext","POSITION","onPause","onResume"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,7 +1,17 @@
 import type React from 'react';
 export interface TooltipProps {
+    /** Elemento focável que dispara o tooltip (botão, link). Texto puro recebe tabIndex=0. */
     children: React.ReactNode;
     content: React.ReactNode;
-    side?: 'top' | 'bottom';
+    /** Atraso para abrir no hover, em ms. Padrão: 150. */
+    delay?: number;
+    side?: 'top' | 'bottom' | 'left' | 'right';
 }
-export declare const Tooltip: React.FC<TooltipProps>;
+/**
+ * Dica contextual em hover e foco (WCAG 1.4.13: dispensável com Esc, persistente enquanto hover).
+ * Não use para informação crítica: ela precisa estar visível na tela.
+ */
+export declare const Tooltip: {
+    ({ children, content, side, delay }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1,36 +1,54 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import { useState as f, useId as m, isValidElement as u } from "react";
-import { cn as x } from "../../utils/cn.js";
-const g = ({ children: t, content: r, side: i = "top" }) => {
-  const [o, e] = f(!1), a = m(), l = i === "top" ? "bottom-full mb-2 left-1/2 -translate-x-1/2" : "top-full mt-2 left-1/2 -translate-x-1/2", n = {
-    "aria-describedby": a,
-    onBlur: () => e(!1),
-    onFocus: () => e(!0),
-    onKeyDown: (c) => {
-      c.key === "Escape" && e(!1);
-    },
-    onMouseEnter: () => e(!0),
-    onMouseLeave: () => e(!1)
-  }, p = u(t) ? /* @__PURE__ */ s("span", { className: "inline-flex", ...n, children: t }) : /* @__PURE__ */ s("span", { className: "inline-flex", tabIndex: 0, ...n, children: t });
-  return /* @__PURE__ */ d("span", { className: "relative inline-flex", children: [
-    p,
-    /* @__PURE__ */ s(
-      "span",
-      {
-        "aria-hidden": !o,
-        className: x(
-          "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",
-          o ? "opacity-100" : "opacity-0",
-          l
-        ),
-        id: a,
-        role: "tooltip",
-        children: r
-      }
-    )
-  ] });
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import { useState as x, useId as y, useRef as v, useEffect as u, isValidElement as k, cloneElement as E } from "react";
+import { cn as g } from "../../utils/cn.js";
+const h = {
+  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+  bottom: "top-full left-1/2 mt-2 -translate-x-1/2",
+  left: "right-full top-1/2 mr-2 -translate-y-1/2",
+  right: "left-full top-1/2 ml-2 -translate-y-1/2"
+}, w = ({ children: s, content: c, side: m = "top", delay: p = 150 }) => {
+  const [e, t] = x(!1), r = y(), o = v();
+  u(() => () => clearTimeout(o.current), []), u(() => {
+    if (!e) return;
+    const n = (f) => f.key === "Escape" && t(!1);
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [e]);
+  const i = (n) => {
+    clearTimeout(o.current), n ? o.current = setTimeout(() => t(!0), p) : t(!0);
+  }, a = () => {
+    clearTimeout(o.current), t(!1);
+  }, d = k(s) ? E(s, { "aria-describedby": r }) : /* @__PURE__ */ l("span", { "aria-describedby": r, tabIndex: 0, children: s });
+  return /* @__PURE__ */ b(
+    "span",
+    {
+      className: "relative inline-flex",
+      onBlur: a,
+      onFocus: () => i(!1),
+      onMouseEnter: () => i(!0),
+      onMouseLeave: a,
+      children: [
+        d,
+        /* @__PURE__ */ l(
+          "span",
+          {
+            "aria-hidden": !e,
+            className: g(
+              "pointer-events-none absolute z-[var(--sbk-z-tooltip)] w-max max-w-64 rounded-sbk-xs bg-sbk-surface-inverse px-2.5 py-1.5 text-xs font-light text-sbk-fg-inverse shadow-sbk-sm",
+              "transition-opacity duration-150 motion-reduce:transition-none",
+              e ? "visible opacity-100" : "invisible opacity-0",
+              h[m]
+            ),
+            id: r,
+            role: "tooltip",
+            children: c
+          }
+        )
+      ]
+    }
+  );
 };
+w.displayName = "Tooltip";
 export {
-  g as Tooltip
+  w as Tooltip
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import type React from 'react';\nimport { isValidElement, useId, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TooltipProps {\n  children: React.ReactNode;\n  content: React.ReactNode;\n  side?: 'top' | 'bottom';\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, content, side = 'top' }) => {\n  const [open, setOpen] = useState(false);\n  const tooltipId = useId();\n  const sideClass =\n    side === 'top'\n      ? 'bottom-full mb-2 left-1/2 -translate-x-1/2'\n      : 'top-full mt-2 left-1/2 -translate-x-1/2';\n\n  const triggerProps = {\n    'aria-describedby': tooltipId,\n    onBlur: () => setOpen(false),\n    onFocus: () => setOpen(true),\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    },\n    onMouseEnter: () => setOpen(true),\n    onMouseLeave: () => setOpen(false),\n  };\n\n  const trigger = isValidElement(children) ? (\n    <span className=\"inline-flex\" {...triggerProps}>\n      {children}\n    </span>\n  ) : (\n    <span className=\"inline-flex\" tabIndex={0} {...triggerProps}>\n      {children}\n    </span>\n  );\n\n  return (\n    <span className=\"relative inline-flex\">\n      {trigger}\n      <span\n        aria-hidden={!open}\n        className={cn(\n          '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          open ? 'opacity-100' : 'opacity-0',\n          sideClass,\n        )}\n        id={tooltipId}\n        role=\"tooltip\"\n      >\n        {content}\n      </span>\n    </span>\n  );\n};\n"],"names":["Tooltip","children","content","side","open","setOpen","useState","tooltipId","useId","sideClass","triggerProps","event","trigger","isValidElement","jsx","jsxs","cn"],"mappings":";;;AAUO,MAAMA,IAAkC,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAO,YAAY;AACtF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAYC,EAAA,GACZC,IACJN,MAAS,QACL,+CACA,2CAEAO,IAAe;AAAA,IACnB,oBAAoBH;AAAA,IACpB,QAAQ,MAAMF,EAAQ,EAAK;AAAA,IAC3B,SAAS,MAAMA,EAAQ,EAAI;AAAA,IAC3B,WAAW,CAACM,MAA+B;AACzC,MAAIA,EAAM,QAAQ,YAChBN,EAAQ,EAAK;AAAA,IAEjB;AAAA,IACA,cAAc,MAAMA,EAAQ,EAAI;AAAA,IAChC,cAAc,MAAMA,EAAQ,EAAK;AAAA,EAAA,GAG7BO,IAAUC,EAAeZ,CAAQ,sBACpC,QAAA,EAAK,WAAU,eAAe,GAAGS,GAC/B,UAAAT,GACH,IAEA,gBAAAa,EAAC,UAAK,WAAU,eAAc,UAAU,GAAI,GAAGJ,GAC5C,UAAAT,GACH;AAGF,SACE,gBAAAc,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,IAAAH;AAAA,IACD,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAa,CAACV;AAAA,QACd,WAAWY;AAAA,UACT;AAAA,UACAZ,IAAO,gBAAgB;AAAA,UACvBK;AAAA,QAAA;AAAA,QAEF,IAAIF;AAAA,QACJ,MAAK;AAAA,QAEJ,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import type React from 'react';\nimport { cloneElement, isValidElement, useEffect, useId, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TooltipProps {\n  /** Elemento focável que dispara o tooltip (botão, link). Texto puro recebe tabIndex=0. */\n  children: React.ReactNode;\n  content: React.ReactNode;\n  /** Atraso para abrir no hover, em ms. Padrão: 150. */\n  delay?: number;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n}\n\nconst SIDE_CLASS: Record<NonNullable<TooltipProps['side']>, string> = {\n  top: 'bottom-full left-1/2 mb-2 -translate-x-1/2',\n  bottom: 'top-full left-1/2 mt-2 -translate-x-1/2',\n  left: 'right-full top-1/2 mr-2 -translate-y-1/2',\n  right: 'left-full top-1/2 ml-2 -translate-y-1/2',\n};\n\n/**\n * Dica contextual em hover e foco (WCAG 1.4.13: dispensável com Esc, persistente enquanto hover).\n * Não use para informação crítica: ela precisa estar visível na tela.\n */\nexport const Tooltip = ({ children, content, side = 'top', delay = 150 }: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const tooltipId = useId();\n  const timer = useRef<ReturnType<typeof setTimeout>>();\n\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);\n    document.addEventListener('keydown', onKey);\n    return () => document.removeEventListener('keydown', onKey);\n  }, [open]);\n\n  const show = (withDelay: boolean) => {\n    clearTimeout(timer.current);\n    if (withDelay) timer.current = setTimeout(() => setOpen(true), delay);\n    else setOpen(true);\n  };\n  const hide = () => {\n    clearTimeout(timer.current);\n    setOpen(false);\n  };\n\n  const trigger = isValidElement<Record<string, unknown>>(children) ? (\n    cloneElement(children, { 'aria-describedby': tooltipId })\n  ) : (\n    <span aria-describedby={tooltipId} tabIndex={0}>\n      {children}\n    </span>\n  );\n\n  return (\n    <span\n      className=\"relative inline-flex\"\n      onBlur={hide}\n      onFocus={() => show(false)}\n      onMouseEnter={() => show(true)}\n      onMouseLeave={hide}\n    >\n      {trigger}\n      <span\n        aria-hidden={!open}\n        className={cn(\n          'pointer-events-none absolute z-[var(--sbk-z-tooltip)] w-max max-w-64 rounded-sbk-xs bg-sbk-surface-inverse px-2.5 py-1.5 text-xs font-light text-sbk-fg-inverse shadow-sbk-sm',\n          'transition-opacity duration-150 motion-reduce:transition-none',\n          open ? 'visible opacity-100' : 'invisible opacity-0',\n          SIDE_CLASS[side],\n        )}\n        id={tooltipId}\n        role=\"tooltip\"\n      >\n        {content}\n      </span>\n    </span>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n"],"names":["SIDE_CLASS","Tooltip","children","content","side","delay","open","setOpen","useState","tooltipId","useId","timer","useRef","useEffect","onKey","e","show","withDelay","hide","trigger","isValidElement","cloneElement","jsx","jsxs","cn"],"mappings":";;;AAaA,MAAMA,IAAgE;AAAA,EACpE,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT,GAMaC,IAAU,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAO,OAAO,OAAAC,IAAQ,UAAwB;AACzF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAYC,EAAA,GACZC,IAAQC,EAAA;AAEd,EAAAC,EAAU,MAAM,MAAM,aAAaF,EAAM,OAAO,GAAG,CAAA,CAAE,GAErDE,EAAU,MAAM;AACd,QAAI,CAACP,EAAM;AACX,UAAMQ,IAAQ,CAACC,MAAqBA,EAAE,QAAQ,YAAYR,EAAQ,EAAK;AACvE,oBAAS,iBAAiB,WAAWO,CAAK,GACnC,MAAM,SAAS,oBAAoB,WAAWA,CAAK;AAAA,EAC5D,GAAG,CAACR,CAAI,CAAC;AAET,QAAMU,IAAO,CAACC,MAAuB;AACnC,iBAAaN,EAAM,OAAO,GACtBM,MAAiB,UAAU,WAAW,MAAMV,EAAQ,EAAI,GAAGF,CAAK,MACvD,EAAI;AAAA,EACnB,GACMa,IAAO,MAAM;AACjB,iBAAaP,EAAM,OAAO,GAC1BJ,EAAQ,EAAK;AAAA,EACf,GAEMY,IAAUC,EAAwClB,CAAQ,IAC9DmB,EAAanB,GAAU,EAAE,oBAAoBO,EAAA,CAAW,IAExD,gBAAAa,EAAC,QAAA,EAAK,oBAAkBb,GAAW,UAAU,GAC1C,UAAAP,GACH;AAGF,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,QAAQL;AAAA,MACR,SAAS,MAAMF,EAAK,EAAK;AAAA,MACzB,cAAc,MAAMA,EAAK,EAAI;AAAA,MAC7B,cAAcE;AAAA,MAEb,UAAA;AAAA,QAAAC;AAAA,QACD,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAa,CAAChB;AAAA,YACd,WAAWkB;AAAA,cACT;AAAA,cACA;AAAA,cACAlB,IAAO,wBAAwB;AAAA,cAC/BN,EAAWI,CAAI;AAAA,YAAA;AAAA,YAEjB,IAAIK;AAAA,YACJ,MAAK;AAAA,YAEJ,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAQ,cAAc;"}

package/dist/components/Typography/weight.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pesos do brand book: 300 (Leve) e 600 (Seminegrito).
+ * Os valores legados da 1.x continuam aceitos e são mapeados para o peso oficial mais próximo.
+ */
+export type BrandWeight = 'light' | 'semibold';
+/** @deprecated Use 'light' ou 'semibold'. Serão removidos na 3.0. */
+export type LegacyWeight = 'normal' | 'medium' | 'bold' | 'extrabold';
+export type TextWeight = BrandWeight | LegacyWeight;
+export declare const weightClass: (weight: TextWeight) => string;

package/dist/components/Typography/weight.js

@@ -0,0 +1,5 @@
+const t = (o) => o === "light" || o === "normal" ? "font-light" : "font-semibold";
+export {
+  t as weightClass
+};
+//# sourceMappingURL=weight.js.map

package/dist/components/Typography/weight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"weight.js","sources":["../../../src/components/Typography/weight.ts"],"sourcesContent":["/**\n * Pesos do brand book: 300 (Leve) e 600 (Seminegrito).\n * Os valores legados da 1.x continuam aceitos e são mapeados para o peso oficial mais próximo.\n */\nexport type BrandWeight = 'light' | 'semibold';\n\n/** @deprecated Use 'light' ou 'semibold'. Serão removidos na 3.0. */\nexport type LegacyWeight = 'normal' | 'medium' | 'bold' | 'extrabold';\n\nexport type TextWeight = BrandWeight | LegacyWeight;\n\nexport const weightClass = (weight: TextWeight): string =>\n  weight === 'light' || weight === 'normal' ? 'font-light' : 'font-semibold';\n"],"names":["weightClass","weight"],"mappings":"AAWO,MAAMA,IAAc,CAACC,MAC1BA,MAAW,WAAWA,MAAW,WAAW,eAAe;"}

package/dist/fonts.css

@@ -0,0 +1,8 @@
+/* ============================================================
+   @sbkbs/ui · Fonte oficial via Google Fonts (import '@sbkbs/ui/fonts.css')
+   Somente os pesos do brand book: 300 (Leve) e 600 (Seminegrito).
+   Para hospedar localmente, prefira @fontsource/plus-jakarta-sans (300 e 600)
+   e não importe este arquivo.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;600&display=swap');