@spark-ui/components/dist/pagination/index.mjs

Spark (Leboncoin design system) components.

import {
  IconButton
} from "../chunk-QLOIAU3C.mjs";
import {
  Button
} from "../chunk-USSL4UZ5.mjs";
import "../chunk-MUNDKRAE.mjs";
import {
  Icon
} from "../chunk-AESXFMCC.mjs";
import "../chunk-NBZKMCHF.mjs";
import "../chunk-4F5DOL57.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 arr.slice(start, end);
}

// 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 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,
        pagination: {
          ...api,
          pages,
          // Extending ZagJS anatomy
          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
    }
  );
};
var usePagination = () => {
  const context = useContext(PaginationContext);
  if (!context) {
    throw Error("usePagination must be used within a Pagination provider");
  }
  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: 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 }) });
};
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,
      className: cx("size-sz-44 flex items-center justify-center"),
      ...mergedProps,
      children: children || "\u2026"
    }
  ) });
};
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: 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: "ghost",
    ...props,
    className,
    ...shouldDisableLink && {
      disabled: true,
      role: "link",
      "aria-disabled": true
    }
  };
  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 }) });
};
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: apiProps["aria-current"] === "page" ? "filled" : "ghost",
    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 }) });
};
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: 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: "ghost",
    ...props,
    className,
    ...shouldDisableLink && {
      disabled: true,
      role: "link",
      "aria-disabled": true
    }
  };
  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 }) });
};
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: "ghost",
    ...props,
    className,
    ...shouldDisableLink && {
      disabled: true,
      role: "link",
      "aria-disabled": true
    }
  };
  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 }) });
};
NextTrigger.displayName = "Pagination.NextTrigger";

// src/pagination/PaginationPages.tsx
var Pages = ({ children }) => {
  const { pagination: pagination2 } = usePagination();
  return children(pagination2);
};
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: "ghost",
    ...props,
    className,
    ...shouldDisableLink && {
      disabled: true,
      role: "link",
      "aria-disabled": true
    }
  };
  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 }) });
};
PrevTrigger.displayName = "Pagination.PrevTrigger";

// src/pagination/index.ts
var Pagination2 = Object.assign(Pagination, {
  PrevTrigger,
  NextTrigger,
  Pages,
  Item,
  Ellipsis,
  FirstPageTrigger,
  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 {
  Pagination2 as Pagination
};
//# sourceMappingURL=index.mjs.map