sander-ui 0.1.6 → 0.1.7

package/dist/index13.js

@@ -1,172 +1,170 @@
-import { jsx as w } from "react/jsx-runtime";
-import b from "./index31.js";
-import { useState as h, useRef as v, useId as R, useEffect as k, cloneElement as E, createContext as I, useContext as y } from "react";
-import m from "./index49.js";
-const C = I(null);
-function x() {
+import { jsx as p } from "react/jsx-runtime";
+import g from "./index31.js";
+import { useState as x, useRef as v, useId as E, useEffect as k, cloneElement as I, createContext as R, useContext as y } from "react";
+import D from "./index67.js";
+const C = R(null);
+function b() {
   const t = y(C);
   if (!t)
     throw new Error("Dropdown components must be used within <Dropdown>");
   return t;
 }
-const L = ({ children: t }) => {
-  const [i, r] = h(!1), [c, a] = h(!1), u = v(null), f = v(null), g = v([]), e = v(0), l = v(null), n = R(), D = (s) => {
-    l.current = s, r(!0), a(!1);
-  }, o = (s = !0) => {
-    a(!0), s && u.current?.focus();
-  }, d = v(o);
-  return d.current = o, k(() => {
-    if (!i || c) return;
-    function s(p) {
-      f.current && !f.current.contains(p.target) && d.current(!1);
+const P = ({ children: t }) => {
+  const [o, e] = x(!1), [l, a] = x(!1), c = v(null), f = v(null), n = v([]), w = v(0), r = v(null), u = E(), i = (s) => {
+    r.current = s, e(!0), a(!1);
+  }, d = (s = !0) => {
+    a(!0), s && c.current?.focus();
+  }, m = v(d);
+  return m.current = d, k(() => {
+    if (!o || l) return;
+    function s(h) {
+      f.current && !f.current.contains(h.target) && m.current(!1);
     }
     return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
-  }, [i, c]), /* @__PURE__ */ w(
+  }, [o, l]), /* @__PURE__ */ p(
     C.Provider,
     {
       value: {
-        visible: i,
-        closing: c,
-        menuId: n,
-        triggerRef: u,
-        openMenu: D,
-        closeMenu: o,
-        setVisible: r,
+        visible: o,
+        closing: l,
+        menuId: u,
+        triggerRef: c,
+        openMenu: i,
+        closeMenu: d,
+        setVisible: e,
         setClosing: a,
-        itemRefs: g,
-        itemCount: e,
-        pendingFocusIndex: l
+        itemRefs: n,
+        itemCount: w,
+        pendingFocusIndex: r
       },
-      children: /* @__PURE__ */ w("div", { ref: f, className: m.wrapper, children: t })
+      children: /* @__PURE__ */ p("div", { ref: f, className: D.wrapper, children: t })
     }
   );
-}, P = ({
+}, B = ({
   asChild: t,
-  children: i
+  children: o
 }) => {
-  const { visible: r, menuId: c, triggerRef: a, openMenu: u, closeMenu: f } = x(), l = {
-    ref: (n) => {
-      a.current = n;
+  const { visible: e, menuId: l, triggerRef: a, openMenu: c, closeMenu: f } = b(), r = {
+    ref: (u) => {
+      a.current = u;
     },
     "aria-haspopup": "menu",
-    "aria-expanded": r,
-    "aria-controls": r ? c : void 0,
-    onClick: () => r ? f() : u(0),
-    onKeyDown: (n) => {
-      switch (n.key) {
+    "aria-expanded": e,
+    "aria-controls": e ? l : void 0,
+    onClick: () => e ? f() : c(0),
+    onKeyDown: (u) => {
+      switch (u.key) {
         case "ArrowDown":
         case "Enter":
         case " ":
-          n.preventDefault(), u(0);
+          u.preventDefault(), c(0);
           break;
         case "ArrowUp":
-          n.preventDefault(), u(-1);
+          u.preventDefault(), c(-1);
           break;
       }
     }
   };
-  return t ? E(i, l) : /* @__PURE__ */ w("button", { ...l, className: m.trigger, children: i });
-}, B = ({
-  align: t = "right",
-  children: i
+  return t ? I(o, r) : /* @__PURE__ */ p("button", { ...r, className: D.trigger, children: o });
+}, F = ({
+  children: t
 }) => {
   const {
-    visible: r,
-    closing: c,
-    menuId: a,
-    closeMenu: u,
-    setVisible: f,
-    setClosing: g,
-    itemRefs: e,
-    itemCount: l,
-    pendingFocusIndex: n
-  } = x();
-  l.current = 0, e.current = [], k(() => {
-    if (!r || c || n.current === null) return;
-    const o = n.current;
-    n.current = null;
-    const d = e.current.filter(Boolean), s = o < 0 ? d.length + o : o;
-    d[s]?.focus();
-  }, [r, c, e, n]);
-  const D = (o) => {
-    const d = e.current.findIndex(
-      (p) => p === document.activeElement
-    ), s = e.current.filter(Boolean).length;
-    switch (o.key) {
+    visible: o,
+    closing: e,
+    menuId: l,
+    closeMenu: a,
+    setVisible: c,
+    setClosing: f,
+    itemRefs: n,
+    itemCount: w,
+    pendingFocusIndex: r
+  } = b();
+  w.current = 0, n.current = [], k(() => {
+    if (!o || e || r.current === null) return;
+    const i = r.current;
+    r.current = null;
+    const d = n.current.filter(Boolean), m = i < 0 ? d.length + i : i;
+    d[m]?.focus();
+  }, [o, e, n, r]);
+  const u = (i) => {
+    const d = n.current.findIndex(
+      (s) => s === document.activeElement
+    ), m = n.current.filter(Boolean).length;
+    switch (i.key) {
       case "ArrowDown": {
-        o.preventDefault();
-        const p = (d + 1) % s;
-        e.current[p]?.focus();
+        i.preventDefault();
+        const s = (d + 1) % m;
+        n.current[s]?.focus();
         break;
       }
       case "ArrowUp": {
-        o.preventDefault();
-        const p = (d - 1 + s) % s;
-        e.current[p]?.focus();
+        i.preventDefault();
+        const s = (d - 1 + m) % m;
+        n.current[s]?.focus();
         break;
       }
       case "Home":
-        o.preventDefault(), e.current[0]?.focus();
+        i.preventDefault(), n.current[0]?.focus();
         break;
       case "End":
-        o.preventDefault(), e.current[s - 1]?.focus();
+        i.preventDefault(), n.current[m - 1]?.focus();
         break;
       case "Escape":
       case "Tab":
-        u();
+        a();
         break;
     }
   };
-  return r ? /* @__PURE__ */ w(
+  return o ? /* @__PURE__ */ p(
     "div",
     {
-      id: a,
+      id: l,
       role: "menu",
-      onKeyDown: D,
+      onKeyDown: u,
       onAnimationEnd: () => {
-        c && (f(!1), g(!1));
+        e && (c(!1), f(!1));
       },
-      className: b(
-        m.menu,
-        t === "right" ? m.alignRight : m.alignLeft,
-        c && m.closing
+      className: g(
+        D.menu,
+        e && D.closing
       ),
-      children: i
+      children: t
     }
   ) : null;
-}, F = ({
+}, L = ({
   children: t,
-  onClick: i,
-  href: r,
-  className: c,
+  onClick: o,
+  href: e,
+  className: l,
   ...a
 }) => {
-  const { closeMenu: u, itemRefs: f, itemCount: g } = x(), e = g.current++, l = {
-    ref: (n) => {
-      f.current[e] = n;
+  const { closeMenu: c, itemRefs: f, itemCount: n } = b(), w = n.current++, r = {
+    ref: (u) => {
+      f.current[w] = u;
     },
     role: "menuitem",
     tabIndex: -1,
-    className: b(m.item, c)
+    className: g(D.item, l)
   };
-  return r ? /* @__PURE__ */ w("a", { ...l, ...a, href: r, onClick: () => u(!1), children: t }) : /* @__PURE__ */ w(
+  return e ? /* @__PURE__ */ p("a", { ...r, ...a, href: e, onClick: () => c(!1), children: t }) : /* @__PURE__ */ p(
     "button",
     {
-      ...l,
+      ...r,
       ...a,
       onClick: () => {
-        u(!1), i?.();
+        c(!1), o?.();
       },
       children: t
     }
   );
 }, S = ({
   className: t
-}) => /* @__PURE__ */ w("div", { role: "separator", className: b(m.divider, t) });
+}) => /* @__PURE__ */ p("div", { role: "separator", className: g(D.divider, t) });
 export {
-  L as Dropdown,
-  B as DropdownContent,
-  F as DropdownItem,
+  P as Dropdown,
+  F as DropdownContent,
+  L as DropdownItem,
   S as DropdownSeparator,
-  P as DropdownTrigger
+  B as DropdownTrigger
 };

package/dist/index14.js

@@ -1,7 +1,7 @@
 import { jsxs as l, jsx as n } from "react/jsx-runtime";
 import r from "./index31.js";
-import t from "./index35.js";
-import s from "./index45.js";
+import t from "./index53.js";
+import s from "./index55.js";
 import { Spinner as b } from "./index23.js";
 const N = ({
   icon: e,

package/dist/index15.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as i } from "react/jsx-runtime";
 import p from "./index31.js";
 import { forwardRef as n } from "react";
-import a from "./index58.js";
+import a from "./index61.js";
 const c = n(
   ({ label: s, error: r, id: e, className: t, ...l }, o) => /* @__PURE__ */ m("div", { className: a.wrapper, children: [
     s && /* @__PURE__ */ i("label", { htmlFor: e, className: a.label, children: s }),

package/dist/index16.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import a from "./index31.js";
-import t from "./index35.js";
+import t from "./index53.js";
 const f = ({
   variant: o = "primary",
   size: r = "md",

package/dist/index17.js

@@ -2,9 +2,9 @@ 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 "./index53.js";
-import t from "./index54.js";
-import y from "./index41.js";
+import { useScrollLock as M } from "./index49.js";
+import t from "./index50.js";
+import y from "./index43.js";
 const R = ({
   open: s,
   onClose: o,

package/dist/index18.js

@@ -1,8 +1,8 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import u from "./index31.js";
-import n from "./index42.js";
-import h from "./index43.js";
-import d from "./index44.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");

package/dist/index19.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as n } from "react/jsx-runtime";
 import o from "./index31.js";
-import r from "./index61.js";
+import r from "./index48.js";
 const N = ({
   value: e,
   max: d = 100,

package/dist/index20.js

@@ -1,7 +1,7 @@
 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 "./index65.js";
+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 }),

package/dist/index21.js

@@ -1,29 +1,262 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import p from "./index31.js";
-import { forwardRef as v } from "react";
-import l from "./index66.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(
+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",
       {
-        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,
+        name: b,
+        value: p,
+        required: V,
+        disabled: D,
+        tabIndex: -1,
+        "aria-hidden": !0,
+        className: r.hiddenSelect,
+        onChange: () => {
+        },
         children: [
-          c && /* @__PURE__ */ a("option", { value: "", disabled: !0, children: c }),
-          m.map((s) => /* @__PURE__ */ a("option", { value: s.value, children: s.label }, s.value))
+          !p && /* @__PURE__ */ l("option", { value: "" }),
+          u.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
         ]
       }
     ),
-    e && /* @__PURE__ */ a("p", { id: `${r}-error`, role: "alert", className: l.error, children: e })
-  ] })
-);
-u.displayName = "Select";
+    ce,
+    m && /* @__PURE__ */ l("p", { id: j, role: "alert", className: r.error, children: m })
+  ] });
+};
+ve.displayName = "Select";
 export {
-  u as Select
+  ve as Select
 };

package/dist/index22.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import n from "./index31.js";
-import t from "./index50.js";
+import t from "./index51.js";
 const c = ({
   width: e,
   height: r,

package/dist/index23.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import i from "./index31.js";
-import r from "./index52.js";
+import r from "./index45.js";
 const m = ({
   size: s = "md",
   className: n,

package/dist/index24.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import l from "./index31.js";
-import r from "./index59.js";
+import r from "./index62.js";
 const u = ({
   id: t,
   checked: s,

package/dist/index25.js

@@ -1,7 +1,7 @@
 import { jsx as b, jsxs as D } from "react/jsx-runtime";
 import f from "./index31.js";
 import { useRef as w, useState as I, useCallback as E, useEffect as g } from "react";
-import a from "./index57.js";
+import a from "./index65.js";
 const j = ({
   tabs: l,
   value: i,