@sbkbs/ui 1.0.6 → 2.0.0

package/dist/components/Subtitle/Subtitle.js

@@ -1,40 +1,34 @@
-import { jsx as v } from "react/jsx-runtime";
-const h = ({
+import { jsx as f } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+import { weightClass as g } from "../Typography/weight.js";
+const n = { xs: "text-xs", sm: "text-sm", md: "text-base", lg: "text-lg" }, c = { left: "text-left", center: "text-center", right: "text-right" }, b = ({
   as: t = "p",
   size: e = "md",
-  weight: o = "normal",
-  align: n = "left",
-  muted: a = !1,
-  italic: s = !1,
-  children: i,
-  className: r = "",
-  ...l
-}) => {
-  const m = t, f = {
-    xs: "text-[var(--font-size-xs)]",
-    sm: "text-[var(--font-size-sm)]",
-    md: "text-[var(--font-size-base)]",
-    lg: "text-[var(--font-size-lg)]"
-  }, c = {
-    normal: "font-[var(--font-weight-normal)]",
-    medium: "font-[var(--font-weight-medium)]",
-    semibold: "font-[var(--font-weight-semibold)]"
-  }, x = {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  }, g = [
-    "m-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]",
-    f[e],
-    c[o],
-    x[n],
-    s ? "italic" : "not-italic",
-    a ? "text-[var(--text-muted)] opacity-80" : "",
-    r
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ v(m, { className: g, ...l, children: i });
-};
+  weight: s = "semibold",
+  align: l = "left",
+  muted: m = !1,
+  italic: i = !1,
+  children: x,
+  className: o,
+  ...a
+}) => /* @__PURE__ */ f(
+  t,
+  {
+    className: r(
+      "m-0 font-sbk leading-snug",
+      n[e],
+      g(s),
+      c[l],
+      m ? "text-sbk-fg-muted" : "text-sbk-fg",
+      i && "italic",
+      o
+    ),
+    ...a,
+    children: x
+  }
+);
+b.displayName = "Subtitle";
 export {
-  h as Subtitle
+  b as Subtitle
 };
 //# sourceMappingURL=Subtitle.js.map

package/dist/components/Subtitle/Subtitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Subtitle.js","sources":["../../../src/components/Subtitle/Subtitle.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface SubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  align?: 'left' | 'center' | 'right';\n  as?: 'p' | 'span' | 'div';\n  children: React.ReactNode;\n  italic?: boolean;\n  muted?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  weight?: 'normal' | 'medium' | 'semibold';\n}\n\nexport const Subtitle: React.FC<SubtitleProps> = ({\n  as = 'p',\n  size = 'md',\n  weight = 'normal',\n  align = 'left',\n  muted = false,\n  italic = false,\n  children,\n  className = '',\n  ...props\n}) => {\n  const Component = as;\n  const sizeClassMap: Record<NonNullable<SubtitleProps['size']>, string> = {\n    xs: 'text-[var(--font-size-xs)]',\n    sm: 'text-[var(--font-size-sm)]',\n    md: 'text-[var(--font-size-base)]',\n    lg: 'text-[var(--font-size-lg)]',\n  };\n  const weightClassMap: Record<NonNullable<SubtitleProps['weight']>, string> = {\n    normal: 'font-[var(--font-weight-normal)]',\n    medium: 'font-[var(--font-weight-medium)]',\n    semibold: 'font-[var(--font-weight-semibold)]',\n  };\n  const alignClassMap: Record<NonNullable<SubtitleProps['align']>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  };\n  const combinedClass = [\n    'm-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]',\n    sizeClassMap[size],\n    weightClassMap[weight],\n    alignClassMap[align],\n    italic ? 'italic' : 'not-italic',\n    muted ? 'text-[var(--text-muted)] opacity-80' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Component className={combinedClass} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["Subtitle","as","size","weight","align","muted","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","combinedClass"],"mappings":";AAYO,MAAMA,IAAoC,CAAC;AAAA,EAChD,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,GACZU,IAAmE;AAAA,IACvE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAEAC,IAAuE;AAAA,IAC3E,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA,GAENC,IAAqE;AAAA,IACzE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,GAEHC,IAAgB;AAAA,IACpB;AAAA,IACAH,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBD,IAAQ,wCAAwC;AAAA,IAChDG;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWI,GAAgB,GAAGL,GACtC,UAAAF,GACH;AAEJ;"}
+{"version":3,"file":"Subtitle.js","sources":["../../../src/components/Subtitle/Subtitle.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 SubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\r\n  align?: 'left' | 'center' | 'right';\r\n  as?: 'p' | 'span' | 'div' | 'h2' | 'h3' | 'h4';\r\n  children: React.ReactNode;\r\n  italic?: boolean;\r\n  /** Cor secundária (Chumbo Leve). */\r\n  muted?: boolean;\r\n  size?: 'xs' | 'sm' | 'md' | 'lg';\r\n  /** Padrão: semibold (brand book: subtítulos em Seminegrito). */\r\n  weight?: TextWeight;\r\n}\r\n\r\nconst SIZE_CLASS = { xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg' } as const;\r\nconst ALIGN_CLASS = { left: 'text-left', center: 'text-center', right: 'text-right' } as const;\r\n\r\nexport const Subtitle = ({\r\n  as: Tag = 'p',\r\n  size = 'md',\r\n  weight = 'semibold',\r\n  align = 'left',\r\n  muted = false,\r\n  italic = false,\r\n  children,\r\n  className,\r\n  ...props\r\n}: SubtitleProps) => (\r\n  <Tag\r\n    className={cn(\r\n      'm-0 font-sbk leading-snug',\r\n      SIZE_CLASS[size],\r\n      weightClass(weight),\r\n      ALIGN_CLASS[align],\r\n      muted ? 'text-sbk-fg-muted' : 'text-sbk-fg',\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\nSubtitle.displayName = 'Subtitle';\r\n"],"names":["SIZE_CLASS","ALIGN_CLASS","Subtitle","Tag","size","weight","align","muted","italic","children","className","props","jsx","cn","weightClass"],"mappings":";;;AAgBA,MAAMA,IAAa,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,aAAa,IAAI,UAAA,GAClEC,IAAc,EAAE,MAAM,aAAa,QAAQ,eAAe,OAAO,aAAA,GAE1DC,IAAW,CAAC;AAAA,EACvB,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,MACAb,EAAWI,CAAI;AAAA,MACfU,EAAYT,CAAM;AAAA,MAClBJ,EAAYK,CAAK;AAAA,MACjBC,IAAQ,sBAAsB;AAAA,MAC9BC,KAAU;AAAA,MACVE;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAAF;AAAA,EAAA;AACH;AAGFP,EAAS,cAAc;"}

package/dist/components/Switch/Switch.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
     checked?: boolean;
-    label?: string;
+    label?: React.ReactNode;
     onCheckedChange?: (checked: boolean) => void;
+    size?: 'sm' | 'md';
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch/Switch.js

@@ -1,37 +1,49 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import m from "react";
-import { cn as s } from "../../utils/cn.js";
-const f = m.forwardRef(
-  ({ checked: r = !1, onCheckedChange: i, label: e, className: a, ...o }, l) => /* @__PURE__ */ n("div", { className: s("inline-flex items-center gap-2", a), children: [
-    /* @__PURE__ */ t(
-      "button",
-      {
-        ref: l,
-        "aria-checked": r,
-        className: s(
-          "relative inline-flex h-6 w-11 items-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]",
-          r ? "border-[var(--md-primary)] bg-[var(--md-primary)]" : "border-[var(--md-outline)] bg-[var(--md-surface-container-high)]"
-        ),
-        onClick: () => i == null ? void 0 : i(!r),
-        role: "switch",
-        type: "button",
-        ...o,
-        children: /* @__PURE__ */ t(
-          "span",
-          {
-            className: s(
-              "inline-block h-5 w-5 rounded-full bg-[var(--md-surface)] shadow transition",
-              r ? "translate-x-5" : "translate-x-0.5"
-            )
-          }
-        )
-      }
-    ),
-    e && /* @__PURE__ */ t("span", { className: "text-sm text-[var(--text-primary)]", children: e })
-  ] })
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import f, { useId as p } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { focusRing as x, transitionColors as w, buttonReset as N } from "../../utils/styles.js";
+const k = { sm: "h-5 w-9", md: "h-6 w-11" }, y = { sm: "size-4", md: "size-5" }, R = { sm: "translate-x-4", md: "translate-x-5" }, g = f.forwardRef(
+  ({ checked: r = !1, onCheckedChange: t, label: n, size: s = "md", className: l, id: m, disabled: e, ...c }, d) => {
+    const u = p(), a = m ?? u;
+    return /* @__PURE__ */ b("div", { className: i("inline-flex items-center gap-2", e && "opacity-60", l), children: [
+      /* @__PURE__ */ o(
+        "button",
+        {
+          ref: d,
+          "aria-checked": r,
+          className: i(
+            N,
+            "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border disabled:cursor-not-allowed",
+            k[s],
+            w,
+            x,
+            r ? "border-sbk-primary bg-sbk-primary" : "border-sbk-line-strong bg-sbk-surface-sunken"
+          ),
+          disabled: e,
+          id: a,
+          onClick: () => t == null ? void 0 : t(!r),
+          role: "switch",
+          type: "button",
+          ...c,
+          children: /* @__PURE__ */ o(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: i(
+                "inline-block rounded-full bg-sbk-branco shadow-sbk-sm transition-transform duration-150 motion-reduce:transition-none",
+                y[s],
+                r ? R[s] : "translate-x-0.5"
+              )
+            }
+          )
+        }
+      ),
+      n && /* @__PURE__ */ o("label", { className: "cursor-pointer text-sm font-light text-sbk-fg", htmlFor: a, children: n })
+    ] });
+  }
 );
-f.displayName = "Switch";
+g.displayName = "Switch";
 export {
-  f as Switch
+  g as Switch
 };
 //# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SwitchProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> {\n  checked?: boolean;\n  label?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ checked = false, onCheckedChange, label, className, ...props }, ref) => {\n    return (\n      <div className={cn('inline-flex items-center gap-2', className)}>\n        <button\n          ref={ref}\n          aria-checked={checked}\n          className={cn(\n            'relative inline-flex h-6 w-11 items-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]',\n            checked\n              ? 'border-[var(--md-primary)] bg-[var(--md-primary)]'\n              : 'border-[var(--md-outline)] bg-[var(--md-surface-container-high)]',\n          )}\n          onClick={() => onCheckedChange?.(!checked)}\n          role=\"switch\"\n          type=\"button\"\n          {...props}\n        >\n          <span\n            className={cn(\n              'inline-block h-5 w-5 rounded-full bg-[var(--md-surface)] shadow transition',\n              checked ? 'translate-x-5' : 'translate-x-0.5',\n            )}\n          />\n        </button>\n        {label && <span className=\"text-sm text-[var(--text-primary)]\">{label}</span>}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["Switch","React","checked","onCheckedChange","label","className","props","ref","cn","jsx"],"mappings":";;;AAYO,MAAMA,IAASC,EAAM;AAAA,EAC1B,CAAC,EAAE,SAAAC,IAAU,IAAO,iBAAAC,GAAiB,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAASC,wBAE9D,OAAA,EAAI,WAAWC,EAAG,kCAAkCH,CAAS,GAC5D,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,gBAAcL;AAAA,QACd,WAAWM;AAAA,UACT;AAAA,UACAN,IACI,sDACA;AAAA,QAAA;AAAA,QAEN,SAAS,MAAMC,KAAA,gBAAAA,EAAkB,CAACD;AAAA,QAClC,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,GAAGI;AAAA,QAEJ,UAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAN,IAAU,kBAAkB;AAAA,YAAA;AAAA,UAC9B;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEDE,KAAS,gBAAAK,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAL,EAAA,CAAM;AAAA,EAAA,GACxE;AAGN;AAEAJ,EAAO,cAAc;"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { useId } from 'react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\r\n\r\nexport interface SwitchProps extends Omit<\r\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n  'onChange'\r\n> {\r\n  checked?: boolean;\r\n  label?: React.ReactNode;\r\n  onCheckedChange?: (checked: boolean) => void;\r\n  size?: 'sm' | 'md';\r\n}\r\n\r\nconst TRACK = { sm: 'h-5 w-9', md: 'h-6 w-11' } as const;\r\nconst THUMB = { sm: 'size-4', md: 'size-5' } as const;\r\nconst THUMB_ON = { sm: 'translate-x-4', md: 'translate-x-5' } as const;\r\n\r\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\r\n  (\r\n    { checked = false, onCheckedChange, label, size = 'md', className, id, disabled, ...props },\r\n    ref,\r\n  ) => {\r\n    const autoId = useId();\r\n    const switchId = id ?? autoId;\r\n\r\n    return (\r\n      <div className={cn('inline-flex items-center gap-2', disabled && 'opacity-60', className)}>\r\n        <button\r\n          ref={ref}\r\n          aria-checked={checked}\r\n          className={cn(\r\n            buttonReset,\r\n            'relative inline-flex shrink-0 cursor-pointer items-center rounded-full border disabled:cursor-not-allowed',\r\n            TRACK[size],\r\n            transitionColors,\r\n            focusRing,\r\n            checked\r\n              ? 'border-sbk-primary bg-sbk-primary'\r\n              : 'border-sbk-line-strong bg-sbk-surface-sunken',\r\n          )}\r\n          disabled={disabled}\r\n          id={switchId}\r\n          onClick={() => onCheckedChange?.(!checked)}\r\n          role=\"switch\"\r\n          type=\"button\"\r\n          {...props}\r\n        >\r\n          <span\r\n            aria-hidden=\"true\"\r\n            className={cn(\r\n              'inline-block rounded-full bg-sbk-branco shadow-sbk-sm transition-transform duration-150 motion-reduce:transition-none',\r\n              THUMB[size],\r\n              checked ? THUMB_ON[size] : 'translate-x-0.5',\r\n            )}\r\n          />\r\n        </button>\r\n        {label && (\r\n          <label className=\"cursor-pointer text-sm font-light text-sbk-fg\" htmlFor={switchId}>\r\n            {label}\r\n          </label>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nSwitch.displayName = 'Switch';\r\n"],"names":["TRACK","THUMB","THUMB_ON","Switch","React","checked","onCheckedChange","label","size","className","id","disabled","props","ref","autoId","useId","switchId","jsxs","cn","jsx","buttonReset","transitionColors","focusRing"],"mappings":";;;;AAcA,MAAMA,IAAQ,EAAE,IAAI,WAAW,IAAI,WAAA,GAC7BC,IAAQ,EAAE,IAAI,UAAU,IAAI,SAAA,GAC5BC,IAAW,EAAE,IAAI,iBAAiB,IAAI,gBAAA,GAE/BC,IAASC,EAAM;AAAA,EAC1B,CACE,EAAE,SAAAC,IAAU,IAAO,iBAAAC,GAAiB,OAAAC,GAAO,MAAAC,IAAO,MAAM,WAAAC,GAAW,IAAAC,GAAI,UAAAC,GAAU,GAAGC,EAAA,GACpFC,MACG;AACH,UAAMC,IAASC,EAAA,GACTC,IAAWN,KAAMI;AAEvB,WACE,gBAAAG,EAAC,SAAI,WAAWC,EAAG,kCAAkCP,KAAY,cAAcF,CAAS,GACtF,UAAA;AAAA,MAAA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAN;AAAA,UACA,gBAAcR;AAAA,UACd,WAAWa;AAAA,YACTE;AAAA,YACA;AAAA,YACApB,EAAMQ,CAAI;AAAA,YACVa;AAAA,YACAC;AAAA,YACAjB,IACI,sCACA;AAAA,UAAA;AAAA,UAEN,UAAAM;AAAA,UACA,IAAIK;AAAA,UACJ,SAAS,MAAMV,KAAA,gBAAAA,EAAkB,CAACD;AAAA,UAClC,MAAK;AAAA,UACL,MAAK;AAAA,UACJ,GAAGO;AAAA,UAEJ,UAAA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAWD;AAAA,gBACT;AAAA,gBACAjB,EAAMO,CAAI;AAAA,gBACVH,IAAUH,EAASM,CAAI,IAAI;AAAA,cAAA;AAAA,YAC7B;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDD,KACC,gBAAAY,EAAC,SAAA,EAAM,WAAU,iDAAgD,SAASH,GACvE,UAAAT,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEAJ,EAAO,cAAc;"}

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,22 @@
 import type React from 'react';
 export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Legenda da tabela (visível ou apenas para leitores de tela com `captionHidden`). */
+    caption?: React.ReactNode;
+    captionHidden?: boolean;
+    /** Linhas mais baixas. */
+    dense?: boolean;
+    /** Realce de hover nas linhas do corpo. Padrão: true. */
+    hoverable?: boolean;
+    /** Linhas zebradas. */
+    striped?: boolean;
+    /** Classe do container com rolagem horizontal. */
+    wrapperClassName?: string;
 }
-export declare const Table: React.FC<TableProps>;
+/**
+ * Tabela estilizada. Use <thead>/<tbody> com <th scope="col"> normalmente;
+ * o estilo das células é aplicado pelo componente.
+ */
+export declare const Table: {
+    ({ caption, captionHidden, dense, hoverable, striped, className, wrapperClassName, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Table/Table.js

@@ -1,17 +1,54 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as d } from "../../utils/cn.js";
-const b = ({ className: e, children: o, ...a }) => /* @__PURE__ */ r("div", { className: "overflow-x-auto rounded-[var(--border-radius-md)] border border-[var(--border-color)]", children: /* @__PURE__ */ r(
-  "table",
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
+const f = ({
+  caption: e,
+  captionHidden: r = !1,
+  dense: d = !1,
+  hoverable: l = !0,
+  striped: b = !1,
+  className: o,
+  wrapperClassName: a,
+  children: n,
+  ..._
+}) => /* @__PURE__ */ s(
+  "div",
   {
-    className: d(
-      "w-full min-w-[36rem] border-collapse bg-[var(--bg-secondary)] text-left",
-      e
+    className: t(
+      "overflow-x-auto rounded-sbk-sm border border-sbk-line bg-sbk-surface",
+      a
     ),
-    ...a,
-    children: o
+    children: /* @__PURE__ */ h(
+      "table",
+      {
+        className: t(
+          "w-full border-collapse text-left text-sm text-sbk-fg",
+          "[&_th]:bg-sbk-surface-sunken [&_th]:font-semibold [&_th]:text-sbk-fg-heading [&_th]:text-xs [&_th]:uppercase [&_th]:tracking-wide",
+          "[&_td]:font-light [&_td]:border-t [&_td]:border-sbk-line",
+          d ? "[&_td]:px-3 [&_td]:py-2 [&_th]:px-3 [&_th]:py-2" : "[&_td]:px-4 [&_td]:py-3 [&_th]:px-4 [&_th]:py-3",
+          l && "[&_tbody_tr:hover]:bg-sbk-surface-hover",
+          b && "[&_tbody_tr:nth-child(even)]:bg-sbk-surface-sunken",
+          o
+        ),
+        ..._,
+        children: [
+          e && /* @__PURE__ */ s(
+            "caption",
+            {
+              className: t(
+                "px-4 py-3 text-left text-sm font-semibold text-sbk-fg-heading",
+                r && "sr-only"
+              ),
+              children: e
+            }
+          ),
+          n
+        ]
+      }
+    )
   }
-) });
+);
+f.displayName = "Table";
 export {
-  b as Table
+  f as Table
 };
 //# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const Table: React.FC<TableProps> = ({ className, children, ...props }) => {\n  return (\n    <div className=\"overflow-x-auto rounded-[var(--border-radius-md)] border border-[var(--border-color)]\">\n      <table\n        className={cn(\n          'w-full min-w-[36rem] border-collapse bg-[var(--bg-secondary)] text-left',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </table>\n    </div>\n  );\n};\n"],"names":["Table","className","children","props","jsx","cn"],"mappings":";;AAKO,MAAMA,IAA8B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QAElE,gBAAAC,EAAC,OAAA,EAAI,WAAU,yFACb,UAAA,gBAAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA,GAEL;"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\r\n  /** Legenda da tabela (visível ou apenas para leitores de tela com `captionHidden`). */\r\n  caption?: React.ReactNode;\r\n  captionHidden?: boolean;\r\n  /** Linhas mais baixas. */\r\n  dense?: boolean;\r\n  /** Realce de hover nas linhas do corpo. Padrão: true. */\r\n  hoverable?: boolean;\r\n  /** Linhas zebradas. */\r\n  striped?: boolean;\r\n  /** Classe do container com rolagem horizontal. */\r\n  wrapperClassName?: string;\r\n}\r\n\r\n/**\r\n * Tabela estilizada. Use <thead>/<tbody> com <th scope=\"col\"> normalmente;\r\n * o estilo das células é aplicado pelo componente.\r\n */\r\nexport const Table = ({\r\n  caption,\r\n  captionHidden = false,\r\n  dense = false,\r\n  hoverable = true,\r\n  striped = false,\r\n  className,\r\n  wrapperClassName,\r\n  children,\r\n  ...props\r\n}: TableProps) => (\r\n  <div\r\n    className={cn(\r\n      'overflow-x-auto rounded-sbk-sm border border-sbk-line bg-sbk-surface',\r\n      wrapperClassName,\r\n    )}\r\n  >\r\n    <table\r\n      className={cn(\r\n        'w-full border-collapse text-left text-sm text-sbk-fg',\r\n        '[&_th]:bg-sbk-surface-sunken [&_th]:font-semibold [&_th]:text-sbk-fg-heading [&_th]:text-xs [&_th]:uppercase [&_th]:tracking-wide',\r\n        '[&_td]:font-light [&_td]:border-t [&_td]:border-sbk-line',\r\n        dense\r\n          ? '[&_td]:px-3 [&_td]:py-2 [&_th]:px-3 [&_th]:py-2'\r\n          : '[&_td]:px-4 [&_td]:py-3 [&_th]:px-4 [&_th]:py-3',\r\n        hoverable && '[&_tbody_tr:hover]:bg-sbk-surface-hover',\r\n        striped && '[&_tbody_tr:nth-child(even)]:bg-sbk-surface-sunken',\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {caption && (\r\n        <caption\r\n          className={cn(\r\n            'px-4 py-3 text-left text-sm font-semibold text-sbk-fg-heading',\r\n            captionHidden && 'sr-only',\r\n          )}\r\n        >\r\n          {caption}\r\n        </caption>\r\n      )}\r\n      {children}\r\n    </table>\r\n  </div>\r\n);\r\n\r\nTable.displayName = 'Table';\r\n"],"names":["Table","caption","captionHidden","dense","hoverable","striped","className","wrapperClassName","children","props","jsx","cn","jsxs"],"mappings":";;AAqBO,MAAMA,IAAQ,CAAC;AAAA,EACpB,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAGF,UAAA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACAR,IACI,oDACA;AAAA,UACJC,KAAa;AAAA,UACbC,KAAW;AAAA,UACXC;AAAA,QAAA;AAAA,QAED,GAAGG;AAAA,QAEH,UAAA;AAAA,UAAAR,KACC,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACT;AAAA,gBACAT,KAAiB;AAAA,cAAA;AAAA,cAGlB,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGFR,EAAM,cAAc;"}

package/dist/components/Tabs/Tabs.d.ts

@@ -1,11 +1,25 @@
 import type React from 'react';
 export interface TabItem {
     content: React.ReactNode;
+    disabled?: boolean;
+    icon?: React.ReactNode;
     id: string;
-    label: string;
+    label: React.ReactNode;
 }
 export interface TabsProps {
+    /** Rótulo acessível da lista de abas. */
+    'aria-label'?: string;
+    className?: string;
     defaultTabId?: string;
     items: TabItem[];
+    onTabChange?: (id: string) => void;
+    /** Aba ativa controlada externamente. */
+    tabId?: string;
+    /** `pill`: segmentado. `line`: sublinhado. Padrão: pill. */
+    variant?: 'pill' | 'line';
 }
-export declare const Tabs: React.FC<TabsProps>;
+/** Abas (padrão ARIA tabs com ativação automática): setas, Home e End. */
+export declare const Tabs: {
+    ({ items, defaultTabId, tabId, onTabChange, variant, className, "aria-label": ariaLabel, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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';\r\nimport { useId, useRef, useState } from 'react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, transitionColors } from '../../utils/styles';\r\n\r\nexport interface TabItem {\r\n  content: React.ReactNode;\r\n  disabled?: boolean;\r\n  icon?: React.ReactNode;\r\n  id: string;\r\n  label: React.ReactNode;\r\n}\r\n\r\nexport interface TabsProps {\r\n  /** Rótulo acessível da lista de abas. */\r\n  'aria-label'?: string;\r\n  className?: string;\r\n  defaultTabId?: string;\r\n  items: TabItem[];\r\n  onTabChange?: (id: string) => void;\r\n  /** Aba ativa controlada externamente. */\r\n  tabId?: string;\r\n  /** `pill`: segmentado. `line`: sublinhado. Padrão: pill. */\r\n  variant?: 'pill' | 'line';\r\n}\r\n\r\nconst TAB_VARIANT = {\r\n  pill: {\r\n    list: 'inline-flex flex-wrap gap-1 rounded-sbk-sm bg-sbk-surface-sunken p-1',\r\n    tab: 'rounded-sbk-xs px-3 py-1.5',\r\n    active: 'bg-sbk-surface text-sbk-fg-heading shadow-sbk-sm',\r\n    idle: 'text-sbk-fg-muted hover:text-sbk-fg',\r\n  },\r\n  line: {\r\n    list: 'flex flex-wrap gap-4 border-b border-sbk-line',\r\n    tab: '-mb-px border-b-2 px-1 py-2.5',\r\n    active: 'border-sbk-primary text-sbk-fg-heading',\r\n    idle: 'border-transparent text-sbk-fg-muted hover:border-sbk-line-strong hover:text-sbk-fg',\r\n  },\r\n} as const;\r\n\r\n/** Abas (padrão ARIA tabs com ativação automática): setas, Home e End. */\r\nexport const Tabs = ({\r\n  items,\r\n  defaultTabId,\r\n  tabId,\r\n  onTabChange,\r\n  variant = 'pill',\r\n  className,\r\n  'aria-label': ariaLabel,\r\n}: TabsProps) => {\r\n  const [internal, setInternal] = useState(defaultTabId ?? items.find((i) => !i.disabled)?.id);\r\n  const activeId = tabId ?? internal;\r\n  const baseId = useId();\r\n  const listRef = useRef<HTMLDivElement>(null);\r\n  const selected = items.find((item) => item.id === activeId) ?? items[0];\r\n  const styles = TAB_VARIANT[variant];\r\n\r\n  const select = (id: string) => {\r\n    if (tabId === undefined) setInternal(id);\r\n    onTabChange?.(id);\r\n  };\r\n\r\n  const onKeyDown = (e: React.KeyboardEvent, index: number) => {\r\n    const enabled = items.map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0);\r\n    const pos = enabled.indexOf(index);\r\n    const next: Record<string, number | undefined> = {\r\n      ArrowRight: enabled[(pos + 1) % enabled.length],\r\n      ArrowLeft: enabled[(pos - 1 + enabled.length) % enabled.length],\r\n      Home: enabled[0],\r\n      End: enabled[enabled.length - 1],\r\n    };\r\n    const target = next[e.key];\r\n    if (target === undefined) return;\r\n    e.preventDefault();\r\n    select(items[target].id);\r\n    listRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')[target]?.focus();\r\n  };\r\n\r\n  return (\r\n    <div className={cn('grid gap-3', className)}>\r\n      <div\r\n        ref={listRef}\r\n        aria-label={ariaLabel}\r\n        aria-orientation=\"horizontal\"\r\n        className={styles.list}\r\n        role=\"tablist\"\r\n      >\r\n        {items.map((item, index) => {\r\n          const isActive = item.id === selected?.id;\r\n          return (\r\n            <button\r\n              key={item.id}\r\n              aria-controls={`${baseId}-panel-${item.id}`}\r\n              aria-selected={isActive}\r\n              className={cn(\r\n                buttonReset,\r\n                'inline-flex cursor-pointer items-center gap-2 text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4',\r\n                'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid',\r\n                transitionColors,\r\n                styles.tab,\r\n                isActive ? styles.active : styles.idle,\r\n              )}\r\n              disabled={item.disabled}\r\n              id={`${baseId}-tab-${item.id}`}\r\n              onClick={() => select(item.id)}\r\n              onKeyDown={(e) => onKeyDown(e, index)}\r\n              role=\"tab\"\r\n              tabIndex={isActive ? 0 : -1}\r\n              type=\"button\"\r\n            >\r\n              {item.icon && (\r\n                <span aria-hidden=\"true\" className=\"inline-flex\">\r\n                  {item.icon}\r\n                </span>\r\n              )}\r\n              {item.label}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n      {selected && (\r\n        <div\r\n          aria-labelledby={`${baseId}-tab-${selected.id}`}\r\n          className=\"rounded-sbk-sm font-light text-sbk-fg focus-visible:outline-2 focus-visible:outline-sbk-focus focus-visible:outline-solid\"\r\n          id={`${baseId}-panel-${selected.id}`}\r\n          role=\"tabpanel\"\r\n          tabIndex={0}\r\n        >\r\n          {selected.content}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nTabs.displayName = 'Tabs';\r\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