sander-ui 0.1.4 → 0.1.6

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 "./index46.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 "./index42.js";
+import h from "./index43.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
 }) => {
-  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 "./index60.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 "./index61.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 "./index63.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 "./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 })
   ] })
 );
-u.displayName = "Select";
+v.displayName = "RadioGroup";
 export {
-  u as Select
+  v as RadioGroup
 };

package/dist/index21.js

@@ -1,21 +1,29 @@
-import { jsx as i } from "react/jsx-runtime";
-import n from "./index30.js";
-import t from "./index55.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 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(
+      "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 })
+  ] })
 );
+u.displayName = "Select";
 export {
-  c as Skeleton
+  u as Select
 };

package/dist/index22.js

@@ -1,42 +1,21 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import i from "./index30.js";
-import r from "./index59.js";
-const m = ({
-  size: s = "md",
-  className: n,
-  ...o
-}) => /* @__PURE__ */ t(
-  "svg",
+import { jsx as i } from "react/jsx-runtime";
+import n from "./index31.js";
+import t from "./index50.js";
+const c = ({
+  width: e,
+  height: r,
+  variant: o = "text",
+  className: s,
+  ...m
+}) => /* @__PURE__ */ i(
+  "div",
   {
-    className: i(r.spinner, r[s], n),
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
     "aria-hidden": "true",
-    ...o,
-    children: [
-      /* @__PURE__ */ e(
-        "circle",
-        {
-          className: r.spinnerTrack,
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "path",
-        {
-          className: r.spinnerHead,
-          fill: "currentColor",
-          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-        }
-      )
-    ]
+    className: n(t.skeleton, t[o], s),
+    style: { width: e, height: r },
+    ...m
   }
 );
 export {
-  m as Spinner
+  c as Skeleton
 };

package/dist/index23.js

@@ -1,49 +1,42 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import l from "./index30.js";
-import r from "./index61.js";
-const u = ({
-  id: t,
-  checked: s,
-  onChange: n,
-  label: c,
-  description: a,
-  disabled: i = !1,
-  className: p,
-  ...h
-}) => {
-  const m = a && t ? `${t}-description` : void 0;
-  return /* @__PURE__ */ o(
-    "label",
-    {
-      className: l(
-        r.wrapper,
-        i && r.wrapperDisabled,
-        p
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import i from "./index31.js";
+import r from "./index52.js";
+const m = ({
+  size: s = "md",
+  className: n,
+  ...o
+}) => /* @__PURE__ */ t(
+  "svg",
+  {
+    className: i(r.spinner, r[s], n),
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    ...o,
+    children: [
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          className: r.spinnerTrack,
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
       ),
-      ...h,
-      children: [
-        /* @__PURE__ */ e(
-          "button",
-          {
-            id: t,
-            type: "button",
-            role: "switch",
-            "aria-checked": s,
-            "aria-describedby": m,
-            disabled: i,
-            onClick: () => n(!s),
-            className: l(r.track, s && r.trackChecked),
-            children: /* @__PURE__ */ e("span", { className: l(r.thumb, s && r.thumbChecked) })
-          }
-        ),
-        (c || a) && /* @__PURE__ */ o("div", { className: r.labels, children: [
-          c && /* @__PURE__ */ e("p", { className: r.label, children: c }),
-          a && /* @__PURE__ */ e("p", { id: m, className: r.description, children: a })
-        ] })
-      ]
-    }
-  );
-};
+      /* @__PURE__ */ e(
+        "path",
+        {
+          className: r.spinnerHead,
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+        }
+      )
+    ]
+  }
+);
 export {
-  u as Switch
+  m as Spinner
 };

package/dist/index24.js

@@ -1,134 +1,49 @@
-import { jsx as b, jsxs as D } from "react/jsx-runtime";
-import f from "./index30.js";
-import { useRef as w, useState as I, useCallback as E, useEffect as g } from "react";
-import a from "./index54.js";
-const j = ({
-  tabs: l,
-  value: i,
-  onChange: s,
-  className: o,
-  ...u
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import l from "./index31.js";
+import r from "./index59.js";
+const u = ({
+  id: t,
+  checked: s,
+  onChange: n,
+  label: c,
+  description: a,
+  disabled: i = !1,
+  className: p,
+  ...h
 }) => {
-  const m = w(null), d = w(/* @__PURE__ */ new Map()), [v, R] = I({
-    left: 0,
-    width: 0
-  }), [k, A] = I(!1), x = E(() => {
-    const e = d.current.get(i), n = m.current;
-    if (e && n) {
-      const t = n.getBoundingClientRect(), r = e.getBoundingClientRect();
-      R({
-        left: r.left - t.left + n.scrollLeft,
-        width: r.width
-      });
-    }
-  }, [i]);
-  g(() => {
-    x();
-  }, [x]), g(() => {
-    const e = requestAnimationFrame(() => A(!0));
-    return () => cancelAnimationFrame(e);
-  }, []);
-  const h = (e, n) => {
-    const t = l.length;
-    let r = (e + n + t) % t;
-    for (; l[r].disabled && r !== e; )
-      r = (r + n + t) % t;
-    return r;
-  }, y = (e) => {
-    const n = l.findIndex((c) => c.value === i);
-    let t = null;
-    switch (e.key) {
-      case "ArrowRight":
-        t = h(n, 1);
-        break;
-      case "ArrowLeft":
-        t = h(n, -1);
-        break;
-      case "Home":
-        t = l.findIndex((c) => !c.disabled);
-        break;
-      case "End": {
-        const p = [...l].reverse().findIndex((T) => !T.disabled);
-        t = p !== -1 ? l.length - 1 - p : null;
-        break;
-      }
-      default:
-        return;
-    }
-    if (t === null || t === -1) return;
-    e.preventDefault();
-    const r = l[t];
-    s(r.value), d.current.get(r.value)?.focus();
-  };
-  return /* @__PURE__ */ D(
-    "div",
+  const m = a && t ? `${t}-description` : void 0;
+  return /* @__PURE__ */ o(
+    "label",
     {
-      ref: m,
-      className: f(a.tabList, o),
-      role: "tablist",
-      onKeyDown: y,
-      ...u,
+      className: l(
+        r.wrapper,
+        i && r.wrapperDisabled,
+        p
+      ),
+      ...h,
       children: [
-        l.map((e) => {
-          const n = i === e.value;
-          return /* @__PURE__ */ b(
-            "button",
-            {
-              ref: (t) => {
-                t ? d.current.set(e.value, t) : d.current.delete(e.value);
-              },
-              id: `tab-${e.value}`,
-              role: "tab",
-              "aria-selected": n,
-              "aria-controls": `tabpanel-${e.value}`,
-              "aria-disabled": e.disabled || void 0,
-              tabIndex: n ? 0 : -1,
-              onClick: () => {
-                e.disabled || s(e.value);
-              },
-              className: f(
-                a.tab,
-                n && a.tabActive,
-                e.disabled && a.tabDisabled
-              ),
-              children: e.label
-            },
-            e.value
-          );
-        }),
-        /* @__PURE__ */ b(
-          "span",
+        /* @__PURE__ */ e(
+          "button",
           {
-            className: f(
-              a.indicator,
-              k && a.indicatorAnimated
-            ),
-            style: { left: v.left, width: v.width },
-            "aria-hidden": "true"
+            id: t,
+            type: "button",
+            role: "switch",
+            "aria-checked": s,
+            "aria-describedby": m,
+            disabled: i,
+            onClick: () => n(!s),
+            className: l(r.track, s && r.trackChecked),
+            children: /* @__PURE__ */ e("span", { className: l(r.thumb, s && r.thumbChecked) })
           }
-        )
+        ),
+        (c || a) && /* @__PURE__ */ o("div", { className: r.labels, children: [
+          c && /* @__PURE__ */ e("p", { className: r.label, children: c }),
+          a && /* @__PURE__ */ e("p", { id: m, className: r.description, children: a })
+        ] })
       ]
     }
   );
-}, B = ({
-  value: l,
-  activeValue: i,
-  children: s,
-  className: o,
-  ...u
-}) => l !== i ? null : /* @__PURE__ */ b(
-  "div",
-  {
-    id: `tabpanel-${l}`,
-    role: "tabpanel",
-    "aria-labelledby": `tab-${l}`,
-    tabIndex: 0,
-    className: o,
-    ...u,
-    children: s
-  }
-);
+};
 export {
-  B as TabPanel,
-  j as Tabs
+  u as Switch
 };