@spark-ui/components 13.1.2 → 13.1.4

package/dist/pagination/index.mjs

@@ -1,942 +1,317 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useMemo as Nt, useRef as E, useLayoutEffect as xt, useEffect as B, useState as gt, createContext as kt, useId as Ct, useContext as At } from "react";
-import { flushSync as J } from "react-dom";
-import { a as Lt } from "../index-BmAFn37q.mjs";
-import { ArrowDoubleLeft as Rt } from "@spark-ui/icons/ArrowDoubleLeft";
-import { I as U } from "../Icon-D1RueiPY.mjs";
-import { I as R } from "../IconButton-BY3gYXtU.mjs";
-import { B as ct } from "../Button-D32Avk2j.mjs";
-import { ArrowDoubleRight as wt } from "@spark-ui/icons/ArrowDoubleRight";
-import { ArrowVerticalRight as It } from "@spark-ui/icons/ArrowVerticalRight";
-import { ArrowVerticalLeft as _t } from "@spark-ui/icons/ArrowVerticalLeft";
-var V = (t, e = []) => ({
-  parts: (...n) => {
-    if ($t(e))
-      return V(t, n);
-    throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
-  },
-  extendWith: (...n) => V(t, [...e, ...n]),
-  omit: (...n) => V(t, e.filter((a) => !n.includes(a))),
-  rename: (n) => V(n, e),
-  keys: () => e,
-  build: () => [...new Set(e)].reduce(
-    (n, a) => Object.assign(n, {
-      [a]: {
-        selector: [
-          `&[data-scope="${$(t)}"][data-part="${$(a)}"]`,
-          `& [data-scope="${$(t)}"][data-part="${$(a)}"]`
-        ].join(", "),
-        attrs: { "data-scope": $(t), "data-part": $(a) }
-      }
-    }),
-    {}
-  )
-}), $ = (t) => t.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), $t = (t) => t.length === 0, Pt = (t) => typeof t == "object" && t !== null, M = (t) => t ? "" : void 0, jt = 9, Ot = (t) => Pt(t) && t.nodeType === jt, zt = (t) => Pt(t) && t === t.window;
-function Mt(t) {
-  if (!t) return !1;
-  const e = t.getRootNode();
-  return mt(e) === t;
-}
-function Gt(t) {
-  return Ot(t) ? t : zt(t) ? t.document : t?.ownerDocument ?? document;
-}
-function mt(t) {
-  let e = t.activeElement;
-  for (; e?.shadowRoot; ) {
-    const n = e.shadowRoot.activeElement;
-    if (!n || n === e) break;
-    e = n;
-  }
-  return e;
-}
-function Vt(t) {
-  return t == null ? [] : Array.isArray(t) ? t : [t];
-}
-var lt = (t) => t?.constructor.name === "Array", Ft = (t, e) => {
-  if (t.length !== e.length) return !1;
-  for (let n = 0; n < t.length; n++)
-    if (!H(t[n], e[n])) return !1;
-  return !0;
-}, H = (t, e) => {
-  if (Object.is(t, e)) return !0;
-  if (t == null && e != null || t != null && e == null) return !1;
-  if (typeof t?.isEqual == "function" && typeof e?.isEqual == "function")
-    return t.isEqual(e);
-  if (typeof t == "function" && typeof e == "function")
-    return t.toString() === e.toString();
-  if (lt(t) && lt(e))
-    return Ft(Array.from(t), Array.from(e));
-  if (typeof t != "object" || typeof e != "object") return !1;
-  const n = Object.keys(e ?? /* @__PURE__ */ Object.create(null)), a = n.length;
-  for (let r = 0; r < a; r++)
-    if (!Reflect.has(t, n[r])) return !1;
-  for (let r = 0; r < a; r++) {
-    const i = n[r];
-    if (!H(t[i], e[i])) return !1;
-  }
-  return !0;
-}, Dt = (t) => t != null && typeof t == "object", X = (t) => typeof t == "number" && !Number.isNaN(t), q = (t) => typeof t == "string", F = (t) => typeof t == "function", qt = (t, e) => Object.prototype.hasOwnProperty.call(t, e), Bt = (t) => Object.prototype.toString.call(t), yt = Function.prototype.toString, Wt = yt.call(Object), Ut = (t) => {
-  if (!Dt(t) || Bt(t) != "[object Object]" || Xt(t)) return !1;
-  const e = Object.getPrototypeOf(t);
-  if (e === null) return !0;
-  const n = qt(e, "constructor") && e.constructor;
-  return typeof n == "function" && n instanceof n && yt.call(n) == Wt;
-}, Zt = (t) => typeof t == "object" && t !== null && "$$typeof" in t && "props" in t, Kt = (t) => typeof t == "object" && t !== null && "__v_isVNode" in t, Xt = (t) => Zt(t) || Kt(t), Jt = (t) => t(), Ht = (...t) => (...e) => {
-  t.forEach(function(n) {
-    n?.(...e);
-  });
-};
-function ht(t) {
-  if (!Ut(t) || t === void 0) return t;
-  const e = Reflect.ownKeys(t).filter((a) => typeof a == "string"), n = {};
-  for (const a of e) {
-    const r = t[a];
-    r !== void 0 && (n[a] = ht(r));
-  }
-  return n;
-}
-function ut(...t) {
-  const e = t.length === 1 ? t[0] : t[1];
-  (t.length === 2 ? t[0] : !0) && process.env.NODE_ENV !== "production" && console.warn(e);
-}
-function Qt(t, e) {
-  if (t == null) throw new Error(e());
-}
-var Yt = (...t) => t.map((e) => e?.trim?.()).filter(Boolean).join(" "), te = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g, dt = (t) => {
-  const e = {};
-  let n;
-  for (; n = te.exec(t); )
-    e[n[1]] = n[2];
-  return e;
-}, ee = (t, e) => {
-  if (q(t)) {
-    if (q(e)) return `${t};${e}`;
-    t = dt(t);
-  } else q(e) && (e = dt(e));
-  return Object.assign({}, t ?? {}, e ?? {});
-};
-function O(...t) {
-  let e = {};
-  for (let n of t) {
-    if (!n) continue;
-    for (let r in e) {
-      if (r.startsWith("on") && typeof e[r] == "function" && typeof n[r] == "function") {
-        e[r] = Ht(n[r], e[r]);
-        continue;
-      }
-      if (r === "className" || r === "class") {
-        e[r] = Yt(e[r], n[r]);
-        continue;
-      }
-      if (r === "style") {
-        e[r] = ee(e[r], n[r]);
-        continue;
-      }
-      e[r] = n[r] !== void 0 ? n[r] : e[r];
-    }
-    for (let r in n)
-      e[r] === void 0 && (e[r] = n[r]);
-    const a = Object.getOwnPropertySymbols(n);
-    for (let r of a)
-      e[r] = n[r];
-  }
-  return e;
-}
-function pt(t, e, n) {
-  let a = [], r;
-  return (i) => {
-    const s = t(i);
-    return (s.length !== a.length || s.some((u, f) => !H(a[f], u))) && (a = s, r = e(s, i)), r;
-  };
-}
-var j = /* @__PURE__ */ ((t) => (t.NotStarted = "Not Started", t.Started = "Started", t.Stopped = "Stopped", t))(j || {}), Z = "__init__";
-function ne(t) {
-  const e = () => t.getRootNode?.() ?? document, n = () => Gt(e());
-  return {
-    ...t,
-    getRootNode: e,
-    getDoc: n,
-    getWin: () => n().defaultView ?? window,
-    getActiveElement: () => mt(e()),
-    isActiveElement: Mt,
-    getById: (s) => e().getElementById(s)
-  };
-}
-function re(t) {
-  return new Proxy({}, {
-    get(e, n) {
-      return n === "style" ? (a) => t({ style: a }).style : t;
-    }
-  });
-}
-var Q = () => (t) => Array.from(new Set(t)), ae = V("pagination").parts(
-  "root",
-  "item",
-  "ellipsis",
-  "firstTrigger",
-  "prevTrigger",
-  "nextTrigger",
-  "lastTrigger"
-), _ = ae.build(), ie = (t) => t.ids?.root ?? `pagination:${t.id}`, oe = (t) => t.ids?.firstTrigger ?? `pagination:${t.id}:first`, se = (t) => t.ids?.prevTrigger ?? `pagination:${t.id}:prev`, ge = (t) => t.ids?.nextTrigger ?? `pagination:${t.id}:next`, ce = (t) => t.ids?.lastTrigger ?? `pagination:${t.id}:last`, le = (t, e) => t.ids?.ellipsis?.(e) ?? `pagination:${t.id}:ellipsis:${e}`, ue = (t, e) => t.ids?.item?.(e) ?? `pagination:${t.id}:item:${e}`, A = (t, e) => {
-  let n = e - t + 1;
-  return Array.from({ length: n }, (a, r) => r + t);
-}, de = (t) => t.map((e) => X(e) ? { type: "page", value: e } : { type: "ellipsis" }), G = "ellipsis", pe = (t) => {
-  const { page: e, totalPages: n, siblingCount: a, boundaryCount: r = 1 } = t;
-  if (n <= 0) return [];
-  if (n === 1) return [1];
-  const i = 1, s = n, c = Math.max(e - a, i), u = Math.min(e + a, s), f = Math.min(a * 2 + 3 + r * 2, n);
-  if (n <= f)
-    return A(i, s);
-  const P = f - 1 - r, g = c > i + r + 1 && Math.abs(c - i) > r + 1, m = u < s - r - 1 && Math.abs(s - u) > r + 1;
-  let l = [];
-  if (!g && m) {
-    const y = A(1, P);
-    l.push(...y, G), l.push(...A(s - r + 1, s));
-  } else if (g && !m) {
-    l.push(...A(i, i + r - 1)), l.push(G);
-    const y = A(s - P + 1, s);
-    l.push(...y);
-  } else if (g && m) {
-    l.push(...A(i, i + r - 1)), l.push(G);
-    const y = A(c, u);
-    l.push(...y), l.push(G), l.push(...A(s - r + 1, s));
-  } else
-    l.push(...A(i, s));
-  for (let y = 0; y < l.length; y++)
-    if (l[y] === G) {
-      const k = X(l[y - 1]) ? l[y - 1] : 0;
-      (X(l[y + 1]) ? l[y + 1] : n + 1) - k === 2 && (l[y] = k + 1);
-    }
-  return l;
-}, fe = (t) => de(pe(t));
-function Pe(t, e) {
-  const { send: n, scope: a, prop: r, computed: i, context: s } = t, c = i("totalPages"), u = s.get("page"), f = s.get("pageSize"), P = r("translations"), g = r("count"), m = r("getPageUrl"), l = r("type"), y = i("previousPage"), k = i("nextPage"), T = i("pageRange"), S = u === 1, I = u === c, D = fe({
-    page: u,
-    totalPages: c,
-    siblingCount: r("siblingCount"),
-    boundaryCount: r("boundaryCount")
-  });
-  return {
-    count: g,
-    page: u,
-    pageSize: f,
-    totalPages: c,
-    pages: D,
-    previousPage: y,
-    nextPage: k,
-    pageRange: T,
-    slice(N) {
-      return N.slice(T.start, T.end);
-    },
-    setPageSize(N) {
-      n({ type: "SET_PAGE_SIZE", size: N });
-    },
-    setPage(N) {
-      n({ type: "SET_PAGE", page: N });
-    },
-    goToNextPage() {
-      n({ type: "NEXT_PAGE" });
-    },
-    goToPrevPage() {
-      n({ type: "PREVIOUS_PAGE" });
-    },
-    goToFirstPage() {
-      n({ type: "FIRST_PAGE" });
-    },
-    goToLastPage() {
-      n({ type: "LAST_PAGE" });
-    },
-    getRootProps() {
-      return e.element({
-        id: ie(a),
-        ..._.root.attrs,
-        dir: r("dir"),
-        "aria-label": P.rootLabel
-      });
-    },
-    getEllipsisProps(N) {
-      return e.element({
-        id: le(a, N.index),
-        ..._.ellipsis.attrs,
-        dir: r("dir")
-      });
-    },
-    getItemProps(N) {
-      const C = N.value, b = C === u;
-      return e.element({
-        id: ue(a, C),
-        ..._.item.attrs,
-        dir: r("dir"),
-        "data-index": C,
-        "data-selected": M(b),
-        "aria-current": b ? "page" : void 0,
-        "aria-label": P.itemLabel?.({ page: C, totalPages: c }),
-        onClick() {
-          n({ type: "SET_PAGE", page: C });
-        },
-        ...l === "button" && { type: "button" },
-        ...l === "link" && m && {
-          href: m({ page: C, pageSize: f })
-        }
-      });
-    },
-    getPrevTriggerProps() {
-      return e.element({
-        id: se(a),
-        ..._.prevTrigger.attrs,
-        dir: r("dir"),
-        "data-disabled": M(S),
-        "aria-label": P.prevTriggerLabel,
-        onClick() {
-          n({ type: "PREVIOUS_PAGE" });
-        },
-        ...l === "button" && { disabled: S, type: "button" },
-        ...l === "link" && m && y && {
-          href: m({ page: y, pageSize: f })
-        }
-      });
-    },
-    getFirstTriggerProps() {
-      return e.element({
-        id: oe(a),
-        ..._.firstTrigger.attrs,
-        dir: r("dir"),
-        "data-disabled": M(S),
-        "aria-label": P.firstTriggerLabel,
-        onClick() {
-          n({ type: "FIRST_PAGE" });
-        },
-        ...l === "button" && { disabled: S, type: "button" },
-        ...l === "link" && m && {
-          href: m({ page: 1, pageSize: f })
-        }
-      });
-    },
-    getNextTriggerProps() {
-      return e.element({
-        id: ge(a),
-        ..._.nextTrigger.attrs,
-        dir: r("dir"),
-        "data-disabled": M(I),
-        "aria-label": P.nextTriggerLabel,
-        onClick() {
-          n({ type: "NEXT_PAGE" });
-        },
-        ...l === "button" && { disabled: I, type: "button" },
-        ...l === "link" && m && k && {
-          href: m({ page: k, pageSize: f })
-        }
-      });
-    },
-    getLastTriggerProps() {
-      return e.element({
-        id: ce(a),
-        ..._.lastTrigger.attrs,
-        dir: r("dir"),
-        "data-disabled": M(I),
-        "aria-label": P.lastTriggerLabel,
-        onClick() {
-          n({ type: "LAST_PAGE" });
-        },
-        ...l === "button" && { disabled: I, type: "button" },
-        ...l === "link" && m && {
-          href: m({ page: c, pageSize: f })
-        }
-      });
-    }
-  };
-}
-var me = {
-  props({ props: t }) {
-    return {
-      defaultPageSize: 10,
-      siblingCount: 1,
-      boundaryCount: 1,
-      defaultPage: 1,
-      type: "button",
-      count: 1,
-      ...t,
-      translations: {
-        rootLabel: "pagination",
-        firstTriggerLabel: "first page",
-        prevTriggerLabel: "previous page",
-        nextTriggerLabel: "next page",
-        lastTriggerLabel: "last page",
-        itemLabel({ page: e, totalPages: n }) {
-          return `${n > 1 && e === n ? "last page, " : ""}page ${e}`;
-        },
-        ...t.translations
-      }
-    };
-  },
-  initialState() {
-    return "idle";
-  },
-  context({ prop: t, bindable: e, getContext: n }) {
-    return {
-      page: e(() => ({
-        value: t("page"),
-        defaultValue: t("defaultPage"),
-        onChange(a) {
-          const r = n();
-          t("onPageChange")?.({ page: a, pageSize: r.get("pageSize") });
-        }
-      })),
-      pageSize: e(() => ({
-        value: t("pageSize"),
-        defaultValue: t("defaultPageSize"),
-        onChange(a) {
-          t("onPageSizeChange")?.({ pageSize: a });
-        }
-      }))
-    };
-  },
-  watch({ track: t, context: e, action: n }) {
-    t([() => e.get("pageSize")], () => {
-      n(["setPageIfNeeded"]);
-    });
-  },
-  computed: {
-    totalPages: pt(
-      ({ prop: t, context: e }) => [e.get("pageSize"), t("count")],
-      ([t, e]) => Math.ceil(e / t)
-    ),
-    pageRange: pt(
-      ({ context: t, prop: e }) => [t.get("page"), t.get("pageSize"), e("count")],
-      ([t, e, n]) => {
-        const a = (t - 1) * e;
-        return { start: a, end: Math.min(a + e, n) };
-      }
-    ),
-    previousPage: ({ context: t }) => t.get("page") === 1 ? null : t.get("page") - 1,
-    nextPage: ({ context: t, computed: e }) => t.get("page") === e("totalPages") ? null : t.get("page") + 1,
-    isValidPage: ({ context: t, computed: e }) => t.get("page") >= 1 && t.get("page") <= e("totalPages")
-  },
-  on: {
-    SET_PAGE: {
-      guard: "isValidPage",
-      actions: ["setPage"]
-    },
-    SET_PAGE_SIZE: {
-      actions: ["setPageSize"]
-    },
-    FIRST_PAGE: {
-      actions: ["goToFirstPage"]
-    },
-    LAST_PAGE: {
-      actions: ["goToLastPage"]
-    },
-    PREVIOUS_PAGE: {
-      guard: "canGoToPrevPage",
-      actions: ["goToPrevPage"]
-    },
-    NEXT_PAGE: {
-      guard: "canGoToNextPage",
-      actions: ["goToNextPage"]
-    }
-  },
-  states: {
-    idle: {}
-  },
-  implementations: {
-    guards: {
-      isValidPage: ({ event: t, computed: e }) => t.page >= 1 && t.page <= e("totalPages"),
-      isValidCount: ({ context: t, event: e }) => t.get("page") > e.count,
-      canGoToNextPage: ({ context: t, computed: e }) => t.get("page") < e("totalPages"),
-      canGoToPrevPage: ({ context: t }) => t.get("page") > 1
-    },
-    actions: {
-      setPage({ context: t, event: e, computed: n }) {
-        const a = K(e.page, n("totalPages"));
-        t.set("page", a);
-      },
-      setPageSize({ context: t, event: e }) {
-        t.set("pageSize", e.size);
-      },
-      goToFirstPage({ context: t }) {
-        t.set("page", 1);
-      },
-      goToLastPage({ context: t, computed: e }) {
-        t.set("page", e("totalPages"));
-      },
-      goToPrevPage({ context: t, computed: e }) {
-        t.set("page", (n) => K(n - 1, e("totalPages")));
-      },
-      goToNextPage({ context: t, computed: e }) {
-        t.set("page", (n) => K(n + 1, e("totalPages")));
-      },
-      setPageIfNeeded({ context: t, computed: e }) {
-        e("isValidPage") || t.set("page", 1);
-      }
-    }
-  }
-}, K = (t, e) => Math.min(Math.max(t, 1), e);
-Q()([
-  "boundaryCount",
-  "count",
-  "dir",
-  "getRootNode",
-  "id",
-  "ids",
-  "onPageChange",
-  "onPageSizeChange",
-  "page",
-  "defaultPage",
-  "pageSize",
-  "defaultPageSize",
-  "siblingCount",
-  "translations",
-  "type",
-  "getPageUrl"
-]);
-Q()(["value", "type"]);
-Q()(["index"]);
-var vt = typeof globalThis.document < "u" ? xt : B;
-function W(t) {
-  const e = t().value ?? t().defaultValue, n = t().isEqual ?? Object.is, [a] = gt(e), [r, i] = gt(a), s = t().value !== void 0, c = E(r);
-  c.current = s ? t().value : r;
-  const u = E(c.current);
-  vt(() => {
-    u.current = c.current;
-  }, [r, t().value]);
-  const f = (g) => {
-    const m = u.current, l = F(g) ? g(m) : g;
-    t().debug && console.log(`[bindable > ${t().debug}] setValue`, { next: l, prev: m }), s || i(l), n(l, m) || t().onChange?.(l, m);
-  };
-  function P() {
-    return s ? t().value : r;
+import {
+  IconButton
+} from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import {
+  Button
+} from "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import "../chunk-6QCEPQ3U.mjs";
+
+// src/pagination/PaginationContext.tsx
+import * as pagination from "@zag-js/pagination";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+
+// src/pagination/utils.ts
+function sliceArrayWithIndex(arr, index, length) {
+  const relativeElements = (length - 1) / 2;
+  let start = Math.max(0, index - relativeElements);
+  let end = Math.min(arr.length, index + relativeElements + 1);
+  if (end - start < length) {
+    start = Math.max(0, Math.min(start, arr.length - length));
+    end = Math.min(arr.length, start + length);
   }
-  return {
-    initial: a,
-    ref: c,
-    get: P,
-    set(g) {
-      (t().sync ? J : Jt)(() => f(g));
-    },
-    invoke(g, m) {
-      t().onChange?.(g, m);
-    },
-    hash(g) {
-      return t().hash?.(g) ?? String(g);
-    }
-  };
-}
-W.cleanup = (t) => {
-  B(() => t, []);
-};
-W.ref = (t) => {
-  const e = E(t);
-  return {
-    get: () => e.current,
-    set: (n) => {
-      e.current = n;
-    }
-  };
-};
-function ye(t) {
-  const e = E(t);
-  return {
-    get(n) {
-      return e.current[n];
-    },
-    set(n, a) {
-      e.current[n] = a;
-    }
-  };
-}
-var he = (t, e) => {
-  const n = E(!1), a = E(!1);
-  B(() => {
-    if (n.current && a.current) return e();
-    a.current = !0;
-  }, [...(t ?? []).map((r) => typeof r == "function" ? r() : r)]), B(() => (n.current = !0, () => {
-    n.current = !1;
-  }), []);
-};
-function ve(t, e = {}) {
-  const n = Nt(() => {
-    const { id: o, ids: d, getRootNode: v } = e;
-    return ne({ id: o, ids: d, getRootNode: v });
-  }, [e]), a = (...o) => {
-    t.debug && console.log(...o);
-  }, r = t.props?.({ props: ht(e), scope: n }) ?? e, i = be(r), s = t.context?.({
-    prop: i,
-    bindable: W,
-    scope: n,
-    flush: ft,
-    getContext() {
-      return u;
-    },
-    getComputed() {
-      return C;
-    },
-    getRefs() {
-      return k;
-    },
-    getEvent() {
-      return l();
-    }
-  }), c = bt(s), u = {
-    get(o) {
-      return c.current?.[o].ref.current;
-    },
-    set(o, d) {
-      c.current?.[o].set(d);
-    },
-    initial(o) {
-      return c.current?.[o].initial;
-    },
-    hash(o) {
-      const d = c.current?.[o].get();
-      return c.current?.[o].hash(d);
-    }
-  }, f = E(/* @__PURE__ */ new Map()), P = E(null), g = E(null), m = E({ type: "" }), l = () => ({
-    ...m.current,
-    current() {
-      return m.current;
-    },
-    previous() {
-      return g.current;
-    }
-  }), y = () => ({
-    ...b,
-    matches(...o) {
-      return o.includes(b.ref.current);
-    },
-    hasTag(o) {
-      return !!t.states[b.ref.current]?.tags?.includes(o);
-    }
-  }), k = ye(t.refs?.({ prop: i, context: u }) ?? {}), T = () => ({
-    state: y(),
-    context: u,
-    event: l(),
-    prop: i,
-    send: st,
-    action: S,
-    guard: I,
-    track: he,
-    refs: k,
-    computed: C,
-    flush: ft,
-    scope: n,
-    choose: N
-  }), S = (o) => {
-    const d = F(o) ? o(T()) : o;
-    if (!d) return;
-    const v = d.map((h) => {
-      const x = t.implementations?.actions?.[h];
-      return x || ut(`[zag-js] No implementation found for action "${JSON.stringify(h)}"`), x;
-    });
-    for (const h of v)
-      h?.(T());
-  }, I = (o) => F(o) ? o(T()) : t.implementations?.guards?.[o](T()), D = (o) => {
-    const d = F(o) ? o(T()) : o;
-    if (!d) return;
-    const v = d.map((x) => {
-      const L = t.implementations?.effects?.[x];
-      return L || ut(`[zag-js] No implementation found for effect "${JSON.stringify(x)}"`), L;
-    }), h = [];
-    for (const x of v) {
-      const L = x?.(T());
-      L && h.push(L);
-    }
-    return () => h.forEach((x) => x?.());
-  }, N = (o) => Vt(o).find((d) => {
-    let v = !d.guard;
-    return q(d.guard) ? v = !!I(d.guard) : F(d.guard) && (v = d.guard(T())), v;
-  }), C = (o) => {
-    Qt(t.computed, () => "[zag-js] No computed object found on machine");
-    const d = t.computed[o];
-    return d({
-      context: u,
-      event: l(),
-      prop: i,
-      refs: k,
-      scope: n,
-      computed: C
-    });
-  }, b = W(() => ({
-    defaultValue: t.initialState({ prop: i }),
-    onChange(o, d) {
-      d && (f.current.get(d)?.(), f.current.delete(d)), d && S(t.states[d]?.exit), S(P.current?.actions);
-      const v = D(t.states[o]?.effects);
-      if (v && f.current.set(o, v), d === Z) {
-        S(t.entry);
-        const h = D(t.effects);
-        h && f.current.set(Z, h);
-      }
-      S(t.states[o]?.entry);
-    }
-  })), ot = E(void 0), z = E(j.NotStarted);
-  vt(() => {
-    queueMicrotask(() => {
-      const v = z.current === j.Started;
-      z.current = j.Started, a(v ? "rehydrating..." : "initializing...");
-      const h = ot.current ?? b.initial;
-      b.invoke(h, v ? b.get() : Z);
-    });
-    const o = f.current, d = b.ref.current;
-    return () => {
-      a("unmounting..."), ot.current = d, z.current = j.Stopped, o.forEach((v) => v?.()), f.current = /* @__PURE__ */ new Map(), P.current = null, queueMicrotask(() => {
-        S(t.exit);
-      });
-    };
-  }, []);
-  const St = () => "ref" in b ? b.ref.current : b.get(), st = (o) => {
-    queueMicrotask(() => {
-      if (z.current !== j.Started) return;
-      g.current = m.current, m.current = o;
-      let d = St();
-      const v = (
-        // @ts-ignore
-        t.states[d].on?.[o.type] ?? // @ts-ignore
-        t.on?.[o.type]
-      ), h = N(v);
-      if (!h) return;
-      P.current = h;
-      const x = h.target ?? d;
-      a("transition", o.type, h.target || d, `(${h.actions})`);
-      const L = x !== d;
-      L ? J(() => b.set(x)) : h.reenter && !L ? b.invoke(d, d) : S(h.actions ?? []);
-    });
-  };
-  return t.watch?.(T()), {
-    state: y(),
-    send: st,
-    context: u,
-    prop: i,
-    scope: n,
-    refs: k,
-    computed: C,
-    event: l(),
-    getStatus: () => z.current
-  };
-}
-function bt(t) {
-  const e = E(t);
-  return e.current = t, e;
-}
-function be(t) {
-  const e = bt(t);
-  return function(a) {
-    return e.current[a];
-  };
-}
-function ft(t) {
-  queueMicrotask(() => {
-    J(() => t());
-  });
+  return arr.slice(start, end);
 }
-var Te = re((t) => t);
-function Ee(t, e, n) {
-  const a = (n - 1) / 2;
-  let r = Math.max(0, e - a), i = Math.min(t.length, e + a + 1);
-  return i - r < n && (r = Math.max(0, Math.min(r, t.length - n)), i = Math.min(t.length, r + n)), t.slice(r, i);
-}
-const Tt = kt(null), Se = ({
-  children: t,
-  count: e,
-  visiblePageItems: n = 7,
-  pageSize: a,
-  page: r,
-  onPageChange: i,
-  noEllipsis: s,
-  type: c = "link"
+
+// src/pagination/PaginationContext.tsx
+import { jsx } from "react/jsx-runtime";
+var PaginationContext = createContext(null);
+var PaginationProvider = ({
+  children,
+  count,
+  visiblePageItems = 7,
+  pageSize,
+  page,
+  onPageChange,
+  noEllipsis,
+  type = "link"
 }) => {
-  const u = s ? 1 / 0 : Math.max(0, Math.floor((n - 5) / 2)), f = Ct(), P = ve(me, {
-    id: f,
-    count: e,
-    siblingCount: u,
-    pageSize: a,
-    page: r,
-    onPageChange: i,
-    type: c
-  }), g = Pe(P, Te), m = s ? Ee(g.pages, g.page - 1, n) : g.pages;
-  return /* @__PURE__ */ p(
-    Tt.Provider,
+  const siblingCount = noEllipsis ? Infinity : Math.max(0, Math.floor((visiblePageItems - 5) / 2));
+  const id = useId();
+  const service = useMachine(pagination.machine, {
+    id,
+    count,
+    siblingCount,
+    pageSize,
+    page,
+    onPageChange,
+    type
+  });
+  const api = pagination.connect(service, normalizeProps);
+  const pages = noEllipsis ? sliceArrayWithIndex(api.pages, api.page - 1, visiblePageItems) : api.pages;
+  return /* @__PURE__ */ jsx(
+    PaginationContext.Provider,
     {
       value: {
-        type: c,
+        type,
         pagination: {
-          ...g,
-          pages: m,
+          ...api,
+          pages,
           // Extending ZagJS anatomy
-          getFirstPageTriggerProps: () => ({
-            ...g.getPrevTriggerProps(),
-            id: `${g.getRootProps().id}:first`,
-            "data-part": "first-page-trigger",
-            onClick: g.goToFirstPage
-          }),
-          getLastPageTriggerProps: () => ({
-            ...g.getNextTriggerProps(),
-            id: `${g.getRootProps().id}:last`,
-            "data-part": "last-page-trigger",
-            onClick: g.goToLastPage
-          })
+          getFirstPageTriggerProps: () => {
+            return {
+              ...api.getPrevTriggerProps(),
+              id: `${api.getRootProps().id}:first`,
+              "data-part": "first-page-trigger",
+              onClick: api.goToFirstPage
+            };
+          },
+          getLastPageTriggerProps: () => {
+            return {
+              ...api.getNextTriggerProps(),
+              id: `${api.getRootProps().id}:last`,
+              "data-part": "last-page-trigger",
+              onClick: api.goToLastPage
+            };
+          }
         }
       },
-      children: t
+      children
     }
   );
-}, w = () => {
-  const t = At(Tt);
-  if (!t)
+};
+var usePagination = () => {
+  const context = useContext(PaginationContext);
+  if (!context) {
     throw Error("usePagination must be used within a Pagination provider");
-  return t;
-}, Et = ({
-  children: t,
-  visiblePageItems: e = 5,
-  type: n = "link",
-  noEllipsis: a = !1,
-  className: r,
-  ...i
-}) => /* @__PURE__ */ p(
-  Se,
-  {
-    visiblePageItems: e,
-    noEllipsis: a,
-    type: n,
-    ...i,
-    children: /* @__PURE__ */ p(Ne, { className: r, children: t })
   }
-), Ne = ({
-  children: t,
-  className: e
+  return context;
+};
+
+// src/pagination/Pagination.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Pagination = ({
+  children,
+  visiblePageItems = 5,
+  type = "link",
+  noEllipsis = false,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx2(
+    PaginationProvider,
+    {
+      visiblePageItems,
+      noEllipsis,
+      type,
+      ...rest,
+      children: /* @__PURE__ */ jsx2(PaginationWrapper, { className, children })
+    }
+  );
+};
+var PaginationWrapper = ({
+  children,
+  className
 }) => {
-  const { pagination: n } = w(), a = n.getRootProps();
-  return /* @__PURE__ */ p("nav", { "data-spark-component": "pagination", ...a, className: e, children: /* @__PURE__ */ p("ul", { className: "gap-md flex flex-wrap", children: t }) });
+  const { pagination: pagination2 } = usePagination();
+  const props = pagination2.getRootProps();
+  return /* @__PURE__ */ jsx2("nav", { "data-spark-component": "pagination", ...props, className, children: /* @__PURE__ */ jsx2("ul", { className: "gap-md flex flex-wrap", children }) });
 };
-Et.displayName = "Pagination";
-const Y = ({ children: t, index: e, className: n, ref: a, ...r }) => {
-  const { pagination: i } = w(), s = i.getEllipsisProps({ index: e }), c = {
-    className: Lt("flex size-sz-44 items-center justify-center", n),
-    ...r
-  }, u = O(s, c);
-  return /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p("span", { "data-spark-component": "pagination-ellipsis", ref: a, ...u, children: t || "…" }) });
+Pagination.displayName = "Pagination";
+
+// src/pagination/PaginationEllipsis.tsx
+import { mergeProps } from "@zag-js/react";
+import { cx } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Ellipsis = ({ children, index, className, ref, ...rest }) => {
+  const { pagination: pagination2 } = usePagination();
+  const apiProps = pagination2.getEllipsisProps({ index });
+  const localProps = {
+    className: cx("flex size-sz-44 items-center justify-center", className),
+    ...rest
+  };
+  const mergedProps = mergeProps(apiProps, localProps);
+  return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3("span", { "data-spark-component": "pagination-ellipsis", ref, ...mergedProps, children: children || "\u2026" }) });
 };
-Y.displayName = "Pagination.Ellipsis";
-const tt = ({
-  children: t,
-  className: e,
-  href: n,
-  ref: a,
-  ...r
+Ellipsis.displayName = "Pagination.Ellipsis";
+
+// src/pagination/PaginationFirstPageTrigger.tsx
+import { ArrowDoubleLeft } from "@spark-ui/icons/ArrowDoubleLeft";
+import { mergeProps as mergeProps2 } from "@zag-js/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FirstPageTrigger = ({
+  children,
+  className,
+  href,
+  ref,
+  ...props
 }) => {
-  const { pagination: i, type: s } = w(), c = i.getFirstPageTriggerProps(), u = s === "link" && c["data-disabled"] === "", f = {
+  const { pagination: pagination2, type } = usePagination();
+  const apiProps = pagination2.getFirstPageTriggerProps();
+  const shouldDisableLink = type === "link" && apiProps["data-disabled"] === "";
+  const localProps = {
     "data-spark-component": "pagination-first-page-trigger",
     intent: "support",
     design: "contrast",
-    ...r,
-    className: e,
-    ...u && {
-      disabled: !0,
+    ...props,
+    className,
+    ...shouldDisableLink && {
+      disabled: true,
       role: "link",
-      "aria-disabled": !0
+      "aria-disabled": true
     }
-  }, P = O(
-    c,
-    f
-  ), g = t || /* @__PURE__ */ p(U, { children: /* @__PURE__ */ p(Rt, {}) });
-  return /* @__PURE__ */ p("li", { children: n ? /* @__PURE__ */ p(R, { ref: a, ...P, asChild: !0, children: /* @__PURE__ */ p("a", { href: u ? void 0 : n, children: g }) }) : /* @__PURE__ */ p(R, { ref: a, ...P, children: g }) });
+  };
+  const mergedProps = mergeProps2(
+    apiProps,
+    localProps
+  );
+  const content = children || /* @__PURE__ */ jsx4(Icon, { children: /* @__PURE__ */ jsx4(ArrowDoubleLeft, {}) });
+  return /* @__PURE__ */ jsx4("li", { children: href ? /* @__PURE__ */ jsx4(IconButton, { ref, ...mergedProps, asChild: true, children: /* @__PURE__ */ jsx4("a", { href: shouldDisableLink ? void 0 : href, children: content }) }) : /* @__PURE__ */ jsx4(IconButton, { ref, ...mergedProps, children: content }) });
 };
-tt.displayName = "Pagination.FirstPageTrigger";
-const et = ({ children: t, value: e, className: n, href: a, ref: r, ...i }) => {
-  const { pagination: s } = w(), c = s.getItemProps({ type: "page", value: e }), u = {
+FirstPageTrigger.displayName = "Pagination.FirstPageTrigger";
+
+// src/pagination/PaginationItem.tsx
+import { mergeProps as mergeProps3 } from "@zag-js/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Item = ({ children, value, className, href, ref, ...props }) => {
+  const { pagination: pagination2 } = usePagination();
+  const apiProps = pagination2.getItemProps({ type: "page", value });
+  const localProps = {
     "data-spark-component": "pagination-item",
     intent: "support",
-    design: c["aria-current"] === "page" ? "filled" : "contrast",
-    className: n,
-    ...i
-  }, f = O(c, u);
-  return /* @__PURE__ */ p("li", { children: a ? /* @__PURE__ */ p(ct, { ref: r, ...f, asChild: !0, children: /* @__PURE__ */ p("a", { href: a, children: t || e }) }) : /* @__PURE__ */ p(ct, { ref: r, ...f, children: t || e }) });
+    design: apiProps["aria-current"] === "page" ? "filled" : "contrast",
+    className,
+    ...props
+  };
+  const mergedProps = mergeProps3(apiProps, localProps);
+  return /* @__PURE__ */ jsx5("li", { children: href ? /* @__PURE__ */ jsx5(Button, { ref, ...mergedProps, asChild: true, children: /* @__PURE__ */ jsx5("a", { href, children: children || value }) }) : /* @__PURE__ */ jsx5(Button, { ref, ...mergedProps, children: children || value }) });
 };
-et.displayName = "Pagination.Item";
-const nt = ({
-  children: t,
-  className: e,
-  href: n,
-  ref: a,
-  ...r
+Item.displayName = "Pagination.Item";
+
+// src/pagination/PaginationLastPageTrigger.tsx
+import { ArrowDoubleRight } from "@spark-ui/icons/ArrowDoubleRight";
+import { mergeProps as mergeProps4 } from "@zag-js/react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var LastPageTrigger = ({
+  children,
+  className,
+  href,
+  ref,
+  ...props
 }) => {
-  const { pagination: i, type: s } = w(), c = i.getLastPageTriggerProps(), u = s === "link" && c["data-disabled"] === "", f = {
+  const { pagination: pagination2, type } = usePagination();
+  const apiProps = pagination2.getLastPageTriggerProps();
+  const shouldDisableLink = type === "link" && apiProps["data-disabled"] === "";
+  const localProps = {
     "data-spark-component": "pagination-last-page-trigger",
     intent: "support",
     design: "contrast",
-    ...r,
-    className: e,
-    ...u && {
-      disabled: !0,
+    ...props,
+    className,
+    ...shouldDisableLink && {
+      disabled: true,
       role: "link",
-      "aria-disabled": !0
+      "aria-disabled": true
     }
-  }, P = O(
-    c,
-    f
-  ), g = t || /* @__PURE__ */ p(U, { children: /* @__PURE__ */ p(wt, {}) });
-  return /* @__PURE__ */ p("li", { children: n ? /* @__PURE__ */ p(R, { ref: a, ...P, asChild: !0, children: /* @__PURE__ */ p("a", { href: u ? void 0 : n, children: g }) }) : /* @__PURE__ */ p(R, { ref: a, ...P, children: g }) });
+  };
+  const mergedProps = mergeProps4(
+    apiProps,
+    localProps
+  );
+  const content = children || /* @__PURE__ */ jsx6(Icon, { children: /* @__PURE__ */ jsx6(ArrowDoubleRight, {}) });
+  return /* @__PURE__ */ jsx6("li", { children: href ? /* @__PURE__ */ jsx6(IconButton, { ref, ...mergedProps, asChild: true, children: /* @__PURE__ */ jsx6("a", { href: shouldDisableLink ? void 0 : href, children: content }) }) : /* @__PURE__ */ jsx6(IconButton, { ref, ...mergedProps, children: content }) });
 };
-nt.displayName = "Pagination.LastPageTrigger";
-const rt = ({ children: t, className: e, href: n, ref: a, ...r }) => {
-  const { pagination: i, type: s } = w(), c = i.getNextTriggerProps(), u = s === "link" && c["data-disabled"] === "", f = {
+LastPageTrigger.displayName = "Pagination.LastPageTrigger";
+
+// src/pagination/PaginationNextTrigger.tsx
+import { ArrowVerticalRight } from "@spark-ui/icons/ArrowVerticalRight";
+import { mergeProps as mergeProps5 } from "@zag-js/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NextTrigger = ({ children, className, href, ref, ...props }) => {
+  const { pagination: pagination2, type } = usePagination();
+  const apiProps = pagination2.getNextTriggerProps();
+  const shouldDisableLink = type === "link" && apiProps["data-disabled"] === "";
+  const localProps = {
     "data-spark-component": "pagination-next-trigger",
     intent: "support",
     design: "contrast",
-    ...r,
-    className: e,
-    ...u && {
-      disabled: !0,
+    ...props,
+    className,
+    ...shouldDisableLink && {
+      disabled: true,
       role: "link",
-      "aria-disabled": !0
+      "aria-disabled": true
     }
-  }, P = O(
-    c,
-    f
-  ), g = t || /* @__PURE__ */ p(U, { children: /* @__PURE__ */ p(It, {}) });
-  return /* @__PURE__ */ p("li", { children: n ? /* @__PURE__ */ p(R, { ref: a, ...P, asChild: !0, children: /* @__PURE__ */ p("a", { href: u ? void 0 : n, children: g }) }) : /* @__PURE__ */ p(R, { ref: a, ...P, children: g }) });
+  };
+  const mergedProps = mergeProps5(
+    apiProps,
+    localProps
+  );
+  const content = children || /* @__PURE__ */ jsx7(Icon, { children: /* @__PURE__ */ jsx7(ArrowVerticalRight, {}) });
+  return /* @__PURE__ */ jsx7("li", { children: href ? /* @__PURE__ */ jsx7(IconButton, { ref, ...mergedProps, asChild: true, children: /* @__PURE__ */ jsx7("a", { href: shouldDisableLink ? void 0 : href, children: content }) }) : /* @__PURE__ */ jsx7(IconButton, { ref, ...mergedProps, children: content }) });
 };
-rt.displayName = "Pagination.NextTrigger";
-const at = ({ children: t }) => {
-  const { pagination: e } = w();
-  return t(e);
+NextTrigger.displayName = "Pagination.NextTrigger";
+
+// src/pagination/PaginationPages.tsx
+var Pages = ({ children }) => {
+  const { pagination: pagination2 } = usePagination();
+  return children(pagination2);
 };
-at.displayName = "Pagination.Pages";
-const it = ({ children: t, className: e, href: n, ref: a, ...r }) => {
-  const { pagination: i, type: s } = w(), c = i.getPrevTriggerProps(), u = s === "link" && c["data-disabled"] === "", f = {
+Pages.displayName = "Pagination.Pages";
+
+// src/pagination/PaginationPrevTrigger.tsx
+import { ArrowVerticalLeft } from "@spark-ui/icons/ArrowVerticalLeft";
+import { mergeProps as mergeProps6 } from "@zag-js/react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var PrevTrigger = ({ children, className, href, ref, ...props }) => {
+  const { pagination: pagination2, type } = usePagination();
+  const apiProps = pagination2.getPrevTriggerProps();
+  const shouldDisableLink = type === "link" && apiProps["data-disabled"] === "";
+  const localProps = {
     "data-spark-component": "pagination-prev-trigger",
     intent: "support",
     design: "contrast",
-    ...r,
-    className: e,
-    ...u && {
-      disabled: !0,
+    ...props,
+    className,
+    ...shouldDisableLink && {
+      disabled: true,
       role: "link",
-      "aria-disabled": !0
+      "aria-disabled": true
     }
-  }, P = O(
-    c,
-    f
-  ), g = t || /* @__PURE__ */ p(U, { children: /* @__PURE__ */ p(_t, {}) });
-  return /* @__PURE__ */ p("li", { children: n ? /* @__PURE__ */ p(R, { ref: a, ...P, asChild: !0, children: /* @__PURE__ */ p("a", { href: u ? void 0 : n, children: g }) }) : /* @__PURE__ */ p(R, { ref: a, ...P, children: g }) });
+  };
+  const mergedProps = mergeProps6(
+    apiProps,
+    localProps
+  );
+  const content = children || /* @__PURE__ */ jsx8(Icon, { children: /* @__PURE__ */ jsx8(ArrowVerticalLeft, {}) });
+  return /* @__PURE__ */ jsx8("li", { children: href ? /* @__PURE__ */ jsx8(IconButton, { ref, ...mergedProps, asChild: true, children: /* @__PURE__ */ jsx8("a", { href: shouldDisableLink ? void 0 : href, children: content }) }) : /* @__PURE__ */ jsx8(IconButton, { ref, ...mergedProps, children: content }) });
 };
-it.displayName = "Pagination.PrevTrigger";
-const xe = Object.assign(Et, {
-  PrevTrigger: it,
-  NextTrigger: rt,
-  Pages: at,
-  Item: et,
-  Ellipsis: Y,
-  FirstPageTrigger: tt,
-  LastPageTrigger: nt
+PrevTrigger.displayName = "Pagination.PrevTrigger";
+
+// src/pagination/index.ts
+var Pagination2 = Object.assign(Pagination, {
+  PrevTrigger,
+  NextTrigger,
+  Pages,
+  Item,
+  Ellipsis,
+  FirstPageTrigger,
+  LastPageTrigger
 });
-xe.displayName = "Pagination";
-it.displayName = "Pagination.PrevTrigger";
-rt.displayName = "Pagination.NextTrigger";
-at.displayName = "Pagination.Pages";
-et.displayName = "Pagination.Item";
-Y.displayName = "Pagination.Ellipsis";
-tt.displayName = "Pagination.FirstPageTrigger";
-nt.displayName = "Pagination.LastPageTrigger";
+Pagination2.displayName = "Pagination";
+PrevTrigger.displayName = "Pagination.PrevTrigger";
+NextTrigger.displayName = "Pagination.NextTrigger";
+Pages.displayName = "Pagination.Pages";
+Item.displayName = "Pagination.Item";
+Ellipsis.displayName = "Pagination.Ellipsis";
+FirstPageTrigger.displayName = "Pagination.FirstPageTrigger";
+LastPageTrigger.displayName = "Pagination.LastPageTrigger";
 export {
-  xe as Pagination
+  Pagination2 as Pagination
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map