@sbkbs/ui 1.0.6 → 2.0.0

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';\r\nimport { X } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, focusRing } from '../../utils/styles';\r\n\r\nexport interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  icon?: React.ReactNode;\r\n  onRemove?: () => void;\r\n  /** Rótulo acessível do botão de remover. Padrão: \"Remover\". */\r\n  removeLabel?: string;\r\n}\r\n\r\n/** Etiqueta de metadado, opcionalmente removível. */\r\nexport const Tag = ({\r\n  className,\r\n  children,\r\n  icon,\r\n  onRemove,\r\n  removeLabel = 'Remover',\r\n  ...props\r\n}: TagProps) => (\r\n  <span\r\n    className={cn(\r\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',\r\n      className,\r\n    )}\r\n    {...props}\r\n  >\r\n    {icon && (\r\n      <span aria-hidden=\"true\" className=\"inline-flex text-sbk-fg-muted\">\r\n        {icon}\r\n      </span>\r\n    )}\r\n    {children}\r\n    {onRemove && (\r\n      <button\r\n        aria-label={typeof children === 'string' ? `${removeLabel} ${children}` : removeLabel}\r\n        className={cn(\r\n          buttonReset,\r\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',\r\n          focusRing,\r\n        )}\r\n        onClick={onRemove}\r\n        type=\"button\"\r\n      >\r\n        <X aria-hidden=\"true\" />\r\n      </button>\r\n    )}\r\n  </span>\r\n);\r\n\r\nTag.displayName = 'Tag';\r\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';\r\nimport { cn } from '../../utils/cn';\r\nimport { describedBy, fieldControl } from '../../utils/styles';\r\nimport { Field } from '../Field/Field';\r\n\r\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\r\n  error?: string;\r\n  helperText?: string;\r\n  label?: React.ReactNode;\r\n  /** Permite redimensionar verticalmente. Padrão: true. */\r\n  resizable?: boolean;\r\n}\r\n\r\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n  ({ label, helperText, error, resizable = true, className, id, required, ...props }, ref) => {\r\n    const autoId = useId();\r\n    const textareaId = id ?? autoId;\r\n\r\n    return (\r\n      <Field\r\n        error={error}\r\n        helperText={helperText}\r\n        id={textareaId}\r\n        label={label}\r\n        required={required}\r\n      >\r\n        <textarea\r\n          ref={ref}\r\n          aria-describedby={describedBy(textareaId, error, helperText)}\r\n          aria-invalid={error ? true : undefined}\r\n          className={cn(\r\n            fieldControl,\r\n            'min-h-24 px-3.5 py-2 text-base',\r\n            resizable ? 'resize-y' : 'resize-none',\r\n            className,\r\n          )}\r\n          id={textareaId}\r\n          required={required}\r\n          {...props}\r\n        />\r\n      </Field>\r\n    );\r\n  },\r\n);\r\n\r\nTextarea.displayName = 'Textarea';\r\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';\r\nimport { cn } from '../../utils/cn';\r\nimport { type TextWeight, weightClass } from '../Typography/weight';\r\n\r\nexport interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\r\n  align?: 'left' | 'center' | 'right';\r\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\r\n  children: React.ReactNode;\r\n  /** `heading`: Verde Escuro (padrão). `default`: cor de texto. `inherit`: herda do pai. */\r\n  color?: 'heading' | 'default' | 'inherit';\r\n  italic?: boolean;\r\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\r\n  /** Padrão: semibold (Seminegrito, brand book). */\r\n  weight?: TextWeight;\r\n}\r\n\r\nconst SIZE_CLASS: Record<NonNullable<TitleProps['size']>, string> = {\r\n  xs: 'text-sm',\r\n  sm: 'text-base',\r\n  md: 'text-lg',\r\n  lg: 'text-xl',\r\n  xl: 'text-2xl',\r\n  '2xl': 'text-[2rem]',\r\n  '3xl': 'text-[2.5rem]',\r\n  '4xl': 'text-5xl',\r\n};\r\n\r\nconst COLOR_CLASS = {\r\n  heading: 'text-sbk-fg-heading',\r\n  default: 'text-sbk-fg',\r\n  inherit: 'text-inherit',\r\n} as const;\r\nconst ALIGN_CLASS = { left: 'text-left', center: 'text-center', right: 'text-right' } as const;\r\n\r\nexport const Title = ({\r\n  as: Tag = 'h1',\r\n  size = '2xl',\r\n  weight = 'semibold',\r\n  align = 'left',\r\n  color = 'heading',\r\n  italic = false,\r\n  children,\r\n  className,\r\n  ...props\r\n}: TitleProps) => (\r\n  <Tag\r\n    className={cn(\r\n      'm-0 font-sbk leading-tight tracking-[-0.01em] text-balance',\r\n      SIZE_CLASS[size],\r\n      weightClass(weight),\r\n      COLOR_CLASS[color],\r\n      ALIGN_CLASS[align],\r\n      italic && 'italic',\r\n      className,\r\n    )}\r\n    {...props}\r\n  >\r\n    {children}\r\n  </Tag>\r\n);\r\n\r\nTitle.displayName = 'Title';\r\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 {};

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