sander-ui 0.1.12 → 0.1.13

package/dist/index14.js

@@ -1,45 +1,170 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import r from "./index31.js";
-import t from "./index39.js";
-import s from "./index56.js";
-import { Spinner as b } from "./index23.js";
-const N = ({
-  icon: e,
-  variant: m = "ghost",
-  size: i = "md",
-  type: c = "button",
-  loading: o,
-  disabled: p,
-  className: u,
+import { jsx as p } from "react/jsx-runtime";
+import g from "./index34.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 "./index69.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 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);
+  }, [o, l]), /* @__PURE__ */ p(
+    C.Provider,
+    {
+      value: {
+        visible: o,
+        closing: l,
+        menuId: u,
+        triggerRef: c,
+        openMenu: i,
+        closeMenu: d,
+        setVisible: e,
+        setClosing: a,
+        itemRefs: n,
+        itemCount: w,
+        pendingFocusIndex: r
+      },
+      children: /* @__PURE__ */ p("div", { ref: f, className: D.wrapper, children: t })
+    }
+  );
+}, B = ({
+  asChild: t,
+  children: o
+}) => {
+  const { visible: e, menuId: l, triggerRef: a, openMenu: c, closeMenu: f } = b(), r = {
+    ref: (u) => {
+      a.current = u;
+    },
+    "aria-haspopup": "menu",
+    "aria-expanded": e,
+    "aria-controls": e ? l : void 0,
+    onClick: () => e ? f() : c(0),
+    onKeyDown: (u) => {
+      switch (u.key) {
+        case "ArrowDown":
+        case "Enter":
+        case " ":
+          u.preventDefault(), c(0);
+          break;
+        case "ArrowUp":
+          u.preventDefault(), c(-1);
+          break;
+      }
+    }
+  };
+  return t ? I(o, r) : /* @__PURE__ */ p("button", { ...r, className: D.trigger, children: o });
+}, F = ({
+  children: t
+}) => {
+  const {
+    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": {
+        i.preventDefault();
+        const s = (d + 1) % m;
+        n.current[s]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        i.preventDefault();
+        const s = (d - 1 + m) % m;
+        n.current[s]?.focus();
+        break;
+      }
+      case "Home":
+        i.preventDefault(), n.current[0]?.focus();
+        break;
+      case "End":
+        i.preventDefault(), n.current[m - 1]?.focus();
+        break;
+      case "Escape":
+      case "Tab":
+        a();
+        break;
+    }
+  };
+  return o ? /* @__PURE__ */ p(
+    "div",
+    {
+      id: l,
+      role: "menu",
+      onKeyDown: u,
+      onAnimationEnd: () => {
+        e && (c(!1), f(!1));
+      },
+      className: g(
+        D.menu,
+        e && D.closing
+      ),
+      children: t
+    }
+  ) : null;
+}, L = ({
+  children: t,
+  onClick: o,
+  href: e,
+  className: l,
   ...a
-}) => /* @__PURE__ */ l(
-  "button",
-  {
-    type: c,
-    disabled: o || p,
-    "aria-busy": o || void 0,
-    className: r(
-      t.button,
-      t[m],
-      s.iconButton,
-      s[i],
-      u
-    ),
-    ...a,
-    children: [
-      o ? /* @__PURE__ */ n(b, { className: t.spinner }) : null,
-      /* @__PURE__ */ n(
-        "span",
-        {
-          className: r(t.content, {
-            [t.hidden]: o
-          }),
-          children: e
-        }
-      )
-    ]
-  }
-);
+}) => {
+  const { closeMenu: c, itemRefs: f, itemCount: n } = b(), w = n.current++, r = {
+    ref: (u) => {
+      f.current[w] = u;
+    },
+    role: "menuitem",
+    tabIndex: -1,
+    className: g(D.item, l)
+  };
+  return e ? /* @__PURE__ */ p("a", { ...r, ...a, href: e, onClick: () => c(!1), children: t }) : /* @__PURE__ */ p(
+    "button",
+    {
+      ...r,
+      ...a,
+      onClick: () => {
+        c(!1), o?.();
+      },
+      children: t
+    }
+  );
+}, S = ({
+  className: t
+}) => /* @__PURE__ */ p("div", { role: "separator", className: g(D.divider, t) });
 export {
-  N as IconButton
+  P as Dropdown,
+  F as DropdownContent,
+  L as DropdownItem,
+  S as DropdownSeparator,
+  B as DropdownTrigger
 };

package/dist/index15.js

@@ -1,25 +1,38 @@
-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 "./index64.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";
+import { jsx as n } from "react/jsx-runtime";
+import x from "./index34.js";
+import e from "./index56.js";
+const a = {
+  h1: "5xl",
+  h2: "4xl",
+  h3: "2xl",
+  h4: "xl",
+  h5: "lg",
+  h6: "base"
+}, p = ({
+  children: t,
+  as: o = "h2",
+  size: l,
+  weight: h = "bold",
+  align: s,
+  className: i,
+  ...m
+}) => {
+  const r = l ?? a[o];
+  return /* @__PURE__ */ n(
+    o,
+    {
+      className: x(
+        e.heading,
+        r && e[`size-${r}`],
+        e[h],
+        s && e[s],
+        i
+      ),
+      ...m,
+      children: t
+    }
+  );
+};
 export {
-  c as Input
+  p as Heading
 };

package/dist/index16.js

@@ -1,22 +1,45 @@
-import { jsx as s } from "react/jsx-runtime";
-import a from "./index31.js";
-import t from "./index39.js";
-const f = ({
-  variant: o = "primary",
-  size: r = "md",
-  children: m,
-  className: n,
-  href: i,
-  ...p
-}) => /* @__PURE__ */ s(
-  "a",
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import r from "./index34.js";
+import t from "./index47.js";
+import s from "./index68.js";
+import { Spinner as b } from "./index25.js";
+const N = ({
+  icon: e,
+  variant: m = "ghost",
+  size: i = "md",
+  type: c = "button",
+  loading: o,
+  disabled: p,
+  className: u,
+  ...a
+}) => /* @__PURE__ */ l(
+  "button",
   {
-    href: i,
-    className: a(t.button, t[o], t[r], n),
-    ...p,
-    children: m
+    type: c,
+    disabled: o || p,
+    "aria-busy": o || void 0,
+    className: r(
+      t.button,
+      t[m],
+      s.iconButton,
+      s[i],
+      u
+    ),
+    ...a,
+    children: [
+      o ? /* @__PURE__ */ n(b, { className: t.spinner }) : null,
+      /* @__PURE__ */ n(
+        "span",
+        {
+          className: r(t.content, {
+            [t.hidden]: o
+          }),
+          children: e
+        }
+      )
+    ]
   }
 );
 export {
-  f as LinkButton
+  N as IconButton
 };

package/dist/index17.js

@@ -1,78 +1,25 @@
-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 "./index40.js";
-import t from "./index54.js";
-import y from "./index38.js";
-const R = ({
-  open: s,
-  onClose: o,
-  children: r,
-  size: f = "sm",
-  className: g,
-  ...N
-}) => {
-  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",
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import p from "./index34.js";
+import { forwardRef as n } from "react";
+import a from "./index57.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",
       {
-        ref: i,
-        className: c(
-          t.dialog,
-          t[`size-${f}`],
-          a && t.closing,
-          g
-        ),
-        onAnimationEnd: () => {
-          a && (i.current?.close(), m(!1), d(!1));
-        },
-        onCancel: (e) => {
-          e.preventDefault(), o();
-        },
-        onClick: (e) => {
-          e.target === i.current && o();
-        },
-        ...N,
-        children: /* @__PURE__ */ l("div", { className: t.content, children: r })
+        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
       }
     ),
-    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 });
+    r && /* @__PURE__ */ i("p", { id: `${e}-error`, role: "alert", className: a.error, children: r })
+  ] })
+);
+c.displayName = "Input";
 export {
-  R as Modal,
-  w as ModalBody,
-  A as ModalFooter,
-  S as ModalHeader
+  c as Input
 };

package/dist/index18.js

@@ -1,64 +1,22 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import u from "./index31.js";
-import n from "./index61.js";
-import h from "./index62.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
-}) => {
-  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 })
-      }
-    )
-  ] });
-};
+import { jsx as s } from "react/jsx-runtime";
+import a from "./index34.js";
+import t from "./index47.js";
+const f = ({
+  variant: o = "primary",
+  size: r = "md",
+  children: m,
+  className: n,
+  href: i,
+  ...p
+}) => /* @__PURE__ */ s(
+  "a",
+  {
+    href: i,
+    className: a(t.button, t[o], t[r], n),
+    ...p,
+    children: m
+  }
+);
 export {
-  j as Pagination
+  f as LinkButton
 };

package/dist/index19.js

@@ -1,43 +1,78 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import o from "./index31.js";
-import r from "./index53.js";
-const N = ({
-  value: e,
-  max: d = 100,
-  label: s,
-  size: c = "md",
-  className: l,
-  ...m
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import c from "./index34.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 "./index50.js";
+import t from "./index58.js";
+import y from "./index41.js";
+const R = ({
+  open: s,
+  onClose: o,
+  children: r,
+  size: f = "sm",
+  className: g,
+  ...N
 }) => {
-  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",
+  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",
       {
-        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}%` }
-          }
-        )
+        ref: i,
+        className: c(
+          t.dialog,
+          t[`size-${f}`],
+          a && t.closing,
+          g
+        ),
+        onAnimationEnd: () => {
+          a && (i.current?.close(), m(!1), d(!1));
+        },
+        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 {
-  N as Progress
+  R as Modal,
+  w as ModalBody,
+  A as ModalFooter,
+  S as ModalHeader
 };