@sbkbs/ui 1.0.6 → 2.0.0-beta.0

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+export interface DropdownMenuItem {
+    /** Ação destrutiva (ex.: excluir), exibida em cor de erro. */
+    danger?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    id: string;
+    label: React.ReactNode;
+    onSelect?: () => void;
+    /** Atalho exibido à direita (ex.: "Ctrl+S"). */
+    shortcut?: string;
+    type?: 'item';
+}
+export interface DropdownMenuSeparator {
+    id: string;
+    type: 'separator';
+}
+export type DropdownMenuEntry = DropdownMenuItem | DropdownMenuSeparator;
+export interface DropdownMenuProps {
+    align?: 'start' | 'end';
+    /** Rótulo acessível do menu quando o gatilho não tem texto. */
+    'aria-label'?: string;
+    items: DropdownMenuEntry[];
+    /** Conteúdo do botão gatilho. */
+    trigger: React.ReactNode;
+    triggerClassName?: string;
+    variant?: 'default' | 'glass';
+}
+/** Menu de ações (padrão ARIA menu button): setas, Home/End, Enter, Esc e digitação por letra. */
+export declare const DropdownMenu: {
+    ({ trigger, items, align, variant, triggerClassName, "aria-label": ariaLabel, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,147 @@
+import { jsxs as N, jsx as n } from "react/jsx-runtime";
+import { useState as S, useId as y, useRef as f, useEffect as K } from "react";
+import { cn as m } from "../../utils/cn.js";
+import { focusRing as q, buttonReset as z } from "../../utils/styles.js";
+const B = (c) => c.type !== "separator", M = ({
+  trigger: c,
+  items: R,
+  align: A = "start",
+  variant: C = "default",
+  triggerClassName: I,
+  "aria-label": p
+}) => {
+  const [o, a] = S(!1), b = y(), k = f(null), d = f(null), g = f(null), h = () => {
+    var e;
+    return Array.from(
+      ((e = d.current) == null ? void 0 : e.querySelectorAll(
+        '[role="menuitem"]:not([aria-disabled="true"])'
+      )) ?? []
+    );
+  }, r = (e) => {
+    var s;
+    const t = h();
+    t.length !== 0 && ((s = t[(e + t.length) % t.length]) == null || s.focus());
+  }, i = (e = !0) => {
+    var t;
+    a(!1), e && ((t = k.current) == null || t.focus());
+  };
+  K(() => {
+    if (!o) return;
+    requestAnimationFrame(
+      () => {
+        var t, s;
+        return (s = (t = d.current) == null ? void 0 : t.querySelector('[role="menuitem"]:not([aria-disabled="true"])')) == null ? void 0 : s.focus();
+      }
+    );
+    const e = (t) => {
+      var s;
+      (s = g.current) != null && s.contains(t.target) || a(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [o]);
+  const E = (e) => {
+    const t = h(), s = t.indexOf(document.activeElement);
+    if (e.key === "ArrowDown")
+      e.preventDefault(), r(s + 1);
+    else if (e.key === "ArrowUp")
+      e.preventDefault(), r(s - 1);
+    else if (e.key === "Home")
+      e.preventDefault(), r(0);
+    else if (e.key === "End")
+      e.preventDefault(), r(t.length - 1);
+    else if (e.key === "Escape")
+      e.preventDefault(), i();
+    else if (e.key === "Tab")
+      i(!1);
+    else if (e.key.length === 1 && /\S/.test(e.key)) {
+      const x = e.key.toLocaleLowerCase("pt-BR"), v = t.findIndex(
+        (u, l) => {
+          var D;
+          return l > s && ((D = u.textContent) == null ? void 0 : D.trim().toLocaleLowerCase("pt-BR").startsWith(x));
+        }
+      ), L = t.findIndex(
+        (u) => {
+          var l;
+          return (l = u.textContent) == null ? void 0 : l.trim().toLocaleLowerCase("pt-BR").startsWith(x);
+        }
+      ), w = v >= 0 ? v : L;
+      w >= 0 && r(w);
+    }
+  };
+  return /* @__PURE__ */ N("div", { ref: g, className: "relative inline-flex", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        ref: k,
+        "aria-controls": o ? b : void 0,
+        "aria-expanded": o,
+        "aria-haspopup": "menu",
+        "aria-label": p,
+        className: m(
+          z,
+          "inline-flex cursor-pointer items-center",
+          q,
+          I
+        ),
+        onClick: () => a((e) => !e),
+        onKeyDown: (e) => {
+          (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), a(!0));
+        },
+        type: "button",
+        children: c
+      }
+    ),
+    o && /* @__PURE__ */ n(
+      "div",
+      {
+        ref: d,
+        "aria-label": p,
+        className: m(
+          "absolute top-full z-[var(--sbk-z-dropdown)] mt-1 min-w-48 rounded-sbk-sm p-1 animate-sbk-fade-in",
+          C === "glass" ? "sbk-glass sbk-glass-strong" : "border border-sbk-line bg-sbk-surface shadow-sbk-md",
+          A === "end" ? "right-0" : "left-0"
+        ),
+        id: b,
+        onKeyDown: E,
+        role: "menu",
+        tabIndex: -1,
+        children: R.map(
+          (e) => B(e) ? /* @__PURE__ */ N(
+            "div",
+            {
+              "aria-disabled": e.disabled || void 0,
+              className: m(
+                "flex cursor-pointer select-none items-center gap-2 rounded-sbk-xs px-2.5 py-2 text-sm font-light outline-none",
+                "hover:bg-sbk-surface-hover focus:bg-sbk-surface-hover",
+                e.danger ? "text-sbk-error-fg" : "text-sbk-fg",
+                e.disabled && "pointer-events-none opacity-50",
+                "[&_svg]:size-4 [&_svg]:shrink-0"
+              ),
+              onClick: () => {
+                var t;
+                e.disabled || ((t = e.onSelect) == null || t.call(e), i());
+              },
+              onKeyDown: (t) => {
+                var s;
+                (t.key === "Enter" || t.key === " ") && !e.disabled && (t.preventDefault(), (s = e.onSelect) == null || s.call(e), i());
+              },
+              role: "menuitem",
+              tabIndex: -1,
+              children: [
+                e.icon && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "inline-flex text-sbk-fg-muted", children: e.icon }),
+                /* @__PURE__ */ n("span", { className: "flex-1", children: e.label }),
+                e.shortcut && /* @__PURE__ */ n("kbd", { className: "font-sbk text-xs font-light text-sbk-fg-muted", children: e.shortcut })
+              ]
+            },
+            e.id
+          ) : /* @__PURE__ */ n("div", { className: "my-1 h-px bg-sbk-line", role: "separator" }, e.id)
+        )
+      }
+    )
+  ] });
+};
+M.displayName = "DropdownMenu";
+export {
+  M as DropdownMenu
+};
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing } from '../../utils/styles';\n\nexport interface DropdownMenuItem {\n  /** Ação destrutiva (ex.: excluir), exibida em cor de erro. */\n  danger?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n  id: string;\n  label: React.ReactNode;\n  onSelect?: () => void;\n  /** Atalho exibido à direita (ex.: \"Ctrl+S\"). */\n  shortcut?: string;\n  type?: 'item';\n}\n\nexport interface DropdownMenuSeparator {\n  id: string;\n  type: 'separator';\n}\n\nexport type DropdownMenuEntry = DropdownMenuItem | DropdownMenuSeparator;\n\nexport interface DropdownMenuProps {\n  align?: 'start' | 'end';\n  /** Rótulo acessível do menu quando o gatilho não tem texto. */\n  'aria-label'?: string;\n  items: DropdownMenuEntry[];\n  /** Conteúdo do botão gatilho. */\n  trigger: React.ReactNode;\n  triggerClassName?: string;\n  variant?: 'default' | 'glass';\n}\n\nconst isItem = (entry: DropdownMenuEntry): entry is DropdownMenuItem => entry.type !== 'separator';\n\n/** Menu de ações (padrão ARIA menu button): setas, Home/End, Enter, Esc e digitação por letra. */\nexport const DropdownMenu = ({\n  trigger,\n  items,\n  align = 'start',\n  variant = 'default',\n  triggerClassName,\n  'aria-label': ariaLabel,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useState(false);\n  const menuId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const enabledItems = () =>\n    Array.from(\n      menuRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      ) ?? [],\n    );\n\n  const focusAt = (index: number) => {\n    const list = enabledItems();\n    if (list.length === 0) return;\n    list[(index + list.length) % list.length]?.focus();\n  };\n\n  const close = (restoreFocus = true) => {\n    setOpen(false);\n    if (restoreFocus) triggerRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (!open) return;\n    requestAnimationFrame(() =>\n      menuRef.current\n        ?.querySelector<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n        ?.focus(),\n    );\n    const onClickOutside = (e: MouseEvent) => {\n      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener('mousedown', onClickOutside);\n    return () => document.removeEventListener('mousedown', onClickOutside);\n  }, [open]);\n\n  const onMenuKeyDown = (e: React.KeyboardEvent) => {\n    const list = enabledItems();\n    const index = list.indexOf(document.activeElement as HTMLElement);\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      focusAt(index + 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      focusAt(index - 1);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      focusAt(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      focusAt(list.length - 1);\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      close();\n    } else if (e.key === 'Tab') {\n      close(false);\n    } else if (e.key.length === 1 && /\\S/.test(e.key)) {\n      const char = e.key.toLocaleLowerCase('pt-BR');\n      const match = list.findIndex(\n        (el, i) => i > index && el.textContent?.trim().toLocaleLowerCase('pt-BR').startsWith(char),\n      );\n      const fallback = list.findIndex((el) =>\n        el.textContent?.trim().toLocaleLowerCase('pt-BR').startsWith(char),\n      );\n      const target = match >= 0 ? match : fallback;\n      if (target >= 0) focusAt(target);\n    }\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      <button\n        ref={triggerRef}\n        aria-controls={open ? menuId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        aria-label={ariaLabel}\n        className={cn(\n          buttonReset,\n          'inline-flex cursor-pointer items-center',\n          focusRing,\n          triggerClassName,\n        )}\n        onClick={() => setOpen((v) => !v)}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n        type=\"button\"\n      >\n        {trigger}\n      </button>\n      {open && (\n        <div\n          ref={menuRef}\n          aria-label={ariaLabel}\n          className={cn(\n            'absolute top-full z-[var(--sbk-z-dropdown)] mt-1 min-w-48 rounded-sbk-sm p-1 animate-sbk-fade-in',\n            variant === 'glass'\n              ? 'sbk-glass sbk-glass-strong'\n              : 'border border-sbk-line bg-sbk-surface shadow-sbk-md',\n            align === 'end' ? 'right-0' : 'left-0',\n          )}\n          id={menuId}\n          onKeyDown={onMenuKeyDown}\n          role=\"menu\"\n          tabIndex={-1}\n        >\n          {items.map((entry) =>\n            isItem(entry) ? (\n              <div\n                key={entry.id}\n                aria-disabled={entry.disabled || undefined}\n                className={cn(\n                  'flex cursor-pointer select-none items-center gap-2 rounded-sbk-xs px-2.5 py-2 text-sm font-light outline-none',\n                  'hover:bg-sbk-surface-hover focus:bg-sbk-surface-hover',\n                  entry.danger ? 'text-sbk-error-fg' : 'text-sbk-fg',\n                  entry.disabled && 'pointer-events-none opacity-50',\n                  '[&_svg]:size-4 [&_svg]:shrink-0',\n                )}\n                onClick={() => {\n                  if (entry.disabled) return;\n                  entry.onSelect?.();\n                  close();\n                }}\n                onKeyDown={(e) => {\n                  if ((e.key === 'Enter' || e.key === ' ') && !entry.disabled) {\n                    e.preventDefault();\n                    entry.onSelect?.();\n                    close();\n                  }\n                }}\n                role=\"menuitem\"\n                tabIndex={-1}\n              >\n                {entry.icon && (\n                  <span aria-hidden=\"true\" className=\"inline-flex text-sbk-fg-muted\">\n                    {entry.icon}\n                  </span>\n                )}\n                <span className=\"flex-1\">{entry.label}</span>\n                {entry.shortcut && (\n                  <kbd className=\"font-sbk text-xs font-light text-sbk-fg-muted\">\n                    {entry.shortcut}\n                  </kbd>\n                )}\n              </div>\n            ) : (\n              <div key={entry.id} className=\"my-1 h-px bg-sbk-line\" role=\"separator\" />\n            ),\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nDropdownMenu.displayName = 'DropdownMenu';\n"],"names":["isItem","entry","DropdownMenu","trigger","items","align","variant","triggerClassName","ariaLabel","open","setOpen","useState","menuId","useId","triggerRef","useRef","menuRef","containerRef","enabledItems","_a","focusAt","index","list","close","restoreFocus","useEffect","_b","onClickOutside","e","onMenuKeyDown","char","match","el","i","fallback","target","jsxs","jsx","cn","buttonReset","focusRing","v"],"mappings":"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"}

package/dist/components/EmptyState/EmptyState.d.ts

@@ -4,5 +4,11 @@ export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     description?: React.ReactNode;
     icon?: React.ReactNode;
     title: React.ReactNode;
+    /** Nível do título. Padrão: h3. */
+    titleAs?: 'h2' | 'h3' | 'h4';
 }
-export declare const EmptyState: React.FC<EmptyStateProps>;
+/** Estado vazio: ausência de dados com orientação do próximo passo. */
+export declare const EmptyState: {
+    ({ icon, title, titleAs: TitleTag, description, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/EmptyState/EmptyState.js

@@ -1,29 +1,38 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { cn as c } from "../../utils/cn.js";
-const i = ({
-  icon: r,
-  title: d,
-  description: t,
-  action: a,
-  className: s,
-  ...m
-}) => /* @__PURE__ */ o(
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const b = ({
+  icon: t,
+  title: i,
+  titleAs: m = "h3",
+  description: s,
+  action: r,
+  className: d,
+  ...a
+}) => /* @__PURE__ */ l(
   "div",
   {
-    className: c(
-      "grid justify-items-center gap-3 rounded-[var(--border-radius-lg)] border border-dashed border-[var(--border-color)] bg-[var(--bg-secondary)] p-6 text-center",
-      s
+    className: n(
+      "grid justify-items-center gap-3 rounded-sbk-md border border-dashed border-sbk-line-strong bg-sbk-surface p-8 text-center",
+      d
     ),
-    ...m,
+    ...a,
     children: [
-      r && /* @__PURE__ */ e("div", { className: "text-[var(--text-muted)]", children: r }),
-      /* @__PURE__ */ e("h3", { className: "m-0 text-lg font-semibold text-[var(--text-primary)]", children: d }),
-      t && /* @__PURE__ */ e("p", { className: "m-0 max-w-[30rem] text-sm text-[var(--text-secondary)]", children: t }),
-      a && /* @__PURE__ */ e("div", { className: "mt-1", children: a })
+      t && /* @__PURE__ */ e(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "inline-flex size-12 items-center justify-center rounded-full bg-sbk-primary-subtle text-sbk-primary [&_svg]:size-6",
+          children: t
+        }
+      ),
+      /* @__PURE__ */ e(m, { className: "m-0 text-lg font-semibold text-sbk-fg-heading", children: i }),
+      s && /* @__PURE__ */ e("p", { className: "m-0 max-w-[30rem] text-sm font-light text-sbk-fg-muted", children: s }),
+      r && /* @__PURE__ */ e("div", { className: "mt-1", children: r })
     ]
   }
 );
+b.displayName = "EmptyState";
 export {
-  i as EmptyState
+  b as EmptyState
 };
 //# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  action?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n}\n\nexport const EmptyState: React.FC<EmptyStateProps> = ({\n  icon,\n  title,\n  description,\n  action,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={cn(\n        'grid justify-items-center gap-3 rounded-[var(--border-radius-lg)] border border-dashed border-[var(--border-color)] bg-[var(--bg-secondary)] p-6 text-center',\n        className,\n      )}\n      {...props}\n    >\n      {icon && <div className=\"text-[var(--text-muted)]\">{icon}</div>}\n      <h3 className=\"m-0 text-lg font-semibold text-[var(--text-primary)]\">{title}</h3>\n      {description && (\n        <p className=\"m-0 max-w-[30rem] text-sm text-[var(--text-secondary)]\">{description}</p>\n      )}\n      {action && <div className=\"mt-1\">{action}</div>}\n    </div>\n  );\n};\n"],"names":["EmptyState","icon","title","description","action","className","props","jsxs","cn","jsx"],"mappings":";;AAUO,MAAMA,IAAwC,CAAC;AAAA,EACpD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAA;AAAA,MAAAL,KAAQ,gBAAAQ,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAR,GAAK;AAAA,MACzD,gBAAAQ,EAAC,MAAA,EAAG,WAAU,wDAAwD,UAAAP,GAAM;AAAA,MAC3EC,KACC,gBAAAM,EAAC,KAAA,EAAE,WAAU,0DAA0D,UAAAN,GAAY;AAAA,MAEpFC,KAAU,gBAAAK,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAL,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  action?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  /** Nível do título. Padrão: h3. */\n  titleAs?: 'h2' | 'h3' | 'h4';\n}\n\n/** Estado vazio: ausência de dados com orientação do próximo passo. */\nexport const EmptyState = ({\n  icon,\n  title,\n  titleAs: TitleTag = 'h3',\n  description,\n  action,\n  className,\n  ...props\n}: EmptyStateProps) => (\n  <div\n    className={cn(\n      'grid justify-items-center gap-3 rounded-sbk-md border border-dashed border-sbk-line-strong bg-sbk-surface p-8 text-center',\n      className,\n    )}\n    {...props}\n  >\n    {icon && (\n      <div\n        aria-hidden=\"true\"\n        className=\"inline-flex size-12 items-center justify-center rounded-full bg-sbk-primary-subtle text-sbk-primary [&_svg]:size-6\"\n      >\n        {icon}\n      </div>\n    )}\n    <TitleTag className=\"m-0 text-lg font-semibold text-sbk-fg-heading\">{title}</TitleTag>\n    {description && (\n      <p className=\"m-0 max-w-[30rem] text-sm font-light text-sbk-fg-muted\">{description}</p>\n    )}\n    {action && <div className=\"mt-1\">{action}</div>}\n  </div>\n);\n\nEmptyState.displayName = 'EmptyState';\n"],"names":["EmptyState","icon","title","TitleTag","description","action","className","props","jsxs","cn","jsx"],"mappings":";;AAaO,MAAMA,IAAa,CAAC;AAAA,EACzB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAASC,IAAW;AAAA,EACpB,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAA;AAAA,MAAAN,KACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UAET,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAS,EAACP,GAAA,EAAS,WAAU,iDAAiD,UAAAD,GAAM;AAAA,MAC1EE,KACC,gBAAAM,EAAC,KAAA,EAAE,WAAU,0DAA0D,UAAAN,GAAY;AAAA,MAEpFC,KAAU,gBAAAK,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAL,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAC3C;AAGFL,EAAW,cAAc;"}

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+export interface FieldProps {
+    children: React.ReactNode;
+    className?: string;
+    error?: string;
+    helperText?: string;
+    /** id do controle. Os textos de apoio recebem `${id}-helper` e `${id}-error`. */
+    id: string;
+    label?: React.ReactNode;
+    /** Use `span` quando o controle não for rotulável por <label> (ex.: grupo, upload). */
+    labelAs?: 'label' | 'span';
+    required?: boolean;
+}
+/**
+ * Estrutura comum de campo: rótulo, controle, texto de apoio e erro.
+ * Use para compor controles próprios mantendo o padrão visual e de acessibilidade.
+ */
+export declare const Field: {
+    ({ id, label, labelAs, helperText, error, required, className, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Field/Field.js

@@ -0,0 +1,35 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
+import { fieldLabel as p, fieldError as f, fieldHelper as h } from "../../utils/styles.js";
+const N = ({
+  id: e,
+  label: l,
+  labelAs: a = "label",
+  helperText: s,
+  error: i,
+  required: m,
+  className: c,
+  children: n
+}) => {
+  const o = a;
+  return /* @__PURE__ */ d("div", { className: t("grid gap-1.5", c), children: [
+    l && /* @__PURE__ */ d(
+      o,
+      {
+        className: p,
+        ...a === "label" ? { htmlFor: e } : { id: `${e}-label` },
+        children: [
+          l,
+          m && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "ml-0.5 text-sbk-error-fg", children: "*" })
+        ]
+      }
+    ),
+    n,
+    i ? /* @__PURE__ */ r("span", { className: f, id: `${e}-error`, role: "alert", children: i }) : s && /* @__PURE__ */ r("span", { className: h, id: `${e}-helper`, children: s })
+  ] });
+};
+N.displayName = "Field";
+export {
+  N as Field
+};
+//# sourceMappingURL=Field.js.map

package/dist/components/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { fieldError, fieldHelper, fieldLabel } from '../../utils/styles';\n\nexport interface FieldProps {\n  children: React.ReactNode;\n  className?: string;\n  error?: string;\n  helperText?: string;\n  /** id do controle. Os textos de apoio recebem `${id}-helper` e `${id}-error`. */\n  id: string;\n  label?: React.ReactNode;\n  /** Use `span` quando o controle não for rotulável por <label> (ex.: grupo, upload). */\n  labelAs?: 'label' | 'span';\n  required?: boolean;\n}\n\n/**\n * Estrutura comum de campo: rótulo, controle, texto de apoio e erro.\n * Use para compor controles próprios mantendo o padrão visual e de acessibilidade.\n */\nexport const Field = ({\n  id,\n  label,\n  labelAs = 'label',\n  helperText,\n  error,\n  required,\n  className,\n  children,\n}: FieldProps) => {\n  const LabelTag = labelAs;\n  return (\n    <div className={cn('grid gap-1.5', className)}>\n      {label && (\n        <LabelTag\n          className={fieldLabel}\n          {...(labelAs === 'label' ? { htmlFor: id } : { id: `${id}-label` })}\n        >\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"ml-0.5 text-sbk-error-fg\">\n              *\n            </span>\n          )}\n        </LabelTag>\n      )}\n      {children}\n      {error ? (\n        <span className={fieldError} id={`${id}-error`} role=\"alert\">\n          {error}\n        </span>\n      ) : (\n        helperText && (\n          <span className={fieldHelper} id={`${id}-helper`}>\n            {helperText}\n          </span>\n        )\n      )}\n    </div>\n  );\n};\n\nField.displayName = 'Field';\n"],"names":["Field","id","label","labelAs","helperText","error","required","className","children","LabelTag","cn","jsxs","fieldLabel","jsx","fieldError","fieldHelper"],"mappings":";;;AAqBO,MAAMA,IAAQ,CAAC;AAAA,EACpB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,MAAkB;AAChB,QAAMC,IAAWN;AACjB,2BACG,OAAA,EAAI,WAAWO,EAAG,gBAAgBH,CAAS,GACzC,UAAA;AAAA,IAAAL,KACC,gBAAAS;AAAA,MAACF;AAAA,MAAA;AAAA,QACC,WAAWG;AAAA,QACV,GAAIT,MAAY,UAAU,EAAE,SAASF,EAAA,IAAO,EAAE,IAAI,GAAGA,CAAE,SAAA;AAAA,QAEvD,UAAA;AAAA,UAAAC;AAAA,UACAI,KACC,gBAAAO,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,4BAA2B,UAAA,IAAA,CAE9D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAILL;AAAA,IACAH,sBACE,QAAA,EAAK,WAAWS,GAAY,IAAI,GAAGb,CAAE,UAAU,MAAK,SAClD,aACH,IAEAG,uBACG,QAAA,EAAK,WAAWW,GAAa,IAAI,GAAGd,CAAE,WACpC,UAAAG,EAAA,CACH;AAAA,EAAA,GAGN;AAEJ;AAEAJ,EAAM,cAAc;"}

package/dist/components/FileUpload/FileUpload.d.ts

@@ -5,9 +5,16 @@ export interface FileUploadProps {
     disabled?: boolean;
     error?: string;
     helperText?: string;
-    label?: string;
+    id?: string;
+    label?: React.ReactNode;
     maxSizeBytes?: number;
     multiple?: boolean;
     onChange?: (files: File[]) => void;
+    /** Lista os arquivos selecionados com opção de remover. Padrão: true. */
+    showFileList?: boolean;
 }
-export declare const FileUpload: React.FC<FileUploadProps>;
+/** Área de upload com arrastar e soltar, acessível por teclado. */
+export declare const FileUpload: {
+    ({ label, helperText, error, accept, multiple, maxSizeBytes, disabled, showFileList, onChange, id, className, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/FileUpload/FileUpload.js

@@ -1,116 +1,142 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { useRef as q, useState as h } from "react";
-import { cn as g } from "../../utils/cn.js";
-const E = ({
-  label: v,
-  helperText: f,
-  error: y,
-  accept: i,
-  multiple: D = !1,
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useId as U, useRef as w, useState as g } from "react";
+import { UploadCloud as K, FileText as T, X as C } from "lucide-react";
+import { cn as D } from "../../utils/cn.js";
+import { focusRing as F, transitionColors as O, buttonReset as W } from "../../utils/styles.js";
+import { Field as X } from "../Field/Field.js";
+const h = (o) => o >= 1024 * 1024 ? `${(o / 1024 / 1024).toFixed(1)} MB` : `${Math.max(1, Math.round(o / 1024))} KB`, _ = ({
+  label: o,
+  helperText: k,
+  error: z,
+  accept: c,
+  multiple: x = !1,
   maxSizeBytes: n,
-  disabled: e = !1,
-  onChange: l,
-  className: N
+  disabled: s = !1,
+  showFileList: I = !0,
+  onChange: m,
+  id: j,
+  className: q
 }) => {
-  const c = q(null), [b, d] = h(!1), [k, u] = h(null), p = (r) => {
-    if (!r) return;
-    const o = Array.from(r);
+  const A = U(), i = j ?? A, d = w(null), [R, u] = g(!1), [E, v] = g(null), [a, M] = g([]), y = (e) => {
+    M(e), m == null || m(e);
+  }, N = (e) => {
+    if (!e || e.length === 0) return;
+    const t = Array.from(e);
     if (n) {
-      const x = o.find((m) => m.size > n);
-      if (x) {
-        const m = (n / 1024 / 1024).toFixed(0);
-        u(`Arquivo "${x.name}" excede o tamanho máximo de ${m} MB.`);
+      const b = t.find((p) => p.size > n);
+      if (b) {
+        v(
+          `Arquivo "${b.name}" excede o tamanho máximo de ${h(n)}.`
+        );
         return;
       }
     }
-    u(null), l == null || l(o);
-  }, w = (r) => {
-    r.preventDefault(), e || d(!0);
-  }, F = () => d(!1), A = (r) => {
-    r.preventDefault(), d(!1), e || p(r.dataTransfer.files);
-  }, j = (r) => {
-    var o;
-    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), (o = c.current) == null || o.click());
-  }, s = y ?? k;
-  return /* @__PURE__ */ a("div", { className: g("flex flex-col gap-[var(--spacing-xs)]", N), children: [
-    v && /* @__PURE__ */ t("span", { className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]", children: v }),
-    /* @__PURE__ */ a(
-      "div",
-      {
-        "aria-disabled": e,
-        className: g(
-          "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-[var(--border-radius-lg)] border-2 border-dashed p-8 text-center transition",
-          b ? "border-[var(--md-primary)] bg-[var(--md-primary-container)]" : "border-[var(--md-outline-variant)] hover:border-[var(--md-primary)] hover:bg-[var(--bg-tertiary)]",
-          s && "border-[var(--md-error)]",
-          e && "pointer-events-none cursor-not-allowed opacity-60"
+    v(null), y(x ? [...a, ...t] : t.slice(0, 1));
+  }, f = z ?? E ?? void 0, $ = [
+    c && `Formatos aceitos: ${c}`,
+    n && `Tamanho máximo: ${h(n)}`
+  ].filter(Boolean).join(" · ");
+  return /* @__PURE__ */ l(
+    X,
+    {
+      className: q,
+      error: f,
+      helperText: k,
+      id: i,
+      label: o,
+      labelAs: "span",
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            "aria-describedby": f ? `${i}-error` : k ? `${i}-helper` : void 0,
+            "aria-disabled": s || void 0,
+            "aria-labelledby": o ? `${i}-label` : void 0,
+            className: D(
+              "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-sbk-md border-2 border-dashed p-8 text-center",
+              O,
+              F,
+              R ? "border-sbk-primary bg-sbk-primary-subtle" : "border-sbk-line-strong bg-sbk-surface hover:border-sbk-primary hover:bg-sbk-surface-hover",
+              f && "border-sbk-error",
+              s && "pointer-events-none opacity-60"
+            ),
+            onClick: () => {
+              var e;
+              return !s && ((e = d.current) == null ? void 0 : e.click());
+            },
+            onDragLeave: () => u(!1),
+            onDragOver: (e) => {
+              e.preventDefault(), s || u(!0);
+            },
+            onDrop: (e) => {
+              e.preventDefault(), u(!1), s || N(e.dataTransfer.files);
+            },
+            onKeyDown: (e) => {
+              var t;
+              (e.key === "Enter" || e.key === " ") && (e.preventDefault(), (t = d.current) == null || t.click());
+            },
+            role: "button",
+            tabIndex: s ? -1 : 0,
+            children: [
+              /* @__PURE__ */ r(K, { "aria-hidden": "true", className: "size-8 text-sbk-primary", strokeWidth: 1.5 }),
+              /* @__PURE__ */ l("p", { className: "m-0 text-sm font-light text-sbk-fg", children: [
+                "Arraste arquivos aqui ou",
+                " ",
+                /* @__PURE__ */ r("span", { className: "font-semibold text-sbk-primary underline", children: "clique para selecionar" })
+              ] }),
+              $ && /* @__PURE__ */ r("p", { className: "m-0 text-xs font-light text-sbk-fg-muted", children: $ })
+            ]
+          }
         ),
-        onClick: () => {
-          var r;
-          return !e && ((r = c.current) == null ? void 0 : r.click());
-        },
-        onDragLeave: F,
-        onDragOver: w,
-        onDrop: A,
-        onKeyDown: j,
-        role: "button",
-        tabIndex: e ? -1 : 0,
-        children: [
-          /* @__PURE__ */ t(
-            "svg",
-            {
-              className: "h-8 w-8 text-[var(--md-primary)]",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "1.5",
-              viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ t(
-                "path",
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: d,
+            accept: c,
+            className: "sr-only",
+            disabled: s,
+            id: i,
+            multiple: x,
+            onChange: (e) => {
+              N(e.target.files), e.target.value = "";
+            },
+            tabIndex: -1,
+            type: "file"
+          }
+        ),
+        I && a.length > 0 && /* @__PURE__ */ r("ul", { "aria-label": "Arquivos selecionados", className: "m-0 grid list-none gap-1.5 p-0", children: a.map((e, t) => /* @__PURE__ */ l(
+          "li",
+          {
+            className: "flex items-center gap-2 rounded-sbk-sm border border-sbk-line bg-sbk-surface px-3 py-2 text-sm",
+            children: [
+              /* @__PURE__ */ r(T, { "aria-hidden": "true", className: "size-4 shrink-0 text-sbk-fg-muted" }),
+              /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate font-light text-sbk-fg", children: e.name }),
+              /* @__PURE__ */ r("span", { className: "shrink-0 text-xs font-light text-sbk-fg-muted", children: h(e.size) }),
+              /* @__PURE__ */ r(
+                "button",
                 {
-                  d: "M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
+                  "aria-label": `Remover ${e.name}`,
+                  className: D(
+                    W,
+                    "inline-flex size-6 cursor-pointer items-center justify-center rounded-sbk-xs text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+                    F
+                  ),
+                  disabled: s,
+                  onClick: () => y(a.filter((b, p) => p !== t)),
+                  type: "button",
+                  children: /* @__PURE__ */ r(C, { "aria-hidden": "true", className: "size-4" })
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ a("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: [
-              "Arraste arquivos aqui ou",
-              " ",
-              /* @__PURE__ */ t("span", { className: "text-[var(--md-primary)] underline", children: "clique para selecionar" })
-            ] }),
-            i && /* @__PURE__ */ a("p", { className: "mt-0.5 text-xs text-[var(--text-muted)]", children: [
-              "Formatos aceitos: ",
-              i
-            ] }),
-            n && /* @__PURE__ */ a("p", { className: "text-xs text-[var(--text-muted)]", children: [
-              "Tamanho máximo: ",
-              (n / 1024 / 1024).toFixed(0),
-              " MB"
-            ] })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t(
-      "input",
-      {
-        ref: c,
-        accept: i,
-        className: "sr-only",
-        disabled: e,
-        multiple: D,
-        tabIndex: -1,
-        type: "file",
-        onChange: (r) => p(r.target.files)
-      }
-    ),
-    s && /* @__PURE__ */ t("span", { className: "text-[var(--font-size-xs)] text-[var(--md-error)]", role: "alert", children: s }),
-    f && !s && /* @__PURE__ */ t("span", { className: "text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]", children: f })
-  ] });
+            ]
+          },
+          `${e.name}-${t}`
+        )) })
+      ]
+    }
+  );
 };
-E.displayName = "FileUpload";
+_.displayName = "FileUpload";
 export {
-  E as FileUpload
+  _ as FileUpload
 };
 //# sourceMappingURL=FileUpload.js.map