@sbkbs/ui 1.0.6 → 2.0.0

package/dist/components/SideNav/SideNav.js

@@ -0,0 +1,141 @@
+import { jsxs as d, jsx as s, Fragment as D } from "react/jsx-runtime";
+import { useId as F, useState as M } from "react";
+import { ChevronDown as O } from "lucide-react";
+import { cn as l } from "../../utils/cn.js";
+import { transitionColors as T, buttonReset as V, inverseScope as q } from "../../utils/styles.js";
+const B = {
+  light: "border-r border-sbk-line bg-sbk-surface text-sbk-fg",
+  dark: q,
+  glass: "sbk-glass rounded-none border-y-0 border-l-0 text-sbk-fg"
+}, m = (b, a) => {
+  var o;
+  return !!a && (b.id === a || !!((o = b.children) != null && o.some((n) => m(n, a))));
+}, E = ({
+  items: b,
+  sections: a,
+  activeId: o,
+  collapsed: n = !1,
+  defaultOpenIds: $,
+  onNavigate: f,
+  renderLink: g,
+  header: k,
+  footer: x,
+  variant: y = "light",
+  className: A,
+  "aria-label": j = "Navegação"
+}) => {
+  const N = a ?? [{ id: "default", items: b ?? [] }], u = F(), [z, I] = M(
+    () => $ ?? N.flatMap((e) => e.items).filter((e) => e.children && m(e, o)).map((e) => e.id)
+  ), R = (e) => I((r) => r.includes(e) ? r.filter((t) => t !== e) : [...r, e]), v = (e, r, t) => l(
+    V,
+    "group relative flex w-full cursor-pointer items-center gap-3 rounded-sbk-sm text-left text-sm no-underline",
+    "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid",
+    T,
+    n ? "size-10 justify-center p-0" : "min-h-10 px-3 py-2",
+    r > 0 && !n && "pl-10",
+    e ? 'bg-sbk-primary-subtle font-semibold text-sbk-fg-heading before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-sbk-primary before:content-[""]' : "font-light text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+    y === "dark" && e && "bg-sbk-branco/12 before:bg-sbk-branco",
+    t && "pointer-events-none opacity-50"
+  ), w = (e, r = 0) => {
+    var C;
+    const t = e.id === o, c = /* @__PURE__ */ d(D, { children: [
+      e.icon && /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "inline-flex shrink-0 [&_svg]:size-5", children: e.icon }),
+      /* @__PURE__ */ s("span", { className: l("min-w-0 flex-1 truncate", n && "sr-only"), children: e.label }),
+      e.badge && !n && /* @__PURE__ */ s("span", { className: "shrink-0 text-xs font-semibold", children: e.badge })
+    ] });
+    if ((C = e.children) != null && C.length && !n) {
+      const i = z.includes(e.id), S = `${u}-group-${e.id}`;
+      return /* @__PURE__ */ d("li", { children: [
+        /* @__PURE__ */ d(
+          "button",
+          {
+            "aria-controls": S,
+            "aria-expanded": i,
+            className: v(m(e, o) && !i, r, e.disabled),
+            disabled: e.disabled,
+            onClick: () => R(e.id),
+            type: "button",
+            children: [
+              c,
+              /* @__PURE__ */ s(
+                O,
+                {
+                  "aria-hidden": "true",
+                  className: l(
+                    "size-4 shrink-0 transition-transform motion-reduce:transition-none",
+                    i && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ s("ul", { className: "m-0 mt-0.5 grid list-none gap-0.5 p-0", id: S, children: e.children.map((_) => w(_, r + 1)) })
+      ] }, e.id);
+    }
+    const h = () => {
+      var i;
+      (i = e.onClick) == null || i.call(e), f == null || f(e);
+    }, p = {
+      "aria-current": t ? "page" : void 0,
+      className: v(t, r, e.disabled),
+      title: n ? e.label : void 0
+    };
+    return /* @__PURE__ */ s("li", { children: e.href ? g ? g({ ...p, href: e.href, onClick: h, children: c }) : /* @__PURE__ */ s(
+      "a",
+      {
+        ...p,
+        "aria-disabled": e.disabled || void 0,
+        href: e.href,
+        onClick: h,
+        children: c
+      }
+    ) : /* @__PURE__ */ s("button", { ...p, disabled: e.disabled, onClick: h, type: "button", children: c }) }, e.id);
+  };
+  return /* @__PURE__ */ d(
+    "aside",
+    {
+      className: l(
+        "flex h-full shrink-0 flex-col",
+        n ? "w-16 items-center" : "w-64",
+        "transition-[width] duration-200 motion-reduce:transition-none",
+        B[y],
+        A
+      ),
+      children: [
+        k && /* @__PURE__ */ s("div", { className: l("shrink-0 px-4 py-4", n && "px-2"), children: k }),
+        /* @__PURE__ */ s(
+          "nav",
+          {
+            "aria-label": j,
+            className: l("min-h-0 flex-1 overflow-y-auto py-2", "px-3"),
+            children: N.map((e) => /* @__PURE__ */ d("div", { className: "mb-4 last:mb-0", children: [
+              e.title && (n ? /* @__PURE__ */ s("div", { "aria-hidden": "true", className: "mx-auto my-2 h-px w-6 bg-sbk-line" }) : /* @__PURE__ */ s(
+                "h2",
+                {
+                  className: "m-0 mb-1 px-3 text-xs font-semibold uppercase tracking-wide text-sbk-fg-muted",
+                  id: `${u}-${e.id}`,
+                  children: e.title
+                }
+              )),
+              /* @__PURE__ */ s(
+                "ul",
+                {
+                  "aria-labelledby": e.title && !n ? `${u}-${e.id}` : void 0,
+                  className: "m-0 grid list-none gap-0.5 p-0",
+                  children: e.items.map((r) => w(r))
+                }
+              )
+            ] }, e.id))
+          }
+        ),
+        x && /* @__PURE__ */ s("div", { className: l("shrink-0 border-t border-sbk-line px-4 py-3", n && "px-2"), children: x })
+      ]
+    }
+  );
+};
+E.displayName = "SideNav";
+export {
+  E as SideNav
+};
+//# sourceMappingURL=SideNav.js.map

package/dist/components/SideNav/SideNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.js","sources":["../../../src/components/SideNav/SideNav.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { useId, useState } from 'react';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, inverseScope, transitionColors } from '../../utils/styles';\r\n\r\nexport interface SideNavItem {\r\n  /** Contador ou etiqueta à direita (ex.: pendências). */\r\n  badge?: React.ReactNode;\r\n  /** Subitens: o item vira um grupo expansível. */\r\n  children?: SideNavItem[];\r\n  disabled?: boolean;\r\n  href?: string;\r\n  icon?: React.ReactNode;\r\n  id: string;\r\n  label: string;\r\n  onClick?: () => void;\r\n}\r\n\r\nexport interface SideNavSection {\r\n  id: string;\r\n  items: SideNavItem[];\r\n  /** Título da seção (ex.: \"Cadastros\"). */\r\n  title?: string;\r\n}\r\n\r\nexport interface SideNavLinkRenderProps {\r\n  'aria-current'?: 'page';\r\n  children: React.ReactNode;\r\n  className: string;\r\n  href: string;\r\n  onClick?: () => void;\r\n  title?: string;\r\n}\r\n\r\nexport interface SideNavProps {\r\n  /** Item ativo (recebe aria-current=\"page\"). */\r\n  activeId?: string;\r\n  'aria-label'?: string;\r\n  className?: string;\r\n  /** Modo compacto: somente ícones, com o label disponível como tooltip nativo e para leitores de tela. */\r\n  collapsed?: boolean;\r\n  /** Grupos abertos inicialmente. Por padrão, abre o grupo que contém o item ativo. */\r\n  defaultOpenIds?: string[];\r\n  footer?: React.ReactNode;\r\n  header?: React.ReactNode;\r\n  /** Itens simples, ou `sections` para agrupar com títulos. */\r\n  items?: SideNavItem[];\r\n  onNavigate?: (item: SideNavItem) => void;\r\n  /**\r\n   * Renderização customizada de links (integração com React Router, Next.js etc.).\r\n   * Ex.: `renderLink={({ href, ...p }) => <NavLink to={href} {...p} />}`\r\n   */\r\n  renderLink?: (props: SideNavLinkRenderProps) => React.ReactNode;\r\n  sections?: SideNavSection[];\r\n  /** `light`: superfície clara. `dark`: verde escuro. `glass`: Liquid Glass. */\r\n  variant?: 'light' | 'dark' | 'glass';\r\n}\r\n\r\nconst VARIANT_CLASS = {\r\n  light: 'border-r border-sbk-line bg-sbk-surface text-sbk-fg',\r\n  dark: inverseScope,\r\n  glass: 'sbk-glass rounded-none border-y-0 border-l-0 text-sbk-fg',\r\n} as const;\r\n\r\nconst containsActive = (item: SideNavItem, activeId?: string): boolean =>\r\n  !!activeId && (item.id === activeId || !!item.children?.some((c) => containsActive(c, activeId)));\r\n\r\n/** Menu de navegação lateral (Navigator): seções, grupos expansíveis, ícones, badges e modo compacto. */\r\nexport const SideNav = ({\r\n  items,\r\n  sections,\r\n  activeId,\r\n  collapsed = false,\r\n  defaultOpenIds,\r\n  onNavigate,\r\n  renderLink,\r\n  header,\r\n  footer,\r\n  variant = 'light',\r\n  className,\r\n  'aria-label': ariaLabel = 'Navegação',\r\n}: SideNavProps) => {\r\n  const allSections: SideNavSection[] = sections ?? [{ id: 'default', items: items ?? [] }];\r\n  const baseId = useId();\r\n  const [openIds, setOpenIds] = useState<string[]>(\r\n    () =>\r\n      defaultOpenIds ??\r\n      allSections\r\n        .flatMap((s) => s.items)\r\n        .filter((i) => i.children && containsActive(i, activeId))\r\n        .map((i) => i.id),\r\n  );\r\n\r\n  const toggle = (id: string) =>\r\n    setOpenIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\r\n\r\n  const itemClass = (active: boolean, depth: number, disabled?: boolean) =>\r\n    cn(\r\n      buttonReset,\r\n      'group relative flex w-full cursor-pointer items-center gap-3 rounded-sbk-sm text-left text-sm no-underline',\r\n      'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid',\r\n      transitionColors,\r\n      collapsed ? 'size-10 justify-center p-0' : 'min-h-10 px-3 py-2',\r\n      depth > 0 && !collapsed && 'pl-10',\r\n      active\r\n        ? 'bg-sbk-primary-subtle font-semibold text-sbk-fg-heading before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-sbk-primary before:content-[\"\"]'\r\n        : 'font-light text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\r\n      variant === 'dark' && active && 'bg-sbk-branco/12 before:bg-sbk-branco',\r\n      disabled && 'pointer-events-none opacity-50',\r\n    );\r\n\r\n  const renderItem = (item: SideNavItem, depth = 0): React.ReactNode => {\r\n    const active = item.id === activeId;\r\n    const content = (\r\n      <>\r\n        {item.icon && (\r\n          <span aria-hidden=\"true\" className=\"inline-flex shrink-0 [&_svg]:size-5\">\r\n            {item.icon}\r\n          </span>\r\n        )}\r\n        <span className={cn('min-w-0 flex-1 truncate', collapsed && 'sr-only')}>{item.label}</span>\r\n        {item.badge && !collapsed && (\r\n          <span className=\"shrink-0 text-xs font-semibold\">{item.badge}</span>\r\n        )}\r\n      </>\r\n    );\r\n\r\n    if (item.children?.length && !collapsed) {\r\n      const open = openIds.includes(item.id);\r\n      const groupId = `${baseId}-group-${item.id}`;\r\n      return (\r\n        <li key={item.id}>\r\n          <button\r\n            aria-controls={groupId}\r\n            aria-expanded={open}\r\n            className={itemClass(containsActive(item, activeId) && !open, depth, item.disabled)}\r\n            disabled={item.disabled}\r\n            onClick={() => toggle(item.id)}\r\n            type=\"button\"\r\n          >\r\n            {content}\r\n            <ChevronDown\r\n              aria-hidden=\"true\"\r\n              className={cn(\r\n                'size-4 shrink-0 transition-transform motion-reduce:transition-none',\r\n                open && 'rotate-180',\r\n              )}\r\n            />\r\n          </button>\r\n          {open && (\r\n            <ul className=\"m-0 mt-0.5 grid list-none gap-0.5 p-0\" id={groupId}>\r\n              {item.children.map((child) => renderItem(child, depth + 1))}\r\n            </ul>\r\n          )}\r\n        </li>\r\n      );\r\n    }\r\n\r\n    const handleClick = () => {\r\n      item.onClick?.();\r\n      onNavigate?.(item);\r\n    };\r\n    const common = {\r\n      'aria-current': active ? ('page' as const) : undefined,\r\n      className: itemClass(active, depth, item.disabled),\r\n      title: collapsed ? item.label : undefined,\r\n    };\r\n\r\n    return (\r\n      <li key={item.id}>\r\n        {item.href ? (\r\n          renderLink ? (\r\n            renderLink({ ...common, href: item.href, onClick: handleClick, children: content })\r\n          ) : (\r\n            <a\r\n              {...common}\r\n              aria-disabled={item.disabled || undefined}\r\n              href={item.href}\r\n              onClick={handleClick}\r\n            >\r\n              {content}\r\n            </a>\r\n          )\r\n        ) : (\r\n          <button {...common} disabled={item.disabled} onClick={handleClick} type=\"button\">\r\n            {content}\r\n          </button>\r\n        )}\r\n      </li>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <aside\r\n      className={cn(\r\n        'flex h-full shrink-0 flex-col',\r\n        collapsed ? 'w-16 items-center' : 'w-64',\r\n        'transition-[width] duration-200 motion-reduce:transition-none',\r\n        VARIANT_CLASS[variant],\r\n        className,\r\n      )}\r\n    >\r\n      {header && <div className={cn('shrink-0 px-4 py-4', collapsed && 'px-2')}>{header}</div>}\r\n      <nav\r\n        aria-label={ariaLabel}\r\n        className={cn('min-h-0 flex-1 overflow-y-auto py-2', collapsed ? 'px-3' : 'px-3')}\r\n      >\r\n        {allSections.map((section) => (\r\n          <div key={section.id} className=\"mb-4 last:mb-0\">\r\n            {section.title &&\r\n              (collapsed ? (\r\n                <div aria-hidden=\"true\" className=\"mx-auto my-2 h-px w-6 bg-sbk-line\" />\r\n              ) : (\r\n                <h2\r\n                  className=\"m-0 mb-1 px-3 text-xs font-semibold uppercase tracking-wide text-sbk-fg-muted\"\r\n                  id={`${baseId}-${section.id}`}\r\n                >\r\n                  {section.title}\r\n                </h2>\r\n              ))}\r\n            <ul\r\n              aria-labelledby={section.title && !collapsed ? `${baseId}-${section.id}` : undefined}\r\n              className=\"m-0 grid list-none gap-0.5 p-0\"\r\n            >\r\n              {section.items.map((item) => renderItem(item))}\r\n            </ul>\r\n          </div>\r\n        ))}\r\n      </nav>\r\n      {footer && (\r\n        <div className={cn('shrink-0 border-t border-sbk-line px-4 py-3', collapsed && 'px-2')}>\r\n          {footer}\r\n        </div>\r\n      )}\r\n    </aside>\r\n  );\r\n};\r\n\r\nSideNav.displayName = 'SideNav';\r\n"],"names":["VARIANT_CLASS","inverseScope","containsActive","item","activeId","_a","c","SideNav","items","sections","collapsed","defaultOpenIds","onNavigate","renderLink","header","footer","variant","className","ariaLabel","allSections","baseId","useId","openIds","setOpenIds","useState","s","i","toggle","id","prev","x","itemClass","active","depth","disabled","cn","buttonReset","transitionColors","renderItem","content","jsxs","Fragment","jsx","open","groupId","ChevronDown","child","handleClick","common","section"],"mappings":"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"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,7 +1,18 @@
 import type React from 'react';
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Atalho para `variant="circle"`. */
     circle?: boolean;
     height?: string;
+    /** Número de linhas quando `variant="text"`. A última fica mais curta. */
+    lines?: number;
+    variant?: 'rect' | 'circle' | 'text';
     width?: string;
 }
-export declare const Skeleton: React.FC<SkeletonProps>;
+/**
+ * Placeholder de carregamento. É decorativo (`aria-hidden`): anuncie o estado
+ * de carregamento no container com `aria-busy="true"` ou um Spinner.
+ */
+export declare const Skeleton: {
+    ({ circle, variant, lines, width, height, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Skeleton/Skeleton.js

@@ -1,25 +1,40 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as d } from "../../utils/cn.js";
-const l = ({
-  circle: r = !1,
-  width: e,
-  height: o,
-  className: a,
-  style: s,
-  ...n
-}) => /* @__PURE__ */ t(
+import { jsx as r } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const l = "animate-pulse bg-sbk-line motion-reduce:animate-none", u = ({
+  circle: c = !1,
+  variant: t = c ? "circle" : "rect",
+  lines: e = 3,
+  width: a,
+  height: m,
+  className: d,
+  style: o,
+  ...i
+}) => t === "text" ? /* @__PURE__ */ r(
   "div",
   {
-    className: d(
-      "animate-pulse bg-[var(--md-surface-container-high)]",
-      r ? "rounded-full" : "rounded-[var(--border-radius-sm)]",
-      a
-    ),
-    style: { width: e, height: o, ...s },
-    ...n
+    "aria-hidden": "true",
+    className: n("grid gap-2", d),
+    style: { width: a, ...o },
+    ...i,
+    children: Array.from({ length: e }, (f, s) => /* @__PURE__ */ r(
+      "div",
+      {
+        className: n(l, "h-3 rounded-sbk-xs", s === e - 1 && e > 1 && "w-3/5")
+      },
+      s
+    ))
+  }
+) : /* @__PURE__ */ r(
+  "div",
+  {
+    "aria-hidden": "true",
+    className: n(l, t === "circle" ? "rounded-full" : "rounded-sbk-sm", d),
+    style: { width: a, height: m, ...o },
+    ...i
   }
 );
+u.displayName = "Skeleton";
 export {
-  l as Skeleton
+  u as Skeleton
 };
 //# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  circle?: boolean;\n  height?: string;\n  width?: string;\n}\n\nexport const Skeleton: React.FC<SkeletonProps> = ({\n  circle = false,\n  width,\n  height,\n  className,\n  style,\n  ...props\n}) => {\n  return (\n    <div\n      className={cn(\n        'animate-pulse bg-[var(--md-surface-container-high)]',\n        circle ? 'rounded-full' : 'rounded-[var(--border-radius-sm)]',\n        className,\n      )}\n      style={{ width, height, ...style }}\n      {...props}\n    />\n  );\n};\n"],"names":["Skeleton","circle","width","height","className","style","props","jsx","cn"],"mappings":";;AASO,MAAMA,IAAoC,CAAC;AAAA,EAChD,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAP,IAAS,iBAAiB;AAAA,MAC1BG;AAAA,IAAA;AAAA,IAEF,OAAO,EAAE,OAAAF,GAAO,QAAAC,GAAQ,GAAGE,EAAA;AAAA,IAC1B,GAAGC;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Atalho para `variant=\"circle\"`. */\r\n  circle?: boolean;\r\n  height?: string;\r\n  /** Número de linhas quando `variant=\"text\"`. A última fica mais curta. */\r\n  lines?: number;\r\n  variant?: 'rect' | 'circle' | 'text';\r\n  width?: string;\r\n}\r\n\r\nconst base = 'animate-pulse bg-sbk-line motion-reduce:animate-none';\r\n\r\n/**\r\n * Placeholder de carregamento. É decorativo (`aria-hidden`): anuncie o estado\r\n * de carregamento no container com `aria-busy=\"true\"` ou um Spinner.\r\n */\r\nexport const Skeleton = ({\r\n  circle = false,\r\n  variant = circle ? 'circle' : 'rect',\r\n  lines = 3,\r\n  width,\r\n  height,\r\n  className,\r\n  style,\r\n  ...props\r\n}: SkeletonProps) => {\r\n  if (variant === 'text') {\r\n    return (\r\n      <div\r\n        aria-hidden=\"true\"\r\n        className={cn('grid gap-2', className)}\r\n        style={{ width, ...style }}\r\n        {...props}\r\n      >\r\n        {Array.from({ length: lines }, (_, i) => (\r\n          <div\r\n            key={i}\r\n            className={cn(base, 'h-3 rounded-sbk-xs', i === lines - 1 && lines > 1 && 'w-3/5')}\r\n          />\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      aria-hidden=\"true\"\r\n      className={cn(base, variant === 'circle' ? 'rounded-full' : 'rounded-sbk-sm', className)}\r\n      style={{ width, height, ...style }}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nSkeleton.displayName = 'Skeleton';\r\n"],"names":["base","Skeleton","circle","variant","lines","width","height","className","style","props","jsx","cn","_","i"],"mappings":";;AAaA,MAAMA,IAAO,wDAMAC,IAAW,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAUD,IAAS,WAAW;AAAA,EAC9B,OAAAE,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MACMN,MAAY,SAEZ,gBAAAO;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC,EAAG,cAAcJ,CAAS;AAAA,IACrC,OAAO,EAAE,OAAAF,GAAO,GAAGG,EAAA;AAAA,IAClB,GAAGC;AAAA,IAEH,UAAA,MAAM,KAAK,EAAE,QAAQL,KAAS,CAACQ,GAAGC,MACjC,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC,EAAGX,GAAM,sBAAsBa,MAAMT,IAAQ,KAAKA,IAAQ,KAAK,OAAO;AAAA,MAAA;AAAA,MAD5ES;AAAA,IAAA,CAGR;AAAA,EAAA;AAAA,IAML,gBAAAH;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC,EAAGX,GAAMG,MAAY,WAAW,iBAAiB,kBAAkBI,CAAS;AAAA,IACvF,OAAO,EAAE,OAAAF,GAAO,QAAAC,GAAQ,GAAGE,EAAA;AAAA,IAC1B,GAAGC;AAAA,EAAA;AAAA;AAKVR,EAAS,cAAc;"}

package/dist/components/Spinner/Spinner.d.ts

@@ -1,7 +1,15 @@
 import type React from 'react';
-export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
-    /** Texto anunciado para leitores de tela. Padrão: 'Carregando...' */
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Texto anunciado para leitores de tela. Padrão: "Carregando". */
     label?: string;
+    /** Exibe o label visualmente ao lado do spinner. */
+    showLabel?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** `current` herda a cor do texto (útil dentro de botões). */
+    tone?: 'current' | 'primary' | 'muted' | 'inverse';
 }
-export declare const Spinner: React.FC<SpinnerProps>;
+/** Indicador de carregamento circular. Em prefers-reduced-motion a rotação fica mais lenta. */
+export declare const Spinner: {
+    ({ size, label, showLabel, tone, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,57 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+const m = {
+  xs: "size-3",
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+  xl: "size-10"
+}, l = {
+  current: "text-current",
+  primary: "text-sbk-primary",
+  muted: "text-sbk-fg-muted",
+  inverse: "text-sbk-branco"
+}, d = ({
+  size: s = "md",
+  label: n = "Carregando",
+  showLabel: i = !1,
+  tone: o = "current",
+  className: a,
+  ...c
+}) => /* @__PURE__ */ t(
+  "span",
+  {
+    className: r("inline-flex items-center gap-2", l[o], a),
+    role: "status",
+    ...c,
+    children: [
+      /* @__PURE__ */ t(
+        "svg",
+        {
+          "aria-hidden": "true",
+          className: r("animate-spin motion-reduce:[animation-duration:2.5s]", m[s]),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2.5" }),
+            /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M12 2a10 10 0 0 1 10 10",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeWidth: "2.5"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: i ? "text-sm font-light text-sbk-fg-muted" : "sr-only", children: n })
+    ]
+  }
+);
+d.displayName = "Spinner";
+export {
+  d as Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {\r\n  /** Texto anunciado para leitores de tela. Padrão: \"Carregando\". */\r\n  label?: string;\r\n  /** Exibe o label visualmente ao lado do spinner. */\r\n  showLabel?: boolean;\r\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n  /** `current` herda a cor do texto (útil dentro de botões). */\r\n  tone?: 'current' | 'primary' | 'muted' | 'inverse';\r\n}\r\n\r\nconst SIZE_CLASS: Record<NonNullable<SpinnerProps['size']>, string> = {\r\n  xs: 'size-3',\r\n  sm: 'size-4',\r\n  md: 'size-5',\r\n  lg: 'size-6',\r\n  xl: 'size-10',\r\n};\r\n\r\nconst TONE_CLASS: Record<NonNullable<SpinnerProps['tone']>, string> = {\r\n  current: 'text-current',\r\n  primary: 'text-sbk-primary',\r\n  muted: 'text-sbk-fg-muted',\r\n  inverse: 'text-sbk-branco',\r\n};\r\n\r\n/** Indicador de carregamento circular. Em prefers-reduced-motion a rotação fica mais lenta. */\r\nexport const Spinner = ({\r\n  size = 'md',\r\n  label = 'Carregando',\r\n  showLabel = false,\r\n  tone = 'current',\r\n  className,\r\n  ...props\r\n}: SpinnerProps) => (\r\n  <span\r\n    className={cn('inline-flex items-center gap-2', TONE_CLASS[tone], className)}\r\n    role=\"status\"\r\n    {...props}\r\n  >\r\n    <svg\r\n      aria-hidden=\"true\"\r\n      className={cn('animate-spin motion-reduce:[animation-duration:2.5s]', SIZE_CLASS[size])}\r\n      fill=\"none\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeOpacity=\"0.2\" strokeWidth=\"2.5\" />\r\n      <path\r\n        d=\"M12 2a10 10 0 0 1 10 10\"\r\n        stroke=\"currentColor\"\r\n        strokeLinecap=\"round\"\r\n        strokeWidth=\"2.5\"\r\n      />\r\n    </svg>\r\n    <span className={showLabel ? 'text-sm font-light text-sbk-fg-muted' : 'sr-only'}>{label}</span>\r\n  </span>\r\n);\r\n\r\nSpinner.displayName = 'Spinner';\r\n"],"names":["SIZE_CLASS","TONE_CLASS","Spinner","size","label","showLabel","tone","className","props","jsxs","cn","jsx"],"mappings":";;AAaA,MAAMA,IAAgE;AAAA,EACpE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAgE;AAAA,EACpE,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,GAGaC,IAAU,CAAC;AAAA,EACtB,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAG,kCAAkCT,EAAWK,CAAI,GAAGC,CAAS;AAAA,IAC3E,MAAK;AAAA,IACJ,GAAGC;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAWC,EAAG,wDAAwDV,EAAWG,CAAI,CAAC;AAAA,UACtF,MAAK;AAAA,UACL,SAAQ;AAAA,UAER,UAAA;AAAA,YAAA,gBAAAQ,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,eAAc,OAAM,aAAY,OAAM;AAAA,YAC3F,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAE;AAAA,gBACF,QAAO;AAAA,gBACP,eAAc;AAAA,gBACd,aAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACd;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EAAK,WAAWN,IAAY,yCAAyC,WAAY,UAAAD,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAC1F;AAGFF,EAAQ,cAAc;"}

package/dist/components/Stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface StepperItem {
     description?: string;
     id: string;

package/dist/components/Stepper/Stepper.js

@@ -1,90 +1,78 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
+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 u = ({
-  items: n,
-  currentStep: c,
-  orientation: v = "horizontal",
+const g = ({
+  items: o,
+  currentStep: m,
+  orientation: f = "horizontal",
   className: p,
-  ...x
+  ...b
 }) => {
-  const s = n.findIndex((e) => e.id === c), l = v === "horizontal", f = (e) => e < s ? "completed" : e === s ? "active" : "pending", d = (e) => e ? "bg-[var(--md-primary)]" : "bg-[var(--md-outline-variant)]";
+  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: r(l ? "flex items-start" : "flex flex-col", p),
+      className: r(a ? "flex items-start" : "flex flex-col", p),
       role: "list",
-      ...x,
-      children: n.map((e, i) => {
-        const a = f(i), m = i === n.length - 1;
-        return /* @__PURE__ */ o(
+      ...b,
+      children: o.map((e, i) => {
+        const s = h(i), d = i === o.length - 1;
+        return /* @__PURE__ */ n(
           "div",
           {
-            className: r("flex", l ? "flex-1 flex-col items-center" : "gap-4"),
+            className: r("flex", a ? "flex-1 flex-col items-center" : "gap-4"),
             role: "listitem",
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ n(
                 "div",
                 {
                   className: r(
-                    l ? "flex w-full items-center" : "flex flex-col items-center"
+                    a ? "flex w-full items-center" : "flex flex-col items-center"
                   ),
                   children: [
-                    l && /* Conector esquerdo: espaçador no 1º item, linha colorida nos demais */
+                    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-hidden": "true",
-                        className: r(
-                          "h-0.5 flex-1 transition",
-                          d(i <= s)
-                        )
+                        className: r("h-0.5 flex-1", c(i <= l))
                       }
                     )),
                     /* @__PURE__ */ t(
                       "div",
                       {
-                        "aria-current": a === "active" ? "step" : void 0,
+                        "aria-current": s === "active" ? "step" : void 0,
                         className: r(
-                          "relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition",
-                          a === "completed" && "border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]",
-                          a === "active" && "border-[var(--md-primary)] bg-[var(--md-surface)] text-[var(--md-primary)]",
-                          a === "pending" && "border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--text-muted)]"
+                          "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"
                         ),
-                        children: a === "completed" ? /* @__PURE__ */ t(
-                          "svg",
-                          {
-                            className: "h-4 w-4",
-                            fill: "none",
-                            stroke: "currentColor",
-                            strokeWidth: "2.5",
-                            viewBox: "0 0 24 24",
-                            children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" })
-                          }
-                        ) : i + 1
+                        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
                       }
                     ),
-                    l ? (
+                    a ? (
                       /* Conector direito: linha colorida se não for último, espaçador se for */
-                      m ? /* @__PURE__ */ t("div", { className: "flex-1", "aria-hidden": "true" }) : /* @__PURE__ */ t(
+                      d ? /* @__PURE__ */ t("div", { className: "flex-1", "aria-hidden": "true" }) : /* @__PURE__ */ t(
                         "div",
                         {
                           "aria-hidden": "true",
-                          className: r(
-                            "h-0.5 flex-1 transition",
-                            d(i < s)
-                          )
+                          className: r("h-0.5 flex-1", c(i < l))
                         }
                       )
                     ) : (
                       /* Conector vertical (para orientação vertical) */
-                      !m && /* @__PURE__ */ t(
+                      !d && /* @__PURE__ */ t(
                         "div",
                         {
                           "aria-hidden": "true",
                           className: r(
-                            "my-1 ml-[1.0625rem] w-0.5 flex-1 transition",
-                            d(i < s)
+                            "my-1 ml-[1.0625rem] w-0.5 flex-1",
+                            c(i < l)
                           )
                         }
                       )
@@ -92,20 +80,20 @@ const u = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ o("div", { className: r("mt-2 text-center", !l && "mt-0 pb-6 text-left"), children: [
+              /* @__PURE__ */ n("div", { className: r("mt-2 text-center", !a && "mt-0 pb-6 text-left"), children: [
                 /* @__PURE__ */ t(
                   "p",
                   {
                     className: r(
-                      "text-sm font-medium leading-tight",
-                      a === "active" && "text-[var(--md-primary)]",
-                      a === "completed" && "text-[var(--text-primary)]",
-                      a === "pending" && "text-[var(--text-muted)]"
+                      "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__ */ t("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 })
               ] })
             ]
           },
@@ -115,8 +103,8 @@ const u = ({
     }
   );
 };
-u.displayName = "Stepper";
+g.displayName = "Stepper";
 export {
-  u 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  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-[var(--md-primary)]' : 'bg-[var(--md-outline-variant)]';\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(\n                      'h-0.5 flex-1 transition',\n                      connectorColor(index <= currentIndex),\n                    )}\n                  />\n                )\n              )}\n\n              {/* Círculo */}\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              {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(\n                      'h-0.5 flex-1 transition',\n                      connectorColor(index < currentIndex),\n                    )}\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 transition',\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                  '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","isHorizontal","getStatus","index","connectorColor","isActive","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,GAChEM,IAAeL,MAAgB,cAE/BM,IAAY,CAACC,MACbA,IAAQJ,IAAqB,cAC7BI,MAAUJ,IAAqB,WAC5B,WAGHK,IAAiB,CAACC,MACtBA,IAAW,2BAA2B;AAExC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAGN,IAAe,qBAAqB,iBAAiBJ,CAAS;AAAA,MAC5E,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEH,UAAAJ,EAAM,IAAI,CAACM,GAAMG,MAAU;AAC1B,cAAMK,IAASN,EAAUC,CAAK,GACxBM,IAASN,MAAUT,EAAM,SAAS;AAExC,eACE,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWH,EAAG,QAAQN,IAAe,iCAAiC,OAAO;AAAA,YAC7E,MAAK;AAAA,YAGL,UAAA;AAAA,cAAA,gBAAAS;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACTN,IAAe,6BAA6B;AAAA,kBAAA;AAAA,kBAG7C,UAAA;AAAA,oBAAAA;AAAA,qBAECE,MAAU,IACR,gBAAAG,EAAC,OAAA,EAAI,WAAU,UAAS,eAAY,QAAO,IAE3C,gBAAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,eAAY;AAAA,wBACZ,WAAWC;AAAA,0BACT;AAAA,0BACAH,EAAeD,KAASJ,CAAY;AAAA,wBAAA;AAAA,sBACtC;AAAA,oBAAA;AAAA,oBAMN,gBAAAO;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,IAGzEH,IAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAIXF;AAAA;AAAA,sBAECQ,IACE,gBAAAH,EAAC,OAAA,EAAI,WAAU,UAAS,eAAY,QAAO,IAE3C,gBAAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,eAAY;AAAA,0BACZ,WAAWC;AAAA,4BACT;AAAA,4BACAH,EAAeD,IAAQJ,CAAY;AAAA,0BAAA;AAAA,wBACrC;AAAA,sBAAA;AAAA;AAAA;AAAA,sBAKJ,CAACU,KACC,gBAAAH;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,eAAY;AAAA,0BACZ,WAAWC;AAAA,4BACT;AAAA,4BACAH,EAAeD,IAAQJ,CAAY;AAAA,0BAAA;AAAA,wBACrC;AAAA,sBAAA;AAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,cAMN,gBAAAW,EAAC,SAAI,WAAWH,EAAG,oBAAoB,CAACN,KAAgB,qBAAqB,GAC3E,UAAA;AAAA,gBAAA,gBAAAK;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,UAAAR,EAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEPA,EAAK,eACJ,gBAAAM,EAAC,OAAE,WAAU,2CAA2C,YAAK,YAAA,CAAY;AAAA,cAAA,EAAA,CAE7E;AAAA,YAAA;AAAA,UAAA;AAAA,UA/FKN,EAAK;AAAA,QAAA;AAAA,MAkGhB,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';\r\nimport { Check } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface StepperItem {\r\n  description?: string;\r\n  id: string;\r\n  label: string;\r\n}\r\n\r\nexport type StepStatus = 'completed' | 'active' | 'pending';\r\n\r\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  currentStep: string;\r\n  items: StepperItem[];\r\n  orientation?: 'horizontal' | 'vertical';\r\n}\r\n\r\nexport const Stepper: React.FC<StepperProps> = ({\r\n  items,\r\n  currentStep,\r\n  orientation = 'horizontal',\r\n  className,\r\n  ...props\r\n}) => {\r\n  const currentIndex = items.findIndex((item) => item.id === currentStep);\r\n  const isHorizontal = orientation === 'horizontal';\r\n\r\n  const getStatus = (index: number): StepStatus => {\r\n    if (index < currentIndex) return 'completed';\r\n    if (index === currentIndex) return 'active';\r\n    return 'pending';\r\n  };\r\n\r\n  const connectorColor = (isActive: boolean) =>\r\n    isActive ? 'bg-sbk-primary' : 'bg-sbk-line-strong';\r\n\r\n  return (\r\n    <div\r\n      aria-label=\"Progresso\"\r\n      className={cn(isHorizontal ? 'flex items-start' : 'flex flex-col', className)}\r\n      role=\"list\"\r\n      {...props}\r\n    >\r\n      {items.map((item, index) => {\r\n        const status = getStatus(index);\r\n        const isLast = index === items.length - 1;\r\n\r\n        return (\r\n          <div\r\n            key={item.id}\r\n            className={cn('flex', isHorizontal ? 'flex-1 flex-col items-center' : 'gap-4')}\r\n            role=\"listitem\"\r\n          >\r\n            {/* ── Indicador + conectores ─────────────────── */}\r\n            <div\r\n              className={cn(\r\n                isHorizontal ? 'flex w-full items-center' : 'flex flex-col items-center',\r\n              )}\r\n            >\r\n              {isHorizontal &&\r\n                /* Conector esquerdo: espaçador no 1º item, linha colorida nos demais */\r\n                (index === 0 ? (\r\n                  <div className=\"flex-1\" aria-hidden=\"true\" />\r\n                ) : (\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    className={cn('h-0.5 flex-1', connectorColor(index <= currentIndex))}\r\n                  />\r\n                ))}\r\n\r\n              {/* Círculo */}\r\n              <div\r\n                aria-current={status === 'active' ? 'step' : undefined}\r\n                className={cn(\r\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',\r\n                  status === 'completed' && 'border-sbk-primary bg-sbk-primary text-sbk-on-primary',\r\n                  status === 'active' && 'border-sbk-primary bg-sbk-surface text-sbk-primary',\r\n                  status === 'pending' && 'border-sbk-line-strong bg-sbk-surface text-sbk-fg-muted',\r\n                )}\r\n              >\r\n                {status === 'completed' ? (\r\n                  <>\r\n                    <Check aria-hidden=\"true\" className=\"size-4\" strokeWidth={2.5} />\r\n                    <span className=\"sr-only\">Concluído: </span>\r\n                  </>\r\n                ) : (\r\n                  index + 1\r\n                )}\r\n              </div>\r\n\r\n              {isHorizontal ? (\r\n                /* Conector direito: linha colorida se não for último, espaçador se for */\r\n                isLast ? (\r\n                  <div className=\"flex-1\" aria-hidden=\"true\" />\r\n                ) : (\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    className={cn('h-0.5 flex-1', connectorColor(index < currentIndex))}\r\n                  />\r\n                )\r\n              ) : (\r\n                /* Conector vertical (para orientação vertical) */\r\n                !isLast && (\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    className={cn(\r\n                      'my-1 ml-[1.0625rem] w-0.5 flex-1',\r\n                      connectorColor(index < currentIndex),\r\n                    )}\r\n                  />\r\n                )\r\n              )}\r\n            </div>\r\n\r\n            {/* ── Label + descrição ──────────────────────── */}\r\n            <div className={cn('mt-2 text-center', !isHorizontal && 'mt-0 pb-6 text-left')}>\r\n              <p\r\n                className={cn(\r\n                  'm-0 text-sm font-semibold leading-tight',\r\n                  status === 'active' && 'text-sbk-fg-heading',\r\n                  status === 'completed' && 'text-sbk-fg',\r\n                  status === 'pending' && 'font-light text-sbk-fg-muted',\r\n                )}\r\n              >\r\n                {item.label}\r\n              </p>\r\n              {item.description && (\r\n                <p className=\"m-0 mt-0.5 text-xs font-light text-sbk-fg-muted\">\r\n                  {item.description}\r\n                </p>\r\n              )}\r\n            </div>\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nStepper.displayName = 'Stepper';\r\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;
+};