@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Stepper/Stepper.js

@@ -1,86 +1,99 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { cn as a } from "../../utils/cn.js";
-const f = ({
-  items: n,
-  currentStep: o,
-  orientation: m = "horizontal",
-  className: c,
-  ...p
+import { jsx as t, jsxs as n, Fragment as u } from "react/jsx-runtime";
+import { Check as x } from "lucide-react";
+import { cn as r } from "../../utils/cn.js";
+const g = ({
+  items: o,
+  currentStep: m,
+  orientation: f = "horizontal",
+  className: p,
+  ...b
 }) => {
-  const s = n.findIndex((e) => e.id === o), v = (e) => e < s ? "completed" : e === s ? "active" : "pending", i = m === "horizontal";
-  return /* @__PURE__ */ r(
+  const l = o.findIndex((e) => e.id === m), a = f === "horizontal", h = (e) => e < l ? "completed" : e === l ? "active" : "pending", c = (e) => e ? "bg-sbk-primary" : "bg-sbk-line-strong";
+  return /* @__PURE__ */ t(
     "div",
     {
       "aria-label": "Progresso",
-      className: a(i ? "flex items-start" : "flex flex-col", c),
+      className: r(a ? "flex items-start" : "flex flex-col", p),
       role: "list",
-      ...p,
-      children: n.map((e, l) => {
-        const t = v(l), x = l === n.length - 1;
-        return /* @__PURE__ */ d(
+      ...b,
+      children: o.map((e, i) => {
+        const s = h(i), d = i === o.length - 1;
+        return /* @__PURE__ */ n(
           "div",
           {
-            className: a("flex", i ? "flex-1 flex-col items-center" : "gap-4"),
+            className: r("flex", a ? "flex-1 flex-col items-center" : "gap-4"),
             role: "listitem",
             children: [
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ n(
                 "div",
                 {
-                  className: a(
-                    i ? "flex w-full items-center" : "flex flex-col items-center"
+                  className: r(
+                    a ? "flex w-full items-center" : "flex flex-col items-center"
                   ),
                   children: [
-                    /* @__PURE__ */ r(
+                    a && /* Conector esquerdo: espaçador no 1º item, linha colorida nos demais */
+                    (i === 0 ? /* @__PURE__ */ t("div", { className: "flex-1", "aria-hidden": "true" }) : /* @__PURE__ */ t(
                       "div",
                       {
-                        "aria-current": t === "active" ? "step" : void 0,
-                        className: a(
-                          "relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition",
-                          t === "completed" && "border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]",
-                          t === "active" && "border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]",
-                          t === "pending" && "border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]"
-                        ),
-                        children: t === "completed" ? /* @__PURE__ */ r(
-                          "svg",
-                          {
-                            className: "h-4 w-4",
-                            fill: "none",
-                            stroke: "currentColor",
-                            strokeWidth: "2.5",
-                            viewBox: "0 0 24 24",
-                            children: /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" })
-                          }
-                        ) : l + 1
+                        "aria-hidden": "true",
+                        className: r("h-0.5 flex-1", c(i <= l))
                       }
-                    ),
-                    !x && /* @__PURE__ */ r(
+                    )),
+                    /* @__PURE__ */ t(
                       "div",
                       {
-                        className: a(
-                          "transition",
-                          i ? "h-0.5 flex-1" : "my-1 ml-[1.0625rem] w-0.5 flex-1",
-                          l < s ? "bg-[var(--md-primary)]" : "bg-[var(--md-outline-variant)]"
+                        "aria-current": s === "active" ? "step" : void 0,
+                        className: r(
+                          "relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors motion-reduce:transition-none",
+                          s === "completed" && "border-sbk-primary bg-sbk-primary text-sbk-on-primary",
+                          s === "active" && "border-sbk-primary bg-sbk-surface text-sbk-primary",
+                          s === "pending" && "border-sbk-line-strong bg-sbk-surface text-sbk-fg-muted"
                         ),
-                        "aria-hidden": "true"
+                        children: s === "completed" ? /* @__PURE__ */ n(u, { children: [
+                          /* @__PURE__ */ t(x, { "aria-hidden": "true", className: "size-4", strokeWidth: 2.5 }),
+                          /* @__PURE__ */ t("span", { className: "sr-only", children: "Concluído: " })
+                        ] }) : i + 1
                       }
+                    ),
+                    a ? (
+                      /* Conector direito: linha colorida se não for último, espaçador se for */
+                      d ? /* @__PURE__ */ t("div", { className: "flex-1", "aria-hidden": "true" }) : /* @__PURE__ */ t(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: r("h-0.5 flex-1", c(i < l))
+                        }
+                      )
+                    ) : (
+                      /* Conector vertical (para orientação vertical) */
+                      !d && /* @__PURE__ */ t(
+                        "div",
+                        {
+                          "aria-hidden": "true",
+                          className: r(
+                            "my-1 ml-[1.0625rem] w-0.5 flex-1",
+                            c(i < l)
+                          )
+                        }
+                      )
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ d("div", { className: a("mt-2 text-center", i ? "" : "mt-0 pb-6 text-left"), children: [
-                /* @__PURE__ */ r(
+              /* @__PURE__ */ n("div", { className: r("mt-2 text-center", !a && "mt-0 pb-6 text-left"), children: [
+                /* @__PURE__ */ t(
                   "p",
                   {
-                    className: a(
-                      "text-sm font-medium leading-tight",
-                      t === "active" && "text-[var(--md-primary)]",
-                      t === "completed" && "text-[var(--text-primary)]",
-                      t === "pending" && "text-[var(--text-muted)]"
+                    className: r(
+                      "m-0 text-sm font-semibold leading-tight",
+                      s === "active" && "text-sbk-fg-heading",
+                      s === "completed" && "text-sbk-fg",
+                      s === "pending" && "font-light text-sbk-fg-muted"
                     ),
                     children: e.label
                   }
                 ),
-                e.description && /* @__PURE__ */ r("p", { className: "mt-0.5 text-xs text-[var(--text-muted)]", children: e.description })
+                e.description && /* @__PURE__ */ t("p", { className: "m-0 mt-0.5 text-xs font-light text-sbk-fg-muted", children: e.description })
               ] })
             ]
           },
@@ -90,8 +103,8 @@ const f = ({
     }
   );
 };
-f.displayName = "Stepper";
+g.displayName = "Stepper";
 export {
-  f as Stepper
+  g as Stepper
 };
 //# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface StepperItem {\n  description?: string;\n  id: string;\n  label: string;\n}\n\nexport type StepStatus = 'completed' | 'active' | 'pending';\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  currentStep: string;\n  items: StepperItem[];\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Stepper: React.FC<StepperProps> = ({\n  items,\n  currentStep,\n  orientation = 'horizontal',\n  className,\n  ...props\n}) => {\n  const currentIndex = items.findIndex((item) => item.id === currentStep);\n\n  const getStatus = (index: number): StepStatus => {\n    if (index < currentIndex) return 'completed';\n    if (index === currentIndex) return 'active';\n    return 'pending';\n  };\n\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <div\n      aria-label=\"Progresso\"\n      className={cn(isHorizontal ? 'flex items-start' : 'flex flex-col', className)}\n      role=\"list\"\n      {...props}\n    >\n      {items.map((item, index) => {\n        const status = getStatus(index);\n        const isLast = index === items.length - 1;\n\n        return (\n          <div\n            key={item.id}\n            className={cn('flex', isHorizontal ? 'flex-1 flex-col items-center' : 'gap-4')}\n            role=\"listitem\"\n          >\n            {/* Step indicator + connector */}\n            <div\n              className={cn(\n                isHorizontal ? 'flex w-full items-center' : 'flex flex-col items-center',\n              )}\n            >\n              {/* Circle */}\n              <div\n                aria-current={status === 'active' ? 'step' : undefined}\n                className={cn(\n                  'relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition',\n                  status === 'completed' &&\n                    'border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]',\n                  status === 'active' &&\n                    'border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]',\n                  status === 'pending' &&\n                    'border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]',\n                )}\n              >\n                {status === 'completed' ? (\n                  <svg\n                    className=\"h-4 w-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2.5\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path d=\"M20 6 9 17l-5-5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                  </svg>\n                ) : (\n                  index + 1\n                )}\n              </div>\n\n              {/* Connector line */}\n              {!isLast && (\n                <div\n                  className={cn(\n                    'transition',\n                    isHorizontal ? 'h-0.5 flex-1' : 'my-1 ml-[1.0625rem] w-0.5 flex-1',\n                    index < currentIndex\n                      ? 'bg-[var(--md-primary)]'\n                      : 'bg-[var(--md-outline-variant)]',\n                  )}\n                  aria-hidden=\"true\"\n                />\n              )}\n            </div>\n\n            {/* Label + description */}\n            <div className={cn('mt-2 text-center', isHorizontal ? '' : 'mt-0 pb-6 text-left')}>\n              <p\n                className={cn(\n                  'text-sm font-medium leading-tight',\n                  status === 'active' && 'text-[var(--md-primary)]',\n                  status === 'completed' && 'text-[var(--text-primary)]',\n                  status === 'pending' && 'text-[var(--text-muted)]',\n                )}\n              >\n                {item.label}\n              </p>\n              {item.description && (\n                <p className=\"mt-0.5 text-xs text-[var(--text-muted)]\">{item.description}</p>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n"],"names":["Stepper","items","currentStep","orientation","className","props","currentIndex","item","getStatus","index","isHorizontal","jsx","cn","status","isLast","jsxs"],"mappings":";;AAiBO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAeL,EAAM,UAAU,CAACM,MAASA,EAAK,OAAOL,CAAW,GAEhEM,IAAY,CAACC,MACbA,IAAQH,IAAqB,cAC7BG,MAAUH,IAAqB,WAC5B,WAGHI,IAAeP,MAAgB;AAErC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAGF,IAAe,qBAAqB,iBAAiBN,CAAS;AAAA,MAC5E,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEH,UAAAJ,EAAM,IAAI,CAACM,GAAME,MAAU;AAC1B,cAAMI,IAASL,EAAUC,CAAK,GACxBK,IAASL,MAAUR,EAAM,SAAS;AAExC,eACE,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWH,EAAG,QAAQF,IAAe,iCAAiC,OAAO;AAAA,YAC7E,MAAK;AAAA,YAGL,UAAA;AAAA,cAAA,gBAAAK;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACTF,IAAe,6BAA6B;AAAA,kBAAA;AAAA,kBAI9C,UAAA;AAAA,oBAAA,gBAAAC;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,gBAAcE,MAAW,WAAW,SAAS;AAAA,wBAC7C,WAAWD;AAAA,0BACT;AAAA,0BACAC,MAAW,eACT;AAAA,0BACFA,MAAW,YACT;AAAA,0BACFA,MAAW,aACT;AAAA,wBAAA;AAAA,wBAGH,gBAAW,cACV,gBAAAF;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAU;AAAA,4BACV,MAAK;AAAA,4BACL,QAAO;AAAA,4BACP,aAAY;AAAA,4BACZ,SAAQ;AAAA,4BAER,4BAAC,QAAA,EAAK,GAAE,mBAAkB,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,0BAAA;AAAA,wBAAA,IAGzEF,IAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAKX,CAACK,KACA,gBAAAH;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWC;AAAA,0BACT;AAAA,0BACAF,IAAe,iBAAiB;AAAA,0BAChCD,IAAQH,IACJ,2BACA;AAAA,wBAAA;AAAA,wBAEN,eAAY;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACd;AAAA,gBAAA;AAAA,cAAA;AAAA,cAKJ,gBAAAS,EAAC,SAAI,WAAWH,EAAG,oBAAoBF,IAAe,KAAK,qBAAqB,GAC9E,UAAA;AAAA,gBAAA,gBAAAC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWC;AAAA,sBACT;AAAA,sBACAC,MAAW,YAAY;AAAA,sBACvBA,MAAW,eAAe;AAAA,sBAC1BA,MAAW,aAAa;AAAA,oBAAA;AAAA,oBAGzB,UAAAN,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEPA,EAAK,eACJ,gBAAAI,EAAC,OAAE,WAAU,2CAA2C,YAAK,YAAA,CAAY;AAAA,cAAA,EAAA,CAE7E;AAAA,YAAA;AAAA,UAAA;AAAA,UApEKJ,EAAK;AAAA,QAAA;AAAA,MAuEhB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAQ,cAAc;"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import type React from 'react';\nimport { Check } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nexport interface StepperItem {\n  description?: string;\n  id: string;\n  label: string;\n}\n\nexport type StepStatus = 'completed' | 'active' | 'pending';\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  currentStep: string;\n  items: StepperItem[];\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Stepper: React.FC<StepperProps> = ({\n  items,\n  currentStep,\n  orientation = 'horizontal',\n  className,\n  ...props\n}) => {\n  const currentIndex = items.findIndex((item) => item.id === currentStep);\n  const isHorizontal = orientation === 'horizontal';\n\n  const getStatus = (index: number): StepStatus => {\n    if (index < currentIndex) return 'completed';\n    if (index === currentIndex) return 'active';\n    return 'pending';\n  };\n\n  const connectorColor = (isActive: boolean) =>\n    isActive ? 'bg-sbk-primary' : 'bg-sbk-line-strong';\n\n  return (\n    <div\n      aria-label=\"Progresso\"\n      className={cn(isHorizontal ? 'flex items-start' : 'flex flex-col', className)}\n      role=\"list\"\n      {...props}\n    >\n      {items.map((item, index) => {\n        const status = getStatus(index);\n        const isLast = index === items.length - 1;\n\n        return (\n          <div\n            key={item.id}\n            className={cn('flex', isHorizontal ? 'flex-1 flex-col items-center' : 'gap-4')}\n            role=\"listitem\"\n          >\n            {/* ── Indicador + conectores ─────────────────── */}\n            <div\n              className={cn(\n                isHorizontal ? 'flex w-full items-center' : 'flex flex-col items-center',\n              )}\n            >\n              {isHorizontal &&\n                /* Conector esquerdo: espaçador no 1º item, linha colorida nos demais */\n                (index === 0 ? (\n                  <div className=\"flex-1\" aria-hidden=\"true\" />\n                ) : (\n                  <div\n                    aria-hidden=\"true\"\n                    className={cn('h-0.5 flex-1', connectorColor(index <= currentIndex))}\n                  />\n                ))}\n\n              {/* Círculo */}\n              <div\n                aria-current={status === 'active' ? 'step' : undefined}\n                className={cn(\n                  'relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors motion-reduce:transition-none',\n                  status === 'completed' && 'border-sbk-primary bg-sbk-primary text-sbk-on-primary',\n                  status === 'active' && 'border-sbk-primary bg-sbk-surface text-sbk-primary',\n                  status === 'pending' && 'border-sbk-line-strong bg-sbk-surface text-sbk-fg-muted',\n                )}\n              >\n                {status === 'completed' ? (\n                  <>\n                    <Check aria-hidden=\"true\" className=\"size-4\" strokeWidth={2.5} />\n                    <span className=\"sr-only\">Concluído: </span>\n                  </>\n                ) : (\n                  index + 1\n                )}\n              </div>\n\n              {isHorizontal ? (\n                /* Conector direito: linha colorida se não for último, espaçador se for */\n                isLast ? (\n                  <div className=\"flex-1\" aria-hidden=\"true\" />\n                ) : (\n                  <div\n                    aria-hidden=\"true\"\n                    className={cn('h-0.5 flex-1', connectorColor(index < currentIndex))}\n                  />\n                )\n              ) : (\n                /* Conector vertical (para orientação vertical) */\n                !isLast && (\n                  <div\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'my-1 ml-[1.0625rem] w-0.5 flex-1',\n                      connectorColor(index < currentIndex),\n                    )}\n                  />\n                )\n              )}\n            </div>\n\n            {/* ── Label + descrição ──────────────────────── */}\n            <div className={cn('mt-2 text-center', !isHorizontal && 'mt-0 pb-6 text-left')}>\n              <p\n                className={cn(\n                  'm-0 text-sm font-semibold leading-tight',\n                  status === 'active' && 'text-sbk-fg-heading',\n                  status === 'completed' && 'text-sbk-fg',\n                  status === 'pending' && 'font-light text-sbk-fg-muted',\n                )}\n              >\n                {item.label}\n              </p>\n              {item.description && (\n                <p className=\"m-0 mt-0.5 text-xs font-light text-sbk-fg-muted\">\n                  {item.description}\n                </p>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nStepper.displayName = 'Stepper';\n"],"names":["Stepper","items","currentStep","orientation","className","props","currentIndex","item","isHorizontal","getStatus","index","connectorColor","isActive","jsx","cn","status","isLast","jsxs","Fragment","Check"],"mappings":"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"}

package/dist/components/Subtitle/Subtitle.d.ts

@@ -1,11 +1,17 @@
 import type React from 'react';
+import { type TextWeight } from '../Typography/weight';
 export interface SubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     align?: 'left' | 'center' | 'right';
-    as?: 'p' | 'span' | 'div';
+    as?: 'p' | 'span' | 'div' | 'h2' | 'h3' | 'h4';
     children: React.ReactNode;
     italic?: boolean;
+    /** Cor secundária (Chumbo Leve). */
     muted?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
-    weight?: 'normal' | 'medium' | 'semibold';
+    /** Padrão: semibold (brand book: subtítulos em Seminegrito). */
+    weight?: TextWeight;
 }
-export declare const Subtitle: React.FC<SubtitleProps>;
+export declare const Subtitle: {
+    ({ as: Tag, size, weight, align, muted, italic, children, className, ...props }: SubtitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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';\nimport { cn } from '../../utils/cn';\nimport { type TextWeight, weightClass } from '../Typography/weight';\n\nexport interface SubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  align?: 'left' | 'center' | 'right';\n  as?: 'p' | 'span' | 'div' | 'h2' | 'h3' | 'h4';\n  children: React.ReactNode;\n  italic?: boolean;\n  /** Cor secundária (Chumbo Leve). */\n  muted?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Padrão: semibold (brand book: subtítulos em Seminegrito). */\n  weight?: TextWeight;\n}\n\nconst SIZE_CLASS = { xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg' } as const;\nconst ALIGN_CLASS = { left: 'text-left', center: 'text-center', right: 'text-right' } as const;\n\nexport const Subtitle = ({\n  as: Tag = 'p',\n  size = 'md',\n  weight = 'semibold',\n  align = 'left',\n  muted = false,\n  italic = false,\n  children,\n  className,\n  ...props\n}: SubtitleProps) => (\n  <Tag\n    className={cn(\n      'm-0 font-sbk leading-snug',\n      SIZE_CLASS[size],\n      weightClass(weight),\n      ALIGN_CLASS[align],\n      muted ? 'text-sbk-fg-muted' : 'text-sbk-fg',\n      italic && 'italic',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </Tag>\n);\n\nSubtitle.displayName = 'Subtitle';\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';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\n\nexport interface SwitchProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> {\n  checked?: boolean;\n  label?: React.ReactNode;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: 'sm' | 'md';\n}\n\nconst TRACK = { sm: 'h-5 w-9', md: 'h-6 w-11' } as const;\nconst THUMB = { sm: 'size-4', md: 'size-5' } as const;\nconst THUMB_ON = { sm: 'translate-x-4', md: 'translate-x-5' } as const;\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    { checked = false, onCheckedChange, label, size = 'md', className, id, disabled, ...props },\n    ref,\n  ) => {\n    const autoId = useId();\n    const switchId = id ?? autoId;\n\n    return (\n      <div className={cn('inline-flex items-center gap-2', disabled && 'opacity-60', className)}>\n        <button\n          ref={ref}\n          aria-checked={checked}\n          className={cn(\n            buttonReset,\n            'relative inline-flex shrink-0 cursor-pointer items-center rounded-full border disabled:cursor-not-allowed',\n            TRACK[size],\n            transitionColors,\n            focusRing,\n            checked\n              ? 'border-sbk-primary bg-sbk-primary'\n              : 'border-sbk-line-strong bg-sbk-surface-sunken',\n          )}\n          disabled={disabled}\n          id={switchId}\n          onClick={() => onCheckedChange?.(!checked)}\n          role=\"switch\"\n          type=\"button\"\n          {...props}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              'inline-block rounded-full bg-sbk-branco shadow-sbk-sm transition-transform duration-150 motion-reduce:transition-none',\n              THUMB[size],\n              checked ? THUMB_ON[size] : 'translate-x-0.5',\n            )}\n          />\n        </button>\n        {label && (\n          <label className=\"cursor-pointer text-sm font-light text-sbk-fg\" htmlFor={switchId}>\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\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';\nimport { cn } from '../../utils/cn';\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Legenda da tabela (visível ou apenas para leitores de tela com `captionHidden`). */\n  caption?: React.ReactNode;\n  captionHidden?: boolean;\n  /** Linhas mais baixas. */\n  dense?: boolean;\n  /** Realce de hover nas linhas do corpo. Padrão: true. */\n  hoverable?: boolean;\n  /** Linhas zebradas. */\n  striped?: boolean;\n  /** Classe do container com rolagem horizontal. */\n  wrapperClassName?: string;\n}\n\n/**\n * Tabela estilizada. Use <thead>/<tbody> com <th scope=\"col\"> normalmente;\n * o estilo das células é aplicado pelo componente.\n */\nexport const Table = ({\n  caption,\n  captionHidden = false,\n  dense = false,\n  hoverable = true,\n  striped = false,\n  className,\n  wrapperClassName,\n  children,\n  ...props\n}: TableProps) => (\n  <div\n    className={cn(\n      'overflow-x-auto rounded-sbk-sm border border-sbk-line bg-sbk-surface',\n      wrapperClassName,\n    )}\n  >\n    <table\n      className={cn(\n        'w-full border-collapse text-left text-sm text-sbk-fg',\n        '[&_th]:bg-sbk-surface-sunken [&_th]:font-semibold [&_th]:text-sbk-fg-heading [&_th]:text-xs [&_th]:uppercase [&_th]:tracking-wide',\n        '[&_td]:font-light [&_td]:border-t [&_td]:border-sbk-line',\n        dense\n          ? '[&_td]:px-3 [&_td]:py-2 [&_th]:px-3 [&_th]:py-2'\n          : '[&_td]:px-4 [&_td]:py-3 [&_th]:px-4 [&_th]:py-3',\n        hoverable && '[&_tbody_tr:hover]:bg-sbk-surface-hover',\n        striped && '[&_tbody_tr:nth-child(even)]:bg-sbk-surface-sunken',\n        className,\n      )}\n      {...props}\n    >\n      {caption && (\n        <caption\n          className={cn(\n            'px-4 py-3 text-left text-sm font-semibold text-sbk-fg-heading',\n            captionHidden && 'sr-only',\n          )}\n        >\n          {caption}\n        </caption>\n      )}\n      {children}\n    </table>\n  </div>\n);\n\nTable.displayName = 'Table';\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;
+};