sander-ui 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,78 +1,80 @@
 /* empty css       */
 import { Accordion as t, AccordionItem as a } from "./index3.js";
 import { Alert as m } from "./index4.js";
-import { Avatar as d, AvatarGroup as f } from "./index5.js";
+import { Avatar as f, AvatarGroup as d } from "./index5.js";
 import { Badge as l } from "./index6.js";
 import { Breadcrumbs as T } from "./index7.js";
 import { Button as b } from "./index8.js";
-import { Card as D, CardBody as c, CardFooter as B, CardHeader as s } from "./index9.js";
+import { Card as B, CardBody as C, CardFooter as D, CardHeader as u } from "./index9.js";
 import { Checkbox as g } from "./index10.js";
 import { ConfirmModal as H } from "./index11.js";
-import { Drawer as S, DrawerBody as y, DrawerFooter as k, DrawerHeader as F } from "./index12.js";
+import { Drawer as S, DrawerBody as y, DrawerFooter as I, DrawerHeader as k } from "./index12.js";
 import { Dropdown as P, DropdownContent as h, DropdownItem as v, DropdownSeparator as G, DropdownTrigger as R } from "./index13.js";
-import { Input as j } from "./index14.js";
-import { LinkButton as z } from "./index15.js";
-import { Modal as J, ModalBody as K, ModalFooter as N, ModalHeader as O } from "./index16.js";
-import { Pagination as U } from "./index17.js";
-import { Progress as W } from "./index18.js";
-import { RadioGroup as Y } from "./index19.js";
-import { Select as _ } from "./index20.js";
-import { Skeleton as oo } from "./index21.js";
-import { Spinner as eo } from "./index22.js";
-import { Switch as ao } from "./index23.js";
-import { TabPanel as mo, Tabs as xo } from "./index24.js";
-import { Table as no, TableBody as lo, TableCell as io, TableHead as To, TableHeader as wo, TableRow as bo } from "./index25.js";
-import { Textarea as Do } from "./index26.js";
-import { Toast as Bo } from "./index27.js";
-import { ToastContainer as uo } from "./index28.js";
-import { Tooltip as Ao } from "./index29.js";
+import { IconButton as j } from "./index14.js";
+import { Input as z } from "./index15.js";
+import { LinkButton as J } from "./index16.js";
+import { Modal as N, ModalBody as O, ModalFooter as Q, ModalHeader as U } from "./index17.js";
+import { Pagination as W } from "./index18.js";
+import { Progress as Y } from "./index19.js";
+import { RadioGroup as _ } from "./index20.js";
+import { Select as oo } from "./index21.js";
+import { Skeleton as eo } from "./index22.js";
+import { Spinner as ao } from "./index23.js";
+import { Switch as mo } from "./index24.js";
+import { TabPanel as fo, Tabs as no } from "./index25.js";
+import { Table as io, TableBody as To, TableCell as wo, TableHead as bo, TableHeader as co, TableRow as Bo } from "./index26.js";
+import { Textarea as Do } from "./index27.js";
+import { Toast as so } from "./index28.js";
+import { ToastContainer as Ao } from "./index29.js";
+import { Tooltip as Mo } from "./index30.js";
 export {
   t as Accordion,
   a as AccordionItem,
   m as Alert,
-  d as Avatar,
-  f as AvatarGroup,
+  f as Avatar,
+  d as AvatarGroup,
   l as Badge,
   T as Breadcrumbs,
   b as Button,
-  D as Card,
-  c as CardBody,
-  B as CardFooter,
-  s as CardHeader,
+  B as Card,
+  C as CardBody,
+  D as CardFooter,
+  u as CardHeader,
   g as Checkbox,
   H as ConfirmModal,
   S as Drawer,
   y as DrawerBody,
-  k as DrawerFooter,
-  F as DrawerHeader,
+  I as DrawerFooter,
+  k as DrawerHeader,
   P as Dropdown,
   h as DropdownContent,
   v as DropdownItem,
   G as DropdownSeparator,
   R as DropdownTrigger,
-  j as Input,
-  z as LinkButton,
-  J as Modal,
-  K as ModalBody,
-  N as ModalFooter,
-  O as ModalHeader,
-  U as Pagination,
-  W as Progress,
-  Y as RadioGroup,
-  _ as Select,
-  oo as Skeleton,
-  eo as Spinner,
-  ao as Switch,
-  mo as TabPanel,
-  no as Table,
-  lo as TableBody,
-  io as TableCell,
-  To as TableHead,
-  wo as TableHeader,
-  bo as TableRow,
-  xo as Tabs,
+  j as IconButton,
+  z as Input,
+  J as LinkButton,
+  N as Modal,
+  O as ModalBody,
+  Q as ModalFooter,
+  U as ModalHeader,
+  W as Pagination,
+  Y as Progress,
+  _ as RadioGroup,
+  oo as Select,
+  eo as Skeleton,
+  ao as Spinner,
+  mo as Switch,
+  fo as TabPanel,
+  io as Table,
+  To as TableBody,
+  wo as TableCell,
+  bo as TableHead,
+  co as TableHeader,
+  Bo as TableRow,
+  no as Tabs,
   Do as Textarea,
-  Bo as Toast,
-  uo as ToastContainer,
-  Ao as Tooltip
+  so as Toast,
+  Ao as ToastContainer,
+  Mo as Tooltip
 };

package/dist/index10.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import p from "./index30.js";
+import p from "./index31.js";
 import { forwardRef as x, useRef as v, useEffect as N } from "react";
-import e from "./index50.js";
+import e from "./index52.js";
 const y = x(
   ({ label: l, description: t, error: c, indeterminate: a, id: o, className: h, ...u }, i) => {
     const n = v(null);

package/dist/index11.js

@@ -1,5 +1,5 @@
 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 { Modal as s, ModalHeader as f, ModalBody as u, ModalFooter as M } from "./index17.js";
 import { Button as d } from "./index8.js";
 const b = ({
   open: i,

package/dist/index12.js

@@ -1,10 +1,10 @@
 import { jsx as l, jsxs as b } from "react/jsx-runtime";
-import c from "./index30.js";
+import c from "./index31.js";
 import { useRef as v, useState as d, useEffect as g } from "react";
 import { createPortal as w } from "react-dom";
-import { useScrollLock as D } from "./index32.js";
-import r from "./index33.js";
-import y from "./index34.js";
+import { useScrollLock as D } from "./index49.js";
+import r from "./index66.js";
+import y from "./index43.js";
 const R = ({
   open: o,
   onClose: t,

package/dist/index13.js

@@ -1,172 +1,170 @@
-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 "./index59.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,25 +1,45 @@
-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 "./index39.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
-      }
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import r from "./index31.js";
+import t from "./index53.js";
+import s from "./index55.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,
+  ...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
     ),
-    r && /* @__PURE__ */ i("p", { id: `${e}-error`, role: "alert", className: a.error, children: r })
-  ] })
+    ...a,
+    children: [
+      o ? /* @__PURE__ */ n(b, { className: t.spinner }) : null,
+      /* @__PURE__ */ n(
+        "span",
+        {
+          className: r(t.content, {
+            [t.hidden]: o
+          }),
+          children: e
+        }
+      )
+    ]
+  }
 );
-c.displayName = "Input";
 export {
-  c as Input
+  N as IconButton
 };

package/dist/index15.js

@@ -1,22 +1,25 @@
-import { jsx as p } from "react/jsx-runtime";
-import a from "./index30.js";
-import r from "./index49.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
-  }
+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 "./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 }),
+    /* @__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 {
-  u as LinkButton
+  c as Input
 };

package/dist/index16.js

@@ -1,78 +1,22 @@
-import { jsx as l, jsxs as b } from "react/jsx-runtime";
-import c from "./index30.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 "./index32.js";
-import t from "./index61.js";
-import y from "./index34.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",
-      {
-        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 });
+import { jsx as s } from "react/jsx-runtime";
+import a from "./index31.js";
+import t from "./index53.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 {
-  R as Modal,
-  w as ModalBody,
-  A as ModalFooter,
-  S as ModalHeader
+  f as LinkButton
 };