sander-ui 0.1.10 → 0.1.13

package/dist/index20.js

@@ -1,34 +1,64 @@
-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 "./index50.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",
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import u from "./index34.js";
+import n from "./index59.js";
+import h from "./index60.js";
+import d from "./index44.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
+}) => {
+  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",
+      {
+        "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",
         {
-          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 })
-  ] })
-);
-v.displayName = "RadioGroup";
+          "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 {
-  v as RadioGroup
+  j as Pagination
 };

package/dist/index21.js

@@ -1,262 +1,43 @@
-import { jsx as l, jsxs as y } from "react/jsx-runtime";
-import k from "./index31.js";
-import { createPortal as ue } from "react-dom";
-import { useId as pe, useState as h, useRef as D, useCallback as C, useLayoutEffect as fe, useEffect as J } from "react";
-import r from "./index42.js";
-import be from "./index43.js";
-import he from "./index44.js";
-function Q(v) {
-  return "options" in v;
-}
-function ve(v) {
-  const b = [];
-  for (const c of v)
-    Q(c) ? b.push(...c.options) : b.push(c);
-  return b;
-}
-const me = ({
-  id: v,
-  name: b,
-  label: c,
-  error: m,
-  options: z,
-  placeholder: X,
-  value: K,
-  defaultValue: Y,
-  onChange: P,
-  disabled: I = !1,
-  required: V = !1,
-  className: Z
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import o from "./index34.js";
+import r from "./index66.js";
+const N = ({
+  value: e,
+  max: d = 100,
+  label: s,
+  size: c = "md",
+  className: l,
+  ...m
 }) => {
-  const _ = pe(), d = v ?? _, F = `${d}-listbox`, j = `${d}-error`, $ = `${d}-label`, u = ve(z), o = u.map((e, t) => ({ ...e, index: t })).filter((e) => !e.disabled), A = K !== void 0, [ee, te] = h(Y ?? ""), p = A ? K : ee, [s, E] = h(!1), [a, i] = h(-1), [ne, B] = h(""), O = D(null), [re, oe] = h(!1), [T, se] = h({ top: 0, left: 0, width: 0 }), x = D(null), w = D(null), R = D(null), M = D([]), S = u.find((e) => e.value === p), U = C(
-    (e) => {
-      A || te(e), P?.(e);
-    },
-    [A, P]
-  ), H = C(
-    (e) => {
-      if (I) return;
-      const t = e ?? (p ? u.findIndex((n) => n.value === p) : o[0]?.index ?? 0);
-      i(t), E(!0);
-    },
-    [I, p, u, o]
-  ), L = C(() => {
-    E(!1), i(-1), x.current?.focus();
-  }, []), G = typeof document < "u" ? x.current?.closest("dialog") ?? document.body : null;
-  fe(() => {
-    if (!s || !x.current) return;
-    const e = () => {
-      const t = x.current.getBoundingClientRect(), n = window.innerHeight - t.bottom, f = t.top, g = w.current?.offsetHeight ?? 240, q = n < g && f > n;
-      oe(q), se({
-        top: q ? t.top - (w.current?.offsetHeight ?? 0) - 4 : t.bottom + 4,
-        left: t.left,
-        width: t.width
-      });
-    };
-    return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
-      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
-    };
-  }, [s]), J(() => {
-    !s || a < 0 || M.current[a]?.scrollIntoView({ block: "nearest" });
-  }, [a, s]), J(() => {
-    if (!s) return;
-    function e(t) {
-      const n = t.target;
-      R.current && !R.current.contains(n) && w.current && !w.current.contains(n) && (E(!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]
-  ), ae = (e) => {
-    O.current && clearTimeout(O.current);
-    const t = ne + e.toLowerCase();
-    B(t), O.current = setTimeout(() => B(""), 500);
-    const n = o.find(
-      (f) => f.label.toLowerCase().startsWith(t)
-    );
-    n && i(n.index);
-  }, le = (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":
-        E(!1), i(-1);
-        break;
-      default:
-        e.key.length === 1 && !e.ctrlKey && !e.metaKey && (e.preventDefault(), ae(e.key));
-    }
-  }, ie = s && a >= 0 ? `${d}-option-${a}` : void 0;
-  let ce = 0;
-  const W = (e) => {
-    const t = ce++, n = e.value === p, f = t === a;
-    return /* @__PURE__ */ y(
-      "li",
+  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",
       {
-        ref: (g) => {
-          M.current[t] = g;
-        },
-        id: `${d}-option-${t}`,
-        role: "option",
-        "aria-selected": n,
-        "aria-disabled": e.disabled || void 0,
-        className: k(
-          r.option,
-          f && r.optionActive,
-          n && r.optionSelected,
-          e.disabled && r.optionDisabled
-        ),
-        onMouseEnter: () => {
-          e.disabled || i(t);
-        },
-        onMouseDown: (g) => g.preventDefault(),
-        onClick: () => {
-          e.disabled || (U(e.value), L());
-        },
-        children: [
-          /* @__PURE__ */ l("span", { className: r.optionLabel, children: e.label }),
-          n && /* @__PURE__ */ l(he, { size: 16, className: r.checkIcon, "aria-hidden": !0 })
-        ]
-      },
-      e.value
-    );
-  }, de = s && G ? ue(
-    /* @__PURE__ */ l(
-      "ul",
-      {
-        ref: w,
-        id: F,
-        role: "listbox",
-        "aria-labelledby": c ? $ : d,
-        className: k(r.listbox, re && r.flipped),
-        style: {
-          top: T.top,
-          left: T.left,
-          width: T.width
-        },
-        children: z.map((e) => {
-          if (Q(e)) {
-            const t = `${d}-group-${e.label.replace(/\s+/g, "-").toLowerCase()}`;
-            return /* @__PURE__ */ y("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(W) })
-            ] }, e.label);
+        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}%` }
           }
-          return W(e);
-        })
-      }
-    ),
-    G
-  ) : null;
-  return /* @__PURE__ */ y("div", { ref: R, className: r.wrapper, children: [
-    c && /* @__PURE__ */ l("label", { id: $, className: r.label, children: c }),
-    /* @__PURE__ */ y(
-      "button",
-      {
-        ref: x,
-        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": ie,
-        "aria-invalid": m ? !0 : void 0,
-        "aria-describedby": m ? j : void 0,
-        "aria-required": V,
-        disabled: I,
-        className: k(r.trigger, m && r.triggerError, Z),
-        onClick: () => s ? L() : H(),
-        onKeyDown: le,
-        children: [
-          /* @__PURE__ */ l("span", { className: k(r.triggerText, !S && r.placeholder), children: S ? S.label : X ?? " " }),
-          /* @__PURE__ */ l(
-            be,
-            {
-              size: 16,
-              className: k(r.chevron, s && r.chevronOpen),
-              "aria-hidden": !0
-            }
-          )
-        ]
-      }
-    ),
-    b && /* @__PURE__ */ y(
-      "select",
-      {
-        name: b,
-        value: p,
-        required: V,
-        disabled: I,
-        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))
-        ]
+        )
       }
-    ),
-    de,
-    m && /* @__PURE__ */ l("p", { id: j, role: "alert", className: r.error, children: m })
+    )
   ] });
 };
-me.displayName = "Select";
 export {
-  me as Select
+  N as Progress
 };

package/dist/index22.js

@@ -1,21 +1,34 @@
-import { jsx as i } from "react/jsx-runtime";
-import n from "./index31.js";
-import t from "./index66.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 { jsxs as d, jsx as l } from "react/jsx-runtime";
+import c from "./index34.js";
+import { forwardRef as h } from "react";
+import a from "./index65.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 })
+  ] })
 );
+v.displayName = "RadioGroup";
 export {
-  c as Skeleton
+  v as RadioGroup
 };