@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Tabs/Tabs.js

@@ -1,62 +1,98 @@
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { cn as f } from "../../utils/cn.js";
-const x = ({ items: n, defaultTabId: s }) => {
-  var b;
-  const [d, l] = p(s ?? ((b = n[0]) == null ? void 0 : b.id)), a = n.find((r) => r.id === d) ?? n[0], c = Math.max(
-    0,
-    n.findIndex((r) => r.id === (a == null ? void 0 : a.id))
-  ), t = (r) => {
-    const e = n[r];
-    if (!e)
-      return;
-    l(e.id);
-    const o = document.getElementById(`tab-${e.id}`);
-    o == null || o.focus();
+import { jsxs as k, jsx as c } from "react/jsx-runtime";
+import { useState as j, useId as z, useRef as K } from "react";
+import { cn as h } from "../../utils/cn.js";
+import { transitionColors as S, buttonReset as _ } from "../../utils/styles.js";
+const q = {
+  pill: {
+    list: "inline-flex flex-wrap gap-1 rounded-sbk-sm bg-sbk-surface-sunken p-1",
+    tab: "rounded-sbk-xs px-3 py-1.5",
+    active: "bg-sbk-surface text-sbk-fg-heading shadow-sbk-sm",
+    idle: "text-sbk-fg-muted hover:text-sbk-fg"
+  },
+  line: {
+    list: "flex flex-wrap gap-4 border-b border-sbk-line",
+    tab: "-mb-px border-b-2 px-1 py-2.5",
+    active: "border-sbk-primary text-sbk-fg-heading",
+    idle: "border-transparent text-sbk-fg-muted hover:border-sbk-line-strong hover:text-sbk-fg"
+  }
+}, B = ({
+  items: i,
+  defaultTabId: m,
+  tabId: f,
+  onTabChange: r,
+  variant: y = "pill",
+  className: w,
+  "aria-label": $
+}) => {
+  var x;
+  const [A, N] = j(m ?? ((x = i.find((e) => !e.disabled)) == null ? void 0 : x.id)), I = f ?? A, l = z(), u = K(null), t = i.find((e) => e.id === I) ?? i[0], o = q[y], p = (e) => {
+    f === void 0 && N(e), r == null || r(e);
+  }, R = (e, a) => {
+    var v, g;
+    const s = i.map((b, D) => b.disabled ? -1 : D).filter((b) => b >= 0), n = s.indexOf(a), d = {
+      ArrowRight: s[(n + 1) % s.length],
+      ArrowLeft: s[(n - 1 + s.length) % s.length],
+      Home: s[0],
+      End: s[s.length - 1]
+    }[e.key];
+    d !== void 0 && (e.preventDefault(), p(i[d].id), (g = (v = u.current) == null ? void 0 : v.querySelectorAll('[role="tab"]')[d]) == null || g.focus());
   };
-  return /* @__PURE__ */ v("div", { className: "grid gap-3", children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ k("div", { className: h("grid gap-3", w), children: [
+    /* @__PURE__ */ c(
       "div",
       {
+        ref: u,
+        "aria-label": $,
         "aria-orientation": "horizontal",
-        className: "inline-flex flex-wrap gap-1 rounded-[var(--border-radius-md)] bg-[var(--bg-tertiary)] p-1",
+        className: o.list,
         role: "tablist",
-        children: n.map((r, e) => /* @__PURE__ */ i(
-          "button",
-          {
-            "aria-controls": `panel-${r.id}`,
-            "aria-selected": d === r.id,
-            className: f(
-              "rounded-[var(--border-radius-sm)] px-3 py-1.5 text-sm transition",
-              d === r.id ? "bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-xs)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
-            ),
-            id: `tab-${r.id}`,
-            onClick: () => l(r.id),
-            onKeyDown: (o) => {
-              o.key === "ArrowRight" ? (o.preventDefault(), t((e + 1) % n.length)) : o.key === "ArrowLeft" ? (o.preventDefault(), t((e - 1 + n.length) % n.length)) : o.key === "Home" ? (o.preventDefault(), t(0)) : o.key === "End" && (o.preventDefault(), t(n.length - 1));
+        children: i.map((e, a) => {
+          const s = e.id === (t == null ? void 0 : t.id);
+          return /* @__PURE__ */ k(
+            "button",
+            {
+              "aria-controls": `${l}-panel-${e.id}`,
+              "aria-selected": s,
+              className: h(
+                _,
+                "inline-flex cursor-pointer items-center gap-2 text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid",
+                S,
+                o.tab,
+                s ? o.active : o.idle
+              ),
+              disabled: e.disabled,
+              id: `${l}-tab-${e.id}`,
+              onClick: () => p(e.id),
+              onKeyDown: (n) => R(n, a),
+              role: "tab",
+              tabIndex: s ? 0 : -1,
+              type: "button",
+              children: [
+                e.icon && /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "inline-flex", children: e.icon }),
+                e.label
+              ]
             },
-            role: "tab",
-            tabIndex: e === c ? 0 : -1,
-            type: "button",
-            children: r.label
-          },
-          r.id
-        ))
+            e.id
+          );
+        })
       }
     ),
-    /* @__PURE__ */ i(
+    t && /* @__PURE__ */ c(
       "div",
       {
-        "aria-labelledby": `tab-${(a == null ? void 0 : a.id) ?? ""}`,
-        className: "rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
-        id: `panel-${(a == null ? void 0 : a.id) ?? ""}`,
+        "aria-labelledby": `${l}-tab-${t.id}`,
+        className: "rounded-sbk-sm font-light text-sbk-fg focus-visible:outline-2 focus-visible:outline-sbk-focus focus-visible:outline-solid",
+        id: `${l}-panel-${t.id}`,
         role: "tabpanel",
-        children: a == null ? void 0 : a.content
+        tabIndex: 0,
+        children: t.content
       }
     )
   ] });
 };
+B.displayName = "Tabs";
 export {
-  x as Tabs
+  B as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TabItem {\n  content: React.ReactNode;\n  id: string;\n  label: string;\n}\n\nexport interface TabsProps {\n  defaultTabId?: string;\n  items: TabItem[];\n}\n\nexport const Tabs: React.FC<TabsProps> = ({ items, defaultTabId }) => {\n  const [activeTab, setActiveTab] = useState(defaultTabId ?? items[0]?.id);\n  const selected = items.find((item) => item.id === activeTab) ?? items[0];\n  const selectedIndex = Math.max(\n    0,\n    items.findIndex((item) => item.id === selected?.id),\n  );\n\n  const moveFocus = (nextIndex: number) => {\n    const item = items[nextIndex];\n    if (!item) {\n      return;\n    }\n    setActiveTab(item.id);\n    const tab = document.getElementById(`tab-${item.id}`);\n    tab?.focus();\n  };\n\n  return (\n    <div className=\"grid gap-3\">\n      <div\n        aria-orientation=\"horizontal\"\n        className=\"inline-flex flex-wrap gap-1 rounded-[var(--border-radius-md)] bg-[var(--bg-tertiary)] p-1\"\n        role=\"tablist\"\n      >\n        {items.map((item, index) => (\n          <button\n            aria-controls={`panel-${item.id}`}\n            aria-selected={activeTab === item.id}\n            className={cn(\n              'rounded-[var(--border-radius-sm)] px-3 py-1.5 text-sm transition',\n              activeTab === item.id\n                ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-xs)]'\n                : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n            )}\n            id={`tab-${item.id}`}\n            key={item.id}\n            onClick={() => setActiveTab(item.id)}\n            onKeyDown={(e) => {\n              if (e.key === 'ArrowRight') {\n                e.preventDefault();\n                moveFocus((index + 1) % items.length);\n              } else if (e.key === 'ArrowLeft') {\n                e.preventDefault();\n                moveFocus((index - 1 + items.length) % items.length);\n              } else if (e.key === 'Home') {\n                e.preventDefault();\n                moveFocus(0);\n              } else if (e.key === 'End') {\n                e.preventDefault();\n                moveFocus(items.length - 1);\n              }\n            }}\n            role=\"tab\"\n            tabIndex={index === selectedIndex ? 0 : -1}\n            type=\"button\"\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n      <div\n        aria-labelledby={`tab-${selected?.id ?? ''}`}\n        className=\"rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4\"\n        id={`panel-${selected?.id ?? ''}`}\n        role=\"tabpanel\"\n      >\n        {selected?.content}\n      </div>\n    </div>\n  );\n};\n"],"names":["Tabs","items","defaultTabId","activeTab","setActiveTab","useState","_a","selected","item","selectedIndex","moveFocus","nextIndex","tab","jsxs","jsx","index","cn","e"],"mappings":";;;AAeO,MAAMA,IAA4B,CAAC,EAAE,OAAAC,GAAO,cAAAC,QAAmB;;AACpE,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASH,OAAgBI,IAAAL,EAAM,CAAC,MAAP,gBAAAK,EAAU,GAAE,GACjEC,IAAWN,EAAM,KAAK,CAACO,MAASA,EAAK,OAAOL,CAAS,KAAKF,EAAM,CAAC,GACjEQ,IAAgB,KAAK;AAAA,IACzB;AAAA,IACAR,EAAM,UAAU,CAACO,MAASA,EAAK,QAAOD,KAAA,gBAAAA,EAAU,GAAE;AAAA,EAAA,GAG9CG,IAAY,CAACC,MAAsB;AACvC,UAAMH,IAAOP,EAAMU,CAAS;AAC5B,QAAI,CAACH;AACH;AAEF,IAAAJ,EAAaI,EAAK,EAAE;AACpB,UAAMI,IAAM,SAAS,eAAe,OAAOJ,EAAK,EAAE,EAAE;AACpD,IAAAI,KAAA,QAAAA,EAAK;AAAA,EACP;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,oBAAiB;AAAA,QACjB,WAAU;AAAA,QACV,MAAK;AAAA,QAEJ,UAAAb,EAAM,IAAI,CAACO,GAAMO,MAChB,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,iBAAe,SAASN,EAAK,EAAE;AAAA,YAC/B,iBAAeL,MAAcK,EAAK;AAAA,YAClC,WAAWQ;AAAA,cACT;AAAA,cACAb,MAAcK,EAAK,KACf,kFACA;AAAA,YAAA;AAAA,YAEN,IAAI,OAAOA,EAAK,EAAE;AAAA,YAElB,SAAS,MAAMJ,EAAaI,EAAK,EAAE;AAAA,YACnC,WAAW,CAACS,MAAM;AAChB,cAAIA,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACFP,GAAWK,IAAQ,KAAKd,EAAM,MAAM,KAC3BgB,EAAE,QAAQ,eACnBA,EAAE,eAAA,GACFP,GAAWK,IAAQ,IAAId,EAAM,UAAUA,EAAM,MAAM,KAC1CgB,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFP,EAAU,CAAC,KACFO,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFP,EAAUT,EAAM,SAAS,CAAC;AAAA,YAE9B;AAAA,YACA,MAAK;AAAA,YACL,UAAUc,MAAUN,IAAgB,IAAI;AAAA,YACxC,MAAK;AAAA,YAEJ,UAAAD,EAAK;AAAA,UAAA;AAAA,UArBDA,EAAK;AAAA,QAAA,CAuBb;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB,QAAOP,KAAA,gBAAAA,EAAU,OAAM,EAAE;AAAA,QAC1C,WAAU;AAAA,QACV,IAAI,UAASA,KAAA,gBAAAA,EAAU,OAAM,EAAE;AAAA,QAC/B,MAAK;AAAA,QAEJ,UAAAA,KAAA,gBAAAA,EAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACF;AAEJ;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type React from 'react';\nimport { useId, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, transitionColors } from '../../utils/styles';\n\nexport interface TabItem {\n  content: React.ReactNode;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n  id: string;\n  label: React.ReactNode;\n}\n\nexport interface TabsProps {\n  /** Rótulo acessível da lista de abas. */\n  'aria-label'?: string;\n  className?: string;\n  defaultTabId?: string;\n  items: TabItem[];\n  onTabChange?: (id: string) => void;\n  /** Aba ativa controlada externamente. */\n  tabId?: string;\n  /** `pill`: segmentado. `line`: sublinhado. Padrão: pill. */\n  variant?: 'pill' | 'line';\n}\n\nconst TAB_VARIANT = {\n  pill: {\n    list: 'inline-flex flex-wrap gap-1 rounded-sbk-sm bg-sbk-surface-sunken p-1',\n    tab: 'rounded-sbk-xs px-3 py-1.5',\n    active: 'bg-sbk-surface text-sbk-fg-heading shadow-sbk-sm',\n    idle: 'text-sbk-fg-muted hover:text-sbk-fg',\n  },\n  line: {\n    list: 'flex flex-wrap gap-4 border-b border-sbk-line',\n    tab: '-mb-px border-b-2 px-1 py-2.5',\n    active: 'border-sbk-primary text-sbk-fg-heading',\n    idle: 'border-transparent text-sbk-fg-muted hover:border-sbk-line-strong hover:text-sbk-fg',\n  },\n} as const;\n\n/** Abas (padrão ARIA tabs com ativação automática): setas, Home e End. */\nexport const Tabs = ({\n  items,\n  defaultTabId,\n  tabId,\n  onTabChange,\n  variant = 'pill',\n  className,\n  'aria-label': ariaLabel,\n}: TabsProps) => {\n  const [internal, setInternal] = useState(defaultTabId ?? items.find((i) => !i.disabled)?.id);\n  const activeId = tabId ?? internal;\n  const baseId = useId();\n  const listRef = useRef<HTMLDivElement>(null);\n  const selected = items.find((item) => item.id === activeId) ?? items[0];\n  const styles = TAB_VARIANT[variant];\n\n  const select = (id: string) => {\n    if (tabId === undefined) setInternal(id);\n    onTabChange?.(id);\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent, index: number) => {\n    const enabled = items.map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0);\n    const pos = enabled.indexOf(index);\n    const next: Record<string, number | undefined> = {\n      ArrowRight: enabled[(pos + 1) % enabled.length],\n      ArrowLeft: enabled[(pos - 1 + enabled.length) % enabled.length],\n      Home: enabled[0],\n      End: enabled[enabled.length - 1],\n    };\n    const target = next[e.key];\n    if (target === undefined) return;\n    e.preventDefault();\n    select(items[target].id);\n    listRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')[target]?.focus();\n  };\n\n  return (\n    <div className={cn('grid gap-3', className)}>\n      <div\n        ref={listRef}\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        className={styles.list}\n        role=\"tablist\"\n      >\n        {items.map((item, index) => {\n          const isActive = item.id === selected?.id;\n          return (\n            <button\n              key={item.id}\n              aria-controls={`${baseId}-panel-${item.id}`}\n              aria-selected={isActive}\n              className={cn(\n                buttonReset,\n                'inline-flex cursor-pointer items-center gap-2 text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4',\n                'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid',\n                transitionColors,\n                styles.tab,\n                isActive ? styles.active : styles.idle,\n              )}\n              disabled={item.disabled}\n              id={`${baseId}-tab-${item.id}`}\n              onClick={() => select(item.id)}\n              onKeyDown={(e) => onKeyDown(e, index)}\n              role=\"tab\"\n              tabIndex={isActive ? 0 : -1}\n              type=\"button\"\n            >\n              {item.icon && (\n                <span aria-hidden=\"true\" className=\"inline-flex\">\n                  {item.icon}\n                </span>\n              )}\n              {item.label}\n            </button>\n          );\n        })}\n      </div>\n      {selected && (\n        <div\n          aria-labelledby={`${baseId}-tab-${selected.id}`}\n          className=\"rounded-sbk-sm font-light text-sbk-fg focus-visible:outline-2 focus-visible:outline-sbk-focus focus-visible:outline-solid\"\n          id={`${baseId}-panel-${selected.id}`}\n          role=\"tabpanel\"\n          tabIndex={0}\n        >\n          {selected.content}\n        </div>\n      )}\n    </div>\n  );\n};\n\nTabs.displayName = 'Tabs';\n"],"names":["TAB_VARIANT","Tabs","items","defaultTabId","tabId","onTabChange","variant","className","ariaLabel","internal","setInternal","useState","_a","i","activeId","baseId","useId","listRef","useRef","selected","item","styles","select","id","onKeyDown","index","enabled","it","pos","target","_b","cn","jsx","isActive","jsxs","buttonReset","transitionColors","e"],"mappings":"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"}

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,12 @@
 import type React from 'react';
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    icon?: React.ReactNode;
     onRemove?: () => void;
+    /** Rótulo acessível do botão de remover. Padrão: "Remover". */
+    removeLabel?: string;
 }
-export declare const Tag: React.FC<TagProps>;
+/** Etiqueta de metadado, opcionalmente removível. */
+export declare const Tag: {
+    ({ className, children, icon, onRemove, removeLabel, ...props }: TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Tag/Tag.js

@@ -1,29 +1,44 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { cn as s } from "../../utils/cn.js";
-const l = ({ className: e, children: t, onRemove: r, ...a }) => /* @__PURE__ */ o(
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { X as l } from "lucide-react";
+import { cn as n } from "../../utils/cn.js";
+import { focusRing as m, buttonReset as b } from "../../utils/styles.js";
+const u = ({
+  className: o,
+  children: e,
+  icon: s,
+  onRemove: r,
+  removeLabel: i = "Remover",
+  ...a
+}) => /* @__PURE__ */ f(
   "span",
   {
-    className: s(
-      "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
+    className: n(
+      "inline-flex items-center gap-1.5 rounded-sbk-xs border border-sbk-line bg-sbk-surface px-2.5 py-1 text-xs font-light text-sbk-fg [&_svg]:size-3.5",
+      o
     ),
     ...a,
     children: [
-      t,
-      r && /* @__PURE__ */ n(
+      s && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "inline-flex text-sbk-fg-muted", children: s }),
+      e,
+      r && /* @__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)]",
+          "aria-label": typeof e == "string" ? `${i} ${e}` : i,
+          className: n(
+            b,
+            "-mr-1 inline-flex size-4 cursor-pointer items-center justify-center rounded-full text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+            m
+          ),
           onClick: r,
           type: "button",
-          children: "×"
+          children: /* @__PURE__ */ t(l, { "aria-hidden": "true" })
         }
       )
     ]
   }
 );
+u.displayName = "Tag";
 export {
-  l as Tag
+  u as Tag
 };
 //# sourceMappingURL=Tag.js.map

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {\n  onRemove?: () => void;\n}\n\nexport const Tag: React.FC<TagProps> = ({ className, children, onRemove, ...props }) => {\n  return (\n    <span\n      className={cn(\n        '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)]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          aria-label=\"Remover tag\"\n          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)]\"\n          onClick={onRemove}\n          type=\"button\"\n        >\n          ×\n        </button>\n      )}\n    </span>\n  );\n};\n"],"names":["Tag","className","children","onRemove","props","jsxs","cn","jsx"],"mappings":";;AAOO,MAAMA,IAA0B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,GAAGC,QAExE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,IAEH,UAAA;AAAA,MAAAF;AAAA,MACAC,KACC,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAW;AAAA,UACX,WAAU;AAAA,UACV,SAASJ;AAAA,UACT,MAAK;AAAA,UACN,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type React from 'react';\nimport { X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing } from '../../utils/styles';\n\nexport interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {\n  icon?: React.ReactNode;\n  onRemove?: () => void;\n  /** Rótulo acessível do botão de remover. Padrão: \"Remover\". */\n  removeLabel?: string;\n}\n\n/** Etiqueta de metadado, opcionalmente removível. */\nexport const Tag = ({\n  className,\n  children,\n  icon,\n  onRemove,\n  removeLabel = 'Remover',\n  ...props\n}: TagProps) => (\n  <span\n    className={cn(\n      'inline-flex items-center gap-1.5 rounded-sbk-xs border border-sbk-line bg-sbk-surface px-2.5 py-1 text-xs font-light text-sbk-fg [&_svg]:size-3.5',\n      className,\n    )}\n    {...props}\n  >\n    {icon && (\n      <span aria-hidden=\"true\" className=\"inline-flex text-sbk-fg-muted\">\n        {icon}\n      </span>\n    )}\n    {children}\n    {onRemove && (\n      <button\n        aria-label={typeof children === 'string' ? `${removeLabel} ${children}` : removeLabel}\n        className={cn(\n          buttonReset,\n          '-mr-1 inline-flex size-4 cursor-pointer items-center justify-center rounded-full text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\n          focusRing,\n        )}\n        onClick={onRemove}\n        type=\"button\"\n      >\n        <X aria-hidden=\"true\" />\n      </button>\n    )}\n  </span>\n);\n\nTag.displayName = 'Tag';\n"],"names":["Tag","className","children","icon","onRemove","removeLabel","props","jsxs","cn","jsx","buttonReset","focusRing","X"],"mappings":";;;;AAaO,MAAMA,IAAM,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAP;AAAA,IAAA;AAAA,IAED,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAH,uBACE,QAAA,EAAK,eAAY,QAAO,WAAU,iCAChC,UAAAA,GACH;AAAA,MAEDD;AAAA,MACAE,KACC,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAY,OAAOP,KAAa,WAAW,GAAGG,CAAW,IAAIH,CAAQ,KAAKG;AAAA,UAC1E,WAAWG;AAAA,YACTE;AAAA,YACA;AAAA,YACAC;AAAA,UAAA;AAAA,UAEF,SAASP;AAAA,UACT,MAAK;AAAA,UAEL,UAAA,gBAAAK,EAACG,GAAA,EAAE,eAAY,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACxB;AAAA,EAAA;AAEJ;AAGFZ,EAAI,cAAc;"}

package/dist/components/Textarea/Textarea.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     error?: string;
     helperText?: string;
-    label?: string;
+    label?: React.ReactNode;
+    /** Permite redimensionar verticalmente. Padrão: true. */
+    resizable?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -1,46 +1,42 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import m from "react";
+import { jsx as r } from "react/jsx-runtime";
+import p, { useId as x } from "react";
 import { cn as l } from "../../utils/cn.js";
-const v = m.forwardRef(
-  ({ label: t, helperText: o, error: a, className: d, id: s, ...i }, n) => {
-    const r = s || `textarea-${Math.random().toString(36).slice(2, 9)}`;
-    return /* @__PURE__ */ c("div", { className: "grid gap-1", children: [
-      t && /* @__PURE__ */ e(
-        "label",
-        {
-          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
-          htmlFor: r,
-          children: t
-        }
-      ),
-      /* @__PURE__ */ e(
-        "textarea",
-        {
-          ref: n,
-          "aria-describedby": a ? `${r}-error` : o ? `${r}-helper` : void 0,
-          "aria-invalid": a ? !0 : void 0,
-          className: l(
-            "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)] disabled:cursor-not-allowed disabled:opacity-60",
-            a && "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]",
-            d
-          ),
-          id: r,
-          ...i
-        }
-      ),
-      a ? /* @__PURE__ */ e("span", { className: "text-xs text-[var(--md-error)]", id: `${r}-error`, role: "alert", children: a }) : o && /* @__PURE__ */ e(
-        "span",
-        {
-          className: "text-xs text-[var(--md-on-surface-variant)]",
-          id: `${r}-helper`,
-          children: o
-        }
-      )
-    ] });
+import { describedBy as y, fieldControl as b } from "../../utils/styles.js";
+import { Field as u } from "../Field/Field.js";
+const I = p.forwardRef(
+  ({ label: o, helperText: a, error: e, resizable: d = !0, className: m, id: s, required: i, ...n }, c) => {
+    const f = x(), t = s ?? f;
+    return /* @__PURE__ */ r(
+      u,
+      {
+        error: e,
+        helperText: a,
+        id: t,
+        label: o,
+        required: i,
+        children: /* @__PURE__ */ r(
+          "textarea",
+          {
+            ref: c,
+            "aria-describedby": y(t, e, a),
+            "aria-invalid": e ? !0 : void 0,
+            className: l(
+              b,
+              "min-h-24 px-3.5 py-2 text-base",
+              d ? "resize-y" : "resize-none",
+              m
+            ),
+            id: t,
+            required: i,
+            ...n
+          }
+        )
+      }
+    );
   }
 );
-v.displayName = "Textarea";
+I.displayName = "Textarea";
 export {
-  v as Textarea
+  I as Textarea
 };
 //# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  error?: string;\n  helperText?: string;\n  label?: string;\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ label, helperText, error, className, id, ...props }, ref) => {\n    const textareaId = id || `textarea-${Math.random().toString(36).slice(2, 9)}`;\n\n    return (\n      <div className=\"grid gap-1\">\n        {label && (\n          <label\n            className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n            htmlFor={textareaId}\n          >\n            {label}\n          </label>\n        )}\n        <textarea\n          ref={ref}\n          aria-describedby={\n            error ? `${textareaId}-error` : helperText ? `${textareaId}-helper` : undefined\n          }\n          aria-invalid={error ? true : undefined}\n          className={cn(\n            '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)] disabled:cursor-not-allowed disabled:opacity-60',\n            error &&\n              'border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]',\n            className,\n          )}\n          id={textareaId}\n          {...props}\n        />\n        {error ? (\n          <span className=\"text-xs text-[var(--md-error)]\" id={`${textareaId}-error`} role=\"alert\">\n            {error}\n          </span>\n        ) : (\n          helperText && (\n            <span\n              className=\"text-xs text-[var(--md-on-surface-variant)]\"\n              id={`${textareaId}-helper`}\n            >\n              {helperText}\n            </span>\n          )\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["Textarea","React","label","helperText","error","className","id","props","ref","textareaId","jsxs","jsx","cn"],"mappings":";;;AASO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AAC9D,UAAMC,IAAaH,KAAM,YAAY,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAE3E,WACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,MAAAR,KACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASF;AAAA,UAER,UAAAP;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAH;AAAA,UACA,oBACEJ,IAAQ,GAAGK,CAAU,WAAWN,IAAa,GAAGM,CAAU,YAAY;AAAA,UAExE,gBAAcL,IAAQ,KAAO;AAAA,UAC7B,WAAWQ;AAAA,YACT;AAAA,YACAR,KACE;AAAA,YACFC;AAAA,UAAA;AAAA,UAEF,IAAII;AAAA,UACH,GAAGF;AAAA,QAAA;AAAA,MAAA;AAAA,MAELH,IACC,gBAAAO,EAAC,QAAA,EAAK,WAAU,kCAAiC,IAAI,GAAGF,CAAU,UAAU,MAAK,SAC9E,UAAAL,EAAA,CACH,IAEAD,KACE,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGF,CAAU;AAAA,UAEhB,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAGN;AAAA,EAEJ;AACF;AAEAH,EAAS,cAAc;"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport { describedBy, fieldControl } from '../../utils/styles';\nimport { Field } from '../Field/Field';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  error?: string;\n  helperText?: string;\n  label?: React.ReactNode;\n  /** Permite redimensionar verticalmente. Padrão: true. */\n  resizable?: boolean;\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ label, helperText, error, resizable = true, className, id, required, ...props }, ref) => {\n    const autoId = useId();\n    const textareaId = id ?? autoId;\n\n    return (\n      <Field\n        error={error}\n        helperText={helperText}\n        id={textareaId}\n        label={label}\n        required={required}\n      >\n        <textarea\n          ref={ref}\n          aria-describedby={describedBy(textareaId, error, helperText)}\n          aria-invalid={error ? true : undefined}\n          className={cn(\n            fieldControl,\n            'min-h-24 px-3.5 py-2 text-base',\n            resizable ? 'resize-y' : 'resize-none',\n            className,\n          )}\n          id={textareaId}\n          required={required}\n          {...props}\n        />\n      </Field>\n    );\n  },\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["Textarea","React","label","helperText","error","resizable","className","id","required","props","ref","autoId","useId","textareaId","jsx","Field","describedBy","cn","fieldControl"],"mappings":";;;;;AAaO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,WAAAC,IAAY,IAAM,WAAAC,GAAW,IAAAC,GAAI,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AAC1F,UAAMC,IAASC,EAAA,GACTC,IAAaN,KAAMI;AAEzB,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAX;AAAA,QACA,YAAAD;AAAA,QACA,IAAIU;AAAA,QACJ,OAAAX;AAAA,QACA,UAAAM;AAAA,QAEA,UAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAJ;AAAA,YACA,oBAAkBM,EAAYH,GAAYT,GAAOD,CAAU;AAAA,YAC3D,gBAAcC,IAAQ,KAAO;AAAA,YAC7B,WAAWa;AAAA,cACTC;AAAA,cACA;AAAA,cACAb,IAAY,aAAa;AAAA,cACzBC;AAAA,YAAA;AAAA,YAEF,IAAIO;AAAA,YACJ,UAAAL;AAAA,YACC,GAAGC;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAGN;AACF;AAEAT,EAAS,cAAc;"}

package/dist/components/Title/Title.d.ts

@@ -1,11 +1,17 @@
 import type React from 'react';
+import { type TextWeight } from '../Typography/weight';
 export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     align?: 'left' | 'center' | 'right';
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     children: React.ReactNode;
-    gradient?: boolean;
+    /** `heading`: Verde Escuro (padrão). `default`: cor de texto. `inherit`: herda do pai. */
+    color?: 'heading' | 'default' | 'inherit';
     italic?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+    /** Padrão: semibold (Seminegrito, brand book). */
+    weight?: TextWeight;
 }
-export declare const Title: React.FC<TitleProps>;
+export declare const Title: {
+    ({ as: Tag, size, weight, align, color, italic, children, className, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Title/Title.js

@@ -1,47 +1,47 @@
-import { jsx as d } from "react/jsx-runtime";
-const b = ({
+import { jsx as r } from "react/jsx-runtime";
+import { cn as g } from "../../utils/cn.js";
+import { weightClass as o } from "../Typography/weight.js";
+const c = {
+  xs: "text-sm",
+  sm: "text-base",
+  md: "text-lg",
+  lg: "text-xl",
+  xl: "text-2xl",
+  "2xl": "text-[2rem]",
+  "3xl": "text-[2.5rem]",
+  "4xl": "text-5xl"
+}, f = {
+  heading: "text-sbk-fg-heading",
+  default: "text-sbk-fg",
+  inherit: "text-inherit"
+}, h = { left: "text-left", center: "text-center", right: "text-right" }, d = ({
   as: t = "h1",
   size: e = "2xl",
-  weight: o = "bold",
-  align: a = "left",
-  gradient: r = !1,
-  italic: n = !1,
-  children: i,
-  className: l = "",
-  ...s
-}) => {
-  const x = t, f = {
-    xs: "text-[var(--font-size-sm)]",
-    sm: "text-[var(--font-size-base)]",
-    md: "text-[var(--font-size-lg)]",
-    lg: "text-[var(--font-size-xl)]",
-    xl: "text-[var(--font-size-2xl)]",
-    "2xl": "text-[var(--font-size-3xl)]",
-    "3xl": "text-[var(--font-size-4xl)]",
-    "4xl": "text-[3rem]"
-  }, g = {
-    light: "font-[var(--font-weight-light)]",
-    normal: "font-[var(--font-weight-normal)]",
-    medium: "font-[var(--font-weight-medium)]",
-    semibold: "font-[var(--font-weight-semibold)]",
-    bold: "font-[var(--font-weight-bold)]",
-    extrabold: "font-extrabold"
-  }, m = {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  }, c = r ? "bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent" : "", v = [
-    "m-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]",
-    f[e],
-    g[o],
-    m[a],
-    n ? "italic" : "not-italic",
-    c,
-    l
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ d(x, { className: v, ...s, children: i });
-};
+  weight: x = "semibold",
+  align: l = "left",
+  color: i = "heading",
+  italic: s = !1,
+  children: a,
+  className: m,
+  ...n
+}) => /* @__PURE__ */ r(
+  t,
+  {
+    className: g(
+      "m-0 font-sbk leading-tight tracking-[-0.01em] text-balance",
+      c[e],
+      o(x),
+      f[i],
+      h[l],
+      s && "italic",
+      m
+    ),
+    ...n,
+    children: a
+  }
+);
+d.displayName = "Title";
 export {
-  b as Title
+  d as Title
 };
 //# sourceMappingURL=Title.js.map

package/dist/components/Title/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  align?: 'left' | 'center' | 'right';\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  children: React.ReactNode;\n  gradient?: boolean;\n  italic?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';\n}\n\nexport const Title: React.FC<TitleProps> = ({\n  as = 'h1',\n  size = '2xl',\n  weight = 'bold',\n  align = 'left',\n  gradient = false,\n  italic = false,\n  children,\n  className = '',\n  ...props\n}) => {\n  const Component = as;\n  const sizeClassMap: Record<NonNullable<TitleProps['size']>, string> = {\n    xs: 'text-[var(--font-size-sm)]',\n    sm: 'text-[var(--font-size-base)]',\n    md: 'text-[var(--font-size-lg)]',\n    lg: 'text-[var(--font-size-xl)]',\n    xl: 'text-[var(--font-size-2xl)]',\n    '2xl': 'text-[var(--font-size-3xl)]',\n    '3xl': 'text-[var(--font-size-4xl)]',\n    '4xl': 'text-[3rem]',\n  };\n  const weightClassMap: Record<NonNullable<TitleProps['weight']>, string> = {\n    light: 'font-[var(--font-weight-light)]',\n    normal: 'font-[var(--font-weight-normal)]',\n    medium: 'font-[var(--font-weight-medium)]',\n    semibold: 'font-[var(--font-weight-semibold)]',\n    bold: 'font-[var(--font-weight-bold)]',\n    extrabold: 'font-extrabold',\n  };\n  const alignClassMap: Record<NonNullable<TitleProps['align']>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  };\n  const gradientClass = gradient\n    ? 'bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent'\n    : '';\n  const combinedClass = [\n    'm-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]',\n    sizeClassMap[size],\n    weightClassMap[weight],\n    alignClassMap[align],\n    italic ? 'italic' : 'not-italic',\n    gradientClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Component className={combinedClass} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["Title","as","size","weight","align","gradient","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","gradientClass","combinedClass"],"mappings":";AAYO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,GACZU,IAAgE;AAAA,IACpE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EAAA,GAEHC,IAAoE;AAAA,IACxE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,EAAA,GAEPC,IAAkE;AAAA,IACtE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,GAEHC,IAAgBT,IAClB,2IACA,IACEU,IAAgB;AAAA,IACpB;AAAA,IACAJ,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBQ;AAAA,IACAN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWK,GAAgB,GAAGN,GACtC,UAAAF,GACH;AAEJ;"}
+{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextWeight, weightClass } from '../Typography/weight';\n\nexport interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  align?: 'left' | 'center' | 'right';\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  children: React.ReactNode;\n  /** `heading`: Verde Escuro (padrão). `default`: cor de texto. `inherit`: herda do pai. */\n  color?: 'heading' | 'default' | 'inherit';\n  italic?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\n  /** Padrão: semibold (Seminegrito, brand book). */\n  weight?: TextWeight;\n}\n\nconst SIZE_CLASS: Record<NonNullable<TitleProps['size']>, string> = {\n  xs: 'text-sm',\n  sm: 'text-base',\n  md: 'text-lg',\n  lg: 'text-xl',\n  xl: 'text-2xl',\n  '2xl': 'text-[2rem]',\n  '3xl': 'text-[2.5rem]',\n  '4xl': 'text-5xl',\n};\n\nconst COLOR_CLASS = {\n  heading: 'text-sbk-fg-heading',\n  default: 'text-sbk-fg',\n  inherit: 'text-inherit',\n} as const;\nconst ALIGN_CLASS = { left: 'text-left', center: 'text-center', right: 'text-right' } as const;\n\nexport const Title = ({\n  as: Tag = 'h1',\n  size = '2xl',\n  weight = 'semibold',\n  align = 'left',\n  color = 'heading',\n  italic = false,\n  children,\n  className,\n  ...props\n}: TitleProps) => (\n  <Tag\n    className={cn(\n      'm-0 font-sbk leading-tight tracking-[-0.01em] text-balance',\n      SIZE_CLASS[size],\n      weightClass(weight),\n      COLOR_CLASS[color],\n      ALIGN_CLASS[align],\n      italic && 'italic',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </Tag>\n);\n\nTitle.displayName = 'Title';\n"],"names":["SIZE_CLASS","COLOR_CLASS","ALIGN_CLASS","Title","Tag","size","weight","align","color","italic","children","className","props","jsx","cn","weightClass"],"mappings":";;;AAgBA,MAAMA,IAA8D;AAAA,EAClE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT,GAEMC,IAAc;AAAA,EAClB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX,GACMC,IAAc,EAAE,MAAM,aAAa,QAAQ,eAAe,OAAO,aAAA,GAE1DC,IAAQ,CAAC;AAAA,EACpB,IAAIC,IAAM;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACT;AAAA,EAAA;AAAA,IACC,WAAWU;AAAA,MACT;AAAA,MACAd,EAAWK,CAAI;AAAA,MACfU,EAAYT,CAAM;AAAA,MAClBL,EAAYO,CAAK;AAAA,MACjBN,EAAYK,CAAK;AAAA,MACjBE,KAAU;AAAA,MACVE;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAAF;AAAA,EAAA;AACH;AAGFP,EAAM,cAAc;"}

package/dist/components/Toast/Toast.d.ts

@@ -1,26 +1,54 @@
 import type React from 'react';
+export type ToastTone = 'info' | 'success' | 'warning' | 'error';
 export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    id?: string;
+    /** Ação opcional (ex.: "Desfazer"). */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
     description?: React.ReactNode;
+    /** Tempo até fechar (ms). 0 mantém aberto. Sobrescreve o padrão do provider. */
+    durationMs?: number;
+    id?: string;
     onDismiss?: () => void;
     title: React.ReactNode;
-    tone?: 'info' | 'success' | 'warning' | 'error';
+    tone?: ToastTone;
+    variant?: 'default' | 'glass';
 }
-export declare const Toast: React.FC<ToastProps>;
+export declare const Toast: {
+    ({ tone, variant, title, description, action, onDismiss, durationMs: _durationMs, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type ToastInput = Omit<ToastProps, 'id'> & {
+    id?: string;
+};
+type ToastItem = ToastProps & {
+    id: string;
+};
 interface ToastContextValue {
     dismissToast: (id: string) => void;
-    pushToast: (toast: Omit<ToastProps, 'id'> & {
-        id?: string;
-    }) => void;
-    toasts: Array<ToastProps & {
-        id: string;
-    }>;
+    /** Adiciona um toast e retorna o id. */
+    pushToast: (toast: ToastInput) => string;
+    toasts: ToastItem[];
 }
+export type ToastPosition = 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center' | 'bottom-left';
 export interface ToastProviderProps {
     children: React.ReactNode;
+    /** Duração padrão (ms). Padrão: 5000. */
     durationMs?: number;
+    /** Quantidade máxima visível; os mais antigos saem primeiro. Padrão: 4. */
+    max?: number;
+    position?: ToastPosition;
 }
-export declare const ToastProvider: React.FC<ToastProviderProps>;
+export declare const ToastProvider: ({ children, durationMs, max, position, }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useToast: () => ToastContextValue;
-export declare const ToastViewport: React.FC;
+export interface ToastViewportProps {
+    onPause?: () => void;
+    onResume?: () => void;
+    position?: ToastPosition;
+}
+export declare const ToastViewport: {
+    ({ position, onPause, onResume, }: ToastViewportProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 export {};