@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,26 +1,33 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { cn as o } from "../../utils/cn.js";
-const m = ({
-  items: l,
-  separator: s = "/",
-  className: t,
-  ...c
-}) => /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: o("flex items-center", t), ...c, children: /* @__PURE__ */ e("ol", { className: "flex flex-wrap items-center gap-1 text-sm", children: l.map((r, a) => {
-  const n = a === l.length - 1;
-  return /* @__PURE__ */ i("li", { className: "flex items-center gap-1", children: [
-    a > 0 && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "select-none text-[var(--text-muted)]", children: s }),
-    n ? /* @__PURE__ */ e("span", { "aria-current": "page", className: "font-medium text-[var(--text-primary)]", children: r.label }) : r.href ? /* @__PURE__ */ e(
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { ChevronRight as o } from "lucide-react";
+import { cn as l } from "../../utils/cn.js";
+import { focusRing as f } from "../../utils/styles.js";
+const d = ({ items: s, separator: t, className: n, ...i }) => /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: l("flex items-center", n), ...i, children: /* @__PURE__ */ e("ol", { className: "m-0 flex list-none flex-wrap items-center gap-1.5 p-0 text-sm", children: s.map((r, a) => {
+  const c = a === s.length - 1;
+  return /* @__PURE__ */ m("li", { className: "flex items-center gap-1.5", children: [
+    a > 0 && /* @__PURE__ */ e(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "inline-flex select-none text-sbk-fg-muted [&_svg]:size-3.5",
+        children: t ?? /* @__PURE__ */ e(o, {})
+      }
+    ),
+    c ? /* @__PURE__ */ e("span", { "aria-current": "page", className: "font-semibold text-sbk-fg-heading", children: r.label }) : r.href ? /* @__PURE__ */ e(
       "a",
       {
-        className: "text-[var(--md-primary)] transition hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]",
+        className: l(
+          "rounded-sbk-xs font-light text-sbk-fg-muted underline-offset-4 hover:text-sbk-primary hover:underline",
+          f
+        ),
         href: r.href,
         children: r.label
       }
-    ) : /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: r.label })
+    ) : /* @__PURE__ */ e("span", { className: "font-light text-sbk-fg-muted", children: r.label })
   ] }, a);
 }) }) });
-m.displayName = "Breadcrumb";
+d.displayName = "Breadcrumb";
 export {
-  m as Breadcrumb
+  d as Breadcrumb
 };
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface BreadcrumbItem {\n  href?: string;\n  label: React.ReactNode;\n}\n\nexport interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  separator?: React.ReactNode;\n}\n\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\n  items,\n  separator = '/',\n  className,\n  ...props\n}) => {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn('flex items-center', className)} {...props}>\n      <ol className=\"flex flex-wrap items-center gap-1 text-sm\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          return (\n            <li key={index} className=\"flex items-center gap-1\">\n              {index > 0 && (\n                <span aria-hidden=\"true\" className=\"select-none text-[var(--text-muted)]\">\n                  {separator}\n                </span>\n              )}\n              {isLast ? (\n                <span aria-current=\"page\" className=\"font-medium text-[var(--text-primary)]\">\n                  {item.label}\n                </span>\n              ) : item.href ? (\n                <a\n                  className=\"text-[var(--md-primary)] transition hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]\"\n                  href={item.href}\n                >\n                  {item.label}\n                </a>\n              ) : (\n                <span className=\"text-[var(--text-secondary)]\">{item.label}</span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nBreadcrumb.displayName = 'Breadcrumb';\n"],"names":["Breadcrumb","items","separator","className","props","cn","jsx","item","index","isLast","jsxs"],"mappings":";;AAaO,MAAMA,IAAwC,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,wBAEK,OAAA,EAAI,cAAW,cAAa,WAAWC,EAAG,qBAAqBF,CAAS,GAAI,GAAGC,GAC9E,UAAA,gBAAAE,EAAC,QAAG,WAAU,6CACX,YAAM,IAAI,CAACC,GAAMC,MAAU;AAC1B,QAAMC,IAASD,MAAUP,EAAM,SAAS;AACxC,SACE,gBAAAS,EAAC,MAAA,EAAe,WAAU,2BACvB,UAAA;AAAA,IAAAF,IAAQ,KACP,gBAAAF,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,wCAChC,UAAAJ,EAAA,CACH;AAAA,IAEDO,IACC,gBAAAH,EAAC,QAAA,EAAK,gBAAa,QAAO,WAAU,0CACjC,UAAAC,EAAK,MAAA,CACR,IACEA,EAAK,OACP,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAMC,EAAK;AAAA,QAEV,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA,IAGR,gBAAAD,EAAC,QAAA,EAAK,WAAU,gCAAgC,YAAK,MAAA,CAAM;AAAA,EAAA,EAAA,GAlBtDE,CAoBT;AAEJ,CAAC,GACH,GACF;AAIJR,EAAW,cAAc;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type React from 'react';\nimport { ChevronRight } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { focusRing } from '../../utils/styles';\n\nexport interface BreadcrumbItem {\n  href?: string;\n  label: React.ReactNode;\n}\n\nexport interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  separator?: React.ReactNode;\n}\n\nexport const Breadcrumb = ({ items, separator, className, ...props }: BreadcrumbProps) => (\n  <nav aria-label=\"Breadcrumb\" className={cn('flex items-center', className)} {...props}>\n    <ol className=\"m-0 flex list-none flex-wrap items-center gap-1.5 p-0 text-sm\">\n      {items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        return (\n          <li key={index} className=\"flex items-center gap-1.5\">\n            {index > 0 && (\n              <span\n                aria-hidden=\"true\"\n                className=\"inline-flex select-none text-sbk-fg-muted [&_svg]:size-3.5\"\n              >\n                {separator ?? <ChevronRight />}\n              </span>\n            )}\n            {isLast ? (\n              <span aria-current=\"page\" className=\"font-semibold text-sbk-fg-heading\">\n                {item.label}\n              </span>\n            ) : item.href ? (\n              <a\n                className={cn(\n                  'rounded-sbk-xs font-light text-sbk-fg-muted underline-offset-4 hover:text-sbk-primary hover:underline',\n                  focusRing,\n                )}\n                href={item.href}\n              >\n                {item.label}\n              </a>\n            ) : (\n              <span className=\"font-light text-sbk-fg-muted\">{item.label}</span>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  </nav>\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n"],"names":["Breadcrumb","items","separator","className","props","jsx","cn","item","index","isLast","jsxs","ChevronRight","focusRing"],"mappings":";;;;AAeO,MAAMA,IAAa,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,WAAAC,GAAW,GAAGC,EAAA,MAC3D,gBAAAC,EAAC,OAAA,EAAI,cAAW,cAAa,WAAWC,EAAG,qBAAqBH,CAAS,GAAI,GAAGC,GAC9E,UAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,iEACX,UAAAJ,EAAM,IAAI,CAACM,GAAMC,MAAU;AAC1B,QAAMC,IAASD,MAAUP,EAAM,SAAS;AACxC,SACE,gBAAAS,EAAC,MAAA,EAAe,WAAU,6BACvB,UAAA;AAAA,IAAAF,IAAQ,KACP,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QAET,UAAAH,uBAAcS,GAAA,CAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/BF,IACC,gBAAAJ,EAAC,QAAA,EAAK,gBAAa,QAAO,WAAU,qCACjC,UAAAE,EAAK,MAAA,CACR,IACEA,EAAK,OACP,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAM;AAAA,QAAA;AAAA,QAEF,MAAML,EAAK;AAAA,QAEV,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA,IAGR,gBAAAF,EAAC,QAAA,EAAK,WAAU,gCAAgC,YAAK,MAAA,CAAM;AAAA,EAAA,EAAA,GAxBtDG,CA0BT;AAEJ,CAAC,GACH,EAAA,CACF;AAGFR,EAAW,cAAc;"}

package/dist/components/Button/Button.d.ts

@@ -1,16 +1,18 @@
-import type React from 'react';
-/** Paletas do guia de marca (só afeta variant primary). Use para escolher o modelo de cor do botão. */
-export type ButtonPalette = 'verde-vibrante' | 'verde-profundo' | 'grafite-azulado' | 'azul-acinzentado' | 'cinza-medio' | 'cinza-escuro' | 'off-white';
+import React from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'inverse' | 'glass' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
+    /** Reduz o padding horizontal (útil em toolbars e tabelas). */
     compact?: boolean;
     fullWidth?: boolean;
+    /** Mostra spinner, desabilita o botão e anuncia `aria-busy`. A largura é preservada. */
     isLoading?: boolean;
+    /** Texto anunciado durante o carregamento. Padrão: "Carregando". */
+    loadingLabel?: string;
     leftIcon?: React.ReactNode;
-    /** Paleta de cor do guia de marca (aplica-se ao primary). Ignorado em outros variants. */
-    palette?: ButtonPalette;
     rightIcon?: React.ReactNode;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral' | 'ghost';
+    size?: ButtonSize;
+    variant?: ButtonVariant;
 }
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -1,122 +1,81 @@
-import { jsxs as h, jsx as a } from "react/jsx-runtime";
-import { cn as N } from "../../utils/cn.js";
-const P = ({
-  variant: i = "primary",
-  size: t = "md",
-  compact: r = !1,
-  fullWidth: l = !1,
-  isLoading: o = !1,
-  leftIcon: d,
-  rightIcon: v,
-  children: c,
-  className: p = "",
-  disabled: w,
-  palette: e,
-  style: b,
-  ...f
-}) => {
-  const y = "relative inline-flex select-none items-center justify-center overflow-hidden whitespace-nowrap rounded-[var(--border-radius-md)] border border-transparent font-semibold leading-none tracking-[0.01em] transition-[all_var(--transition-base)]", x = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--md-primary)]", g = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60", u = l ? "w-full" : "", z = e === "off-white" && i === "primary" ? "border-[var(--border-color)]" : "", C = {
-    xs: r ? "min-h-[1.75rem] min-w-[1.75rem] gap-1 px-2 py-1 text-[var(--font-size-xs)]" : "min-h-8 min-w-8 gap-1.5 px-3 py-1.5 text-[var(--font-size-xs)]",
-    sm: r ? "min-h-8 min-w-8 gap-[0.3125rem] px-2.5 py-1.5 text-[var(--font-size-sm)]" : "min-h-9 min-w-9 gap-[0.4375rem] px-3.5 py-2 text-[var(--font-size-sm)]",
-    md: r ? "min-h-[2.375rem] min-w-[2.375rem] gap-1.5 px-3 py-2 text-[var(--font-size-base)]" : "min-h-11 min-w-11 gap-2 px-4 py-2.5 text-[var(--font-size-base)]",
-    lg: r ? "min-h-[2.625rem] min-w-[2.625rem] gap-[0.4375rem] px-3.5 py-[0.5625rem] text-[var(--font-size-lg)]" : "min-h-12 min-w-12 gap-[0.5625rem] px-6 py-4 text-[var(--font-size-lg)]",
-    xl: r ? "min-h-12 min-w-12 gap-2 px-4 py-3 text-[var(--font-size-xl)]" : "min-h-14 min-w-14 gap-2.5 px-8 py-6 text-[var(--font-size-xl)]"
-  }, j = {
-    primary: "bg-[var(--md-primary)] text-[var(--md-on-primary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--primary-color-hover)] hover:shadow-[var(--shadow-md)]",
-    secondary: "bg-[var(--md-secondary)] text-[var(--md-on-secondary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--secondary-color-light)] hover:shadow-[var(--shadow-md)]",
-    success: "bg-[var(--success-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--success-color-light)] hover:shadow-[var(--shadow-md)]",
-    error: "bg-[var(--md-error)] text-[var(--md-on-error)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--error-color-light)] hover:shadow-[var(--shadow-md)]",
-    warning: "bg-[var(--warning-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--warning-color-light)] hover:shadow-[var(--shadow-md)]",
-    info: "bg-[var(--info-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--info-color-light)] hover:shadow-[var(--shadow-md)]",
-    neutral: "bg-[var(--neutral-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--neutral-color-light)] hover:shadow-[var(--shadow-md)]",
-    ghost: "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--md-on-surface)] shadow-[var(--shadow-xs)] hover:bg-[var(--bg-hover)] hover:text-[var(--md-primary)] hover:border-[var(--border-color-hover)]"
-  }, m = {
-    xs: r ? "h-3 w-3" : "h-3.5 w-3.5",
-    sm: r ? "h-3.5 w-3.5" : "h-4 w-4",
-    md: "h-[1.125rem] w-[1.125rem]",
-    lg: "h-5 w-5",
-    xl: "h-5 w-5"
-  }, n = {
-    "verde-vibrante": {
-      primary: "var(--brand-verde-vibrante)",
-      hover: "var(--brand-verde-profundo)"
-    },
-    "verde-profundo": {
-      primary: "var(--brand-verde-profundo)",
-      hover: "var(--brand-grafite-azulado)"
-    },
-    "grafite-azulado": {
-      primary: "var(--brand-grafite-azulado)",
-      hover: "var(--brand-cinza-escuro)"
-    },
-    "azul-acinzentado": {
-      primary: "var(--brand-azul-acinzentado)",
-      hover: "var(--brand-grafite-azulado)"
-    },
-    "cinza-medio": {
-      primary: "var(--brand-cinza-medio)",
-      hover: "var(--brand-cinza-escuro)"
-    },
-    "cinza-escuro": {
-      primary: "var(--brand-cinza-escuro)",
-      hover: "var(--brand-preto)"
-    },
-    "off-white": {
-      primary: "var(--brand-off-white)",
-      hover: "var(--brand-branco)",
-      onPrimary: "var(--brand-grafite-azulado)"
-    }
-  }, s = {};
-  e && i === "primary" && (s["--md-primary"] = n[e].primary, s["--primary-color-hover"] = n[e].hover, n[e].onPrimary && (s["--md-on-primary"] = n[e].onPrimary));
-  const k = N(
-    y,
-    x,
-    g,
-    C[t],
-    j[i],
-    z,
-    u,
-    p
-  );
-  return /* @__PURE__ */ h(
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import f from "react";
+import { cn as o } from "../../utils/cn.js";
+import { focusRing as h, transitionColors as u, buttonReset as v } from "../../utils/styles.js";
+import { Spinner as y } from "../Spinner/Spinner.js";
+const S = {
+  xs: "min-h-7 gap-1 px-2.5 text-xs",
+  sm: "min-h-8 gap-1.5 px-3 text-sm",
+  md: "min-h-10 gap-2 px-4 text-sm",
+  lg: "min-h-12 gap-2 px-5 text-base",
+  xl: "min-h-14 gap-2.5 px-7 text-lg"
+}, w = {
+  xs: "px-1.5",
+  sm: "px-2",
+  md: "px-2.5",
+  lg: "px-3",
+  xl: "px-4"
+}, C = {
+  primary: "bg-sbk-primary text-sbk-on-primary hover:bg-sbk-primary-hover",
+  secondary: "bg-sbk-secondary text-sbk-on-secondary hover:bg-sbk-secondary-hover",
+  outline: "border-sbk-primary bg-transparent text-sbk-primary hover:bg-sbk-primary-subtle dark:border-sbk-fg dark:text-sbk-fg",
+  ghost: "bg-transparent text-sbk-fg hover:bg-sbk-surface-hover",
+  link: "min-h-0 bg-transparent px-0 text-sbk-primary underline-offset-4 hover:underline dark:text-sbk-fg",
+  inverse: "bg-sbk-surface-inverse text-sbk-fg-inverse hover:opacity-90",
+  glass: "sbk-glass text-sbk-fg hover:sbk-glass-strong",
+  success: "bg-sbk-success text-sbk-on-state hover:opacity-90",
+  error: "bg-sbk-error text-sbk-on-state hover:opacity-90",
+  warning: "bg-sbk-warning text-sbk-on-state hover:opacity-90",
+  info: "bg-sbk-info text-sbk-on-state hover:opacity-90",
+  neutral: "border-sbk-line-strong bg-sbk-surface text-sbk-fg hover:bg-sbk-surface-hover"
+}, N = f.forwardRef(
+  ({
+    variant: i = "primary",
+    size: r = "md",
+    compact: b = !1,
+    fullWidth: l = !1,
+    isLoading: e = !1,
+    loadingLabel: p = "Carregando",
+    leftIcon: t,
+    rightIcon: n,
+    children: m,
+    className: x,
+    disabled: c,
+    type: g = "button",
+    ...k
+  }, d) => /* @__PURE__ */ a(
     "button",
     {
-      className: k,
-      disabled: w || o,
-      style: { ...s, ...b },
-      ...f,
+      ref: d,
+      "aria-busy": e || void 0,
+      className: o(
+        v,
+        "relative inline-flex select-none items-center justify-center whitespace-nowrap rounded-sbk-sm border border-transparent font-sbk font-semibold leading-none",
+        "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+        u,
+        h,
+        S[r],
+        b && w[r],
+        C[i],
+        l && "w-full",
+        x
+      ),
+      disabled: c || e,
+      type: g,
+      ...k,
       children: [
-        o && /* @__PURE__ */ a(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "absolute inline-flex h-[1em] w-[1em] animate-spin items-center justify-center",
-            children: /* @__PURE__ */ h("svg", { fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
-              /* @__PURE__ */ a("path", { d: "M12 2 A10 10 0 0 1 22 12", strokeLinecap: "round" })
-            ] })
-          }
-        ),
-        !o && d && /* @__PURE__ */ a(
-          "span",
-          {
-            className: `mr-1 inline-flex shrink-0 items-center justify-center leading-none ${m[t]}`,
-            children: d
-          }
-        ),
-        !o && /* @__PURE__ */ a("span", { className: "btn__content inline-flex items-center justify-center", children: c }),
-        !o && v && /* @__PURE__ */ a(
-          "span",
-          {
-            className: `ml-1 inline-flex shrink-0 items-center justify-center leading-none ${m[t]}`,
-            children: v
-          }
-        )
+        e && /* @__PURE__ */ s("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ s(y, { label: p, size: "sm" }) }),
+        /* @__PURE__ */ a("span", { className: o("inline-flex items-center gap-[inherit]", e && "invisible"), children: [
+          t && /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "inline-flex shrink-0 [&_svg]:size-[1.15em]", children: t }),
+          m,
+          n && /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "inline-flex shrink-0 [&_svg]:size-[1.15em]", children: n })
+        ] })
       ]
     }
-  );
-};
+  )
+);
+N.displayName = "Button";
 export {
-  P as Button
+  N as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type React from 'react';\nimport type { CSSProperties } from 'react';\nimport { cn } from '../../utils/cn';\n\n/** Paletas do guia de marca (só afeta variant primary). Use para escolher o modelo de cor do botão. */\nexport type ButtonPalette =\n  | 'verde-vibrante'\n  | 'verde-profundo'\n  | 'grafite-azulado'\n  | 'azul-acinzentado'\n  | 'cinza-medio'\n  | 'cinza-escuro'\n  | 'off-white';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  compact?: boolean;\n  fullWidth?: boolean;\n  isLoading?: boolean;\n  leftIcon?: React.ReactNode;\n  /** Paleta de cor do guia de marca (aplica-se ao primary). Ignorado em outros variants. */\n  palette?: ButtonPalette;\n  rightIcon?: React.ReactNode;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'ghost';\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'primary',\n  size = 'md',\n  compact = false,\n  fullWidth = false,\n  isLoading = false,\n  leftIcon,\n  rightIcon,\n  children,\n  className = '',\n  disabled,\n  palette,\n  style,\n  ...props\n}) => {\n  const baseClass =\n    'relative inline-flex select-none items-center justify-center overflow-hidden whitespace-nowrap rounded-[var(--border-radius-md)] border border-transparent font-semibold leading-none tracking-[0.01em] transition-[all_var(--transition-base)]';\n  const focusClass =\n    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--md-primary)]';\n  const disabledClass =\n    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';\n  const fullWidthClass = fullWidth ? 'w-full' : '';\n  const offWhiteBorderClass =\n    palette === 'off-white' && variant === 'primary' ? 'border-[var(--border-color)]' : '';\n\n  const sizeClassMap: Record<NonNullable<ButtonProps['size']>, string> = {\n    xs: compact\n      ? 'min-h-[1.75rem] min-w-[1.75rem] gap-1 px-2 py-1 text-[var(--font-size-xs)]'\n      : 'min-h-8 min-w-8 gap-1.5 px-3 py-1.5 text-[var(--font-size-xs)]',\n    sm: compact\n      ? 'min-h-8 min-w-8 gap-[0.3125rem] px-2.5 py-1.5 text-[var(--font-size-sm)]'\n      : 'min-h-9 min-w-9 gap-[0.4375rem] px-3.5 py-2 text-[var(--font-size-sm)]',\n    md: compact\n      ? 'min-h-[2.375rem] min-w-[2.375rem] gap-1.5 px-3 py-2 text-[var(--font-size-base)]'\n      : 'min-h-11 min-w-11 gap-2 px-4 py-2.5 text-[var(--font-size-base)]',\n    lg: compact\n      ? 'min-h-[2.625rem] min-w-[2.625rem] gap-[0.4375rem] px-3.5 py-[0.5625rem] text-[var(--font-size-lg)]'\n      : 'min-h-12 min-w-12 gap-[0.5625rem] px-6 py-4 text-[var(--font-size-lg)]',\n    xl: compact\n      ? 'min-h-12 min-w-12 gap-2 px-4 py-3 text-[var(--font-size-xl)]'\n      : 'min-h-14 min-w-14 gap-2.5 px-8 py-6 text-[var(--font-size-xl)]',\n  };\n\n  const variantClassMap: Record<NonNullable<ButtonProps['variant']>, string> = {\n    primary:\n      'bg-[var(--md-primary)] text-[var(--md-on-primary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--primary-color-hover)] hover:shadow-[var(--shadow-md)]',\n    secondary:\n      'bg-[var(--md-secondary)] text-[var(--md-on-secondary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--secondary-color-light)] hover:shadow-[var(--shadow-md)]',\n    success:\n      'bg-[var(--success-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--success-color-light)] hover:shadow-[var(--shadow-md)]',\n    error:\n      'bg-[var(--md-error)] text-[var(--md-on-error)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--error-color-light)] hover:shadow-[var(--shadow-md)]',\n    warning:\n      'bg-[var(--warning-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--warning-color-light)] hover:shadow-[var(--shadow-md)]',\n    info: 'bg-[var(--info-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--info-color-light)] hover:shadow-[var(--shadow-md)]',\n    neutral:\n      'bg-[var(--neutral-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--neutral-color-light)] hover:shadow-[var(--shadow-md)]',\n    ghost:\n      'border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--md-on-surface)] shadow-[var(--shadow-xs)] hover:bg-[var(--bg-hover)] hover:text-[var(--md-primary)] hover:border-[var(--border-color-hover)]',\n  };\n\n  const iconSizeClassMap: Record<NonNullable<ButtonProps['size']>, string> = {\n    xs: compact ? 'h-3 w-3' : 'h-3.5 w-3.5',\n    sm: compact ? 'h-3.5 w-3.5' : 'h-4 w-4',\n    md: 'h-[1.125rem] w-[1.125rem]',\n    lg: 'h-5 w-5',\n    xl: 'h-5 w-5',\n  };\n\n  const paletteVars: Record<ButtonPalette, { primary: string; hover: string; onPrimary?: string }> =\n    {\n      'verde-vibrante': {\n        primary: 'var(--brand-verde-vibrante)',\n        hover: 'var(--brand-verde-profundo)',\n      },\n      'verde-profundo': {\n        primary: 'var(--brand-verde-profundo)',\n        hover: 'var(--brand-grafite-azulado)',\n      },\n      'grafite-azulado': {\n        primary: 'var(--brand-grafite-azulado)',\n        hover: 'var(--brand-cinza-escuro)',\n      },\n      'azul-acinzentado': {\n        primary: 'var(--brand-azul-acinzentado)',\n        hover: 'var(--brand-grafite-azulado)',\n      },\n      'cinza-medio': {\n        primary: 'var(--brand-cinza-medio)',\n        hover: 'var(--brand-cinza-escuro)',\n      },\n      'cinza-escuro': {\n        primary: 'var(--brand-cinza-escuro)',\n        hover: 'var(--brand-preto)',\n      },\n      'off-white': {\n        primary: 'var(--brand-off-white)',\n        hover: 'var(--brand-branco)',\n        onPrimary: 'var(--brand-grafite-azulado)',\n      },\n    };\n\n  type ButtonCssVars = CSSProperties & {\n    '--md-primary'?: string;\n    '--primary-color-hover'?: string;\n    '--md-on-primary'?: string;\n  };\n  const paletteStyle: ButtonCssVars = {};\n  if (palette && variant === 'primary') {\n    paletteStyle['--md-primary'] = paletteVars[palette].primary;\n    paletteStyle['--primary-color-hover'] = paletteVars[palette].hover;\n    if (paletteVars[palette].onPrimary) {\n      paletteStyle['--md-on-primary'] = paletteVars[palette].onPrimary;\n    }\n  }\n\n  const combinedClass = cn(\n    baseClass,\n    focusClass,\n    disabledClass,\n    sizeClassMap[size],\n    variantClassMap[variant],\n    offWhiteBorderClass,\n    fullWidthClass,\n    className,\n  );\n\n  return (\n    <button\n      className={combinedClass}\n      disabled={disabled || isLoading}\n      style={{ ...paletteStyle, ...style }}\n      {...props}\n    >\n      {isLoading && (\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute inline-flex h-[1em] w-[1em] animate-spin items-center justify-center\"\n        >\n          <svg fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" strokeOpacity=\"0.25\" />\n            <path d=\"M12 2 A10 10 0 0 1 22 12\" strokeLinecap=\"round\" />\n          </svg>\n        </span>\n      )}\n      {!isLoading && leftIcon && (\n        <span\n          className={`mr-1 inline-flex shrink-0 items-center justify-center leading-none ${iconSizeClassMap[size]}`}\n        >\n          {leftIcon}\n        </span>\n      )}\n      {!isLoading && (\n        <span className=\"btn__content inline-flex items-center justify-center\">{children}</span>\n      )}\n      {!isLoading && rightIcon && (\n        <span\n          className={`ml-1 inline-flex shrink-0 items-center justify-center leading-none ${iconSizeClassMap[size]}`}\n        >\n          {rightIcon}\n        </span>\n      )}\n    </button>\n  );\n};\n"],"names":["Button","variant","size","compact","fullWidth","isLoading","leftIcon","rightIcon","children","className","disabled","palette","style","props","baseClass","focusClass","disabledClass","fullWidthClass","offWhiteBorderClass","sizeClassMap","variantClassMap","iconSizeClassMap","paletteVars","paletteStyle","combinedClass","cn","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\nimport { Spinner } from '../Spinner/Spinner';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'link'\n  | 'inverse'\n  | 'glass'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'info'\n  | 'neutral';\n\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  /** Reduz o padding horizontal (útil em toolbars e tabelas). */\n  compact?: boolean;\n  fullWidth?: boolean;\n  /** Mostra spinner, desabilita o botão e anuncia `aria-busy`. A largura é preservada. */\n  isLoading?: boolean;\n  /** Texto anunciado durante o carregamento. Padrão: \"Carregando\". */\n  loadingLabel?: string;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  size?: ButtonSize;\n  variant?: ButtonVariant;\n}\n\nconst SIZE_CLASS: Record<ButtonSize, string> = {\n  xs: 'min-h-7 gap-1 px-2.5 text-xs',\n  sm: 'min-h-8 gap-1.5 px-3 text-sm',\n  md: 'min-h-10 gap-2 px-4 text-sm',\n  lg: 'min-h-12 gap-2 px-5 text-base',\n  xl: 'min-h-14 gap-2.5 px-7 text-lg',\n};\n\nconst COMPACT_CLASS: Record<ButtonSize, string> = {\n  xs: 'px-1.5',\n  sm: 'px-2',\n  md: 'px-2.5',\n  lg: 'px-3',\n  xl: 'px-4',\n};\n\nconst VARIANT_CLASS: Record<ButtonVariant, string> = {\n  primary: 'bg-sbk-primary text-sbk-on-primary hover:bg-sbk-primary-hover',\n  secondary: 'bg-sbk-secondary text-sbk-on-secondary hover:bg-sbk-secondary-hover',\n  outline:\n    'border-sbk-primary bg-transparent text-sbk-primary hover:bg-sbk-primary-subtle dark:border-sbk-fg dark:text-sbk-fg',\n  ghost: 'bg-transparent text-sbk-fg hover:bg-sbk-surface-hover',\n  link: 'min-h-0 bg-transparent px-0 text-sbk-primary underline-offset-4 hover:underline dark:text-sbk-fg',\n  inverse: 'bg-sbk-surface-inverse text-sbk-fg-inverse hover:opacity-90',\n  glass: 'sbk-glass text-sbk-fg hover:sbk-glass-strong',\n  success: 'bg-sbk-success text-sbk-on-state hover:opacity-90',\n  error: 'bg-sbk-error text-sbk-on-state hover:opacity-90',\n  warning: 'bg-sbk-warning text-sbk-on-state hover:opacity-90',\n  info: 'bg-sbk-info text-sbk-on-state hover:opacity-90',\n  neutral: 'border-sbk-line-strong bg-sbk-surface text-sbk-fg hover:bg-sbk-surface-hover',\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'md',\n      compact = false,\n      fullWidth = false,\n      isLoading = false,\n      loadingLabel = 'Carregando',\n      leftIcon,\n      rightIcon,\n      children,\n      className,\n      disabled,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      aria-busy={isLoading || undefined}\n      className={cn(\n        buttonReset,\n        'relative inline-flex select-none items-center justify-center whitespace-nowrap rounded-sbk-sm border border-transparent font-sbk font-semibold leading-none',\n        'cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',\n        transitionColors,\n        focusRing,\n        SIZE_CLASS[size],\n        compact && COMPACT_CLASS[size],\n        VARIANT_CLASS[variant],\n        fullWidth && 'w-full',\n        className,\n      )}\n      disabled={disabled || isLoading}\n      type={type}\n      {...props}\n    >\n      {isLoading && (\n        <span className=\"absolute inset-0 flex items-center justify-center\">\n          <Spinner label={loadingLabel} size=\"sm\" />\n        </span>\n      )}\n      <span className={cn('inline-flex items-center gap-[inherit]', isLoading && 'invisible')}>\n        {leftIcon && (\n          <span aria-hidden=\"true\" className=\"inline-flex shrink-0 [&_svg]:size-[1.15em]\">\n            {leftIcon}\n          </span>\n        )}\n        {children}\n        {rightIcon && (\n          <span aria-hidden=\"true\" className=\"inline-flex shrink-0 [&_svg]:size-[1.15em]\">\n            {rightIcon}\n          </span>\n        )}\n      </span>\n    </button>\n  ),\n);\n\nButton.displayName = 'Button';\n"],"names":["SIZE_CLASS","COMPACT_CLASS","VARIANT_CLASS","Button","React","variant","size","compact","fullWidth","isLoading","loadingLabel","leftIcon","rightIcon","children","className","disabled","type","props","ref","jsxs","cn","buttonReset","transitionColors","focusRing","jsx","Spinner"],"mappings":";;;;;AAoCA,MAAMA,IAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAA+C;AAAA,EACnD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SACE;AAAA,EACF,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX,GAEaC,IAASC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,cAAAC,IAAe;AAAA,IACf,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAWT,KAAa;AAAA,MACxB,WAAWW;AAAA,QACTC;AAAA,QACA;AAAA,QACA;AAAA,QACAC;AAAA,QACAC;AAAA,QACAvB,EAAWM,CAAI;AAAA,QACfC,KAAWN,EAAcK,CAAI;AAAA,QAC7BJ,EAAcG,CAAO;AAAA,QACrBG,KAAa;AAAA,QACbM;AAAA,MAAA;AAAA,MAEF,UAAUC,KAAYN;AAAA,MACtB,MAAAO;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAR,KACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,qDACd,UAAA,gBAAAA,EAACC,KAAQ,OAAOf,GAAc,MAAK,KAAA,CAAK,EAAA,CAC1C;AAAA,0BAED,QAAA,EAAK,WAAWU,EAAG,0CAA0CX,KAAa,WAAW,GACnF,UAAA;AAAA,UAAAE,uBACE,QAAA,EAAK,eAAY,QAAO,WAAU,8CAChC,UAAAA,GACH;AAAA,UAEDE;AAAA,UACAD,KACC,gBAAAY,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,8CAChC,UAAAZ,EAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAT,EAAO,cAAc;"}

package/dist/components/Card/Card.d.ts

@@ -1,8 +1,38 @@
-import type React from 'react';
+import React from 'react';
+export type CardVariant = 'default' | 'elevated' | 'outlined' | 'flat' | 'inverse' | 'glass';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    /** Realce de hover (borda e sombra). Para cards clicáveis, use um <a>/<button> dentro do card. */
     hoverable?: boolean;
+    /**
+     * Cards empilhados atrás do card principal, com opacidades de 90% a 60%
+     * (sistema de cards do brand book). Use com moderação, em destaques.
+     */
+    layered?: boolean;
     padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    variant?: 'default' | 'elevated' | 'outlined' | 'flat';
+    variant?: CardVariant;
 }
-export declare const Card: React.FC<CardProps>;
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export declare const CardTitle: {
+    ({ as: Tag, className, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const CardDescription: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const CardContent: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const CardFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Card/Card.js

@@ -1,33 +1,94 @@
-import { jsx as m } from "react/jsx-runtime";
-const c = ({
-  variant: a = "default",
-  padding: r = "md",
-  hoverable: o = !1,
-  children: s,
-  className: d = "",
-  ...e
-}) => {
-  const n = "relative overflow-hidden rounded-[var(--border-radius-lg)] transition-[var(--transition-all)]", l = {
-    default: "bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-sm)]",
-    elevated: "bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-lg)]",
-    outlined: "bg-transparent border border-[var(--md-outline-variant)] shadow-none",
-    flat: "bg-[var(--md-surface)] border-0 shadow-none"
-  }, t = {
-    none: "p-0",
-    sm: "p-[var(--spacing-md)]",
-    md: "p-[var(--spacing-lg)]",
-    lg: "p-[var(--spacing-xl)]",
-    xl: "p-[var(--spacing-2xl)]"
-  }, i = o ? "hover:shadow-[var(--shadow-md)]" : "", v = [
-    n,
-    l[a],
-    t[r],
-    i,
-    d
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ m("div", { className: v, ...e, children: s });
-};
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import c from "react";
+import { cn as t } from "../../utils/cn.js";
+import { transitionColors as p, inverseScope as f } from "../../utils/styles.js";
+const g = {
+  default: "border border-sbk-line bg-sbk-surface text-sbk-fg",
+  elevated: "border border-sbk-line bg-sbk-surface text-sbk-fg shadow-sbk-sm",
+  outlined: "border border-sbk-line-strong bg-transparent text-sbk-fg",
+  flat: "border border-transparent bg-sbk-surface-sunken text-sbk-fg",
+  inverse: t("border border-transparent", f),
+  glass: "sbk-glass text-sbk-fg"
+}, k = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+}, u = c.forwardRef(
+  ({
+    variant: e = "default",
+    padding: s = "md",
+    hoverable: r = !1,
+    layered: d = !1,
+    children: n,
+    className: i,
+    ...l
+  }, b) => {
+    const o = /* @__PURE__ */ a(
+      "div",
+      {
+        ref: b,
+        className: t(
+          "relative overflow-hidden rounded-sbk-md",
+          g[e],
+          k[s],
+          r && t(
+            "hover:border-sbk-line-strong hover:shadow-sbk-md",
+            p,
+            "transition-shadow"
+          ),
+          i
+        ),
+        ...l,
+        children: n
+      }
+    );
+    return d ? /* @__PURE__ */ m("div", { className: "relative isolate pb-4", children: [
+      /* @__PURE__ */ a(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-x-6 top-4 bottom-0 -z-20 rounded-sbk-md bg-sbk-verde-claro opacity-[var(--sbk-card-layer-opacity-3)]"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-x-3 top-2 bottom-2 -z-10 rounded-sbk-md bg-sbk-ciano opacity-[var(--sbk-card-layer-opacity-2)]"
+        }
+      ),
+      o
+    ] }) : o;
+  }
+);
+u.displayName = "Card";
+const x = ({ className: e, ...s }) => /* @__PURE__ */ a("div", { className: t("mb-3 flex items-start justify-between gap-3", e), ...s });
+x.displayName = "CardHeader";
+const C = ({ as: e = "h3", className: s, ...r }) => /* @__PURE__ */ a(
+  e,
+  {
+    className: t("m-0 text-lg font-semibold leading-tight text-sbk-fg-heading", s),
+    ...r
+  }
+);
+C.displayName = "CardTitle";
+const N = ({
+  className: e,
+  ...s
+}) => /* @__PURE__ */ a("p", { className: t("m-0 text-sm font-light text-sbk-fg-muted", e), ...s });
+N.displayName = "CardDescription";
+const v = ({ className: e, ...s }) => /* @__PURE__ */ a("div", { className: t("font-light", e), ...s });
+v.displayName = "CardContent";
+const h = ({ className: e, ...s }) => /* @__PURE__ */ a("div", { className: t("mt-4 flex items-center justify-end gap-2", e), ...s });
+h.displayName = "CardFooter";
 export {
-  c as Card
+  u as Card,
+  v as CardContent,
+  N as CardDescription,
+  h as CardFooter,
+  x as CardHeader,
+  C as CardTitle
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  hoverable?: boolean;\n  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';\n  variant?: 'default' | 'elevated' | 'outlined' | 'flat';\n}\n\nexport const Card: React.FC<CardProps> = ({\n  variant = 'default',\n  padding = 'md',\n  hoverable = false,\n  children,\n  className = '',\n  ...props\n}) => {\n  const baseClass =\n    'relative overflow-hidden rounded-[var(--border-radius-lg)] transition-[var(--transition-all)]';\n  const variantClassMap: Record<NonNullable<CardProps['variant']>, string> = {\n    default:\n      'bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-sm)]',\n    elevated:\n      'bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-lg)]',\n    outlined: 'bg-transparent border border-[var(--md-outline-variant)] shadow-none',\n    flat: 'bg-[var(--md-surface)] border-0 shadow-none',\n  };\n  const paddingClassMap: Record<NonNullable<CardProps['padding']>, string> = {\n    none: 'p-0',\n    sm: 'p-[var(--spacing-md)]',\n    md: 'p-[var(--spacing-lg)]',\n    lg: 'p-[var(--spacing-xl)]',\n    xl: 'p-[var(--spacing-2xl)]',\n  };\n  const hoverableClass = hoverable ? 'hover:shadow-[var(--shadow-md)]' : '';\n  const combinedClass = [\n    baseClass,\n    variantClassMap[variant],\n    paddingClassMap[padding],\n    hoverableClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={combinedClass} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["Card","variant","padding","hoverable","children","className","props","baseClass","variantClassMap","paddingClassMap","hoverableClass","combinedClass"],"mappings":";AASO,MAAMA,IAA4B,CAAC;AAAA,EACxC,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IACJ,iGACIC,IAAqE;AAAA,IACzE,SACE;AAAA,IACF,UACE;AAAA,IACF,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,GAEFC,IAAqE;AAAA,IACzE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAEAC,IAAiBP,IAAY,oCAAoC,IACjEQ,IAAgB;AAAA,IACpBJ;AAAA,IACAC,EAAgBP,CAAO;AAAA,IACvBQ,EAAgBP,CAAO;AAAA,IACvBQ;AAAA,IACAL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWM,GAAgB,GAAGL,GAChC,UAAAF,GACH;AAEJ;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport { inverseScope, transitionColors } from '../../utils/styles';\n\nexport type CardVariant = 'default' | 'elevated' | 'outlined' | 'flat' | 'inverse' | 'glass';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Realce de hover (borda e sombra). Para cards clicáveis, use um <a>/<button> dentro do card. */\n  hoverable?: boolean;\n  /**\n   * Cards empilhados atrás do card principal, com opacidades de 90% a 60%\n   * (sistema de cards do brand book). Use com moderação, em destaques.\n   */\n  layered?: boolean;\n  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';\n  variant?: CardVariant;\n}\n\nconst VARIANT_CLASS: Record<CardVariant, string> = {\n  default: 'border border-sbk-line bg-sbk-surface text-sbk-fg',\n  elevated: 'border border-sbk-line bg-sbk-surface text-sbk-fg shadow-sbk-sm',\n  outlined: 'border border-sbk-line-strong bg-transparent text-sbk-fg',\n  flat: 'border border-transparent bg-sbk-surface-sunken text-sbk-fg',\n  inverse: cn('border border-transparent', inverseScope),\n  glass: 'sbk-glass text-sbk-fg',\n};\n\nconst PADDING_CLASS: Record<NonNullable<CardProps['padding']>, string> = {\n  none: 'p-0',\n  sm: 'p-3',\n  md: 'p-4',\n  lg: 'p-6',\n  xl: 'p-8',\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      variant = 'default',\n      padding = 'md',\n      hoverable = false,\n      layered = false,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const card = (\n      <div\n        ref={ref}\n        className={cn(\n          'relative overflow-hidden rounded-sbk-md',\n          VARIANT_CLASS[variant],\n          PADDING_CLASS[padding],\n          hoverable &&\n            cn(\n              'hover:border-sbk-line-strong hover:shadow-sbk-md',\n              transitionColors,\n              'transition-shadow',\n            ),\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n\n    if (!layered) return card;\n\n    // Camadas atrás do card (sistema de cards do brand book, opacidades 75% e 60%).\n    return (\n      <div className=\"relative isolate pb-4\">\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute inset-x-6 top-4 bottom-0 -z-20 rounded-sbk-md bg-sbk-verde-claro opacity-[var(--sbk-card-layer-opacity-3)]\"\n        />\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute inset-x-3 top-2 bottom-2 -z-10 rounded-sbk-md bg-sbk-ciano opacity-[var(--sbk-card-layer-opacity-2)]\"\n        />\n        {card}\n      </div>\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport const CardHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('mb-3 flex items-start justify-between gap-3', className)} {...props} />\n);\nCardHeader.displayName = 'CardHeader';\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\nexport const CardTitle = ({ as: Tag = 'h3', className, ...props }: CardTitleProps) => (\n  <Tag\n    className={cn('m-0 text-lg font-semibold leading-tight text-sbk-fg-heading', className)}\n    {...props}\n  />\n);\nCardTitle.displayName = 'CardTitle';\n\nexport const CardDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p className={cn('m-0 text-sm font-light text-sbk-fg-muted', className)} {...props} />\n);\nCardDescription.displayName = 'CardDescription';\n\nexport const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('font-light', className)} {...props} />\n);\nCardContent.displayName = 'CardContent';\n\nexport const CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('mt-4 flex items-center justify-end gap-2', className)} {...props} />\n);\nCardFooter.displayName = 'CardFooter';\n"],"names":["VARIANT_CLASS","cn","inverseScope","PADDING_CLASS","Card","React","variant","padding","hoverable","layered","children","className","props","ref","card","jsx","transitionColors","jsxs","CardHeader","CardTitle","Tag","CardDescription","CardContent","CardFooter"],"mappings":";;;;AAmBA,MAAMA,IAA6C;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAASC,EAAG,6BAA6BC,CAAY;AAAA,EACrD,OAAO;AACT,GAEMC,IAAmE;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAOC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWZ;AAAA,UACT;AAAA,UACAD,EAAcM,CAAO;AAAA,UACrBH,EAAcI,CAAO;AAAA,UACrBC,KACEP;AAAA,YACE;AAAA,YACAe;AAAA,YACA;AAAA,UAAA;AAAA,UAEJL;AAAA,QAAA;AAAA,QAED,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAIH,gBAAAQ,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEXD;AAAA,IAAA,GACH,IAdmBA;AAAA,EAgBvB;AACF;AACAV,EAAK,cAAc;AAEZ,MAAMc,IAAa,CAAC,EAAE,WAAAP,GAAW,GAAGC,EAAA,MACzC,gBAAAG,EAAC,OAAA,EAAI,WAAWd,EAAG,+CAA+CU,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE3FM,EAAW,cAAc;AAKlB,MAAMC,IAAY,CAAC,EAAE,IAAIC,IAAM,MAAM,WAAAT,GAAW,GAAGC,EAAA,MACxD,gBAAAG;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,WAAWnB,EAAG,+DAA+DU,CAAS;AAAA,IACrF,GAAGC;AAAA,EAAA;AACN;AAEFO,EAAU,cAAc;AAEjB,MAAME,IAAkB,CAAC;AAAA,EAC9B,WAAAV;AAAA,EACA,GAAGC;AACL,MACE,gBAAAG,EAAC,OAAE,WAAWd,EAAG,4CAA4CU,CAAS,GAAI,GAAGC,EAAA,CAAO;AAEtFS,EAAgB,cAAc;AAEvB,MAAMC,IAAc,CAAC,EAAE,WAAAX,GAAW,GAAGC,EAAA,MAC1C,gBAAAG,EAAC,OAAA,EAAI,WAAWd,EAAG,cAAcU,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE1DU,EAAY,cAAc;AAEnB,MAAMC,IAAa,CAAC,EAAE,WAAAZ,GAAW,GAAGC,EAAA,MACzC,gBAAAG,EAAC,OAAA,EAAI,WAAWd,EAAG,4CAA4CU,CAAS,GAAI,GAAGC,EAAA,CAAO;AAExFW,EAAW,cAAc;"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    error?: string;
     helperText?: string;
-    label?: string;
+    /** Estado intermediário (ex.: "selecionar todos" parcial). */
+    indeterminate?: boolean;
+    label?: React.ReactNode;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;