sander-ui 0.1.3 → 0.1.4

package/dist/index10.js

@@ -0,0 +1,39 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import p from "./index30.js";
+import { forwardRef as x, useRef as v, useEffect as N } from "react";
+import e from "./index62.js";
+const y = x(
+  ({ label: l, description: t, error: c, indeterminate: a, id: o, className: h, ...u }, i) => {
+    const n = v(null);
+    N(() => {
+      const r = n.current;
+      r && (r.indeterminate = !!a);
+    }, [a]);
+    const d = c ? `${o}-error` : void 0, m = t ? `${o}-description` : void 0, b = [m, d].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ f("div", { className: p(e.wrapper, h), children: [
+      /* @__PURE__ */ f("div", { className: e.row, children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            id: o,
+            ref: (r) => {
+              n.current = r, typeof i == "function" ? i(r) : i && (i.current = r);
+            },
+            type: "checkbox",
+            "aria-invalid": c ? !0 : void 0,
+            "aria-describedby": b,
+            className: p(e.checkbox, c && e.checkboxError),
+            ...u
+          }
+        ),
+        l && /* @__PURE__ */ s("label", { htmlFor: o, className: e.label, children: l })
+      ] }),
+      t && /* @__PURE__ */ s("p", { id: m, className: e.description, children: t }),
+      c && /* @__PURE__ */ s("p", { id: d, className: e.error, role: "alert", children: c })
+    ] });
+  }
+);
+y.displayName = "Checkbox";
+export {
+  y as Checkbox
+};

package/dist/index11.js

@@ -0,0 +1,24 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { Modal as s, ModalHeader as f, ModalBody as u, ModalFooter as M } from "./index16.js";
+import { Button as d } from "./index8.js";
+const b = ({
+  open: i,
+  onClose: o,
+  onConfirm: a,
+  title: l = "Are you sure?",
+  description: t = "This action cannot be undone.",
+  confirmLabel: c = "Confirm",
+  cancelLabel: h = "Cancel",
+  variant: m = "danger",
+  loading: n = !1
+}) => /* @__PURE__ */ e(s, { open: i, onClose: o, children: [
+  /* @__PURE__ */ r(f, { onClose: o, children: l }),
+  /* @__PURE__ */ r(u, { children: t }),
+  /* @__PURE__ */ e(M, { children: [
+    /* @__PURE__ */ r(d, { variant: "ghost", onClick: o, disabled: n, children: h }),
+    /* @__PURE__ */ r(d, { variant: m, onClick: a, loading: n, children: c })
+  ] })
+] });
+export {
+  b as ConfirmModal
+};

package/dist/index12.js

@@ -0,0 +1,79 @@
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import n from "./index30.js";
+import { useRef as v, useState as d, useEffect as g } from "react";
+import { createPortal as w } from "react-dom";
+import r from "./index45.js";
+import D from "./index42.js";
+const B = ({
+  open: s,
+  onClose: t,
+  children: o,
+  side: c = "right",
+  size: h = "md",
+  className: p,
+  ...N
+}) => {
+  const a = v(null), [f, m] = d(!1), [i, u] = d(!1);
+  return g(() => {
+    s ? (m(!0), u(!1)) : m((e) => (e && u(!0), e));
+  }, [s]), g(() => {
+    const e = a.current;
+    f && !i && e && !e.open && e.showModal();
+  }, [f, i]), f ? w(
+    /* @__PURE__ */ l(
+      "dialog",
+      {
+        ref: a,
+        className: n(
+          r.dialog,
+          r[c],
+          r[`size-${h}`],
+          i && r.closing,
+          p
+        ),
+        onAnimationEnd: () => {
+          i && (a.current?.close(), m(!1), u(!1));
+        },
+        onCancel: (e) => {
+          e.preventDefault(), t();
+        },
+        onClick: (e) => {
+          e.target === a.current && t();
+        },
+        ...N,
+        children: /* @__PURE__ */ l("div", { className: r.content, children: o })
+      }
+    ),
+    document.body
+  ) : null;
+}, E = ({
+  children: s,
+  onClose: t,
+  className: o,
+  ...c
+}) => /* @__PURE__ */ b("div", { className: n(r.header, o), ...c, children: [
+  /* @__PURE__ */ l("h2", { className: r.title, children: s }),
+  t && /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: t,
+      "aria-label": "Close",
+      className: r.closeButton,
+      children: /* @__PURE__ */ l(D, { size: 20 })
+    }
+  )
+] }), R = ({
+  children: s,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ l("div", { className: n(r.body, t), ...o, children: s }), A = ({
+  children: s,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ l("div", { className: n(r.footer, t), ...o, children: s });
+export {
+  B as Drawer,
+  R as DrawerBody,
+  A as DrawerFooter,
+  E as DrawerHeader
+};

package/dist/index13.js

@@ -0,0 +1,172 @@
+import { jsx as w } from "react/jsx-runtime";
+import b from "./index30.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 "./index36.js";
+const C = I(null);
+function x() {
+  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);
+    }
+    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+  }, [i, c]), /* @__PURE__ */ w(
+    C.Provider,
+    {
+      value: {
+        visible: i,
+        closing: c,
+        menuId: n,
+        triggerRef: u,
+        openMenu: D,
+        closeMenu: o,
+        setVisible: r,
+        setClosing: a,
+        itemRefs: g,
+        itemCount: e,
+        pendingFocusIndex: l
+      },
+      children: /* @__PURE__ */ w("div", { ref: f, className: m.wrapper, children: t })
+    }
+  );
+}, P = ({
+  asChild: t,
+  children: i
+}) => {
+  const { visible: r, menuId: c, triggerRef: a, openMenu: u, closeMenu: f } = x(), l = {
+    ref: (n) => {
+      a.current = n;
+    },
+    "aria-haspopup": "menu",
+    "aria-expanded": r,
+    "aria-controls": r ? c : void 0,
+    onClick: () => r ? f() : u(0),
+    onKeyDown: (n) => {
+      switch (n.key) {
+        case "ArrowDown":
+        case "Enter":
+        case " ":
+          n.preventDefault(), u(0);
+          break;
+        case "ArrowUp":
+          n.preventDefault(), u(-1);
+          break;
+      }
+    }
+  };
+  return t ? E(i, l) : /* @__PURE__ */ w("button", { ...l, className: m.trigger, children: i });
+}, B = ({
+  align: t = "right",
+  children: i
+}) => {
+  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) {
+      case "ArrowDown": {
+        o.preventDefault();
+        const p = (d + 1) % s;
+        e.current[p]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        o.preventDefault();
+        const p = (d - 1 + s) % s;
+        e.current[p]?.focus();
+        break;
+      }
+      case "Home":
+        o.preventDefault(), e.current[0]?.focus();
+        break;
+      case "End":
+        o.preventDefault(), e.current[s - 1]?.focus();
+        break;
+      case "Escape":
+      case "Tab":
+        u();
+        break;
+    }
+  };
+  return r ? /* @__PURE__ */ w(
+    "div",
+    {
+      id: a,
+      role: "menu",
+      onKeyDown: D,
+      onAnimationEnd: () => {
+        c && (f(!1), g(!1));
+      },
+      className: b(
+        m.menu,
+        t === "right" ? m.alignRight : m.alignLeft,
+        c && m.closing
+      ),
+      children: i
+    }
+  ) : null;
+}, F = ({
+  children: t,
+  onClick: i,
+  href: r,
+  className: c,
+  ...a
+}) => {
+  const { closeMenu: u, itemRefs: f, itemCount: g } = x(), e = g.current++, l = {
+    ref: (n) => {
+      f.current[e] = n;
+    },
+    role: "menuitem",
+    tabIndex: -1,
+    className: b(m.item, c)
+  };
+  return r ? /* @__PURE__ */ w("a", { ...l, ...a, href: r, onClick: () => u(!1), children: t }) : /* @__PURE__ */ w(
+    "button",
+    {
+      ...l,
+      ...a,
+      onClick: () => {
+        u(!1), i?.();
+      },
+      children: t
+    }
+  );
+}, S = ({
+  className: t
+}) => /* @__PURE__ */ w("div", { role: "separator", className: b(m.divider, t) });
+export {
+  L as Dropdown,
+  B as DropdownContent,
+  F as DropdownItem,
+  S as DropdownSeparator,
+  P as DropdownTrigger
+};

package/dist/index14.js

@@ -0,0 +1,25 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import p from "./index30.js";
+import { forwardRef as n } from "react";
+import a from "./index44.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 }),
+    /* @__PURE__ */ i(
+      "input",
+      {
+        id: e,
+        ref: o,
+        "aria-invalid": r ? !0 : void 0,
+        "aria-describedby": r ? `${e}-error` : void 0,
+        className: p(a.input, r && a.inputError, t),
+        ...l
+      }
+    ),
+    r && /* @__PURE__ */ i("p", { id: `${e}-error`, role: "alert", className: a.error, children: r })
+  ] })
+);
+c.displayName = "Input";
+export {
+  c as Input
+};

package/dist/index15.js

@@ -0,0 +1,22 @@
+import { jsx as p } from "react/jsx-runtime";
+import a from "./index30.js";
+import r from "./index47.js";
+const u = ({
+  variant: t = "primary",
+  size: o = "md",
+  children: m,
+  className: n,
+  href: s,
+  ...i
+}) => /* @__PURE__ */ p(
+  "a",
+  {
+    href: s,
+    className: a(r.button, r[t], r[o], n),
+    ...i,
+    children: m
+  }
+);
+export {
+  u as LinkButton
+};

package/dist/index16.js

@@ -0,0 +1,77 @@
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import i from "./index30.js";
+import { useRef as h, useState as u, useEffect as g } from "react";
+import { createPortal as v } from "react-dom";
+import o from "./index43.js";
+import M from "./index42.js";
+const B = ({
+  open: s,
+  onClose: t,
+  children: r,
+  size: c = "sm",
+  className: p,
+  ...N
+}) => {
+  const a = h(null), [f, d] = u(!1), [n, m] = u(!1);
+  return g(() => {
+    s ? (d(!0), m(!1)) : d((e) => (e && m(!0), e));
+  }, [s]), g(() => {
+    const e = a.current;
+    f && !n && e && !e.open && e.showModal();
+  }, [f, n]), f ? v(
+    /* @__PURE__ */ l(
+      "dialog",
+      {
+        ref: a,
+        className: i(
+          o.dialog,
+          o[`size-${c}`],
+          n && o.closing,
+          p
+        ),
+        onAnimationEnd: () => {
+          n && (a.current?.close(), d(!1), m(!1));
+        },
+        onCancel: (e) => {
+          e.preventDefault(), t();
+        },
+        onClick: (e) => {
+          e.target === a.current && t();
+        },
+        ...N,
+        children: /* @__PURE__ */ l("div", { className: o.content, children: r })
+      }
+    ),
+    document.body
+  ) : null;
+}, E = ({
+  children: s,
+  onClose: t,
+  className: r,
+  ...c
+}) => /* @__PURE__ */ b("div", { className: i(o.header, r), ...c, children: [
+  /* @__PURE__ */ l("h2", { className: o.title, children: s }),
+  t && /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: t,
+      "aria-label": "Close",
+      className: o.closeButton,
+      children: /* @__PURE__ */ l(M, { size: 20 })
+    }
+  )
+] }), R = ({
+  children: s,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ l("div", { className: i(o.body, t), ...r, children: s }), w = ({
+  children: s,
+  className: t,
+  ...r
+}) => /* @__PURE__ */ l("div", { className: i(o.footer, t), ...r, children: s });
+export {
+  B as Modal,
+  R as ModalBody,
+  w as ModalFooter,
+  E as ModalHeader
+};

package/dist/index17.js

@@ -0,0 +1,64 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import u from "./index30.js";
+import n from "./index50.js";
+import h from "./index51.js";
+import d from "./index33.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",
+        {
+          "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 {
+  j as Pagination
+};

package/dist/index18.js

@@ -0,0 +1,43 @@
+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
+}) => {
+  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",
+      {
+        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 {
+  N as Progress
+};

package/dist/index19.js

@@ -0,0 +1,34 @@
+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 })
+      ] })
+    ] }, e.value)) }),
+    s && /* @__PURE__ */ l("p", { role: "alert", className: a.error, children: s })
+  ] })
+);
+v.displayName = "RadioGroup";
+export {
+  v as RadioGroup
+};

package/dist/index20.js

@@ -0,0 +1,29 @@
+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 })
+  ] })
+);
+u.displayName = "Select";
+export {
+  u as Select
+};

package/dist/index21.js

@@ -0,0 +1,21 @@
+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
+  }
+);
+export {
+  c as Skeleton
+};

package/dist/index22.js

@@ -0,0 +1,42 @@
+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",
+  {
+    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"
+        }
+      )
+    ]
+  }
+);
+export {
+  m as Spinner
+};