npm - @7span/react-list - Versions diffs - 0.0.1 - Mend

@7span/react-list 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/react-list.js ADDED Viewed

@@ -0,0 +1,859 @@
+import { jsx as l, jsxs as M } from "react/jsx-runtime";
+import { createContext as D, useContext as j, useState as O, useMemo as g, memo as R, useCallback as T, useEffect as I, useTransition as $, useRef as q } from "react";
+const E = D(null), F = ({ children: i, config: c }) => {
+  const { requestHandler: r, stateManager: t = {} } = c, [o, n] = O({
+    data: [],
+    response: null,
+    error: null,
+    count: 0,
+    selection: [],
+    pagination: {
+      page: 1,
+      perPage: 25
+    },
+    loader: {
+      isLoading: !1,
+      initialLoading: !0
+    },
+    sort: {
+      sortBy: null,
+      sortOrder: "desc"
+    },
+    search: "",
+    filters: {},
+    attrs: [],
+    isEmpty: !0,
+    isInitializing: !0
+  });
+  if (!r)
+    throw new Error("ListProvider: requestHandler is required.");
+  const s = g(
+    () => ({
+      requestHandler: r,
+      stateManager: t,
+      listState: o,
+      setListState: n
+    }),
+    [r, t, o]
+  );
+  return /* @__PURE__ */ l(E.Provider, { value: s, children: i });
+}, k = () => {
+  const i = j(E);
+  if (!i)
+    throw new Error("useListContext must be used within a ListProvider");
+  return i;
+}, G = R(({ children: i, renderAttribute: c }) => {
+  const { listState: r } = k(), { attrs: t, attrSettings: o, updateAttr: n } = r, s = {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px",
+      padding: "12px"
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "pointer",
+      fontSize: "14px"
+    },
+    checkbox: {
+      width: "16px",
+      height: "16px",
+      cursor: "pointer"
+    }
+  }, f = T(
+    (h) => (u) => {
+      n(h, "visible", u.target.checked);
+    },
+    [n]
+  ), a = g(
+    () => ({
+      attrs: t,
+      attrSettings: o,
+      updateAttr: n,
+      styles: s
+    }),
+    [t, o, n]
+  );
+  return i ? i(a) : /* @__PURE__ */ l("div", { className: "react-list-attributes", style: s.container, children: t.map((h, u) => {
+    var d;
+    return c ? c({
+      key: `attr-${u}`,
+      attr: h,
+      updateAttr: n,
+      attrSettings: o,
+      styles: s
+    }) : /* @__PURE__ */ M("label", { style: s.label, children: [
+      /* @__PURE__ */ l("span", { children: h.label }),
+      /* @__PURE__ */ l(
+        "input",
+        {
+          type: "checkbox",
+          checked: ((d = o == null ? void 0 : o[h.name]) == null ? void 0 : d.visible) ?? !1,
+          onChange: f(h.name),
+          style: s.checkbox
+        }
+      )
+    ] }, `attr-${u}`);
+  }) });
+}), J = R(({ children: i }) => {
+  const { listState: c } = k(), { data: r, loader: t, error: o } = c, { isLoading: n, initialLoading: s } = t, f = g(
+    () => ({
+      container: {
+        width: "100%",
+        padding: "32px 16px"
+      },
+      defaultMessage: {
+        textAlign: "center",
+        color: "#6B7280",
+        fontSize: "16px",
+        fontWeight: "400"
+      }
+    }),
+    []
+  );
+  return (r == null ? void 0 : r.length) > 0 || s || n || o ? null : /* @__PURE__ */ l("div", { className: "react-list-empty", style: f.container, children: i || /* @__PURE__ */ l("div", { style: f.defaultMessage, children: /* @__PURE__ */ l("p", { children: "No data found!" }) }) });
+}), K = R(({ children: i }) => {
+  const { listState: c } = k(), { error: r, loader: t } = c, { isLoading: o } = t, n = g(
+    () => ({
+      container: {
+        width: "100%",
+        padding: "32px 16px"
+      },
+      errorContent: {
+        textAlign: "center",
+        color: "#DC2626",
+        padding: "32px 0"
+      },
+      heading: {
+        fontSize: "16px",
+        fontWeight: "500",
+        marginBottom: "8px"
+      },
+      message: {
+        fontSize: "14px",
+        fontFamily: "monospace",
+        marginTop: "8px",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word"
+      }
+    }),
+    []
+  );
+  return !r || o ? null : i ? i({ error: r }) : /* @__PURE__ */ l("div", { className: "react-list-error", style: n.container, children: /* @__PURE__ */ M("div", { style: n.errorContent, children: [
+    /* @__PURE__ */ l("h3", { style: n.heading, children: "Error occurred" }),
+    /* @__PURE__ */ M("pre", { style: n.message, children: [
+      r.name,
+      ": ",
+      r.message
+    ] })
+  ] }) });
+}), Q = R(({ children: i }) => {
+  const { listState: c } = k(), { data: r, count: t, pagination: o, setPage: n, loader: s, error: f } = c, { page: a, perPage: h } = o, { initialLoading: u, isLoading: d } = s, y = g(
+    () => ({
+      container: {
+        display: "inline-block",
+        minWidth: "120px"
+      },
+      select: {
+        width: "100%",
+        padding: "8px 12px",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        fontSize: "14px",
+        backgroundColor: "#fff",
+        cursor: "pointer",
+        outline: "none"
+      }
+    }),
+    []
+  ), { pages: P, pagesCount: w } = g(() => {
+    const L = Math.ceil(t / h);
+    return { pages: Array.from({ length: L }, (v, C) => C + 1), pagesCount: L };
+  }, [t, h]), p = T(
+    (L) => {
+      n(Number(L.target.value));
+    },
+    [n]
+  ), e = g(
+    () => ({
+      setPage: n,
+      page: a,
+      pages: P,
+      pagesCount: w,
+      styles: y
+    }),
+    [n, a, P, w, y]
+  );
+  return u || !r || r.length === 0 || f ? null : i ? i(e) : /* @__PURE__ */ l("div", { className: "react-list-go-to", style: y.container, children: /* @__PURE__ */ l("select", { value: a, onChange: p, style: y.select, children: P.map((L) => /* @__PURE__ */ M("option", { value: L, children: [
+    "Page ",
+    L
+  ] }, `page-${L}`)) }) });
+}), U = R(({ children: i }) => {
+  const { listState: c } = k(), { loader: r } = c, { initialLoading: t } = r, o = g(
+    () => ({
+      container: {
+        padding: "20px",
+        textAlign: "center"
+      },
+      defaultLoader: {
+        fontSize: "16px",
+        color: "#4B5563",
+        margin: 0,
+        animation: "pulse 1.5s infinite ease-in-out"
+      },
+      "@keyframes pulse": {
+        "0%": { opacity: 0.6 },
+        "50%": { opacity: 1 },
+        "100%": { opacity: 0.6 }
+      }
+    }),
+    []
+  ), n = g(
+    () => ({
+      loading: t,
+      styles: o
+    }),
+    [t]
+  );
+  return t ? /* @__PURE__ */ l("div", { className: "react-list-initial-loader", style: o.container, children: i ? i(n) : /* @__PURE__ */ l("p", { style: o.defaultLoader, children: "Initial Loading..." }) }) : null;
+}), V = R(({ children: i, renderItem: c }) => {
+  const { listState: r } = k(), { data: t = [], loader: o, error: n } = r, { initialLoading: s, isLoading: f } = o, a = g(
+    () => ({
+      container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        width: "100%"
+      },
+      itemWrapper: {
+        width: "100%"
+      },
+      defaultItem: {
+        padding: "12px",
+        backgroundColor: "#f9fafb",
+        borderRadius: "4px",
+        fontFamily: "monospace",
+        fontSize: "14px",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        overflow: "auto"
+      }
+    }),
+    []
+  ), h = g(
+    () => ({
+      items: t,
+      styles: a
+    }),
+    [t, a]
+  );
+  return s || !t || t.length === 0 || n ? null : c ? /* @__PURE__ */ l("div", { className: "react-list-items", style: a.container, children: t.map((u, d) => /* @__PURE__ */ l("div", { style: a.itemWrapper, children: c({ item: u, index: d, styles: a }) }, u.id || d)) }) : typeof i == "function" ? /* @__PURE__ */ l("div", { className: "react-list-items", style: a.container, children: i(h) }) : /* @__PURE__ */ l("div", { className: "react-list-items", style: a.container, children: t.map((u, d) => /* @__PURE__ */ l("pre", { style: a.defaultItem, children: JSON.stringify(u, null, 2) }, u.id || d)) });
+}), X = ({
+  children: i,
+  endpoint: c,
+  page: r = 1,
+  perPage: t = 25,
+  sortBy: o,
+  sortOrder: n = "desc",
+  search: s = "",
+  filters: f = {},
+  attrs: a,
+  version: h = 1,
+  hasPaginationHistory: u = !0,
+  paginationMode: d = "pagination",
+  meta: y = {}
+}) => {
+  const { requestHandler: P, setListState: w } = k(), p = d === "loadMore", [e, L] = O({
+    page: r,
+    perPage: t,
+    sortBy: o,
+    sortOrder: n,
+    search: s,
+    filters: f,
+    attrSettings: {},
+    items: [],
+    selection: [],
+    error: null,
+    response: null,
+    count: 0,
+    isLoading: !1,
+    initializingState: !0
+  }), z = T(
+    async (b = {}, x = null) => {
+      e.initializingState || L((m) => ({ ...m, error: null, isLoading: !0 }));
+      try {
+        const m = x || e, S = await P({
+          endpoint: c,
+          version: h,
+          meta: y,
+          page: m.page,
+          perPage: m.perPage,
+          search: m.search,
+          sortBy: m.sortBy,
+          sortOrder: m.sortOrder,
+          filters: m.filters,
+          ...b
+        });
+        L((B) => ({
+          ...B,
+          response: S,
+          selection: [],
+          // Append items for loadMore, replace for pagination
+          items: p ? [...B.items, ...S.items] : S.items,
+          count: S.count,
+          initializingState: !1,
+          isLoading: !1
+        }));
+      } catch (m) {
+        throw L((S) => ({
+          ...S,
+          error: m,
+          items: [],
+          count: 0,
+          initializingState: !1,
+          isLoading: !1
+        })), m;
+      }
+    },
+    [c, h, p, y, P, e]
+  ), v = g(
+    () => ({
+      setPage: (b, x) => {
+        let m = b;
+        b === 0 && (m = "");
+        const S = { ...e, page: m };
+        L(S), m && z(x, S);
+      },
+      setPerPage: (b) => {
+        const x = { ...e, perPage: b, page: 1 };
+        L(x), z({}, x);
+      },
+      setSearch: (b) => {
+        if (b !== e.search) {
+          const x = { ...e, search: b, page: 1 };
+          L(x), z({}, x);
+        }
+      },
+      setSort: ({ by: b, order: x }) => {
+        const m = { ...e, sortBy: b, sortOrder: x, page: 1 };
+        L(m), z({}, m);
+      },
+      loadMore: () => {
+        const b = { ...e, page: e.page + 1 };
+        L(b), z({}, b);
+      },
+      refresh: (b = { isRefresh: !0 }) => {
+        if (p) {
+          const x = { ...e, page: 1, items: [] };
+          L(x), z(b, x);
+        } else
+          z(b);
+      },
+      setFilters: (b) => {
+        const x = { ...e, filters: b, page: 1 };
+        L(x), z({}, x);
+      },
+      setSelection: (b) => L((x) => ({ ...x, selection: b }))
+    }),
+    [z, p, e]
+  ), C = g(
+    () => ({
+      data: e.items,
+      response: e.response,
+      error: e.error,
+      count: e.count,
+      selection: e.selection,
+      pagination: {
+        page: e.page,
+        perPage: e.perPage,
+        hasMore: e.items.length < e.count
+      },
+      loader: {
+        isLoading: e.isLoading,
+        initialLoading: e.initializingState
+      },
+      sort: { sortBy: e.sortBy, sortOrder: e.sortOrder },
+      search: e.search,
+      filters: e.filters,
+      attrs: a || Object.keys(e.items[0] || {}),
+      isEmpty: e.items.length === 0,
+      ...v
+    }),
+    [
+      e.items,
+      e.response,
+      e.error,
+      e.count,
+      e.selection,
+      e.page,
+      e.perPage,
+      e.isLoading,
+      e.initializingState,
+      e.sortBy,
+      e.sortOrder,
+      e.search,
+      e.filters,
+      v,
+      a
+    ]
+  );
+  return I(() => {
+    e.initializingState && v.setPage(e.page);
+  }, []), I(() => {
+    w(C);
+  }, [
+    w,
+    e.items,
+    e.count,
+    e.error,
+    e.isLoading,
+    e.selection,
+    e.page,
+    e.perPage
+  ]), i({ ...C });
+}, Y = R(({ children: i }) => {
+  const { listState: c } = k(), { data: r, count: t, pagination: o, setPage: n, loader: s, error: f } = c, { page: a, perPage: h } = o, { isLoading: u } = s, d = g(
+    () => a * h < t,
+    [a, h, t]
+  ), y = T(() => {
+    d && !u && n(a + 1);
+  }, [d, u, n, a]), P = g(
+    () => ({
+      button: {
+        padding: "8px 16px",
+        backgroundColor: "#4B5563",
+        color: "#ffffff",
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+        opacity: u || !d ? 0.5 : 1,
+        pointerEvents: u || !d ? "none" : "auto"
+      }
+    }),
+    [u, d]
+  ), w = g(
+    () => ({
+      isLoading: u,
+      loadMore: y,
+      hasMoreItems: d,
+      styles: P
+    }),
+    [u, y, d, P]
+  );
+  return !r || r.length === 0 || f ? null : i(w);
+}), Z = R(({ children: i, position: c = "overlay" }) => {
+  const { listState: r } = k(), { loader: t } = r, { isLoading: o, initializingState: n } = t, s = g(
+    () => ({
+      overlay: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(255, 255, 255, 0.5)",
+        zIndex: 10
+      },
+      before: {
+        marginBottom: "16px"
+      },
+      after: {
+        marginTop: "16px"
+      },
+      defaultLoader: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%"
+      },
+      loadingText: {
+        color: "#4B5563",
+        fontSize: "14px"
+      }
+    }),
+    []
+  ), f = g(
+    () => ({
+      overlay: s.overlay,
+      before: s.before,
+      after: s.after
+    }),
+    [s]
+  ), a = g(
+    () => ({
+      isLoading: o,
+      styles: s
+    }),
+    [o, s]
+  );
+  return !n && !o ? null : /* @__PURE__ */ l("div", { style: f[c] || {}, children: i ? i(a) : /* @__PURE__ */ l("div", { style: s.defaultLoader, children: /* @__PURE__ */ l("p", { style: s.loadingText, children: "Loading..." }) }) });
+}), ee = R(
+  ({
+    children: i,
+    pageLinks: c = 5,
+    renderFirst: r,
+    renderPrev: t,
+    renderPages: o,
+    renderPage: n,
+    renderNext: s,
+    renderLast: f
+  }) => {
+    const { listState: a } = k(), { data: h, count: u, pagination: d, setPage: y, loader: P, error: w } = a, { page: p, perPage: e } = d, { initialLoading: L, isLoading: z } = P, v = g(
+      () => ({
+        container: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        },
+        button: {
+          padding: "4px 8px",
+          border: "1px solid #e5e7eb",
+          borderRadius: "4px",
+          cursor: "pointer",
+          backgroundColor: "#ffffff",
+          minWidth: "60px",
+          fontSize: "14px"
+        },
+        disabledButton: {
+          opacity: 0.5,
+          cursor: "not-allowed"
+        },
+        pagesContainer: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px"
+        },
+        activePageSpan: {
+          padding: "4px 8px",
+          backgroundColor: "#2563eb",
+          color: "#ffffff",
+          borderRadius: "4px",
+          minWidth: "32px",
+          textAlign: "center"
+        },
+        pageButton: {
+          padding: "4px 8px",
+          border: "1px solid #e5e7eb",
+          borderRadius: "4px",
+          minWidth: "32px",
+          textAlign: "center",
+          cursor: "pointer",
+          backgroundColor: "#ffffff",
+          ":hover": {
+            backgroundColor: "#f3f4f6"
+          }
+        }
+      }),
+      []
+    ), C = g(() => {
+      const S = Math.ceil(u / e), B = Math.floor(c / 2), N = p * e < u;
+      return { pagesCount: S, halfWay: B, hasNext: N, hasPrev: p !== 1 };
+    }, [u, e, p, c]), b = g(() => {
+      const { pagesCount: S, halfWay: B } = C, N = Array.from({ length: Math.min(c, S) });
+      return p <= B ? N.map((A, W) => W + 1) : S - p < B ? N.map((A, W) => S - W).reverse() : N.map((A, W) => p - B + W);
+    }, [p, c, C]), x = g(
+      () => ({
+        prev: () => y(p - 1),
+        next: () => y(p + 1),
+        first: () => y(1),
+        last: () => y(C.pagesCount),
+        setPage: (S) => y(S)
+      }),
+      [y, p, C.pagesCount]
+    ), m = g(
+      () => ({
+        page: p,
+        perPage: e,
+        count: u,
+        ...C,
+        pagesToDisplay: b,
+        ...x,
+        styles: v
+      }),
+      [
+        p,
+        e,
+        u,
+        C,
+        b,
+        x,
+        v
+      ]
+    );
+    return L || !h || h.length === 0 || w ? null : i ? i(m) : /* @__PURE__ */ M("div", { style: v.container, children: [
+      r ? r(m) : /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          disabled: !C.hasPrev,
+          onClick: x.first,
+          style: {
+            ...v.button,
+            ...!C.hasPrev && v.disabledButton
+          },
+          children: "First"
+        }
+      ),
+      t ? t(m) : /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          disabled: !C.hasPrev,
+          onClick: x.prev,
+          style: {
+            ...v.button,
+            ...!C.hasPrev && v.disabledButton
+          },
+          children: "Prev"
+        }
+      ),
+      o ? o(m) : /* @__PURE__ */ l("div", { style: v.pagesContainer, children: b.map((S) => {
+        const B = S === p, N = { ...m, page: S, isActive: B };
+        return n ? n(N) : /* @__PURE__ */ l("div", { children: B ? /* @__PURE__ */ l("span", { style: v.activePageSpan, children: S }) : /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: () => x.setPage(S),
+            style: v.pageButton,
+            children: S
+          }
+        ) }, `page-${S}`);
+      }) }),
+      s ? s(m) : /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          disabled: !C.hasNext,
+          onClick: x.next,
+          style: {
+            ...v.button,
+            ...!C.hasNext && v.disabledButton
+          },
+          children: "Next"
+        }
+      ),
+      f ? f(m) : /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          disabled: !C.hasNext,
+          onClick: x.last,
+          style: {
+            ...v.button,
+            ...!C.hasNext && v.disabledButton
+          },
+          children: "Last"
+        }
+      )
+    ] });
+  }
+), te = R(
+  ({ children: i, options: c = [10, 25, 50, 100] }) => {
+    const { listState: r } = k(), { data: t, pagination: o, setPerPage: n, loader: s, error: f } = r, { perPage: a } = o, { initialLoading: h, isLoading: u } = s, d = g(
+      () => ({
+        container: {
+          display: "inline-block",
+          minWidth: "150px"
+        },
+        select: {
+          width: "100%",
+          padding: "8px 12px",
+          border: "1px solid #e5e7eb",
+          borderRadius: "4px",
+          fontSize: "14px",
+          backgroundColor: "#ffffff",
+          cursor: "pointer",
+          outline: "none"
+        }
+      }),
+      []
+    ), y = g(() => c.map((p) => typeof p != "object" ? {
+      value: p,
+      label: p
+    } : p), [c]), P = T(
+      (p) => {
+        n(Number(p.target.value));
+      },
+      [n]
+    ), w = g(
+      () => ({
+        perPage: a,
+        setPerPage: n,
+        options: y,
+        styles: d
+      }),
+      [a, n, y, d]
+    );
+    return h || !t || t.length === 0 || f ? null : i ? i(w) : /* @__PURE__ */ l("div", { className: "react-list-per-page", style: d.container, children: /* @__PURE__ */ l(
+      "select",
+      {
+        value: a,
+        onChange: P,
+        style: d.select,
+        children: y.map((p) => /* @__PURE__ */ M("option", { value: p.value, children: [
+          p.label,
+          " items per page"
+        ] }, `option-${p.value}`))
+      }
+    ) });
+  }
+), ne = R(({ children: i }) => {
+  const { listState: c } = k(), { loader: r, refresh: t } = c, { isLoading: o, initialLoading: n } = r, s = g(
+    () => ({
+      container: {
+        display: "inline-block"
+      },
+      button: {
+        padding: "8px 16px",
+        border: "1px solid #e5e7eb",
+        borderRadius: "6px",
+        backgroundColor: "#ffffff",
+        cursor: "pointer",
+        fontSize: "14px",
+        transition: "all 0.2s ease",
+        ":hover": {
+          backgroundColor: "#f3f4f6"
+        },
+        ":disabled": {
+          opacity: 0.6,
+          cursor: "not-allowed"
+        }
+      }
+    }),
+    []
+  ), f = T(() => {
+    t({ isRefresh: !0 });
+  }, [t]), a = g(
+    () => ({
+      isLoading: o,
+      refresh: f
+    }),
+    [o, f, s]
+  );
+  return n ? null : i ? i(a) : /* @__PURE__ */ l("div", { className: "react-list-refresh", style: s.container, children: /* @__PURE__ */ l(
+    "button",
+    {
+      onClick: f,
+      disabled: o,
+      style: {
+        ...s.button,
+        ...o && s.button[":disabled"]
+      },
+      children: o ? "Loading..." : "Refresh"
+    }
+  ) });
+}), re = R(({ children: i, debounceTime: c = 500 }) => {
+  const { listState: r } = k(), { search: t, setSearch: o } = r, [n, s] = $(), [f, a] = O(t ?? ""), h = q(null);
+  I(() => {
+    t !== f && a(t ?? "");
+  }, [t]);
+  const u = (P) => {
+    const w = P.target.value;
+    a(w), h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+      s(() => {
+        o(w);
+      });
+    }, c);
+  };
+  I(() => () => {
+    h.current && clearTimeout(h.current);
+  }, []);
+  const d = {
+    container: {
+      margin: "10px 0",
+      width: "100%",
+      maxWidth: "300px"
+    },
+    input: {
+      width: "100%",
+      padding: "8px 12px",
+      border: "1px solid #ccc",
+      borderRadius: "4px",
+      fontSize: "14px",
+      outline: "none"
+    }
+  }, y = {
+    search: f,
+    setSearch: u,
+    isPending: n
+  };
+  return i ? i(y) : /* @__PURE__ */ M("div", { className: "react-list-search", style: d.container, children: [
+    /* @__PURE__ */ l(
+      "input",
+      {
+        type: "text",
+        value: f,
+        onChange: u,
+        placeholder: "Search...",
+        style: d.input
+      }
+    ),
+    n && /* @__PURE__ */ l(
+      "div",
+      {
+        className: "search-indicator",
+        style: { fontSize: "12px", color: "#888", marginTop: "4px" },
+        children: "Searching..."
+      }
+    )
+  ] });
+}), oe = R(({ children: i }) => {
+  const { listState: c } = k(), { data: r, count: t, pagination: o, loader: n, error: s } = c, { page: f, perPage: a } = o, { initialLoading: h, isLoading: u } = n, d = g(
+    () => ({
+      container: {
+        padding: "8px 0",
+        fontSize: "14px",
+        color: "#4B5563"
+      },
+      text: {
+        display: "inline-block"
+      },
+      highlight: {
+        fontWeight: "500",
+        color: "#111827"
+      }
+    }),
+    []
+  ), y = g(() => {
+    const w = f * a - a + 1, p = Math.min(f * a, t), e = (r == null ? void 0 : r.length) || 0;
+    return { from: w, to: p, visibleCount: e };
+  }, [f, a, t, r]), P = g(
+    () => ({
+      ...y,
+      count: t,
+      styles: d
+    }),
+    [y, t, d]
+  );
+  return h || !r || r.length === 0 || s ? null : i ? i(P) : /* @__PURE__ */ l("div", { className: "react-list-summary", style: d.container, children: /* @__PURE__ */ M("span", { style: d.text, children: [
+    "Showing ",
+    /* @__PURE__ */ l("span", { style: d.highlight, children: y.visibleCount }),
+    " ",
+    "items (",
+    /* @__PURE__ */ M("span", { style: d.highlight, children: [
+      y.from,
+      " - ",
+      y.to
+    ] }),
+    ") out of ",
+    /* @__PURE__ */ l("span", { style: d.highlight, children: t })
+  ] }) });
+});
+export {
+  G as ReactListAttributes,
+  J as ReactListEmpty,
+  K as ReactListError,
+  Q as ReactListGoTo,
+  U as ReactListInitialLoader,
+  V as ReactListItems,
+  Y as ReactListLoadMore,
+  Z as ReactListLoader,
+  ee as ReactListPagination,
+  te as ReactListPerPage,
+  F as ReactListProvider,
+  ne as ReactListRefresh,
+  re as ReactListSearch,
+  oe as ReactListSummary,
+  X as default
+};

package/dist/react-list.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "@7span/react-list",
+  "version": "0.0.1",
+  "description": "A simple and reusable list component for React",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.jsx"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "main": "dist/react-list.js",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.3.1"
+  }
+}