@sbkbs/ui 1.0.6 → 2.0.0

package/dist/components/Checkbox/Checkbox.js

@@ -1,36 +1,37 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import l from "react";
-import { cn as m } from "../../utils/cn.js";
-const d = l.forwardRef(
-  ({ label: t, helperText: r, className: i, id: a, ...c }, n) => {
-    const s = a || `checkbox-${Math.random().toString(36).slice(2, 9)}`;
-    return /* @__PURE__ */ o(
-      "label",
-      {
-        className: m("inline-flex cursor-pointer items-start gap-2", i),
-        htmlFor: s,
-        children: [
-          /* @__PURE__ */ e(
-            "input",
-            {
-              ref: n,
-              className: "mt-0.5 h-4 w-4 rounded 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: s,
-              type: "checkbox",
-              ...c
-            }
-          ),
-          /* @__PURE__ */ o("span", { className: "grid gap-0.5", children: [
-            t && /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-primary)]", children: t }),
-            r && /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: r })
-          ] })
-        ]
-      }
-    );
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import x, { useId as h, useRef as b, useImperativeHandle as g, useEffect as N } from "react";
+import { cn as k } from "../../utils/cn.js";
+import { choiceControl as v } from "../../utils/styles.js";
+const I = x.forwardRef(
+  ({ label: a, helperText: r, error: e, indeterminate: o = !1, className: d, id: m, disabled: c, ...f }, p) => {
+    const u = h(), t = m ?? u, s = b(null);
+    g(p, () => s.current), N(() => {
+      s.current && (s.current.indeterminate = o);
+    }, [o]);
+    const n = e ? `${t}-error` : r ? `${t}-helper` : void 0;
+    return /* @__PURE__ */ l("div", { className: k("inline-flex items-start gap-2", c && "opacity-60", d), children: [
+      /* @__PURE__ */ i(
+        "input",
+        {
+          ref: s,
+          "aria-describedby": n,
+          "aria-invalid": e ? !0 : void 0,
+          className: v,
+          disabled: c,
+          id: t,
+          type: "checkbox",
+          ...f
+        }
+      ),
+      /* @__PURE__ */ l("span", { className: "grid gap-0.5", children: [
+        a && /* @__PURE__ */ i("label", { className: "cursor-pointer text-sm font-light text-sbk-fg", htmlFor: t, children: a }),
+        e ? /* @__PURE__ */ i("span", { className: "text-xs font-semibold text-sbk-error-fg", id: n, role: "alert", children: e }) : r && /* @__PURE__ */ i("span", { className: "text-xs font-light text-sbk-fg-muted", id: n, children: r })
+      ] })
+    ] });
   }
 );
-d.displayName = "Checkbox";
+I.displayName = "Checkbox";
 export {
-  d as Checkbox
+  I as Checkbox
 };
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  helperText?: string;\n  label?: string;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ label, helperText, className, id, ...props }, ref) => {\n    const inputId = id || `checkbox-${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 rounded 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=\"checkbox\"\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\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","label","helperText","className","id","props","ref","inputId","jsxs","cn","jsx"],"mappings":";;;AAQO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AACvD,UAAMC,IAAUH,KAAM,YAAY,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAExE,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,EAAS,cAAc;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useId, useImperativeHandle, useRef } from 'react';\r\nimport { cn } from '../../utils/cn';\r\nimport { choiceControl } from '../../utils/styles';\r\n\r\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\r\n  error?: string;\r\n  helperText?: string;\r\n  /** Estado intermediário (ex.: \"selecionar todos\" parcial). */\r\n  indeterminate?: boolean;\r\n  label?: React.ReactNode;\r\n}\r\n\r\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\r\n  ({ label, helperText, error, indeterminate = false, className, id, disabled, ...props }, ref) => {\r\n    const autoId = useId();\r\n    const inputId = id ?? autoId;\r\n    const innerRef = useRef<HTMLInputElement>(null);\r\n    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);\r\n\r\n    useEffect(() => {\r\n      if (innerRef.current) innerRef.current.indeterminate = indeterminate;\r\n    }, [indeterminate]);\r\n\r\n    const hintId = error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined;\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={innerRef}\r\n          aria-describedby={hintId}\r\n          aria-invalid={error ? true : undefined}\r\n          className={choiceControl}\r\n          disabled={disabled}\r\n          id={inputId}\r\n          type=\"checkbox\"\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          {error ? (\r\n            <span className=\"text-xs font-semibold text-sbk-error-fg\" id={hintId} role=\"alert\">\r\n              {error}\r\n            </span>\r\n          ) : (\r\n            helperText && (\r\n              <span className=\"text-xs font-light text-sbk-fg-muted\" id={hintId}>\r\n                {helperText}\r\n              </span>\r\n            )\r\n          )}\r\n        </span>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nCheckbox.displayName = 'Checkbox';\r\n"],"names":["Checkbox","React","label","helperText","error","indeterminate","className","id","disabled","props","ref","autoId","useId","inputId","innerRef","useRef","useImperativeHandle","useEffect","hintId","jsxs","cn","jsx","choiceControl"],"mappings":";;;;AAYO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,eAAAC,IAAgB,IAAO,WAAAC,GAAW,IAAAC,GAAI,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AAC/F,UAAMC,IAASC,EAAA,GACTC,IAAUN,KAAMI,GAChBG,IAAWC,EAAyB,IAAI;AAC9C,IAAAC,EAAoBN,GAAK,MAAMI,EAAS,OAA2B,GAEnEG,EAAU,MAAM;AACd,MAAIH,EAAS,YAASA,EAAS,QAAQ,gBAAgBT;AAAA,IACzD,GAAG,CAACA,CAAa,CAAC;AAElB,UAAMa,IAASd,IAAQ,GAAGS,CAAO,WAAWV,IAAa,GAAGU,CAAO,YAAY;AAE/E,WACE,gBAAAM,EAAC,SAAI,WAAWC,EAAG,iCAAiCZ,KAAY,cAAcF,CAAS,GACrF,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKP;AAAA,UACL,oBAAkBI;AAAA,UAClB,gBAAcd,IAAQ,KAAO;AAAA,UAC7B,WAAWkB;AAAA,UACX,UAAAd;AAAA,UACA,IAAIK;AAAA,UACJ,MAAK;AAAA,UACJ,GAAGJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,gBAAAU,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,QAAAjB,uBACE,SAAA,EAAM,WAAU,iDAAgD,SAASW,GACvE,UAAAX,GACH;AAAA,QAEDE,IACC,gBAAAiB,EAAC,QAAA,EAAK,WAAU,2CAA0C,IAAIH,GAAQ,MAAK,SACxE,UAAAd,EAAA,CACH,IAEAD,KACE,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wCAAuC,IAAIH,GACxD,UAAAf,EAAA,CACH;AAAA,MAAA,EAAA,CAGN;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAH,EAAS,cAAc;"}

package/dist/components/Chip/Chip.d.ts

@@ -1,5 +1,11 @@
 import type React from 'react';
 export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    /** Estado de seleção (filtro ativo), anunciado via aria-pressed. */
     selected?: boolean;
 }
-export declare const Chip: React.FC<ChipProps>;
+/** Filtro rápido alternável (toggle button). */
+export declare const Chip: {
+    ({ selected, icon, className, children, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Chip/Chip.js

@@ -1,19 +1,29 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as n } from "../../utils/cn.js";
-const b = ({ selected: r = !1, className: e, children: o, ...t }) => /* @__PURE__ */ a(
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { Check as n } from "lucide-react";
+import { cn as b } from "../../utils/cn.js";
+import { focusRing as l, transitionColors as d, buttonReset as p } from "../../utils/styles.js";
+const m = ({ selected: r = !1, icon: e, className: i, children: o, ...t }) => /* @__PURE__ */ a(
   "button",
   {
-    className: n(
-      "inline-flex items-center rounded-full border px-3 py-1.5 text-sm transition",
-      r ? "border-[var(--md-primary)] bg-[color:color-mix(in_srgb,var(--md-primary)_16%,transparent)] text-[var(--md-on-surface)]" : "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-      e
+    "aria-pressed": r,
+    className: b(
+      p,
+      "inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4",
+      d,
+      l,
+      r ? "border-sbk-primary bg-sbk-primary-subtle font-semibold text-sbk-fg-heading" : "border-sbk-line-strong bg-sbk-surface font-light text-sbk-fg hover:bg-sbk-surface-hover",
+      i
     ),
     type: "button",
     ...t,
-    children: o
+    children: [
+      r ? /* @__PURE__ */ s(n, { "aria-hidden": "true" }) : e && /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "inline-flex", children: e }),
+      o
+    ]
   }
 );
+m.displayName = "Chip";
 export {
-  b as Chip
+  m as Chip
 };
 //# sourceMappingURL=Chip.js.map

package/dist/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  selected?: boolean;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ selected = false, className, children, ...props }) => {\n  return (\n    <button\n      className={cn(\n        'inline-flex items-center rounded-full border px-3 py-1.5 text-sm transition',\n        selected\n          ? 'border-[var(--md-primary)] bg-[color:color-mix(in_srgb,var(--md-primary)_16%,transparent)] text-[var(--md-on-surface)]'\n          : 'border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n        className,\n      )}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n"],"names":["Chip","selected","className","children","props","jsx","cn"],"mappings":";;AAOO,MAAMA,IAA4B,CAAC,EAAE,UAAAC,IAAW,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QAElF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,IACI,2HACA;AAAA,MACJC;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { Check } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\r\n\r\nexport interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  icon?: React.ReactNode;\r\n  /** Estado de seleção (filtro ativo), anunciado via aria-pressed. */\r\n  selected?: boolean;\r\n}\r\n\r\n/** Filtro rápido alternável (toggle button). */\r\nexport const Chip = ({ selected = false, icon, className, children, ...props }: ChipProps) => (\r\n  <button\r\n    aria-pressed={selected}\r\n    className={cn(\r\n      buttonReset,\r\n      'inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4',\r\n      transitionColors,\r\n      focusRing,\r\n      selected\r\n        ? 'border-sbk-primary bg-sbk-primary-subtle font-semibold text-sbk-fg-heading'\r\n        : 'border-sbk-line-strong bg-sbk-surface font-light text-sbk-fg hover:bg-sbk-surface-hover',\r\n      className,\r\n    )}\r\n    type=\"button\"\r\n    {...props}\r\n  >\r\n    {selected ? (\r\n      <Check aria-hidden=\"true\" />\r\n    ) : (\r\n      icon && (\r\n        <span aria-hidden=\"true\" className=\"inline-flex\">\r\n          {icon}\r\n        </span>\r\n      )\r\n    )}\r\n    {children}\r\n  </button>\r\n);\r\n\r\nChip.displayName = 'Chip';\r\n"],"names":["Chip","selected","icon","className","children","props","jsxs","cn","buttonReset","transitionColors","focusRing","jsx","Check"],"mappings":";;;;AAYO,MAAMA,IAAO,CAAC,EAAE,UAAAC,IAAW,IAAO,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,MACrE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,gBAAcL;AAAA,IACd,WAAWM;AAAA,MACTC;AAAA,MACA;AAAA,MACAC;AAAA,MACAC;AAAA,MACAT,IACI,+EACA;AAAA,MACJE;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGE;AAAA,IAEH,UAAA;AAAA,MAAAJ,IACC,gBAAAU,EAACC,GAAA,EAAM,eAAY,OAAA,CAAO,IAE1BV,KACE,gBAAAS,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,eAChC,UAAAT,GACH;AAAA,MAGHE;AAAA,IAAA;AAAA,EAAA;AACH;AAGFJ,EAAK,cAAc;"}

package/dist/components/Combobox/Combobox.d.ts

@@ -6,12 +6,20 @@ export interface ComboboxOption {
 export interface ComboboxProps {
     className?: string;
     disabled?: boolean;
+    /** Texto exibido quando o filtro não encontra opções. */
+    emptyText?: string;
     error?: string;
     helperText?: string;
-    label?: string;
+    id?: string;
+    label?: React.ReactNode;
     onChange?: (value: string) => void;
     options: ComboboxOption[];
     placeholder?: string;
+    required?: boolean;
     value?: string;
 }
-export declare const Combobox: React.FC<ComboboxProps>;
+/** Campo com busca e lista de opções (padrão ARIA combobox + listbox). */
+export declare const Combobox: {
+    ({ label, helperText, error, options, value, onChange, placeholder, emptyText, disabled, required, id, className, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Combobox/Combobox.js

@@ -1,143 +1,156 @@
-import { jsxs as $, jsx as t } from "react/jsx-runtime";
-import { useState as w, useRef as y, useEffect as R } from "react";
-import { cn as c } from "../../utils/cn.js";
-const S = ({
-  label: g,
-  helperText: m,
-  error: o,
-  options: v,
-  value: f,
-  onChange: p,
-  placeholder: z = "Selecione ou pesquise...",
-  disabled: E = !1,
-  className: L
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import { useId as O, useState as v, useRef as z, useEffect as L } from "react";
+import { ChevronDown as Q, Check as F } from "lucide-react";
+import { cn as y } from "../../utils/cn.js";
+import { describedBy as H, fieldSize as U, fieldControl as V } from "../../utils/styles.js";
+import { Field as G } from "../Field/Field.js";
+const J = ({
+  label: $,
+  helperText: k,
+  error: c,
+  options: u,
+  value: h,
+  onChange: f,
+  placeholder: R = "Selecione ou pesquise...",
+  emptyText: S = "Nenhum resultado encontrado.",
+  disabled: A = !1,
+  required: x,
+  id: M,
+  className: j
 }) => {
-  const [b, u] = w(""), [n, s] = w(!1), [l, i] = w(-1), x = y(null), N = y(null), I = y(null), h = v.find((e) => e.value === f), d = b ? v.filter((e) => e.label.toLowerCase().includes(b.toLowerCase())) : v, M = n ? b : (h == null ? void 0 : h.label) ?? "";
-  R(() => {
-    const e = (r) => {
-      x.current && !x.current.contains(r.target) && (s(!1), u(""));
+  const B = O(), a = M ?? B, w = `${a}-list`, [D, g] = v(""), [r, d] = v(!1), [s, n] = v(-1), N = z(null), E = z(null), m = u.find((e) => e.value === h), I = D.trim().toLocaleLowerCase("pt-BR"), i = I ? u.filter((e) => e.label.toLocaleLowerCase("pt-BR").includes(I)) : u, p = () => {
+    d(!1), g(""), n(-1);
+  };
+  L(() => {
+    if (!r) return;
+    const e = (t) => {
+      var o;
+      (o = N.current) != null && o.contains(t.target) || p();
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const k = (e) => {
-    var r;
-    p == null || p(e.value), u(""), s(!1), (r = N.current) == null || r.blur();
-  }, A = (e) => {
-    if (!n) {
-      (e.key === "ArrowDown" || e.key === "Enter") && (s(!0), i(0), e.preventDefault());
+  }, [r]), L(() => {
+    var e, t, o;
+    s < 0 || (o = (t = (e = E.current) == null ? void 0 : e.querySelector(`[data-index="${s}"]`)) == null ? void 0 : t.scrollIntoView) == null || o.call(t, { block: "nearest" });
+  }, [s]);
+  const C = (e) => {
+    f == null || f(e.value), p();
+  }, q = (e) => {
+    if (!r) {
+      (e.key === "ArrowDown" || e.key === "Enter") && (e.preventDefault(), d(!0), n(0));
       return;
     }
-    e.key === "ArrowDown" ? (e.preventDefault(), i((r) => Math.min(r + 1, d.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), i((r) => Math.max(r - 1, 0))) : e.key === "Enter" ? (e.preventDefault(), l >= 0 && d[l] && k(d[l])) : e.key === "Escape" && (s(!1), u(""));
-  }, a = `combobox-${Math.random().toString(36).slice(2, 9)}`, D = `${a}-list`;
-  return /* @__PURE__ */ $("div", { className: c("flex flex-col gap-[var(--spacing-xs)]", L), ref: x, children: [
-    g && /* @__PURE__ */ t(
-      "label",
-      {
-        className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
-        htmlFor: a,
-        children: g
-      }
-    ),
-    /* @__PURE__ */ $("div", { className: "relative", children: [
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ref: N,
-          "aria-activedescendant": l >= 0 ? `${a}-option-${l}` : void 0,
-          "aria-autocomplete": "list",
-          "aria-controls": D,
-          "aria-describedby": o ? `${a}-error` : m ? `${a}-helper` : void 0,
-          "aria-expanded": n,
-          "aria-invalid": o ? !0 : void 0,
-          autoComplete: "off",
-          className: c(
-            "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--font-size-base)] text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 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",
-            o && "border-[var(--md-error)]"
-          ),
-          disabled: E,
-          id: a,
-          placeholder: z,
-          role: "combobox",
-          type: "text",
-          value: M,
-          onChange: (e) => {
-            u(e.target.value), s(!0), i(0);
-          },
-          onFocus: () => s(!0),
-          onKeyDown: A
-        }
-      ),
-      /* @__PURE__ */ t(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: c(
-            "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] transition",
-            n && "rotate-180"
-          ),
-          children: /* @__PURE__ */ t(
-            "svg",
-            {
-              className: "h-4 w-4",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
-            }
-          )
-        }
-      ),
-      n && d.length > 0 && /* @__PURE__ */ t(
-        "ul",
-        {
-          ref: I,
-          className: "absolute z-[var(--z-index-dropdown)] mt-1 max-h-60 w-full overflow-auto rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] py-1 shadow-[var(--shadow-md)]",
-          id: D,
-          role: "listbox",
-          children: d.map((e, r) => /* @__PURE__ */ t(
-            "li",
-            {
-              "aria-selected": e.value === f,
-              className: c(
-                "cursor-pointer px-3.5 py-2 text-sm transition",
-                r === l ? "bg-[var(--md-primary)] text-[var(--md-on-primary)]" : e.value === f ? "bg-[var(--bg-tertiary)] text-[var(--text-primary)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]"
-              ),
-              id: `${a}-option-${r}`,
-              role: "option",
-              onMouseDown: (C) => {
-                C.preventDefault(), k(e);
-              },
-              onMouseEnter: () => i(r),
-              children: e.label
+    if (e.key === "ArrowDown")
+      e.preventDefault(), n((t) => Math.min(t + 1, i.length - 1));
+    else if (e.key === "ArrowUp")
+      e.preventDefault(), n((t) => Math.max(t - 1, 0));
+    else if (e.key === "Home")
+      e.preventDefault(), n(0);
+    else if (e.key === "End")
+      e.preventDefault(), n(i.length - 1);
+    else if (e.key === "Enter") {
+      e.preventDefault();
+      const t = i[s];
+      t && C(t);
+    } else (e.key === "Escape" || e.key === "Tab") && p();
+  };
+  return /* @__PURE__ */ l(
+    G,
+    {
+      className: j,
+      error: c,
+      helperText: k,
+      id: a,
+      label: $,
+      required: x,
+      children: /* @__PURE__ */ b("div", { ref: N, className: "relative", children: [
+        /* @__PURE__ */ l(
+          "input",
+          {
+            "aria-activedescendant": r && s >= 0 ? `${a}-option-${s}` : void 0,
+            "aria-autocomplete": "list",
+            "aria-controls": w,
+            "aria-describedby": H(a, c, k),
+            "aria-expanded": r,
+            "aria-invalid": c ? !0 : void 0,
+            autoComplete: "off",
+            className: y(V, U.md, "pr-10"),
+            disabled: A,
+            id: a,
+            onChange: (e) => {
+              g(e.target.value), d(!0), n(0);
             },
-            e.value
-          ))
-        }
-      ),
-      n && d.length === 0 && /* @__PURE__ */ t("div", { className: "absolute z-[var(--z-index-dropdown)] mt-1 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-3 text-sm text-[var(--text-muted)] shadow-[var(--shadow-md)]", children: "Nenhum resultado encontrado." })
-    ] }),
-    o && /* @__PURE__ */ t(
-      "span",
-      {
-        className: "text-[var(--font-size-xs)] text-[var(--md-error)]",
-        id: `${a}-error`,
-        role: "alert",
-        children: o
-      }
-    ),
-    m && !o && /* @__PURE__ */ t(
-      "span",
-      {
-        className: "text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
-        id: `${a}-helper`,
-        children: m
-      }
-    )
-  ] });
+            onClick: () => d(!0),
+            onKeyDown: q,
+            placeholder: R,
+            required: x,
+            role: "combobox",
+            type: "text",
+            value: r ? D : (m == null ? void 0 : m.label) ?? ""
+          }
+        ),
+        /* @__PURE__ */ l(
+          Q,
+          {
+            "aria-hidden": "true",
+            className: y(
+              "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-sbk-fg-muted transition-transform motion-reduce:transition-none",
+              r && "rotate-180"
+            )
+          }
+        ),
+        r && /* @__PURE__ */ b(
+          "ul",
+          {
+            ref: E,
+            className: "absolute z-[var(--sbk-z-dropdown)] mt-1 max-h-60 w-full overflow-auto rounded-sbk-sm border border-sbk-line bg-sbk-surface py-1 shadow-sbk-md animate-sbk-fade-in",
+            id: w,
+            role: "listbox",
+            children: [
+              i.length === 0 && /* @__PURE__ */ l(
+                "li",
+                {
+                  "aria-disabled": "true",
+                  className: "px-3.5 py-2.5 text-sm font-light text-sbk-fg-muted",
+                  role: "option",
+                  "aria-selected": !1,
+                  children: S
+                }
+              ),
+              i.map((e, t) => {
+                const o = e.value === h;
+                return /* @__PURE__ */ b(
+                  "li",
+                  {
+                    "aria-selected": o,
+                    className: y(
+                      "flex cursor-pointer items-center justify-between gap-2 px-3.5 py-2 text-sm font-light text-sbk-fg",
+                      t === s && "bg-sbk-surface-hover",
+                      o && "font-semibold text-sbk-primary"
+                    ),
+                    "data-index": t,
+                    id: `${a}-option-${t}`,
+                    onMouseDown: (K) => {
+                      K.preventDefault(), C(e);
+                    },
+                    onMouseEnter: () => n(t),
+                    role: "option",
+                    children: [
+                      e.label,
+                      o && /* @__PURE__ */ l(F, { "aria-hidden": "true", className: "size-4" })
+                    ]
+                  },
+                  e.value
+                );
+              })
+            ]
+          }
+        )
+      ] })
+    }
+  );
 };
-S.displayName = "Combobox";
+J.displayName = "Combobox";
 export {
-  S as Combobox
+  J as Combobox
 };
 //# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  className?: string;\n  disabled?: boolean;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  onChange?: (value: string) => void;\n  options: ComboboxOption[];\n  placeholder?: string;\n  value?: string;\n}\n\nexport const Combobox: React.FC<ComboboxProps> = ({\n  label,\n  helperText,\n  error,\n  options,\n  value,\n  onChange,\n  placeholder = 'Selecione ou pesquise...',\n  disabled = false,\n  className,\n}) => {\n  const [query, setQuery] = useState('');\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selectedOption = options.find((o) => o.value === value);\n\n  const filtered = query\n    ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n    : options;\n\n  const displayValue = isOpen ? query : (selectedOption?.label ?? '');\n\n  // Fechar ao clicar fora\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n        setQuery('');\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  const handleSelect = (option: ComboboxOption) => {\n    onChange?.(option.value);\n    setQuery('');\n    setIsOpen(false);\n    inputRef.current?.blur();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (!isOpen) {\n      if (e.key === 'ArrowDown' || e.key === 'Enter') {\n        setIsOpen(true);\n        setActiveIndex(0);\n        e.preventDefault();\n      }\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setActiveIndex((i) => Math.max(i - 1, 0));\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (activeIndex >= 0 && filtered[activeIndex]) {\n        handleSelect(filtered[activeIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      setIsOpen(false);\n      setQuery('');\n    }\n  };\n\n  const inputId = `combobox-${Math.random().toString(36).slice(2, 9)}`;\n  const listId = `${inputId}-list`;\n\n  return (\n    <div className={cn('flex flex-col gap-[var(--spacing-xs)]', className)} ref={containerRef}>\n      {label && (\n        <label\n          className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n          htmlFor={inputId}\n        >\n          {label}\n        </label>\n      )}\n      <div className=\"relative\">\n        <input\n          ref={inputRef}\n          aria-activedescendant={activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : undefined}\n          aria-autocomplete=\"list\"\n          aria-controls={listId}\n          aria-describedby={\n            error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\n          }\n          aria-expanded={isOpen}\n          aria-invalid={error ? true : undefined}\n          autoComplete=\"off\"\n          className={cn(\n            'w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--font-size-base)] text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 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          )}\n          disabled={disabled}\n          id={inputId}\n          placeholder={placeholder}\n          role=\"combobox\"\n          type=\"text\"\n          value={displayValue}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setIsOpen(true);\n            setActiveIndex(0);\n          }}\n          onFocus={() => setIsOpen(true)}\n          onKeyDown={handleKeyDown}\n        />\n        {/* Chevron */}\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] transition',\n            isOpen && 'rotate-180',\n          )}\n        >\n          <svg\n            className=\"h-4 w-4\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path d=\"m6 9 6 6 6-6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </span>\n\n        {/* Dropdown */}\n        {isOpen && filtered.length > 0 && (\n          <ul\n            ref={listRef}\n            className=\"absolute z-[var(--z-index-dropdown)] mt-1 max-h-60 w-full overflow-auto rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] py-1 shadow-[var(--shadow-md)]\"\n            id={listId}\n            role=\"listbox\"\n          >\n            {filtered.map((option, index) => (\n              <li\n                aria-selected={option.value === value}\n                className={cn(\n                  'cursor-pointer px-3.5 py-2 text-sm transition',\n                  index === activeIndex\n                    ? 'bg-[var(--md-primary)] text-[var(--md-on-primary)]'\n                    : option.value === value\n                      ? 'bg-[var(--bg-tertiary)] text-[var(--text-primary)]'\n                      : 'text-[var(--text-primary)] hover:bg-[var(--bg-hover)]',\n                )}\n                id={`${inputId}-option-${index}`}\n                key={option.value}\n                role=\"option\"\n                onMouseDown={(e) => {\n                  e.preventDefault();\n                  handleSelect(option);\n                }}\n                onMouseEnter={() => setActiveIndex(index)}\n              >\n                {option.label}\n              </li>\n            ))}\n          </ul>\n        )}\n        {isOpen && filtered.length === 0 && (\n          <div className=\"absolute z-[var(--z-index-dropdown)] mt-1 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-3 text-sm text-[var(--text-muted)] shadow-[var(--shadow-md)]\">\n            Nenhum resultado encontrado.\n          </div>\n        )}\n      </div>\n      {error && (\n        <span\n          className=\"text-[var(--font-size-xs)] text-[var(--md-error)]\"\n          id={`${inputId}-error`}\n          role=\"alert\"\n        >\n          {error}\n        </span>\n      )}\n      {helperText && !error && (\n        <span\n          className=\"text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]\"\n          id={`${inputId}-helper`}\n        >\n          {helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","label","helperText","error","options","value","onChange","placeholder","disabled","className","query","setQuery","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","containerRef","useRef","inputRef","listRef","selectedOption","o","filtered","displayValue","useEffect","handleClickOutside","e","handleSelect","option","_a","handleKeyDown","i","inputId","listId","jsxs","cn","jsx","index"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\r\nimport { Check, ChevronDown } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { describedBy, fieldControl, fieldSize } from '../../utils/styles';\r\nimport { Field } from '../Field/Field';\r\n\r\nexport interface ComboboxOption {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport interface ComboboxProps {\r\n  className?: string;\r\n  disabled?: boolean;\r\n  /** Texto exibido quando o filtro não encontra opções. */\r\n  emptyText?: string;\r\n  error?: string;\r\n  helperText?: string;\r\n  id?: string;\r\n  label?: React.ReactNode;\r\n  onChange?: (value: string) => void;\r\n  options: ComboboxOption[];\r\n  placeholder?: string;\r\n  required?: boolean;\r\n  value?: string;\r\n}\r\n\r\n/** Campo com busca e lista de opções (padrão ARIA combobox + listbox). */\r\nexport const Combobox = ({\r\n  label,\r\n  helperText,\r\n  error,\r\n  options,\r\n  value,\r\n  onChange,\r\n  placeholder = 'Selecione ou pesquise...',\r\n  emptyText = 'Nenhum resultado encontrado.',\r\n  disabled = false,\r\n  required,\r\n  id,\r\n  className,\r\n}: ComboboxProps) => {\r\n  const autoId = useId();\r\n  const inputId = id ?? autoId;\r\n  const listId = `${inputId}-list`;\r\n  const [query, setQuery] = useState('');\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState(-1);\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const listRef = useRef<HTMLUListElement>(null);\r\n\r\n  const selectedOption = options.find((o) => o.value === value);\r\n  const normalizedQuery = query.trim().toLocaleLowerCase('pt-BR');\r\n  const filtered = normalizedQuery\r\n    ? options.filter((o) => o.label.toLocaleLowerCase('pt-BR').includes(normalizedQuery))\r\n    : options;\r\n\r\n  const close = () => {\r\n    setIsOpen(false);\r\n    setQuery('');\r\n    setActiveIndex(-1);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handleClickOutside = (e: MouseEvent) => {\r\n      if (!containerRef.current?.contains(e.target as Node)) close();\r\n    };\r\n    document.addEventListener('mousedown', handleClickOutside);\r\n    return () => document.removeEventListener('mousedown', handleClickOutside);\r\n  }, [isOpen]);\r\n\r\n  useEffect(() => {\r\n    if (activeIndex < 0) return;\r\n    listRef.current\r\n      ?.querySelector(`[data-index=\"${activeIndex}\"]`)\r\n      ?.scrollIntoView?.({ block: 'nearest' });\r\n  }, [activeIndex]);\r\n\r\n  const handleSelect = (option: ComboboxOption) => {\r\n    onChange?.(option.value);\r\n    close();\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (!isOpen) {\r\n      if (e.key === 'ArrowDown' || e.key === 'Enter') {\r\n        e.preventDefault();\r\n        setIsOpen(true);\r\n        setActiveIndex(0);\r\n      }\r\n      return;\r\n    }\r\n    if (e.key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      setActiveIndex((i) => Math.max(i - 1, 0));\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault();\r\n      setActiveIndex(0);\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault();\r\n      setActiveIndex(filtered.length - 1);\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      const option = filtered[activeIndex];\r\n      if (option) handleSelect(option);\r\n    } else if (e.key === 'Escape' || e.key === 'Tab') {\r\n      close();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Field\r\n      className={className}\r\n      error={error}\r\n      helperText={helperText}\r\n      id={inputId}\r\n      label={label}\r\n      required={required}\r\n    >\r\n      <div ref={containerRef} className=\"relative\">\r\n        <input\r\n          aria-activedescendant={\r\n            isOpen && activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : undefined\r\n          }\r\n          aria-autocomplete=\"list\"\r\n          aria-controls={listId}\r\n          aria-describedby={describedBy(inputId, error, helperText)}\r\n          aria-expanded={isOpen}\r\n          aria-invalid={error ? true : undefined}\r\n          autoComplete=\"off\"\r\n          className={cn(fieldControl, fieldSize.md, 'pr-10')}\r\n          disabled={disabled}\r\n          id={inputId}\r\n          onChange={(e) => {\r\n            setQuery(e.target.value);\r\n            setIsOpen(true);\r\n            setActiveIndex(0);\r\n          }}\r\n          onClick={() => setIsOpen(true)}\r\n          onKeyDown={handleKeyDown}\r\n          placeholder={placeholder}\r\n          required={required}\r\n          role=\"combobox\"\r\n          type=\"text\"\r\n          value={isOpen ? query : (selectedOption?.label ?? '')}\r\n        />\r\n        <ChevronDown\r\n          aria-hidden=\"true\"\r\n          className={cn(\r\n            'pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-sbk-fg-muted transition-transform motion-reduce:transition-none',\r\n            isOpen && 'rotate-180',\r\n          )}\r\n        />\r\n\r\n        {isOpen && (\r\n          <ul\r\n            ref={listRef}\r\n            className=\"absolute z-[var(--sbk-z-dropdown)] mt-1 max-h-60 w-full overflow-auto rounded-sbk-sm border border-sbk-line bg-sbk-surface py-1 shadow-sbk-md animate-sbk-fade-in\"\r\n            id={listId}\r\n            role=\"listbox\"\r\n          >\r\n            {filtered.length === 0 && (\r\n              <li\r\n                aria-disabled=\"true\"\r\n                className=\"px-3.5 py-2.5 text-sm font-light text-sbk-fg-muted\"\r\n                role=\"option\"\r\n                aria-selected={false}\r\n              >\r\n                {emptyText}\r\n              </li>\r\n            )}\r\n            {filtered.map((option, index) => {\r\n              const selected = option.value === value;\r\n              return (\r\n                <li\r\n                  key={option.value}\r\n                  aria-selected={selected}\r\n                  className={cn(\r\n                    'flex cursor-pointer items-center justify-between gap-2 px-3.5 py-2 text-sm font-light text-sbk-fg',\r\n                    index === activeIndex && 'bg-sbk-surface-hover',\r\n                    selected && 'font-semibold text-sbk-primary',\r\n                  )}\r\n                  data-index={index}\r\n                  id={`${inputId}-option-${index}`}\r\n                  onMouseDown={(e) => {\r\n                    e.preventDefault();\r\n                    handleSelect(option);\r\n                  }}\r\n                  onMouseEnter={() => setActiveIndex(index)}\r\n                  role=\"option\"\r\n                >\r\n                  {option.label}\r\n                  {selected && <Check aria-hidden=\"true\" className=\"size-4\" />}\r\n                </li>\r\n              );\r\n            })}\r\n          </ul>\r\n        )}\r\n      </div>\r\n    </Field>\r\n  );\r\n};\r\n\r\nCombobox.displayName = 'Combobox';\r\n"],"names":["Combobox","label","helperText","error","options","value","onChange","placeholder","emptyText","disabled","required","id","className","autoId","useId","inputId","listId","query","setQuery","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","containerRef","useRef","listRef","selectedOption","o","normalizedQuery","filtered","close","useEffect","handleClickOutside","e","_a","_c","_b","handleSelect","option","handleKeyDown","i","jsx","Field","jsxs","describedBy","cn","fieldControl","fieldSize","ChevronDown","index","selected","Check"],"mappings":";;;;;;AA4BO,MAAMA,IAAW,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,WAAAC;AACF,MAAqB;AACnB,QAAMC,IAASC,EAAA,GACTC,IAAUJ,KAAME,GAChBG,IAAS,GAAGD,CAAO,SACnB,CAACE,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAC/B,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAeC,EAAuB,IAAI,GAC1CC,IAAUD,EAAyB,IAAI,GAEvCE,IAAiBvB,EAAQ,KAAK,CAACwB,MAAMA,EAAE,UAAUvB,CAAK,GACtDwB,IAAkBZ,EAAM,KAAA,EAAO,kBAAkB,OAAO,GACxDa,IAAWD,IACbzB,EAAQ,OAAO,CAACwB,MAAMA,EAAE,MAAM,kBAAkB,OAAO,EAAE,SAASC,CAAe,CAAC,IAClFzB,GAEE2B,IAAQ,MAAM;AAClB,IAAAV,EAAU,EAAK,GACfH,EAAS,EAAE,GACXK,EAAe,EAAE;AAAA,EACnB;AAEA,EAAAS,EAAU,MAAM;AACd,QAAI,CAACZ,EAAQ;AACb,UAAMa,IAAqB,CAACC,MAAkB;;AAC5C,OAAKC,IAAAX,EAAa,YAAb,QAAAW,EAAsB,SAASD,EAAE,WAAiBH,EAAA;AAAA,IACzD;AACA,oBAAS,iBAAiB,aAAaE,CAAkB,GAClD,MAAM,SAAS,oBAAoB,aAAaA,CAAkB;AAAA,EAC3E,GAAG,CAACb,CAAM,CAAC,GAEXY,EAAU,MAAM;;AACd,IAAIV,IAAc,MAClBc,KAAAC,KAAAF,IAAAT,EAAQ,YAAR,gBAAAS,EACI,cAAc,gBAAgBb,CAAW,UAD7C,gBAAAe,EAEI,mBAFJ,QAAAD,EAAA,KAAAC,GAEqB,EAAE,OAAO,UAAA;AAAA,EAChC,GAAG,CAACf,CAAW,CAAC;AAEhB,QAAMgB,IAAe,CAACC,MAA2B;AAC/C,IAAAjC,KAAA,QAAAA,EAAWiC,EAAO,QAClBR,EAAA;AAAA,EACF,GAEMS,IAAgB,CAAC,MAA6C;AAClE,QAAI,CAACpB,GAAQ;AACX,OAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aACrC,EAAE,eAAA,GACFC,EAAU,EAAI,GACdE,EAAe,CAAC;AAElB;AAAA,IACF;AACA,QAAI,EAAE,QAAQ;AACZ,QAAE,eAAA,GACFA,EAAe,CAACkB,MAAM,KAAK,IAAIA,IAAI,GAAGX,EAAS,SAAS,CAAC,CAAC;AAAA,aACjD,EAAE,QAAQ;AACnB,QAAE,eAAA,GACFP,EAAe,CAACkB,MAAM,KAAK,IAAIA,IAAI,GAAG,CAAC,CAAC;AAAA,aAC/B,EAAE,QAAQ;AACnB,QAAE,eAAA,GACFlB,EAAe,CAAC;AAAA,aACP,EAAE,QAAQ;AACnB,QAAE,eAAA,GACFA,EAAeO,EAAS,SAAS,CAAC;AAAA,aACzB,EAAE,QAAQ,SAAS;AAC5B,QAAE,eAAA;AACF,YAAMS,IAAST,EAASR,CAAW;AACnC,MAAIiB,OAAqBA,CAAM;AAAA,IACjC,QAAW,EAAE,QAAQ,YAAY,EAAE,QAAQ,UACzCR,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAA/B;AAAA,MACA,OAAAT;AAAA,MACA,YAAAD;AAAA,MACA,IAAIa;AAAA,MACJ,OAAAd;AAAA,MACA,UAAAS;AAAA,MAEA,UAAA,gBAAAkC,EAAC,OAAA,EAAI,KAAKpB,GAAc,WAAU,YAChC,UAAA;AAAA,QAAA,gBAAAkB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,yBACEtB,KAAUE,KAAe,IAAI,GAAGP,CAAO,WAAWO,CAAW,KAAK;AAAA,YAEpE,qBAAkB;AAAA,YAClB,iBAAeN;AAAA,YACf,oBAAkB6B,EAAY9B,GAASZ,GAAOD,CAAU;AAAA,YACxD,iBAAekB;AAAA,YACf,gBAAcjB,IAAQ,KAAO;AAAA,YAC7B,cAAa;AAAA,YACb,WAAW2C,EAAGC,GAAcC,EAAU,IAAI,OAAO;AAAA,YACjD,UAAAvC;AAAA,YACA,IAAIM;AAAA,YACJ,UAAU,CAAC,MAAM;AACf,cAAAG,EAAS,EAAE,OAAO,KAAK,GACvBG,EAAU,EAAI,GACdE,EAAe,CAAC;AAAA,YAClB;AAAA,YACA,SAAS,MAAMF,EAAU,EAAI;AAAA,YAC7B,WAAWmB;AAAA,YACX,aAAAjC;AAAA,YACA,UAAAG;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAOU,IAASH,KAASU,KAAA,gBAAAA,EAAgB,UAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpD,gBAAAe;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWH;AAAA,cACT;AAAA,cACA1B,KAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAGDA,KACC,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKlB;AAAA,YACL,WAAU;AAAA,YACV,IAAIV;AAAA,YACJ,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAc,EAAS,WAAW,KACnB,gBAAAY;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,iBAAc;AAAA,kBACd,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,iBAAe;AAAA,kBAEd,UAAAlC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJsB,EAAS,IAAI,CAACS,GAAQW,MAAU;AAC/B,sBAAMC,IAAWZ,EAAO,UAAUlC;AAClC,uBACE,gBAAAuC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,iBAAeO;AAAA,oBACf,WAAWL;AAAA,sBACT;AAAA,sBACAI,MAAU5B,KAAe;AAAA,sBACzB6B,KAAY;AAAA,oBAAA;AAAA,oBAEd,cAAYD;AAAA,oBACZ,IAAI,GAAGnC,CAAO,WAAWmC,CAAK;AAAA,oBAC9B,aAAa,CAAChB,MAAM;AAClB,sBAAAA,EAAE,eAAA,GACFI,EAAaC,CAAM;AAAA,oBACrB;AAAA,oBACA,cAAc,MAAMhB,EAAe2B,CAAK;AAAA,oBACxC,MAAK;AAAA,oBAEJ,UAAA;AAAA,sBAAAX,EAAO;AAAA,sBACPY,KAAY,gBAAAT,EAACU,GAAA,EAAM,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAjBrDb,EAAO;AAAA,gBAAA;AAAA,cAoBlB,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAvC,EAAS,cAAc;"}

package/dist/components/Divider/Divider.d.ts

@@ -1,5 +1,11 @@
 import type React from 'react';
 export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Texto central (ex.: "ou"). Apenas na orientação horizontal. */
+    label?: React.ReactNode;
     orientation?: 'horizontal' | 'vertical';
 }
-export declare const Divider: React.FC<DividerProps>;
+/** Linha divisória funcional (brand book: linhas conduzem o olhar, não decoram). */
+export declare const Divider: {
+    ({ orientation, label, className, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Divider/Divider.js

@@ -1,22 +1,38 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as a } from "../../utils/cn.js";
-const p = ({
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { cn as l } from "../../utils/cn.js";
+const n = ({
   orientation: r = "horizontal",
-  className: o,
-  ...l
-}) => /* @__PURE__ */ t(
+  label: s,
+  className: a,
+  ...i
+}) => s && r === "horizontal" ? /* @__PURE__ */ t(
   "div",
   {
-    className: a(
-      "bg-[var(--border-color)]",
-      r === "horizontal" ? "h-px w-full" : "h-full w-px",
-      o
+    "aria-orientation": "horizontal",
+    className: l("flex items-center gap-3", a),
+    role: "separator",
+    ...i,
+    children: [
+      /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-sbk-line" }),
+      /* @__PURE__ */ e("span", { className: "text-xs font-light text-sbk-fg-muted", children: s }),
+      /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-sbk-line" })
+    ]
+  }
+) : /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-orientation": r,
+    className: l(
+      "shrink-0 bg-sbk-line",
+      r === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch",
+      a
     ),
     role: "separator",
-    ...l
+    ...i
   }
 );
+n.displayName = "Divider";
 export {
-  p as Divider
+  n as Divider
 };
 //# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Divider: React.FC<DividerProps> = ({\n  orientation = 'horizontal',\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cn(\n        'bg-[var(--border-color)]',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n        className,\n      )}\n      role=\"separator\"\n      {...props}\n    />\n  );\n};\n"],"names":["Divider","orientation","className","props","jsx","cn"],"mappings":";;AAOO,MAAMA,IAAkC,CAAC;AAAA,EAC9C,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ,MAAgB,eAAe,gBAAgB;AAAA,MAC/CC;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGC;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Texto central (ex.: \"ou\"). Apenas na orientação horizontal. */\r\n  label?: React.ReactNode;\r\n  orientation?: 'horizontal' | 'vertical';\r\n}\r\n\r\n/** Linha divisória funcional (brand book: linhas conduzem o olhar, não decoram). */\r\nexport const Divider = ({\r\n  orientation = 'horizontal',\r\n  label,\r\n  className,\r\n  ...props\r\n}: DividerProps) => {\r\n  if (label && orientation === 'horizontal') {\r\n    return (\r\n      <div\r\n        aria-orientation=\"horizontal\"\r\n        className={cn('flex items-center gap-3', className)}\r\n        role=\"separator\"\r\n        {...props}\r\n      >\r\n        <span className=\"h-px flex-1 bg-sbk-line\" />\r\n        <span className=\"text-xs font-light text-sbk-fg-muted\">{label}</span>\r\n        <span className=\"h-px flex-1 bg-sbk-line\" />\r\n      </div>\r\n    );\r\n  }\r\n  return (\r\n    <div\r\n      aria-orientation={orientation}\r\n      className={cn(\r\n        'shrink-0 bg-sbk-line',\r\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px self-stretch',\r\n        className,\r\n      )}\r\n      role=\"separator\"\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nDivider.displayName = 'Divider';\r\n"],"names":["Divider","orientation","label","className","props","jsxs","cn","jsx"],"mappings":";;AAUO,MAAMA,IAAU,CAAC;AAAA,EACtB,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACMF,KAASD,MAAgB,eAEzB,gBAAAI;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,oBAAiB;AAAA,IACjB,WAAWC,EAAG,2BAA2BH,CAAS;AAAA,IAClD,MAAK;AAAA,IACJ,GAAGC;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,0BAAA,CAA0B;AAAA,MAC1C,gBAAAA,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAL,GAAM;AAAA,MAC9D,gBAAAK,EAAC,QAAA,EAAK,WAAU,0BAAA,CAA0B;AAAA,IAAA;AAAA,EAAA;AAAA,IAK9C,gBAAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,oBAAkBN;AAAA,IAClB,WAAWK;AAAA,MACT;AAAA,MACAL,MAAgB,eAAe,gBAAgB;AAAA,MAC/CE;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGC;AAAA,EAAA;AAAA;AAKVJ,EAAQ,cAAc;"}