@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Select/Select.js

@@ -1,45 +1,57 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import x from "react";
-import { cn as b } from "../../utils/cn.js";
-const f = x.forwardRef(
-  ({ label: d, helperText: t, error: r, options: o, size: i = "md", className: l, id: n, ...c }, m) => {
-    const e = n || `select-${Math.random().toString(36).slice(2, 9)}`, v = {
-      sm: "min-h-8 px-3 py-1.5 text-sm",
-      md: "min-h-10 px-3.5 py-2 text-base",
-      lg: "min-h-12 px-4 py-3 text-lg"
-    }[i];
-    return /* @__PURE__ */ u("div", { className: "grid gap-1", children: [
-      d && /* @__PURE__ */ a(
-        "label",
-        {
-          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
-          htmlFor: e,
-          children: d
-        }
-      ),
-      /* @__PURE__ */ a(
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import b, { useId as h } from "react";
+import { ChevronDown as y } from "lucide-react";
+import { cn as N } from "../../utils/cn.js";
+import { describedBy as x, fieldSize as I, fieldControl as S } from "../../utils/styles.js";
+import { Field as g } from "../Field/Field.js";
+const j = b.forwardRef(
+  ({
+    label: o,
+    helperText: t,
+    error: a,
+    options: n,
+    placeholder: d,
+    size: c = "md",
+    className: m,
+    id: p,
+    required: l,
+    ...u
+  }, f) => {
+    const v = h(), r = p ?? v;
+    return /* @__PURE__ */ i(g, { error: a, helperText: t, id: r, label: o, required: l, children: /* @__PURE__ */ s("div", { className: "relative", children: [
+      /* @__PURE__ */ s(
         "select",
         {
-          ref: m,
-          "aria-describedby": r ? `${e}-error` : t ? `${e}-helper` : void 0,
-          "aria-invalid": r ? !0 : void 0,
-          className: b(
-            "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-on-surface)] outline-none transition focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:opacity-60",
-            r && "border-[var(--md-error)]",
-            v,
-            l
+          ref: f,
+          "aria-describedby": x(r, a, t),
+          "aria-invalid": a ? !0 : void 0,
+          className: N(
+            S,
+            I[c],
+            "cursor-pointer appearance-none pr-10",
+            m
           ),
-          id: e,
-          ...c,
-          children: o.map((s) => /* @__PURE__ */ a("option", { value: s.value, children: s.label }, s.value))
+          id: r,
+          required: l,
+          ...u,
+          children: [
+            d && /* @__PURE__ */ i("option", { disabled: !0, value: "", children: d }),
+            n.map((e) => /* @__PURE__ */ i("option", { disabled: e.disabled, value: e.value, children: e.label }, e.value))
+          ]
         }
       ),
-      r ? /* @__PURE__ */ a("span", { className: "text-xs text-[var(--md-error)]", id: `${e}-error`, role: "alert", children: r }) : t && /* @__PURE__ */ a("span", { className: "text-xs text-[var(--md-on-surface-variant)]", id: `${e}-helper`, children: t })
-    ] });
+      /* @__PURE__ */ i(
+        y,
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-sbk-fg-muted"
+        }
+      )
+    ] }) });
   }
 );
-f.displayName = "Select";
+j.displayName = "Select";
 export {
-  f as Select
+  j as Select
 };
 //# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  error?: string;\n  helperText?: string;\n  label?: string;\n  options: SelectOption[];\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  ({ label, helperText, error, options, size = 'md', className, id, ...props }, ref) => {\n    const selectId = id || `select-${Math.random().toString(36).slice(2, 9)}`;\n\n    const sizeClass = {\n      sm: 'min-h-8 px-3 py-1.5 text-sm',\n      md: 'min-h-10 px-3.5 py-2 text-base',\n      lg: 'min-h-12 px-4 py-3 text-lg',\n    }[size];\n\n    return (\n      <div className=\"grid gap-1\">\n        {label && (\n          <label\n            className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n            htmlFor={selectId}\n          >\n            {label}\n          </label>\n        )}\n        <select\n          ref={ref}\n          aria-describedby={\n            error ? `${selectId}-error` : helperText ? `${selectId}-helper` : undefined\n          }\n          aria-invalid={error ? true : undefined}\n          className={cn(\n            'w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-on-surface)] outline-none transition focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:opacity-60',\n            error && 'border-[var(--md-error)]',\n            sizeClass,\n            className,\n          )}\n          id={selectId}\n          {...props}\n        >\n          {options.map((option) => (\n            <option key={option.value} value={option.value}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n        {error ? (\n          <span className=\"text-xs text-[var(--md-error)]\" id={`${selectId}-error`} role=\"alert\">\n            {error}\n          </span>\n        ) : (\n          helperText && (\n            <span className=\"text-xs text-[var(--md-on-surface-variant)]\" id={`${selectId}-helper`}>\n              {helperText}\n            </span>\n          )\n        )}\n      </div>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"names":["Select","React","label","helperText","error","options","size","className","id","props","ref","selectId","sizeClass","jsxs","jsx","cn","option"],"mappings":";;;AAgBO,MAAMA,IAASC,EAAM;AAAA,EAC1B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,MAAM,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AACpF,UAAMC,IAAWH,KAAM,UAAU,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,IAEjEI,IAAY;AAAA,MAChB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,EACJN,CAAI;AAEN,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,MAAAX,KACC,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASH;AAAA,UAER,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAJ;AAAA,UACA,oBACEN,IAAQ,GAAGO,CAAQ,WAAWR,IAAa,GAAGQ,CAAQ,YAAY;AAAA,UAEpE,gBAAcP,IAAQ,KAAO;AAAA,UAC7B,WAAWW;AAAA,YACT;AAAA,YACAX,KAAS;AAAA,YACTQ;AAAA,YACAL;AAAA,UAAA;AAAA,UAEF,IAAII;AAAA,UACH,GAAGF;AAAA,UAEH,UAAAJ,EAAQ,IAAI,CAACW,MACZ,gBAAAF,EAAC,UAAA,EAA0B,OAAOE,EAAO,OACtC,UAAAA,EAAO,MAAA,GADGA,EAAO,KAEpB,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFZ,sBACE,QAAA,EAAK,WAAU,kCAAiC,IAAI,GAAGO,CAAQ,UAAU,MAAK,SAC5E,aACH,IAEAR,uBACG,QAAA,EAAK,WAAU,+CAA8C,IAAI,GAAGQ,CAAQ,WAC1E,UAAAR,EAAA,CACH;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AAEAH,EAAO,cAAc;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { describedBy, fieldControl, fieldSize, type FieldSize } from '../../utils/styles';\nimport { Field } from '../Field/Field';\n\nexport interface SelectOption {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nexport interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  error?: string;\n  helperText?: string;\n  label?: React.ReactNode;\n  options: SelectOption[];\n  /** Opção vazia inicial (ex.: \"Selecione...\"). */\n  placeholder?: string;\n  size?: FieldSize;\n}\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      label,\n      helperText,\n      error,\n      options,\n      placeholder,\n      size = 'md',\n      className,\n      id,\n      required,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const selectId = id ?? autoId;\n\n    return (\n      <Field error={error} helperText={helperText} id={selectId} label={label} required={required}>\n        <div className=\"relative\">\n          <select\n            ref={ref}\n            aria-describedby={describedBy(selectId, error, helperText)}\n            aria-invalid={error ? true : undefined}\n            className={cn(\n              fieldControl,\n              fieldSize[size],\n              'cursor-pointer appearance-none pr-10',\n              className,\n            )}\n            id={selectId}\n            required={required}\n            {...props}\n          >\n            {placeholder && (\n              <option disabled value=\"\">\n                {placeholder}\n              </option>\n            )}\n            {options.map((option) => (\n              <option key={option.value} disabled={option.disabled} value={option.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n          <ChevronDown\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-sbk-fg-muted\"\n          />\n        </div>\n      </Field>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"names":["Select","React","label","helperText","error","options","placeholder","size","className","id","required","props","ref","autoId","useId","selectId","jsx","Field","jsxs","describedBy","cn","fieldControl","fieldSize","option","ChevronDown"],"mappings":";;;;;;AAsBO,MAAMA,IAASC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAASC,EAAA,GACTC,IAAWN,KAAMI;AAEvB,WACE,gBAAAG,EAACC,GAAA,EAAM,OAAAb,GAAc,YAAAD,GAAwB,IAAIY,GAAU,OAAAb,GAAc,UAAAQ,GACvE,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAN;AAAA,UACA,oBAAkBO,EAAYJ,GAAUX,GAAOD,CAAU;AAAA,UACzD,gBAAcC,IAAQ,KAAO;AAAA,UAC7B,WAAWgB;AAAA,YACTC;AAAA,YACAC,EAAUf,CAAI;AAAA,YACd;AAAA,YACAC;AAAA,UAAA;AAAA,UAEF,IAAIO;AAAA,UACJ,UAAAL;AAAA,UACC,GAAGC;AAAA,UAEH,UAAA;AAAA,YAAAL,uBACE,UAAA,EAAO,UAAQ,IAAC,OAAM,IACpB,UAAAA,GACH;AAAA,YAEDD,EAAQ,IAAI,CAACkB,MACZ,gBAAAP,EAAC,YAA0B,UAAUO,EAAO,UAAU,OAAOA,EAAO,OACjE,UAAAA,EAAO,MAAA,GADGA,EAAO,KAEpB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACF;AAEAxB,EAAO,cAAc;"}

package/dist/components/SideNav/SideNav.d.ts

@@ -0,0 +1,55 @@
+import type React from 'react';
+export interface SideNavItem {
+    /** Contador ou etiqueta à direita (ex.: pendências). */
+    badge?: React.ReactNode;
+    /** Subitens: o item vira um grupo expansível. */
+    children?: SideNavItem[];
+    disabled?: boolean;
+    href?: string;
+    icon?: React.ReactNode;
+    id: string;
+    label: string;
+    onClick?: () => void;
+}
+export interface SideNavSection {
+    id: string;
+    items: SideNavItem[];
+    /** Título da seção (ex.: "Cadastros"). */
+    title?: string;
+}
+export interface SideNavLinkRenderProps {
+    'aria-current'?: 'page';
+    children: React.ReactNode;
+    className: string;
+    href: string;
+    onClick?: () => void;
+    title?: string;
+}
+export interface SideNavProps {
+    /** Item ativo (recebe aria-current="page"). */
+    activeId?: string;
+    'aria-label'?: string;
+    className?: string;
+    /** Modo compacto: somente ícones, com o label disponível como tooltip nativo e para leitores de tela. */
+    collapsed?: boolean;
+    /** Grupos abertos inicialmente. Por padrão, abre o grupo que contém o item ativo. */
+    defaultOpenIds?: string[];
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    /** Itens simples, ou `sections` para agrupar com títulos. */
+    items?: SideNavItem[];
+    onNavigate?: (item: SideNavItem) => void;
+    /**
+     * Renderização customizada de links (integração com React Router, Next.js etc.).
+     * Ex.: `renderLink={({ href, ...p }) => <NavLink to={href} {...p} />}`
+     */
+    renderLink?: (props: SideNavLinkRenderProps) => React.ReactNode;
+    sections?: SideNavSection[];
+    /** `light`: superfície clara. `dark`: verde escuro. `glass`: Liquid Glass. */
+    variant?: 'light' | 'dark' | 'glass';
+}
+/** Menu de navegação lateral (Navigator): seções, grupos expansíveis, ícones, badges e modo compacto. */
+export declare const SideNav: {
+    ({ items, sections, activeId, collapsed, defaultOpenIds, onNavigate, renderLink, header, footer, variant, className, "aria-label": ariaLabel, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,15 @@
+import type React from 'react';
+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';
+}
+/** 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';\nimport { cn } from '../../utils/cn';\n\nexport interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {\n  /** Texto anunciado para leitores de tela. Padrão: \"Carregando\". */\n  label?: string;\n  /** Exibe o label visualmente ao lado do spinner. */\n  showLabel?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** `current` herda a cor do texto (útil dentro de botões). */\n  tone?: 'current' | 'primary' | 'muted' | 'inverse';\n}\n\nconst SIZE_CLASS: Record<NonNullable<SpinnerProps['size']>, string> = {\n  xs: 'size-3',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-10',\n};\n\nconst TONE_CLASS: Record<NonNullable<SpinnerProps['tone']>, string> = {\n  current: 'text-current',\n  primary: 'text-sbk-primary',\n  muted: 'text-sbk-fg-muted',\n  inverse: 'text-sbk-branco',\n};\n\n/** Indicador de carregamento circular. Em prefers-reduced-motion a rotação fica mais lenta. */\nexport const Spinner = ({\n  size = 'md',\n  label = 'Carregando',\n  showLabel = false,\n  tone = 'current',\n  className,\n  ...props\n}: SpinnerProps) => (\n  <span\n    className={cn('inline-flex items-center gap-2', TONE_CLASS[tone], className)}\n    role=\"status\"\n    {...props}\n  >\n    <svg\n      aria-hidden=\"true\"\n      className={cn('animate-spin motion-reduce:[animation-duration:2.5s]', SIZE_CLASS[size])}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeOpacity=\"0.2\" strokeWidth=\"2.5\" />\n      <path\n        d=\"M12 2a10 10 0 0 1 10 10\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"2.5\"\n      />\n    </svg>\n    <span className={showLabel ? 'text-sm font-light text-sbk-fg-muted' : 'sr-only'}>{label}</span>\n  </span>\n);\n\nSpinner.displayName = 'Spinner';\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;