sander-ui 0.1.4 → 0.1.6

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

package/dist/index13.js

@@ -1,7 +1,7 @@
 import { jsx as w } from "react/jsx-runtime";
-import b from "./index30.js";
+import b from "./index31.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";
+import m from "./index49.js";
 const C = I(null);
 function x() {
   const t = y(C);

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 "./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
-      }
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import r from "./index31.js";
+import t from "./index35.js";
+import s from "./index45.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 "./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
-  }
+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 "./index58.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,77 +1,22 @@
-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 });
+import { jsx as s } from "react/jsx-runtime";
+import a from "./index31.js";
+import t from "./index35.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 {
-  B as Modal,
-  R as ModalBody,
-  w as ModalFooter,
-  E as ModalHeader
+  f as LinkButton
 };

package/dist/index17.js

@@ -1,64 +1,78 @@
-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
+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 "./index53.js";
+import t from "./index54.js";
+import y from "./index41.js";
+const R = ({
+  open: s,
+  onClose: o,
+  children: r,
+  size: f = "sm",
+  className: g,
+  ...N
 }) => {
-  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",
+  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",
       {
-        "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
+        ref: i,
+        className: c(
+          t.dialog,
+          t[`size-${f}`],
+          a && t.closing,
+          g
+        ),
+        onAnimationEnd: () => {
+          a && (i.current?.close(), m(!1), d(!1));
         },
-        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 })
+        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 {
-  j as Pagination
+  R as Modal,
+  w as ModalBody,
+  A as ModalFooter,
+  S as ModalHeader
 };