@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface PaginationProps {\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  totalPages: number;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n}) => {\n  if (totalPages <= 1) {\n    return null;\n  }\n\n  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);\n\n  return (\n    <nav aria-label=\"Paginação\" className=\"flex flex-wrap items-center gap-1\">\n      <button\n        className=\"rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50\"\n        disabled={currentPage === 1}\n        onClick={() => onPageChange(Math.max(currentPage - 1, 1))}\n        type=\"button\"\n      >\n        Anterior\n      </button>\n      {pages.map((page) => (\n        <button\n          className={cn(\n            'rounded-[var(--border-radius-sm)] border px-2.5 py-1 text-sm',\n            page === currentPage\n              ? 'border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]'\n              : 'border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n          )}\n          key={page}\n          onClick={() => onPageChange(page)}\n          type=\"button\"\n        >\n          {page}\n        </button>\n      ))}\n      <button\n        className=\"rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50\"\n        disabled={currentPage === totalPages}\n        onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}\n        type=\"button\"\n      >\n        Próxima\n      </button>\n    </nav>\n  );\n};\n"],"names":["Pagination","currentPage","totalPages","onPageChange","pages","_","jsxs","jsx","page","cn"],"mappings":";;AASO,MAAMA,IAAwC,CAAC;AAAA,EACpD,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,MAAID,KAAc;AAChB,WAAO;AAGT,QAAME,IAAQ,MAAM,KAAK,EAAE,QAAQF,EAAA,GAAc,CAACG,GAAG,MAAM,IAAI,CAAC;AAEhE,SACE,gBAAAC,EAAC,OAAA,EAAI,cAAW,aAAY,WAAU,qCACpC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAUN,MAAgB;AAAA,QAC1B,SAAS,MAAME,EAAa,KAAK,IAAIF,IAAc,GAAG,CAAC,CAAC;AAAA,QACxD,MAAK;AAAA,QACN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGAG,EAAM,IAAI,CAACI,MACV,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA,UACT;AAAA,UACAD,MAASP,IACL,kFACA;AAAA,QAAA;AAAA,QAGN,SAAS,MAAME,EAAaK,CAAI;AAAA,QAChC,MAAK;AAAA,QAEJ,UAAAA;AAAA,MAAA;AAAA,MAJIA;AAAA,IAAA,CAMR;AAAA,IACD,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAUN,MAAgBC;AAAA,QAC1B,SAAS,MAAMC,EAAa,KAAK,IAAIF,IAAc,GAAGC,CAAU,CAAC;AAAA,QACjE,MAAK;AAAA,QACN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\n\nexport interface PaginationProps {\n  className?: string;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  /** Páginas vizinhas exibidas ao redor da atual. Padrão: 1. */\n  siblingCount?: number;\n  /**\n   * `numbered`: lista de páginas com reticências.\n   * `simple`: apenas Anterior/Próxima com \"Página X de Y\" (para paginação sequencial).\n   */\n  variant?: 'numbered' | 'simple';\n  totalPages: number;\n}\n\ntype PageToken = number | 'ellipsis-start' | 'ellipsis-end';\n\nexport const getPageTokens = (current: number, total: number, siblings = 1): PageToken[] => {\n  const window = siblings * 2 + 5;\n  if (total <= window) return Array.from({ length: total }, (_, i) => i + 1);\n  const start = Math.max(2, current - siblings);\n  const end = Math.min(total - 1, current + siblings);\n  const tokens: PageToken[] = [1];\n  if (start > 2) tokens.push('ellipsis-start');\n  for (let p = start; p <= end; p++) tokens.push(p);\n  if (end < total - 1) tokens.push('ellipsis-end');\n  tokens.push(total);\n  return tokens;\n};\n\nconst buttonBase = cn(\n  'inline-flex min-h-9 min-w-9 cursor-pointer items-center justify-center gap-1 rounded-sbk-sm border px-2.5 text-sm disabled:cursor-not-allowed disabled:opacity-50',\n  transitionColors,\n  focusRing,\n);\n\nexport const Pagination = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  siblingCount = 1,\n  variant = 'numbered',\n  className,\n}: PaginationProps) => {\n  if (totalPages <= 1) return null;\n  const idle = 'border-sbk-line bg-sbk-surface font-light text-sbk-fg hover:bg-sbk-surface-hover';\n\n  return (\n    <nav aria-label=\"Paginação\" className={cn('flex flex-wrap items-center gap-1', className)}>\n      <button\n        className={cn(buttonReset, buttonBase, idle)}\n        disabled={currentPage <= 1}\n        onClick={() => onPageChange(currentPage - 1)}\n        type=\"button\"\n      >\n        <ChevronLeft aria-hidden=\"true\" className=\"size-4\" />\n        Anterior\n      </button>\n\n      {variant === 'simple' ? (\n        <span aria-live=\"polite\" className=\"px-3 text-sm font-light text-sbk-fg-muted\">\n          Página <strong className=\"font-semibold text-sbk-fg\">{currentPage}</strong> de{' '}\n          {totalPages}\n        </span>\n      ) : (\n        getPageTokens(currentPage, totalPages, siblingCount).map((token) =>\n          typeof token === 'number' ? (\n            <button\n              key={token}\n              aria-current={token === currentPage ? 'page' : undefined}\n              aria-label={`Página ${token}`}\n              className={cn(\n                buttonReset,\n                buttonBase,\n                token === currentPage\n                  ? 'border-sbk-primary bg-sbk-primary font-semibold text-sbk-on-primary'\n                  : idle,\n              )}\n              onClick={() => onPageChange(token)}\n              type=\"button\"\n            >\n              {token}\n            </button>\n          ) : (\n            <span key={token} aria-hidden=\"true\" className=\"px-1 text-sm text-sbk-fg-muted\">\n              …\n            </span>\n          ),\n        )\n      )}\n\n      <button\n        className={cn(buttonReset, buttonBase, idle)}\n        disabled={currentPage >= totalPages}\n        onClick={() => onPageChange(currentPage + 1)}\n        type=\"button\"\n      >\n        Próxima\n        <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n      </button>\n    </nav>\n  );\n};\n\nPagination.displayName = 'Pagination';\n"],"names":["getPageTokens","current","total","siblings","window","_","i","start","end","tokens","p","buttonBase","cn","transitionColors","focusRing","Pagination","currentPage","totalPages","onPageChange","siblingCount","variant","className","idle","jsxs","buttonReset","jsx","ChevronLeft","token","ChevronRight"],"mappings":";;;;AAoBO,MAAMA,IAAgB,CAACC,GAAiBC,GAAeC,IAAW,MAAmB;AAC1F,QAAMC,IAASD,IAAW,IAAI;AAC9B,MAAID,KAASE,EAAQ,QAAO,MAAM,KAAK,EAAE,QAAQF,EAAA,GAAS,CAACG,GAAGC,MAAMA,IAAI,CAAC;AACzE,QAAMC,IAAQ,KAAK,IAAI,GAAGN,IAAUE,CAAQ,GACtCK,IAAM,KAAK,IAAIN,IAAQ,GAAGD,IAAUE,CAAQ,GAC5CM,IAAsB,CAAC,CAAC;AAC9B,EAAIF,IAAQ,KAAGE,EAAO,KAAK,gBAAgB;AAC3C,WAASC,IAAIH,GAAOG,KAAKF,GAAKE,IAAK,CAAAD,EAAO,KAAKC,CAAC;AAChD,SAAIF,IAAMN,IAAQ,KAAGO,EAAO,KAAK,cAAc,GAC/CA,EAAO,KAAKP,CAAK,GACVO;AACT,GAEME,IAAaC;AAAA,EACjB;AAAA,EACAC;AAAA,EACAC;AACF,GAEaC,IAAa,CAAC;AAAA,EACzB,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC,IAAU;AAAA,EACV,WAAAC;AACF,MAAuB;AACrB,MAAIJ,KAAc,EAAG,QAAO;AAC5B,QAAMK,IAAO;AAEb,SACE,gBAAAC,EAAC,SAAI,cAAW,aAAY,WAAWX,EAAG,qCAAqCS,CAAS,GACtF,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX,EAAGY,GAAab,GAAYW,CAAI;AAAA,QAC3C,UAAUN,KAAe;AAAA,QACzB,SAAS,MAAME,EAAaF,IAAc,CAAC;AAAA,QAC3C,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAS,EAACC,GAAA,EAAY,eAAY,QAAO,WAAU,UAAS;AAAA,UAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAItDN,MAAY,WACX,gBAAAG,EAAC,UAAK,aAAU,UAAS,WAAU,6CAA4C,UAAA;AAAA,MAAA;AAAA,MACtE,gBAAAE,EAAC,UAAA,EAAO,WAAU,6BAA6B,UAAAT,GAAY;AAAA,MAAS;AAAA,MAAI;AAAA,MAC9EC;AAAA,IAAA,EAAA,CACH,IAEAjB,EAAcgB,GAAaC,GAAYE,CAAY,EAAE;AAAA,MAAI,CAACQ,MACxD,OAAOA,KAAU,WACf,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,gBAAcE,MAAUX,IAAc,SAAS;AAAA,UAC/C,cAAY,UAAUW,CAAK;AAAA,UAC3B,WAAWf;AAAA,YACTY;AAAA,YACAb;AAAA,YACAgB,MAAUX,IACN,wEACAM;AAAA,UAAA;AAAA,UAEN,SAAS,MAAMJ,EAAaS,CAAK;AAAA,UACjC,MAAK;AAAA,UAEJ,UAAAA;AAAA,QAAA;AAAA,QAbIA;AAAA,MAAA,sBAgBN,QAAA,EAAiB,eAAY,QAAO,WAAU,kCAAiC,iBAArEA,CAEX;AAAA,IAAA;AAAA,IAKN,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX,EAAGY,GAAab,GAAYW,CAAI;AAAA,QAC3C,UAAUN,KAAeC;AAAA,QACzB,SAAS,MAAMC,EAAaF,IAAc,CAAC;AAAA,QAC3C,MAAK;AAAA,QACN,UAAA;AAAA,UAAA;AAAA,UAEC,gBAAAS,EAACG,GAAA,EAAa,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACtD,GACF;AAEJ;AAEAb,EAAW,cAAc;"}

package/dist/components/Paragraph/Paragraph.d.ts

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

package/dist/components/Paragraph/Paragraph.js

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

package/dist/components/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sources":["../../../src/components/Paragraph/Paragraph.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  align?: 'left' | 'center' | 'right' | 'justify';\n  as?: 'p' | 'span' | 'div';\n  children: React.ReactNode;\n  italic?: boolean;\n  muted?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  weight?: 'light' | 'normal' | 'medium';\n}\n\nexport const Paragraph: React.FC<ParagraphProps> = ({\n  as = 'p',\n  size = 'md',\n  weight = 'normal',\n  align = 'left',\n  muted = false,\n  italic = false,\n  children,\n  className = '',\n  ...props\n}) => {\n  const Component = as;\n  const sizeClassMap: Record<NonNullable<ParagraphProps['size']>, string> = {\n    xs: 'text-[var(--font-size-xs)] leading-[var(--line-height-normal)]',\n    sm: 'text-[var(--font-size-sm)] leading-[var(--line-height-normal)]',\n    md: 'text-[var(--font-size-base)] leading-[var(--line-height-relaxed)]',\n    lg: 'text-[var(--font-size-lg)] leading-[var(--line-height-loose)]',\n  };\n  const weightClassMap: Record<NonNullable<ParagraphProps['weight']>, string> = {\n    light: 'font-[var(--font-weight-light)]',\n    normal: 'font-[var(--font-weight-normal)]',\n    medium: 'font-[var(--font-weight-medium)]',\n  };\n  const alignClassMap: Record<NonNullable<ParagraphProps['align']>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n    justify: 'text-justify',\n  };\n  const combinedClass = [\n    'm-0 text-[var(--text-primary)] transition-[var(--transition-colors)]',\n    sizeClassMap[size],\n    weightClassMap[weight],\n    alignClassMap[align],\n    italic ? 'italic' : 'not-italic',\n    muted ? 'text-[var(--text-muted)]' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Component className={combinedClass} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["Paragraph","as","size","weight","align","muted","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","combinedClass"],"mappings":";AAYO,MAAMA,IAAsC,CAAC;AAAA,EAClD,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,GACZU,IAAoE;AAAA,IACxE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAEAC,IAAwE;AAAA,IAC5E,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,GAEJC,IAAsE;AAAA,IAC1E,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,EAAA,GAELC,IAAgB;AAAA,IACpB;AAAA,IACAH,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBD,IAAQ,6BAA6B;AAAA,IACrCG;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWI,GAAgB,GAAGL,GACtC,UAAAF,GACH;AAEJ;"}
+{"version":3,"file":"Paragraph.js","sources":["../../../src/components/Paragraph/Paragraph.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextWeight, weightClass } from '../Typography/weight';\n\nexport interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  align?: 'left' | 'center' | 'right' | 'justify';\n  as?: 'p' | 'span' | 'div';\n  children: React.ReactNode;\n  italic?: boolean;\n  /** Cor secundária (Chumbo Leve). */\n  muted?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Padrão: light (brand book: corpo em Leve 300, não em Regular 400). */\n  weight?: TextWeight;\n}\n\nconst SIZE_CLASS = {\n  xs: 'text-xs leading-normal',\n  sm: 'text-sm leading-normal',\n  md: 'text-base leading-relaxed',\n  lg: 'text-lg leading-relaxed',\n} as const;\n\nconst ALIGN_CLASS = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n  justify: 'text-justify',\n} as const;\n\nexport const Paragraph = ({\n  as: Tag = 'p',\n  size = 'md',\n  weight = 'light',\n  align = 'left',\n  muted = false,\n  italic = false,\n  children,\n  className,\n  ...props\n}: ParagraphProps) => (\n  <Tag\n    className={cn(\n      'm-0 font-sbk text-pretty',\n      SIZE_CLASS[size],\n      weightClass(weight),\n      ALIGN_CLASS[align],\n      muted ? 'text-sbk-fg-muted' : 'text-sbk-fg',\n      italic && 'italic',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </Tag>\n);\n\nParagraph.displayName = 'Paragraph';\n"],"names":["SIZE_CLASS","ALIGN_CLASS","Paragraph","Tag","size","weight","align","muted","italic","children","className","props","jsx","cn","weightClass"],"mappings":";;;AAgBA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAc;AAAA,EAClB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX,GAEaC,IAAY,CAAC;AAAA,EACxB,IAAIC,IAAM;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACT;AAAA,EAAA;AAAA,IACC,WAAWU;AAAA,MACT;AAAA,MACAb,EAAWI,CAAI;AAAA,MACfU,EAAYT,CAAM;AAAA,MAClBJ,EAAYK,CAAK;AAAA,MACjBC,IAAQ,sBAAsB;AAAA,MAC9BC,KAAU;AAAA,MACVE;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAAF;AAAA,EAAA;AACH;AAGFP,EAAU,cAAc;"}

package/dist/components/Popover/Popover.d.ts

@@ -1,7 +1,18 @@
 import type React from 'react';
 export interface PopoverProps {
+    align?: 'start' | 'center' | 'end';
     children: React.ReactNode;
+    /** Classe do botão gatilho. */
+    className?: string;
     content: React.ReactNode;
     defaultOpen?: boolean;
+    /** Controle externo do estado aberto. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: 'default' | 'glass';
 }
-export declare const Popover: React.FC<PopoverProps>;
+/** Painel flutuante não modal ancorado a um gatilho. Fecha com Esc e clique fora. */
+export declare const Popover: {
+    ({ children, content, defaultOpen, open: controlledOpen, onOpenChange, align, variant, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Popover/Popover.js

@@ -1,57 +1,69 @@
-import { jsxs as v, jsx as u } from "react/jsx-runtime";
-import { useState as b, useRef as a, useId as x, useEffect as d } from "react";
-import { cn as w } from "../../utils/cn.js";
-const E = ({ children: f, content: m, defaultOpen: p = !1 }) => {
-  const [n, t] = b(p), i = a(null), c = a(null), o = a(null), l = x();
-  return d(() => {
-    const e = (s) => {
-      var r;
-      (r = i.current) != null && r.contains(s.target) || t(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), d(() => {
-    if (!n || !o.current)
-      return;
-    const e = o.current.querySelector(
+import { jsxs as I, jsx as v } from "react/jsx-runtime";
+import { useState as h, useRef as o, useId as j, useEffect as z } from "react";
+import { cn as k } from "../../utils/cn.js";
+import { buttonReset as P } from "../../utils/styles.js";
+const S = { start: "left-0", center: "left-1/2 -translate-x-1/2", end: "right-0" }, q = ({
+  children: x,
+  content: g,
+  defaultOpen: w = !1,
+  open: c,
+  onOpenChange: r,
+  align: y = "center",
+  variant: E = "default",
+  className: R
+}) => {
+  const [L, N] = h(w), e = c ?? L, d = o(null), l = o(null), u = o(null), f = j(), s = (t) => {
+    c === void 0 && N(t), r == null || r(t);
+  }, a = o(s);
+  return a.current = s, z(() => {
+    var p, b;
+    if (!e) return;
+    (b = (p = u.current) == null ? void 0 : p.querySelector(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
-    e == null || e.focus();
-  }, [n]), d(() => {
-    const e = (s) => {
-      var r;
-      s.key === "Escape" && (t(!1), (r = c.current) == null || r.focus());
+    )) == null || b.focus();
+    const t = (i) => {
+      var n;
+      (n = d.current) != null && n.contains(i.target) || a.current(!1);
+    }, m = (i) => {
+      var n;
+      i.key === "Escape" && (a.current(!1), (n = l.current) == null || n.focus());
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("keydown", m), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", m);
     };
-    return n && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [n]), /* @__PURE__ */ v("div", { className: "relative inline-flex", ref: i, children: [
-    /* @__PURE__ */ u(
+  }, [e]), /* @__PURE__ */ I("div", { ref: d, className: "relative inline-flex", children: [
+    /* @__PURE__ */ v(
       "button",
       {
-        "aria-controls": n ? l : void 0,
-        "aria-expanded": n,
+        ref: l,
+        "aria-controls": e ? f : void 0,
+        "aria-expanded": e,
         "aria-haspopup": "dialog",
-        className: "inline-flex",
-        onClick: () => t((e) => !e),
-        ref: c,
+        className: k(P, "inline-flex cursor-pointer", R),
+        onClick: () => s(!e),
         type: "button",
-        children: f
+        children: x
       }
     ),
-    n && /* @__PURE__ */ u(
+    e && /* @__PURE__ */ v(
       "div",
       {
-        className: w(
-          "absolute left-1/2 top-full z-30 mt-2 w-max -translate-x-1/2 rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-md)]"
+        ref: u,
+        className: k(
+          "absolute top-full z-[var(--sbk-z-dropdown)] mt-2 w-max max-w-sm rounded-sbk-md p-4 text-sm font-light text-sbk-fg animate-sbk-fade-in",
+          E === "glass" ? "sbk-glass sbk-glass-strong" : "border border-sbk-line bg-sbk-surface shadow-sbk-md",
+          S[y]
         ),
-        id: l,
-        ref: o,
+        id: f,
         role: "dialog",
         tabIndex: -1,
-        children: m
+        children: g
       }
     )
   ] });
 };
+q.displayName = "Popover";
 export {
-  E as Popover
+  q as Popover
 };
 //# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n}\n\nexport const Popover: React.FC<PopoverProps> = ({ children, content, defaultOpen = false }) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const popoverId = useId();\n\n  useEffect(() => {\n    const onClickOutside = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', onClickOutside);\n    return () => document.removeEventListener('mousedown', onClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !panelRef.current) {\n      return;\n    }\n\n    const focusable = panelRef.current.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    focusable?.focus();\n  }, [open]);\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n    if (open) {\n      document.addEventListener('keydown', onKeyDown);\n    }\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [open]);\n\n  return (\n    <div className=\"relative inline-flex\" ref={containerRef}>\n      <button\n        aria-controls={open ? popoverId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\n        className=\"inline-flex\"\n        onClick={() => setOpen((prev) => !prev)}\n        ref={triggerRef}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      {open && (\n        <div\n          className={cn(\n            'absolute left-1/2 top-full z-30 mt-2 w-max -translate-x-1/2 rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-md)]',\n          )}\n          id={popoverId}\n          ref={panelRef}\n          role=\"dialog\"\n          tabIndex={-1}\n        >\n          {content}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["Popover","children","content","defaultOpen","open","setOpen","useState","containerRef","useRef","triggerRef","panelRef","popoverId","useId","useEffect","onClickOutside","event","_a","focusable","onKeyDown","jsxs","jsx","prev","cn"],"mappings":";;;AAUO,MAAMA,IAAkC,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,aAAAC,IAAc,SAAY;AAC7F,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAASH,CAAW,GACtCI,IAAeC,EAA8B,IAAI,GACjDC,IAAaD,EAAiC,IAAI,GAClDE,IAAWF,EAA8B,IAAI,GAC7CG,IAAYC,EAAA;AAElB,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAiB,CAACC,MAAsB;;AAC5C,OAAKC,IAAAT,EAAa,YAAb,QAAAS,EAAsB,SAASD,EAAM,WACxCV,EAAQ,EAAK;AAAA,IAEjB;AACA,oBAAS,iBAAiB,aAAaS,CAAc,GAC9C,MAAM,SAAS,oBAAoB,aAAaA,CAAc;AAAA,EACvE,GAAG,CAAA,CAAE,GAELD,EAAU,MAAM;AACd,QAAI,CAACT,KAAQ,CAACM,EAAS;AACrB;AAGF,UAAMO,IAAYP,EAAS,QAAQ;AAAA,MACjC;AAAA,IAAA;AAEF,IAAAO,KAAA,QAAAA,EAAW;AAAA,EACb,GAAG,CAACb,CAAI,CAAC,GAETS,EAAU,MAAM;AACd,UAAMK,IAAY,CAACH,MAAyB;;AAC1C,MAAIA,EAAM,QAAQ,aAChBV,EAAQ,EAAK,IACbW,IAAAP,EAAW,YAAX,QAAAO,EAAoB;AAAA,IAExB;AACA,WAAIZ,KACF,SAAS,iBAAiB,WAAWc,CAAS,GAEzC,MAAM,SAAS,oBAAoB,WAAWA,CAAS;AAAA,EAChE,GAAG,CAACd,CAAI,CAAC,GAGP,gBAAAe,EAAC,OAAA,EAAI,WAAU,wBAAuB,KAAKZ,GACzC,UAAA;AAAA,IAAA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,iBAAehB,IAAOO,IAAY;AAAA,QAClC,iBAAeP;AAAA,QACf,iBAAc;AAAA,QACd,WAAU;AAAA,QACV,SAAS,MAAMC,EAAQ,CAACgB,MAAS,CAACA,CAAI;AAAA,QACtC,KAAKZ;AAAA,QACL,MAAK;AAAA,QAEJ,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFG,KACC,gBAAAgB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA,UACT;AAAA,QAAA;AAAA,QAEF,IAAIX;AAAA,QACJ,KAAKD;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QAET,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset } from '../../utils/styles';\n\nexport interface PopoverProps {\n  align?: 'start' | 'center' | 'end';\n  children: React.ReactNode;\n  /** Classe do botão gatilho. */\n  className?: string;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n  /** Controle externo do estado aberto. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  variant?: 'default' | 'glass';\n}\n\nconst ALIGN = { start: 'left-0', center: 'left-1/2 -translate-x-1/2', end: 'right-0' } as const;\n\n/** Painel flutuante não modal ancorado a um gatilho. Fecha com Esc e clique fora. */\nexport const Popover = ({\n  children,\n  content,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  align = 'center',\n  variant = 'default',\n  className,\n}: PopoverProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = controlledOpen ?? uncontrolledOpen;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const popoverId = useId();\n\n  const setOpen = (next: boolean) => {\n    if (controlledOpen === undefined) setUncontrolledOpen(next);\n    onOpenChange?.(next);\n  };\n  const setOpenRef = useRef(setOpen);\n  setOpenRef.current = setOpen;\n\n  useEffect(() => {\n    if (!open) return;\n    panelRef.current\n      ?.querySelector<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      )\n      ?.focus();\n\n    const onClickOutside = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) setOpenRef.current(false);\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpenRef.current(false);\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('mousedown', onClickOutside);\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('mousedown', onClickOutside);\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      <button\n        ref={triggerRef}\n        aria-controls={open ? popoverId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\n        className={cn(buttonReset, 'inline-flex cursor-pointer', className)}\n        onClick={() => setOpen(!open)}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            'absolute top-full z-[var(--sbk-z-dropdown)] mt-2 w-max max-w-sm rounded-sbk-md p-4 text-sm font-light text-sbk-fg animate-sbk-fade-in',\n            variant === 'glass'\n              ? 'sbk-glass sbk-glass-strong'\n              : 'border border-sbk-line bg-sbk-surface shadow-sbk-md',\n            ALIGN[align],\n          )}\n          id={popoverId}\n          role=\"dialog\"\n          tabIndex={-1}\n        >\n          {content}\n        </div>\n      )}\n    </div>\n  );\n};\n\nPopover.displayName = 'Popover';\n"],"names":["ALIGN","Popover","children","content","defaultOpen","controlledOpen","onOpenChange","align","variant","className","uncontrolledOpen","setUncontrolledOpen","useState","open","containerRef","useRef","triggerRef","panelRef","popoverId","useId","setOpen","next","setOpenRef","useEffect","_b","_a","onClickOutside","event","onKeyDown","jsxs","jsx","cn","buttonReset"],"mappings":";;;;AAkBA,MAAMA,IAAQ,EAAE,OAAO,UAAU,QAAQ,6BAA6B,KAAK,UAAA,GAG9DC,IAAU,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAMC;AAAA,EACN,cAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,WAAAC;AACF,MAAoB;AAClB,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAASR,CAAW,GAC9DS,IAAOR,KAAkBK,GACzBI,IAAeC,EAAuB,IAAI,GAC1CC,IAAaD,EAA0B,IAAI,GAC3CE,IAAWF,EAAuB,IAAI,GACtCG,IAAYC,EAAA,GAEZC,IAAU,CAACC,MAAkB;AACjC,IAAIhB,MAAmB,UAAWM,EAAoBU,CAAI,GAC1Df,KAAA,QAAAA,EAAee;AAAA,EACjB,GACMC,IAAaP,EAAOK,CAAO;AACjC,SAAAE,EAAW,UAAUF,GAErBG,EAAU,MAAM;;AACd,QAAI,CAACV,EAAM;AACX,KAAAW,KAAAC,IAAAR,EAAS,YAAT,gBAAAQ,EACI;AAAA,MACA;AAAA,UAFJ,QAAAD,EAII;AAEJ,UAAME,IAAiB,CAACC,MAAsB;;AAC5C,OAAKF,IAAAX,EAAa,YAAb,QAAAW,EAAsB,SAASE,EAAM,WAAiBL,EAAW,QAAQ,EAAK;AAAA,IACrF,GACMM,IAAY,CAACD,MAAyB;;AAC1C,MAAIA,EAAM,QAAQ,aAChBL,EAAW,QAAQ,EAAK,IACxBG,IAAAT,EAAW,YAAX,QAAAS,EAAoB;AAAA,IAExB;AACA,oBAAS,iBAAiB,aAAaC,CAAc,GACrD,SAAS,iBAAiB,WAAWE,CAAS,GACvC,MAAM;AACX,eAAS,oBAAoB,aAAaF,CAAc,GACxD,SAAS,oBAAoB,WAAWE,CAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAACf,CAAI,CAAC,GAGP,gBAAAgB,EAAC,OAAA,EAAI,KAAKf,GAAc,WAAU,wBAChC,UAAA;AAAA,IAAA,gBAAAgB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKd;AAAA,QACL,iBAAeH,IAAOK,IAAY;AAAA,QAClC,iBAAeL;AAAA,QACf,iBAAc;AAAA,QACd,WAAWkB,EAAGC,GAAa,8BAA8BvB,CAAS;AAAA,QAClE,SAAS,MAAMW,EAAQ,CAACP,CAAI;AAAA,QAC5B,MAAK;AAAA,QAEJ,UAAAX;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFW,KACC,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKb;AAAA,QACL,WAAWc;AAAA,UACT;AAAA,UACAvB,MAAY,UACR,+BACA;AAAA,UACJR,EAAMO,CAAK;AAAA,QAAA;AAAA,QAEb,IAAIW;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QAET,UAAAf;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAEAF,EAAQ,cAAc;"}

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Barra animada sem valor conhecido (carregamento em andamento). */
+    indeterminate?: boolean;
+    /** Label acessível. Obrigatório quando não houver texto visível associado. */
+    label?: string;
+    /** Exibe o percentual ao lado da barra. */
+    showValue?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /** Valor atual (0 a 100). Ignorado quando `indeterminate`. */
+    value?: number;
+}
+/** Barra de progresso determinada ou indeterminada ("bar load"). */
+export declare const ProgressBar: {
+    ({ value, indeterminate, size, tone, label, showValue, className, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,71 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+const b = { sm: "h-1", md: "h-2", lg: "h-3" }, l = {
+  primary: "bg-sbk-primary",
+  success: "bg-sbk-success",
+  warning: "bg-sbk-warning",
+  error: "bg-sbk-error",
+  info: "bg-sbk-info"
+}, f = ({
+  value: n = 0,
+  indeterminate: s = !1,
+  size: t = "md",
+  tone: i = "primary",
+  label: d,
+  showValue: m = !1,
+  className: u,
+  ...c
+}) => {
+  const a = Math.min(100, Math.max(0, n));
+  return /* @__PURE__ */ o("div", { className: r("flex items-center gap-2", u), ...c, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        "aria-busy": s || void 0,
+        "aria-label": d,
+        "aria-valuemax": s ? void 0 : 100,
+        "aria-valuemin": s ? void 0 : 0,
+        "aria-valuenow": s ? void 0 : a,
+        className: r(
+          "relative flex-1 overflow-hidden rounded-full bg-sbk-surface-sunken",
+          b[t]
+        ),
+        role: "progressbar",
+        children: s ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: r(
+              "absolute inset-y-0 left-0 w-2/5 rounded-full animate-sbk-indeterminate motion-reduce:w-full motion-reduce:animate-pulse",
+              l[i]
+            )
+          }
+        ) : /* @__PURE__ */ e(
+          "div",
+          {
+            className: r(
+              "h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none",
+              l[i]
+            ),
+            style: { width: `${a}%` }
+          }
+        )
+      }
+    ),
+    m && !s && /* @__PURE__ */ o(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "w-10 shrink-0 text-right text-xs font-semibold text-sbk-fg-muted",
+        children: [
+          a,
+          "%"
+        ]
+      }
+    )
+  ] });
+};
+f.displayName = "ProgressBar";
+export {
+  f as ProgressBar
+};
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Barra animada sem valor conhecido (carregamento em andamento). */\n  indeterminate?: boolean;\n  /** Label acessível. Obrigatório quando não houver texto visível associado. */\n  label?: string;\n  /** Exibe o percentual ao lado da barra. */\n  showValue?: boolean;\n  size?: 'sm' | 'md' | 'lg';\n  tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';\n  /** Valor atual (0 a 100). Ignorado quando `indeterminate`. */\n  value?: number;\n}\n\nconst SIZE_CLASS = { sm: 'h-1', md: 'h-2', lg: 'h-3' } as const;\n\nconst TONE_CLASS: Record<NonNullable<ProgressBarProps['tone']>, string> = {\n  primary: 'bg-sbk-primary',\n  success: 'bg-sbk-success',\n  warning: 'bg-sbk-warning',\n  error: 'bg-sbk-error',\n  info: 'bg-sbk-info',\n};\n\n/** Barra de progresso determinada ou indeterminada (\"bar load\"). */\nexport const ProgressBar = ({\n  value = 0,\n  indeterminate = false,\n  size = 'md',\n  tone = 'primary',\n  label,\n  showValue = false,\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const clamped = Math.min(100, Math.max(0, value));\n\n  return (\n    <div className={cn('flex items-center gap-2', className)} {...props}>\n      <div\n        aria-busy={indeterminate || undefined}\n        aria-label={label}\n        aria-valuemax={indeterminate ? undefined : 100}\n        aria-valuemin={indeterminate ? undefined : 0}\n        aria-valuenow={indeterminate ? undefined : clamped}\n        className={cn(\n          'relative flex-1 overflow-hidden rounded-full bg-sbk-surface-sunken',\n          SIZE_CLASS[size],\n        )}\n        role=\"progressbar\"\n      >\n        {indeterminate ? (\n          <div\n            className={cn(\n              'absolute inset-y-0 left-0 w-2/5 rounded-full animate-sbk-indeterminate motion-reduce:w-full motion-reduce:animate-pulse',\n              TONE_CLASS[tone],\n            )}\n          />\n        ) : (\n          <div\n            className={cn(\n              'h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none',\n              TONE_CLASS[tone],\n            )}\n            style={{ width: `${clamped}%` }}\n          />\n        )}\n      </div>\n      {showValue && !indeterminate && (\n        <span\n          aria-hidden=\"true\"\n          className=\"w-10 shrink-0 text-right text-xs font-semibold text-sbk-fg-muted\"\n        >\n          {clamped}%\n        </span>\n      )}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":["SIZE_CLASS","TONE_CLASS","ProgressBar","value","indeterminate","size","tone","label","showValue","className","props","clamped","jsxs","cn","jsx"],"mappings":";;AAgBA,MAAMA,IAAa,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,MAAA,GAEzCC,IAAoE;AAAA,EACxE,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAGaC,IAAc,CAAC;AAAA,EAC1B,OAAAC,IAAQ;AAAA,EACR,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGR,CAAK,CAAC;AAEhD,SACE,gBAAAS,EAAC,SAAI,WAAWC,EAAG,2BAA2BJ,CAAS,GAAI,GAAGC,GAC5D,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAWV,KAAiB;AAAA,QAC5B,cAAYG;AAAA,QACZ,iBAAeH,IAAgB,SAAY;AAAA,QAC3C,iBAAeA,IAAgB,SAAY;AAAA,QAC3C,iBAAeA,IAAgB,SAAYO;AAAA,QAC3C,WAAWE;AAAA,UACT;AAAA,UACAb,EAAWK,CAAI;AAAA,QAAA;AAAA,QAEjB,MAAK;AAAA,QAEJ,UAAAD,IACC,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAZ,EAAWK,CAAI;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA,IAGF,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAZ,EAAWK,CAAI;AAAA,YAAA;AAAA,YAEjB,OAAO,EAAE,OAAO,GAAGK,CAAO,IAAA;AAAA,UAAI;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAGHH,KAAa,CAACJ,KACb,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QAET,UAAA;AAAA,UAAAD;AAAA,UAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAEJ;AAEJ;AAEAT,EAAY,cAAc;"}

package/dist/components/Radio/Radio.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     helperText?: string;
-    label?: string;
+    label?: React.ReactNode;
 }
+/** Radio individual. Agrupe com <fieldset> + <legend> e o mesmo `name`. */
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Radio/Radio.js

@@ -1,36 +1,32 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import m from "react";
-import { cn as c } from "../../utils/cn.js";
-const d = m.forwardRef(
-  ({ label: t, helperText: e, className: s, id: o, ...n }, l) => {
-    const i = o || `radio-${Math.random().toString(36).slice(2, 9)}`;
-    return /* @__PURE__ */ a(
-      "label",
-      {
-        className: c("inline-flex cursor-pointer items-start gap-2", s),
-        htmlFor: i,
-        children: [
-          /* @__PURE__ */ r(
-            "input",
-            {
-              ref: l,
-              className: "mt-0.5 h-4 w-4 border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--border-color-focus)]",
-              id: i,
-              type: "radio",
-              ...n
-            }
-          ),
-          /* @__PURE__ */ a("span", { className: "grid gap-0.5", children: [
-            t && /* @__PURE__ */ r("span", { className: "text-sm text-[var(--text-primary)]", children: t }),
-            e && /* @__PURE__ */ r("span", { className: "text-xs text-[var(--text-muted)]", children: e })
-          ] })
-        ]
-      }
-    );
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import p, { useId as f } from "react";
+import { cn as a } from "../../utils/cn.js";
+import { choiceControl as u } from "../../utils/styles.js";
+const h = p.forwardRef(
+  ({ label: r, helperText: i, className: d, id: n, disabled: s, ...c }, m) => {
+    const l = f(), t = n ?? l;
+    return /* @__PURE__ */ e("div", { className: a("inline-flex items-start gap-2", s && "opacity-60", d), children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: m,
+          "aria-describedby": i ? `${t}-helper` : void 0,
+          className: a(u, "rounded-full"),
+          disabled: s,
+          id: t,
+          type: "radio",
+          ...c
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "grid gap-0.5", children: [
+        r && /* @__PURE__ */ o("label", { className: "cursor-pointer text-sm font-light text-sbk-fg", htmlFor: t, children: r }),
+        i && /* @__PURE__ */ o("span", { className: "text-xs font-light text-sbk-fg-muted", id: `${t}-helper`, children: i })
+      ] })
+    ] });
   }
 );
-d.displayName = "Radio";
+h.displayName = "Radio";
 export {
-  d as Radio
+  h as Radio
 };
 //# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  helperText?: string;\n  label?: string;\n}\n\nexport const Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n  ({ label, helperText, className, id, ...props }, ref) => {\n    const inputId = id || `radio-${Math.random().toString(36).slice(2, 9)}`;\n\n    return (\n      <label\n        className={cn('inline-flex cursor-pointer items-start gap-2', className)}\n        htmlFor={inputId}\n      >\n        <input\n          ref={ref}\n          className=\"mt-0.5 h-4 w-4 border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--border-color-focus)]\"\n          id={inputId}\n          type=\"radio\"\n          {...props}\n        />\n        <span className=\"grid gap-0.5\">\n          {label && <span className=\"text-sm text-[var(--text-primary)]\">{label}</span>}\n          {helperText && <span className=\"text-xs text-[var(--text-muted)]\">{helperText}</span>}\n        </span>\n      </label>\n    );\n  },\n);\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","React","label","helperText","className","id","props","ref","inputId","jsxs","cn","jsx"],"mappings":";;;AAQO,MAAMA,IAAQC,EAAM;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AACvD,UAAMC,IAAUH,KAAM,SAAS,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAErE,WACE,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAG,gDAAgDN,CAAS;AAAA,QACvE,SAASI;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAAJ;AAAA,cACA,WAAU;AAAA,cACV,IAAIC;AAAA,cACJ,MAAK;AAAA,cACJ,GAAGF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN,gBAAAG,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,YAAAP,KAAS,gBAAAS,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAT,GAAM;AAAA,YACrEC,KAAc,gBAAAQ,EAAC,QAAA,EAAK,WAAU,oCAAoC,UAAAR,EAAA,CAAW;AAAA,UAAA,EAAA,CAChF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAH,EAAM,cAAc;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport { choiceControl } from '../../utils/styles';\n\nexport interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  helperText?: string;\n  label?: React.ReactNode;\n}\n\n/** Radio individual. Agrupe com <fieldset> + <legend> e o mesmo `name`. */\nexport const Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n  ({ label, helperText, className, id, disabled, ...props }, ref) => {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn('inline-flex items-start gap-2', disabled && 'opacity-60', className)}>\n        <input\n          ref={ref}\n          aria-describedby={helperText ? `${inputId}-helper` : undefined}\n          className={cn(choiceControl, 'rounded-full')}\n          disabled={disabled}\n          id={inputId}\n          type=\"radio\"\n          {...props}\n        />\n        <span className=\"grid gap-0.5\">\n          {label && (\n            <label className=\"cursor-pointer text-sm font-light text-sbk-fg\" htmlFor={inputId}>\n              {label}\n            </label>\n          )}\n          {helperText && (\n            <span className=\"text-xs font-light text-sbk-fg-muted\" id={`${inputId}-helper`}>\n              {helperText}\n            </span>\n          )}\n        </span>\n      </div>\n    );\n  },\n);\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","React","label","helperText","className","id","disabled","props","ref","autoId","useId","inputId","jsxs","cn","jsx","choiceControl"],"mappings":";;;;AAUO,MAAMA,IAAQC,EAAM;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,WAAAC,GAAW,IAAAC,GAAI,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAASC,EAAA,GACTC,IAAUN,KAAMI;AAEtB,WACE,gBAAAG,EAAC,SAAI,WAAWC,EAAG,iCAAiCP,KAAY,cAAcF,CAAS,GACrF,UAAA;AAAA,MAAA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAN;AAAA,UACA,oBAAkBL,IAAa,GAAGQ,CAAO,YAAY;AAAA,UACrD,WAAWE,EAAGE,GAAe,cAAc;AAAA,UAC3C,UAAAT;AAAA,UACA,IAAIK;AAAA,UACJ,MAAK;AAAA,UACJ,GAAGJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,gBAAAK,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,QAAAV,uBACE,SAAA,EAAM,WAAU,iDAAgD,SAASS,GACvE,UAAAT,GACH;AAAA,QAEDC,uBACE,QAAA,EAAK,WAAU,wCAAuC,IAAI,GAAGQ,CAAO,WAClE,UAAAR,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAH,EAAM,cAAc;"}

package/dist/components/SectionHeader/SectionHeader.d.ts

@@ -1,7 +1,12 @@
 import type React from 'react';
 export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     actions?: React.ReactNode;
+    /** Nível do título. Padrão: h2. */
+    as?: 'h2' | 'h3' | 'h4';
     subtitle?: React.ReactNode;
     title: React.ReactNode;
 }
-export declare const SectionHeader: React.FC<SectionHeaderProps>;
+export declare const SectionHeader: {
+    ({ title, subtitle, actions, as: Tag, className, ...props }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/SectionHeader/SectionHeader.js

@@ -1,19 +1,21 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { cn as c } from "../../utils/cn.js";
-const d = ({
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn.js";
+const n = ({
   title: a,
   subtitle: t,
-  actions: r,
-  className: i,
-  ...m
-}) => /* @__PURE__ */ s("div", { className: c("flex items-start justify-between gap-4", i), ...m, children: [
-  /* @__PURE__ */ s("div", { className: "grid gap-1", children: [
-    /* @__PURE__ */ e("h2", { className: "m-0 text-xl font-semibold text-[var(--text-primary)]", children: a }),
-    t && /* @__PURE__ */ e("p", { className: "m-0 text-sm text-[var(--text-secondary)]", children: t })
+  actions: s,
+  as: m = "h2",
+  className: l,
+  ...r
+}) => /* @__PURE__ */ i("div", { className: d("flex flex-wrap items-start justify-between gap-4", l), ...r, children: [
+  /* @__PURE__ */ i("div", { className: "grid min-w-0 gap-1", children: [
+    /* @__PURE__ */ e(m, { className: "m-0 text-xl font-semibold leading-tight text-sbk-fg-heading", children: a }),
+    t && /* @__PURE__ */ e("p", { className: "m-0 text-sm font-light text-sbk-fg-muted", children: t })
   ] }),
-  r && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-2", children: r })
+  s && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-2", children: s })
 ] });
+n.displayName = "SectionHeader";
 export {
-  d as SectionHeader
+  n as SectionHeader
 };
 //# sourceMappingURL=SectionHeader.js.map

package/dist/components/SectionHeader/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  actions?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  title: React.ReactNode;\n}\n\nexport const SectionHeader: React.FC<SectionHeaderProps> = ({\n  title,\n  subtitle,\n  actions,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('flex items-start justify-between gap-4', className)} {...props}>\n      <div className=\"grid gap-1\">\n        <h2 className=\"m-0 text-xl font-semibold text-[var(--text-primary)]\">{title}</h2>\n        {subtitle && <p className=\"m-0 text-sm text-[var(--text-secondary)]\">{subtitle}</p>}\n      </div>\n      {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n    </div>\n  );\n};\n"],"names":["SectionHeader","title","subtitle","actions","className","props","jsxs","cn","jsx"],"mappings":";;AASO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAAC,SAAI,WAAWC,EAAG,0CAA0CH,CAAS,GAAI,GAAGC,GAC3E,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,IAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,wDAAwD,UAAAP,GAAM;AAAA,IAC3EC,KAAY,gBAAAM,EAAC,KAAA,EAAE,WAAU,4CAA4C,UAAAN,EAAA,CAAS;AAAA,EAAA,GACjF;AAAA,EACCC,KAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAL,EAAA,CAAQ;AAAA,GACzE;"}
+{"version":3,"file":"SectionHeader.js","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  actions?: React.ReactNode;\n  /** Nível do título. Padrão: h2. */\n  as?: 'h2' | 'h3' | 'h4';\n  subtitle?: React.ReactNode;\n  title: React.ReactNode;\n}\n\nexport const SectionHeader = ({\n  title,\n  subtitle,\n  actions,\n  as: Tag = 'h2',\n  className,\n  ...props\n}: SectionHeaderProps) => (\n  <div className={cn('flex flex-wrap items-start justify-between gap-4', className)} {...props}>\n    <div className=\"grid min-w-0 gap-1\">\n      <Tag className=\"m-0 text-xl font-semibold leading-tight text-sbk-fg-heading\">{title}</Tag>\n      {subtitle && <p className=\"m-0 text-sm font-light text-sbk-fg-muted\">{subtitle}</p>}\n    </div>\n    {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n  </div>\n);\n\nSectionHeader.displayName = 'SectionHeader';\n"],"names":["SectionHeader","title","subtitle","actions","Tag","className","props","jsxs","cn","jsx"],"mappings":";;AAWO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,IAAIC,IAAM;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC,EAAC,SAAI,WAAWC,EAAG,oDAAoDH,CAAS,GAAI,GAAGC,GACrF,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAE,EAACL,GAAA,EAAI,WAAU,+DAA+D,UAAAH,GAAM;AAAA,IACnFC,KAAY,gBAAAO,EAAC,KAAA,EAAE,WAAU,4CAA4C,UAAAP,EAAA,CAAS;AAAA,EAAA,GACjF;AAAA,EACCC,KAAW,gBAAAM,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAN,EAAA,CAAQ;AAAA,EAAA,CACzE;AAGFH,EAAc,cAAc;"}

package/dist/components/Select/Select.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
+import { type FieldSize } from '../../utils/styles';
 export interface SelectOption {
+    disabled?: boolean;
     label: string;
     value: string;
 }
 export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     error?: string;
     helperText?: string;
-    label?: string;
+    label?: React.ReactNode;
     options: SelectOption[];
-    size?: 'sm' | 'md' | 'lg';
+    /** Opção vazia inicial (ex.: "Selecione..."). */
+    placeholder?: string;
+    size?: FieldSize;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;