sander-ui 0.1.5 → 0.1.7

package/dist/index17.js

@@ -1,64 +1,78 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import u from "./index30.js";
-import n from "./index56.js";
-import h from "./index57.js";
-import d from "./index48.js";
-function b(i, r, a) {
-  const s = [], c = Math.max(2, i - a), t = Math.min(r - 1, i + a);
-  s.push(1), c > 2 && s.push("ellipsis");
-  for (let o = c; o <= t; o++)
-    s.push(o);
-  return t < r - 1 && s.push("ellipsis"), r > 1 && s.push(r), s;
-}
-const j = ({
-  page: i,
-  totalPages: r,
-  onChange: a,
-  siblings: s = 1,
-  className: c,
-  ...t
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import c from "./index31.js";
+import { useRef as h, useState as u, useEffect as p } from "react";
+import { createPortal as v } from "react-dom";
+import { useScrollLock as M } from "./index49.js";
+import t from "./index50.js";
+import y from "./index43.js";
+const R = ({
+  open: s,
+  onClose: o,
+  children: r,
+  size: f = "sm",
+  className: g,
+  ...N
 }) => {
-  if (r <= 1) return null;
-  const o = b(i, r, s);
-  return /* @__PURE__ */ f("nav", { "aria-label": "Pagination", className: u(n.pagination, c), ...t, children: [
-    /* @__PURE__ */ e(
-      "button",
+  const i = h(null), [n, m] = u(!1), [a, d] = u(!1);
+  return M(n && !a), p(() => {
+    s ? (m(!0), d(!1)) : m((e) => (e && d(!0), e));
+  }, [s]), p(() => {
+    const e = i.current;
+    n && !a && e && !e.open && (e.showModal(), e.focus());
+  }, [n, a]), n ? v(
+    /* @__PURE__ */ l(
+      "dialog",
       {
-        "aria-label": "Previous page",
-        disabled: i <= 1,
-        onClick: () => a(i - 1),
-        className: n.arrow,
-        children: /* @__PURE__ */ e(h, { className: n.icon })
-      }
-    ),
-    o.map((l, m) => {
-      if (l === "ellipsis")
-        return /* @__PURE__ */ e("span", { className: n.ellipsis, children: "..." }, `ellipsis-${m}`);
-      const p = l === i;
-      return /* @__PURE__ */ e(
-        "button",
-        {
-          "aria-label": `Page ${l}`,
-          "aria-current": p ? "page" : void 0,
-          onClick: () => a(l),
-          className: u(n.page, p && n.active),
-          children: l
+        ref: i,
+        className: c(
+          t.dialog,
+          t[`size-${f}`],
+          a && t.closing,
+          g
+        ),
+        onAnimationEnd: () => {
+          a && (i.current?.close(), m(!1), d(!1));
         },
-        l
-      );
-    }),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        "aria-label": "Next page",
-        disabled: i >= r,
-        onClick: () => a(i + 1),
-        className: n.arrow,
-        children: /* @__PURE__ */ e(d, { className: n.icon })
+        onCancel: (e) => {
+          e.preventDefault(), o();
+        },
+        onClick: (e) => {
+          e.target === i.current && o();
+        },
+        ...N,
+        children: /* @__PURE__ */ l("div", { className: t.content, children: r })
       }
-    )
-  ] });
-};
+    ),
+    document.body
+  ) : null;
+}, S = ({
+  children: s,
+  onClose: o,
+  className: r,
+  ...f
+}) => /* @__PURE__ */ b("div", { className: c(t.header, r), ...f, children: [
+  /* @__PURE__ */ l("h2", { className: t.title, children: s }),
+  o && /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: o,
+      "aria-label": "Close",
+      className: t.closeButton,
+      children: /* @__PURE__ */ l(y, { size: 20 })
+    }
+  )
+] }), w = ({
+  children: s,
+  className: o,
+  ...r
+}) => /* @__PURE__ */ l("div", { className: c(t.body, o), ...r, children: s }), A = ({
+  children: s,
+  className: o,
+  ...r
+}) => /* @__PURE__ */ l("div", { className: c(t.footer, o), ...r, children: s });
 export {
-  j as Pagination
+  R as Modal,
+  w as ModalBody,
+  A as ModalFooter,
+  S as ModalHeader
 };

package/dist/index18.js

@@ -1,43 +1,64 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import o from "./index30.js";
-import r from "./index37.js";
-const N = ({
-  value: e,
-  max: d = 100,
-  label: s,
-  size: c = "md",
-  className: l,
-  ...m
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import u from "./index31.js";
+import n from "./index59.js";
+import h from "./index60.js";
+import d from "./index36.js";
+function b(i, r, a) {
+  const s = [], c = Math.max(2, i - a), t = Math.min(r - 1, i + a);
+  s.push(1), c > 2 && s.push("ellipsis");
+  for (let o = c; o <= t; o++)
+    s.push(o);
+  return t < r - 1 && s.push("ellipsis"), r > 1 && s.push(r), s;
+}
+const j = ({
+  page: i,
+  totalPages: r,
+  onChange: a,
+  siblings: s = 1,
+  className: c,
+  ...t
 }) => {
-  const a = e === void 0, t = a ? 0 : Math.round(e / d * 100);
-  return /* @__PURE__ */ i("div", { className: o(r.wrapper, l), ...m, children: [
-    s && /* @__PURE__ */ i("div", { className: r.header, children: [
-      /* @__PURE__ */ n("span", { className: r.label, children: s }),
-      !a && /* @__PURE__ */ i("span", { className: r.value, children: [
-        t,
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ n(
-      "div",
+  if (r <= 1) return null;
+  const o = b(i, r, s);
+  return /* @__PURE__ */ f("nav", { "aria-label": "Pagination", className: u(n.pagination, c), ...t, children: [
+    /* @__PURE__ */ e(
+      "button",
       {
-        role: "progressbar",
-        "aria-valuenow": a ? void 0 : e,
-        "aria-valuemin": 0,
-        "aria-valuemax": d,
-        "aria-label": s || "Progress",
-        className: o(r.track, r[c]),
-        children: /* @__PURE__ */ n(
-          "div",
-          {
-            className: o(r.bar, a && r.indeterminate),
-            style: a ? void 0 : { width: `${t}%` }
-          }
-        )
+        "aria-label": "Previous page",
+        disabled: i <= 1,
+        onClick: () => a(i - 1),
+        className: n.arrow,
+        children: /* @__PURE__ */ e(h, { className: n.icon })
+      }
+    ),
+    o.map((l, m) => {
+      if (l === "ellipsis")
+        return /* @__PURE__ */ e("span", { className: n.ellipsis, children: "..." }, `ellipsis-${m}`);
+      const p = l === i;
+      return /* @__PURE__ */ e(
+        "button",
+        {
+          "aria-label": `Page ${l}`,
+          "aria-current": p ? "page" : void 0,
+          onClick: () => a(l),
+          className: u(n.page, p && n.active),
+          children: l
+        },
+        l
+      );
+    }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        "aria-label": "Next page",
+        disabled: i >= r,
+        onClick: () => a(i + 1),
+        className: n.arrow,
+        children: /* @__PURE__ */ e(d, { className: n.icon })
       }
     )
   ] });
 };
 export {
-  N as Progress
+  j as Pagination
 };

package/dist/index19.js

@@ -1,34 +1,43 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import c from "./index30.js";
-import { forwardRef as h } from "react";
-import a from "./index54.js";
-const v = h(
-  ({ label: i, error: s, options: m, value: n, onChange: o, name: r, className: p, ...t }, u) => /* @__PURE__ */ d("fieldset", { className: c(a.fieldset, p), children: [
-    i && /* @__PURE__ */ l("legend", { className: a.legend, children: i }),
-    /* @__PURE__ */ l("div", { className: a.options, children: m.map((e) => /* @__PURE__ */ d("label", { className: a.option, children: [
-      /* @__PURE__ */ l(
-        "input",
-        {
-          ref: u,
-          type: "radio",
-          name: r,
-          value: e.value,
-          checked: n === e.value,
-          onChange: () => o?.(e.value),
-          "aria-describedby": e.description ? `${r}-${e.value}-description` : void 0,
-          className: c(a.radio, s && a.radioError),
-          ...t
-        }
-      ),
-      /* @__PURE__ */ d("div", { className: a.labels, children: [
-        /* @__PURE__ */ l("span", { className: a.label, children: e.label }),
-        e.description && /* @__PURE__ */ l("span", { id: `${r}-${e.value}-description`, className: a.description, children: e.description })
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import o from "./index31.js";
+import r from "./index48.js";
+const N = ({
+  value: e,
+  max: d = 100,
+  label: s,
+  size: c = "md",
+  className: l,
+  ...m
+}) => {
+  const a = e === void 0, t = a ? 0 : Math.round(e / d * 100);
+  return /* @__PURE__ */ i("div", { className: o(r.wrapper, l), ...m, children: [
+    s && /* @__PURE__ */ i("div", { className: r.header, children: [
+      /* @__PURE__ */ n("span", { className: r.label, children: s }),
+      !a && /* @__PURE__ */ i("span", { className: r.value, children: [
+        t,
+        "%"
       ] })
-    ] }, e.value)) }),
-    s && /* @__PURE__ */ l("p", { role: "alert", className: a.error, children: s })
-  ] })
-);
-v.displayName = "RadioGroup";
+    ] }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": a ? void 0 : e,
+        "aria-valuemin": 0,
+        "aria-valuemax": d,
+        "aria-label": s || "Progress",
+        className: o(r.track, r[c]),
+        children: /* @__PURE__ */ n(
+          "div",
+          {
+            className: o(r.bar, a && r.indeterminate),
+            style: a ? void 0 : { width: `${t}%` }
+          }
+        )
+      }
+    )
+  ] });
+};
 export {
-  v as RadioGroup
+  N as Progress
 };

package/dist/index20.js

@@ -1,29 +1,34 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import p from "./index30.js";
-import { forwardRef as v } from "react";
-import l from "./index45.js";
-const u = v(
-  ({ label: i, error: e, id: r, options: m, placeholder: c, className: o, ...d }, n) => /* @__PURE__ */ t("div", { className: l.wrapper, children: [
-    i && /* @__PURE__ */ a("label", { htmlFor: r, className: l.label, children: i }),
-    /* @__PURE__ */ t(
-      "select",
-      {
-        id: r,
-        ref: n,
-        "aria-invalid": e ? !0 : void 0,
-        "aria-describedby": e ? `${r}-error` : void 0,
-        className: p(l.select, e && l.selectError, o),
-        ...d,
-        children: [
-          c && /* @__PURE__ */ a("option", { value: "", disabled: !0, children: c }),
-          m.map((s) => /* @__PURE__ */ a("option", { value: s.value, children: s.label }, s.value))
-        ]
-      }
-    ),
-    e && /* @__PURE__ */ a("p", { id: `${r}-error`, role: "alert", className: l.error, children: e })
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import c from "./index31.js";
+import { forwardRef as h } from "react";
+import a from "./index54.js";
+const v = h(
+  ({ label: i, error: s, options: m, value: n, onChange: o, name: r, className: p, ...t }, u) => /* @__PURE__ */ d("fieldset", { className: c(a.fieldset, p), children: [
+    i && /* @__PURE__ */ l("legend", { className: a.legend, children: i }),
+    /* @__PURE__ */ l("div", { className: a.options, children: m.map((e) => /* @__PURE__ */ d("label", { className: a.option, children: [
+      /* @__PURE__ */ l(
+        "input",
+        {
+          ref: u,
+          type: "radio",
+          name: r,
+          value: e.value,
+          checked: n === e.value,
+          onChange: () => o?.(e.value),
+          "aria-describedby": e.description ? `${r}-${e.value}-description` : void 0,
+          className: c(a.radio, s && a.radioError),
+          ...t
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: a.labels, children: [
+        /* @__PURE__ */ l("span", { className: a.label, children: e.label }),
+        e.description && /* @__PURE__ */ l("span", { id: `${r}-${e.value}-description`, className: a.description, children: e.description })
+      ] })
+    ] }, e.value)) }),
+    s && /* @__PURE__ */ l("p", { role: "alert", className: a.error, children: s })
   ] })
 );
-u.displayName = "Select";
+v.displayName = "RadioGroup";
 export {
-  u as Select
+  v as RadioGroup
 };

package/dist/index21.js

@@ -1,21 +1,262 @@
-import { jsx as i } from "react/jsx-runtime";
-import n from "./index30.js";
-import t from "./index52.js";
-const c = ({
-  width: e,
-  height: r,
-  variant: o = "text",
-  className: s,
-  ...m
-}) => /* @__PURE__ */ i(
-  "div",
-  {
-    "aria-hidden": "true",
-    className: n(t.skeleton, t[o], s),
-    style: { width: e, height: r },
-    ...m
-  }
-);
+import { jsx as l, jsxs as g } from "react/jsx-runtime";
+import y from "./index31.js";
+import { createPortal as de } from "react-dom";
+import { useId as ue, useState as h, useRef as k, useCallback as C, useLayoutEffect as pe, useEffect as W } from "react";
+import r from "./index56.js";
+import fe from "./index57.js";
+import be from "./index58.js";
+function X(v) {
+  return "options" in v;
+}
+function he(v) {
+  const b = [];
+  for (const c of v)
+    X(c) ? b.push(...c.options) : b.push(c);
+  return b;
+}
+const ve = ({
+  id: v,
+  name: b,
+  label: c,
+  error: m,
+  options: z,
+  placeholder: q,
+  value: K,
+  defaultValue: J,
+  onChange: P,
+  disabled: D = !1,
+  required: V = !1,
+  className: Q
+}) => {
+  const Z = ue(), d = v ?? Z, F = `${d}-listbox`, j = `${d}-error`, $ = `${d}-label`, u = he(z), o = u.map((e, t) => ({ ...e, index: t })).filter((e) => !e.disabled), A = K !== void 0, [_, ee] = h(J ?? ""), p = A ? K : _, [s, I] = h(!1), [a, i] = h(-1), [te, B] = h(""), O = k(null), [ne, re] = h(!1), [T, oe] = h({ top: 0, left: 0, width: 0 }), E = k(null), w = k(null), R = k(null), M = k([]), S = u.find((e) => e.value === p), U = C(
+    (e) => {
+      A || ee(e), P?.(e);
+    },
+    [A, P]
+  ), H = C(
+    (e) => {
+      if (D) return;
+      const t = e ?? (p ? u.findIndex((n) => n.value === p) : o[0]?.index ?? 0);
+      i(t), I(!0);
+    },
+    [D, p, u, o]
+  ), L = C(() => {
+    I(!1), i(-1), E.current?.focus();
+  }, []);
+  pe(() => {
+    if (!s || !E.current) return;
+    const e = () => {
+      const t = E.current.getBoundingClientRect(), n = window.innerHeight - t.bottom, f = t.top, x = w.current?.offsetHeight ?? 240, G = n < x && f > n;
+      re(G), oe({
+        top: G ? t.top + window.scrollY - (w.current?.offsetHeight ?? 0) - 4 : t.bottom + window.scrollY + 4,
+        left: t.left + window.scrollX,
+        width: t.width
+      });
+    };
+    return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+    };
+  }, [s]), W(() => {
+    !s || a < 0 || M.current[a]?.scrollIntoView({ block: "nearest" });
+  }, [a, s]), W(() => {
+    if (!s) return;
+    function e(t) {
+      const n = t.target;
+      R.current && !R.current.contains(n) && w.current && !w.current.contains(n) && (I(!1), i(-1));
+    }
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [s]);
+  const N = C(
+    (e, t) => {
+      if (o.length === 0) return -1;
+      const n = o.findIndex((f) => f.index === t);
+      switch (e) {
+        case "next":
+          return n < 0 || n >= o.length - 1 ? o[0].index : o[n + 1].index;
+        case "prev":
+          return n <= 0 ? o[o.length - 1].index : o[n - 1].index;
+        case "first":
+          return o[0].index;
+        case "last":
+          return o[o.length - 1].index;
+      }
+    },
+    [o]
+  ), se = (e) => {
+    O.current && clearTimeout(O.current);
+    const t = te + e.toLowerCase();
+    B(t), O.current = setTimeout(() => B(""), 500);
+    const n = o.find(
+      (f) => f.label.toLowerCase().startsWith(t)
+    );
+    n && i(n.index);
+  }, ae = (e) => {
+    if (!s) {
+      switch (e.key) {
+        case "ArrowDown":
+        case "Enter":
+        case " ":
+          e.preventDefault(), H();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), H(o[o.length - 1]?.index);
+          break;
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), i((t) => N("next", t));
+        break;
+      case "ArrowUp":
+        e.preventDefault(), i((t) => N("prev", t));
+        break;
+      case "Home":
+        e.preventDefault(), i(N("first", a));
+        break;
+      case "End":
+        e.preventDefault(), i(N("last", a));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), a >= 0 && !u[a]?.disabled && (U(u[a].value), L());
+        break;
+      case "Escape":
+        e.preventDefault(), L();
+        break;
+      case "Tab":
+        I(!1), i(-1);
+        break;
+      default:
+        e.key.length === 1 && !e.ctrlKey && !e.metaKey && (e.preventDefault(), se(e.key));
+    }
+  }, le = s && a >= 0 ? `${d}-option-${a}` : void 0;
+  let ie = 0;
+  const Y = (e) => {
+    const t = ie++, n = e.value === p, f = t === a;
+    return /* @__PURE__ */ g(
+      "li",
+      {
+        ref: (x) => {
+          M.current[t] = x;
+        },
+        id: `${d}-option-${t}`,
+        role: "option",
+        "aria-selected": n,
+        "aria-disabled": e.disabled || void 0,
+        className: y(
+          r.option,
+          f && r.optionActive,
+          n && r.optionSelected,
+          e.disabled && r.optionDisabled
+        ),
+        onMouseEnter: () => {
+          e.disabled || i(t);
+        },
+        onMouseDown: (x) => x.preventDefault(),
+        onClick: () => {
+          e.disabled || (U(e.value), L());
+        },
+        children: [
+          /* @__PURE__ */ l("span", { className: r.optionLabel, children: e.label }),
+          n && /* @__PURE__ */ l(be, { size: 16, className: r.checkIcon, "aria-hidden": !0 })
+        ]
+      },
+      e.value
+    );
+  }, ce = s ? de(
+    /* @__PURE__ */ l(
+      "ul",
+      {
+        ref: w,
+        id: F,
+        role: "listbox",
+        "aria-labelledby": c ? $ : d,
+        className: y(r.listbox, ne && r.flipped),
+        style: {
+          top: T.top,
+          left: T.left,
+          width: T.width
+        },
+        children: z.map((e) => {
+          if (X(e)) {
+            const t = `${d}-group-${e.label.replace(/\s+/g, "-").toLowerCase()}`;
+            return /* @__PURE__ */ g("li", { role: "presentation", children: [
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  id: t,
+                  role: "presentation",
+                  className: r.groupLabel,
+                  children: e.label
+                }
+              ),
+              /* @__PURE__ */ l("ul", { role: "group", "aria-labelledby": t, className: r.group, children: e.options.map(Y) })
+            ] }, e.label);
+          }
+          return Y(e);
+        })
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ g("div", { ref: R, className: r.wrapper, children: [
+    c && /* @__PURE__ */ l("label", { id: $, className: r.label, children: c }),
+    /* @__PURE__ */ g(
+      "button",
+      {
+        ref: E,
+        type: "button",
+        id: d,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": s,
+        "aria-controls": s ? F : void 0,
+        "aria-labelledby": c ? $ : void 0,
+        "aria-activedescendant": le,
+        "aria-invalid": m ? !0 : void 0,
+        "aria-describedby": m ? j : void 0,
+        "aria-required": V,
+        disabled: D,
+        className: y(r.trigger, m && r.triggerError, Q),
+        onClick: () => s ? L() : H(),
+        onKeyDown: ae,
+        children: [
+          /* @__PURE__ */ l("span", { className: y(r.triggerText, !S && r.placeholder), children: S ? S.label : q ?? " " }),
+          /* @__PURE__ */ l(
+            fe,
+            {
+              size: 16,
+              className: y(r.chevron, s && r.chevronOpen),
+              "aria-hidden": !0
+            }
+          )
+        ]
+      }
+    ),
+    b && /* @__PURE__ */ g(
+      "select",
+      {
+        name: b,
+        value: p,
+        required: V,
+        disabled: D,
+        tabIndex: -1,
+        "aria-hidden": !0,
+        className: r.hiddenSelect,
+        onChange: () => {
+        },
+        children: [
+          !p && /* @__PURE__ */ l("option", { value: "" }),
+          u.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+        ]
+      }
+    ),
+    ce,
+    m && /* @__PURE__ */ l("p", { id: j, role: "alert", className: r.error, children: m })
+  ] });
+};
+ve.displayName = "Select";
 export {
-  c as Skeleton
+  ve as Select
 };