@sbkbs/ui 1.0.6 → 2.0.0

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';\r\nimport { useEffect, useId, useRef, useState } from 'react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset } from '../../utils/styles';\r\n\r\nexport interface PopoverProps {\r\n  align?: 'start' | 'center' | 'end';\r\n  children: React.ReactNode;\r\n  /** Classe do botão gatilho. */\r\n  className?: string;\r\n  content: React.ReactNode;\r\n  defaultOpen?: boolean;\r\n  /** Controle externo do estado aberto. */\r\n  open?: boolean;\r\n  onOpenChange?: (open: boolean) => void;\r\n  variant?: 'default' | 'glass';\r\n}\r\n\r\nconst ALIGN = { start: 'left-0', center: 'left-1/2 -translate-x-1/2', end: 'right-0' } as const;\r\n\r\n/** Painel flutuante não modal ancorado a um gatilho. Fecha com Esc e clique fora. */\r\nexport const Popover = ({\r\n  children,\r\n  content,\r\n  defaultOpen = false,\r\n  open: controlledOpen,\r\n  onOpenChange,\r\n  align = 'center',\r\n  variant = 'default',\r\n  className,\r\n}: PopoverProps) => {\r\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\r\n  const open = controlledOpen ?? uncontrolledOpen;\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const panelRef = useRef<HTMLDivElement>(null);\r\n  const popoverId = useId();\r\n\r\n  const setOpen = (next: boolean) => {\r\n    if (controlledOpen === undefined) setUncontrolledOpen(next);\r\n    onOpenChange?.(next);\r\n  };\r\n  const setOpenRef = useRef(setOpen);\r\n  setOpenRef.current = setOpen;\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    panelRef.current\r\n      ?.querySelector<HTMLElement>(\r\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\r\n      )\r\n      ?.focus();\r\n\r\n    const onClickOutside = (event: MouseEvent) => {\r\n      if (!containerRef.current?.contains(event.target as Node)) setOpenRef.current(false);\r\n    };\r\n    const onKeyDown = (event: KeyboardEvent) => {\r\n      if (event.key === 'Escape') {\r\n        setOpenRef.current(false);\r\n        triggerRef.current?.focus();\r\n      }\r\n    };\r\n    document.addEventListener('mousedown', onClickOutside);\r\n    document.addEventListener('keydown', onKeyDown);\r\n    return () => {\r\n      document.removeEventListener('mousedown', onClickOutside);\r\n      document.removeEventListener('keydown', onKeyDown);\r\n    };\r\n  }, [open]);\r\n\r\n  return (\r\n    <div ref={containerRef} className=\"relative inline-flex\">\r\n      <button\r\n        ref={triggerRef}\r\n        aria-controls={open ? popoverId : undefined}\r\n        aria-expanded={open}\r\n        aria-haspopup=\"dialog\"\r\n        className={cn(buttonReset, 'inline-flex cursor-pointer', className)}\r\n        onClick={() => setOpen(!open)}\r\n        type=\"button\"\r\n      >\r\n        {children}\r\n      </button>\r\n      {open && (\r\n        <div\r\n          ref={panelRef}\r\n          className={cn(\r\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',\r\n            variant === 'glass'\r\n              ? 'sbk-glass sbk-glass-strong'\r\n              : 'border border-sbk-line bg-sbk-surface shadow-sbk-md',\r\n            ALIGN[align],\r\n          )}\r\n          id={popoverId}\r\n          role=\"dialog\"\r\n          tabIndex={-1}\r\n        >\r\n          {content}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nPopover.displayName = 'Popover';\r\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

@@ -1,12 +1,18 @@
 import type React from 'react';
 export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Label descritivo para leitores de tela. */
+    /** 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;
-    /** Valor atual (0–100). */
-    value: number;
+    /** Exibe o percentual ao lado da barra. */
+    showValue?: boolean;
     size?: 'sm' | 'md' | 'lg';
     tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
-    /** Exibe o percentual como texto ao lado da barra. */
-    showValue?: boolean;
+    /** Valor atual (0 a 100). Ignorado quando `indeterminate`. */
+    value?: number;
 }
-export declare const ProgressBar: React.FC<ProgressBarProps>;
+/** 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';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Barra animada sem valor conhecido (carregamento em andamento). */\r\n  indeterminate?: boolean;\r\n  /** Label acessível. Obrigatório quando não houver texto visível associado. */\r\n  label?: string;\r\n  /** Exibe o percentual ao lado da barra. */\r\n  showValue?: boolean;\r\n  size?: 'sm' | 'md' | 'lg';\r\n  tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';\r\n  /** Valor atual (0 a 100). Ignorado quando `indeterminate`. */\r\n  value?: number;\r\n}\r\n\r\nconst SIZE_CLASS = { sm: 'h-1', md: 'h-2', lg: 'h-3' } as const;\r\n\r\nconst TONE_CLASS: Record<NonNullable<ProgressBarProps['tone']>, string> = {\r\n  primary: 'bg-sbk-primary',\r\n  success: 'bg-sbk-success',\r\n  warning: 'bg-sbk-warning',\r\n  error: 'bg-sbk-error',\r\n  info: 'bg-sbk-info',\r\n};\r\n\r\n/** Barra de progresso determinada ou indeterminada (\"bar load\"). */\r\nexport const ProgressBar = ({\r\n  value = 0,\r\n  indeterminate = false,\r\n  size = 'md',\r\n  tone = 'primary',\r\n  label,\r\n  showValue = false,\r\n  className,\r\n  ...props\r\n}: ProgressBarProps) => {\r\n  const clamped = Math.min(100, Math.max(0, value));\r\n\r\n  return (\r\n    <div className={cn('flex items-center gap-2', className)} {...props}>\r\n      <div\r\n        aria-busy={indeterminate || undefined}\r\n        aria-label={label}\r\n        aria-valuemax={indeterminate ? undefined : 100}\r\n        aria-valuemin={indeterminate ? undefined : 0}\r\n        aria-valuenow={indeterminate ? undefined : clamped}\r\n        className={cn(\r\n          'relative flex-1 overflow-hidden rounded-full bg-sbk-surface-sunken',\r\n          SIZE_CLASS[size],\r\n        )}\r\n        role=\"progressbar\"\r\n      >\r\n        {indeterminate ? (\r\n          <div\r\n            className={cn(\r\n              'absolute inset-y-0 left-0 w-2/5 rounded-full animate-sbk-indeterminate motion-reduce:w-full motion-reduce:animate-pulse',\r\n              TONE_CLASS[tone],\r\n            )}\r\n          />\r\n        ) : (\r\n          <div\r\n            className={cn(\r\n              'h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none',\r\n              TONE_CLASS[tone],\r\n            )}\r\n            style={{ width: `${clamped}%` }}\r\n          />\r\n        )}\r\n      </div>\r\n      {showValue && !indeterminate && (\r\n        <span\r\n          aria-hidden=\"true\"\r\n          className=\"w-10 shrink-0 text-right text-xs font-semibold text-sbk-fg-muted\"\r\n        >\r\n          {clamped}%\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nProgressBar.displayName = 'ProgressBar';\r\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';\r\nimport { cn } from '../../utils/cn';\r\nimport { choiceControl } from '../../utils/styles';\r\n\r\nexport interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\r\n  helperText?: string;\r\n  label?: React.ReactNode;\r\n}\r\n\r\n/** Radio individual. Agrupe com <fieldset> + <legend> e o mesmo `name`. */\r\nexport const Radio = React.forwardRef<HTMLInputElement, RadioProps>(\r\n  ({ label, helperText, className, id, disabled, ...props }, ref) => {\r\n    const autoId = useId();\r\n    const inputId = id ?? autoId;\r\n\r\n    return (\r\n      <div className={cn('inline-flex items-start gap-2', disabled && 'opacity-60', className)}>\r\n        <input\r\n          ref={ref}\r\n          aria-describedby={helperText ? `${inputId}-helper` : undefined}\r\n          className={cn(choiceControl, 'rounded-full')}\r\n          disabled={disabled}\r\n          id={inputId}\r\n          type=\"radio\"\r\n          {...props}\r\n        />\r\n        <span className=\"grid gap-0.5\">\r\n          {label && (\r\n            <label className=\"cursor-pointer text-sm font-light text-sbk-fg\" htmlFor={inputId}>\r\n              {label}\r\n            </label>\r\n          )}\r\n          {helperText && (\r\n            <span className=\"text-xs font-light text-sbk-fg-muted\" id={`${inputId}-helper`}>\r\n              {helperText}\r\n            </span>\r\n          )}\r\n        </span>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nRadio.displayName = 'Radio';\r\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';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  actions?: React.ReactNode;\r\n  /** Nível do título. Padrão: h2. */\r\n  as?: 'h2' | 'h3' | 'h4';\r\n  subtitle?: React.ReactNode;\r\n  title: React.ReactNode;\r\n}\r\n\r\nexport const SectionHeader = ({\r\n  title,\r\n  subtitle,\r\n  actions,\r\n  as: Tag = 'h2',\r\n  className,\r\n  ...props\r\n}: SectionHeaderProps) => (\r\n  <div className={cn('flex flex-wrap items-start justify-between gap-4', className)} {...props}>\r\n    <div className=\"grid min-w-0 gap-1\">\r\n      <Tag className=\"m-0 text-xl font-semibold leading-tight text-sbk-fg-heading\">{title}</Tag>\r\n      {subtitle && <p className=\"m-0 text-sm font-light text-sbk-fg-muted\">{subtitle}</p>}\r\n    </div>\r\n    {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\r\n  </div>\r\n);\r\n\r\nSectionHeader.displayName = 'SectionHeader';\r\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>>;

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';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { describedBy, fieldControl, fieldSize, type FieldSize } from '../../utils/styles';\r\nimport { Field } from '../Field/Field';\r\n\r\nexport interface SelectOption {\r\n  disabled?: boolean;\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\r\n  error?: string;\r\n  helperText?: string;\r\n  label?: React.ReactNode;\r\n  options: SelectOption[];\r\n  /** Opção vazia inicial (ex.: \"Selecione...\"). */\r\n  placeholder?: string;\r\n  size?: FieldSize;\r\n}\r\n\r\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\r\n  (\r\n    {\r\n      label,\r\n      helperText,\r\n      error,\r\n      options,\r\n      placeholder,\r\n      size = 'md',\r\n      className,\r\n      id,\r\n      required,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const autoId = useId();\r\n    const selectId = id ?? autoId;\r\n\r\n    return (\r\n      <Field error={error} helperText={helperText} id={selectId} label={label} required={required}>\r\n        <div className=\"relative\">\r\n          <select\r\n            ref={ref}\r\n            aria-describedby={describedBy(selectId, error, helperText)}\r\n            aria-invalid={error ? true : undefined}\r\n            className={cn(\r\n              fieldControl,\r\n              fieldSize[size],\r\n              'cursor-pointer appearance-none pr-10',\r\n              className,\r\n            )}\r\n            id={selectId}\r\n            required={required}\r\n            {...props}\r\n          >\r\n            {placeholder && (\r\n              <option disabled value=\"\">\r\n                {placeholder}\r\n              </option>\r\n            )}\r\n            {options.map((option) => (\r\n              <option key={option.value} disabled={option.disabled} value={option.value}>\r\n                {option.label}\r\n              </option>\r\n            ))}\r\n          </select>\r\n          <ChevronDown\r\n            aria-hidden=\"true\"\r\n            className=\"pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-sbk-fg-muted\"\r\n          />\r\n        </div>\r\n      </Field>\r\n    );\r\n  },\r\n);\r\n\r\nSelect.displayName = 'Select';\r\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;
+};