jaci-ui 0.4.0 → 0.6.0

package/dist/components/pagination/pagination.d.cts

@@ -1,44 +1,56 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/components/pagination/pagination.d.ts
-type PaginationRootProps = ComponentPropsWithoutRef<"nav">;
-/** A navigation landmark for moving between pages of a result set. */
-declare const PaginationRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type PaginationDensity = "compact" | "comfortable";
+interface PaginationRootProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+  children?: ReactNode;
+  defaultPage?: number;
+  density?: PaginationDensity;
+  onPageChange?: (page: number) => void;
+  page?: number;
+  pageCount?: number;
+  showFirstLast?: boolean;
+  siblingCount?: number;
+}
+declare const PaginationRoot: import("react").ForwardRefExoticComponent<PaginationRootProps & import("react").RefAttributes<HTMLElement>>;
 type PaginationListProps = ComponentPropsWithoutRef<"ul">;
-/** An unordered list of page controls. */
 declare const PaginationList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
 type PaginationItemProps = ComponentPropsWithoutRef<"li">;
-/** A list item that wraps a page link, direction control, or ellipsis. */
 declare const PaginationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
 interface PaginationLinkProps extends ComponentPropsWithoutRef<"a"> {
-  /** Marks the link as the current page. */
   active?: boolean;
-  /** Presents a non-navigable control when no destination is available. */
   disabled?: boolean;
+  page?: number | undefined;
 }
-/** A link to a numbered page. Set `active` on the current destination. */
 declare const PaginationLink: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 interface PaginationPreviousProps extends PaginationLinkProps {
   children?: ReactNode;
 }
-/** A directional link to the preceding page. */
 declare const PaginationPrevious: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
 interface PaginationNextProps extends PaginationLinkProps {
   children?: ReactNode;
 }
-/** A directional link to the following page. */
 declare const PaginationNext: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationFirstProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+declare const PaginationFirst: import("react").ForwardRefExoticComponent<PaginationFirstProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationLastProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+declare const PaginationLast: import("react").ForwardRefExoticComponent<PaginationLastProps & import("react").RefAttributes<HTMLAnchorElement>>;
 type PaginationEllipsisProps = ComponentPropsWithoutRef<"span">;
-/** A non-interactive marker for omitted page ranges. */
 declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare const Pagination: {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Root: import("react").ForwardRefExoticComponent<PaginationRootProps & import("react").RefAttributes<HTMLElement>>;
   List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
   Link: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  First: import("react").ForwardRefExoticComponent<PaginationFirstProps & import("react").RefAttributes<HTMLAnchorElement>>;
   Previous: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
   Next: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Last: import("react").ForwardRefExoticComponent<PaginationLastProps & import("react").RefAttributes<HTMLAnchorElement>>;
   Ellipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps };
+export { Pagination, PaginationDensity, PaginationEllipsis, PaginationEllipsisProps, PaginationFirst, PaginationFirstProps, PaginationItem, PaginationItemProps, PaginationLast, PaginationLastProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps };
 //# sourceMappingURL=pagination.d.cts.map

package/dist/components/pagination/pagination.d.ts

@@ -1,44 +1,56 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/components/pagination/pagination.d.ts
-type PaginationRootProps = ComponentPropsWithoutRef<"nav">;
-/** A navigation landmark for moving between pages of a result set. */
-declare const PaginationRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type PaginationDensity = "compact" | "comfortable";
+interface PaginationRootProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+  children?: ReactNode;
+  defaultPage?: number;
+  density?: PaginationDensity;
+  onPageChange?: (page: number) => void;
+  page?: number;
+  pageCount?: number;
+  showFirstLast?: boolean;
+  siblingCount?: number;
+}
+declare const PaginationRoot: import("react").ForwardRefExoticComponent<PaginationRootProps & import("react").RefAttributes<HTMLElement>>;
 type PaginationListProps = ComponentPropsWithoutRef<"ul">;
-/** An unordered list of page controls. */
 declare const PaginationList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
 type PaginationItemProps = ComponentPropsWithoutRef<"li">;
-/** A list item that wraps a page link, direction control, or ellipsis. */
 declare const PaginationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
 interface PaginationLinkProps extends ComponentPropsWithoutRef<"a"> {
-  /** Marks the link as the current page. */
   active?: boolean;
-  /** Presents a non-navigable control when no destination is available. */
   disabled?: boolean;
+  page?: number | undefined;
 }
-/** A link to a numbered page. Set `active` on the current destination. */
 declare const PaginationLink: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 interface PaginationPreviousProps extends PaginationLinkProps {
   children?: ReactNode;
 }
-/** A directional link to the preceding page. */
 declare const PaginationPrevious: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
 interface PaginationNextProps extends PaginationLinkProps {
   children?: ReactNode;
 }
-/** A directional link to the following page. */
 declare const PaginationNext: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationFirstProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+declare const PaginationFirst: import("react").ForwardRefExoticComponent<PaginationFirstProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationLastProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+declare const PaginationLast: import("react").ForwardRefExoticComponent<PaginationLastProps & import("react").RefAttributes<HTMLAnchorElement>>;
 type PaginationEllipsisProps = ComponentPropsWithoutRef<"span">;
-/** A non-interactive marker for omitted page ranges. */
 declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare const Pagination: {
-  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Root: import("react").ForwardRefExoticComponent<PaginationRootProps & import("react").RefAttributes<HTMLElement>>;
   List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
   Link: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  First: import("react").ForwardRefExoticComponent<PaginationFirstProps & import("react").RefAttributes<HTMLAnchorElement>>;
   Previous: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
   Next: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Last: import("react").ForwardRefExoticComponent<PaginationLastProps & import("react").RefAttributes<HTMLAnchorElement>>;
   Ellipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps };
+export { Pagination, PaginationDensity, PaginationEllipsis, PaginationEllipsisProps, PaginationFirst, PaginationFirstProps, PaginationItem, PaginationItemProps, PaginationLast, PaginationLastProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps };
 //# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination/pagination.js

@@ -1,29 +1,65 @@
+"use client";
 import { cx } from "../../styled-system/css/cx.js";
 import { pagination } from "../../styled-system/recipes/pagination.js";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/pagination/pagination.tsx
-/** A navigation landmark for moving between pages of a result set. */
-const PaginationRoot = forwardRef(function PaginationRoot({ "aria-label": ariaLabel, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx("nav", {
-		...props,
-		"aria-label": ariaLabel ?? "Pagination",
-		ref,
-		className: cx(pagination().root, className),
-		"data-jaci-component": "pagination",
-		"data-slot": "pagination"
+const PaginationContext = createContext(null);
+function usePaginationContext() {
+	return useContext(PaginationContext);
+}
+const PaginationRoot = forwardRef(function PaginationRoot({ children, "aria-label": ariaLabel, className, defaultPage = 1, density = "comfortable", onPageChange, page: controlledPage, pageCount, showFirstLast = false, siblingCount = 1, ...props }, ref) {
+	const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+	const page = pageCount ? Math.min(Math.max(controlledPage ?? uncontrolledPage, 1), pageCount) : controlledPage;
+	const goTo = useCallback((nextPage) => {
+		if (!pageCount) return;
+		const next = Math.min(Math.max(nextPage, 1), pageCount);
+		if (controlledPage === void 0) setUncontrolledPage(next);
+		onPageChange?.(next);
+	}, [
+		controlledPage,
+		onPageChange,
+		pageCount
+	]);
+	const context = useMemo(() => ({
+		density,
+		goTo,
+		page,
+		pageCount
+	}), [
+		density,
+		goTo,
+		page,
+		pageCount
+	]);
+	return /* @__PURE__ */ jsx(PaginationContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("nav", {
+			...props,
+			"aria-label": ariaLabel ?? "Pagination",
+			ref,
+			className: cx(pagination({ density }).root, className),
+			"data-density": density,
+			"data-jaci-component": "pagination",
+			"data-slot": "pagination",
+			children: children ?? (pageCount ? /* @__PURE__ */ jsx(PaginationGenerated, {
+				page: page ?? 1,
+				pageCount,
+				showFirstLast,
+				siblingCount
+			}) : null)
+		})
 	});
 });
-/** An unordered list of page controls. */
 const PaginationList = forwardRef(function PaginationList({ className, ...props }, ref) {
+	const context = usePaginationContext();
 	return /* @__PURE__ */ jsx("ul", {
 		...props,
 		ref,
-		className: cx(pagination().list, className),
+		className: cx(pagination({ density: context?.density }).list, className),
 		"data-slot": "pagination-list"
 	});
 });
-/** A list item that wraps a page link, direction control, or ellipsis. */
 const PaginationItem = forwardRef(function PaginationItem({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("li", {
 		...props,
@@ -32,24 +68,31 @@ const PaginationItem = forwardRef(function PaginationItem({ className, ...props
 		"data-slot": "pagination-item"
 	});
 });
-function getAnchorClassName(active, disabled, slot) {
+function getAnchorClassName(active, disabled, density, slot) {
 	const styles = pagination({
 		active,
+		density,
 		disabled
 	});
 	if (slot === "pagination-previous") return cx(styles.link, styles.previous);
 	if (slot === "pagination-next") return cx(styles.link, styles.next);
+	if (slot === "pagination-first") return cx(styles.link, styles.first);
+	if (slot === "pagination-last") return cx(styles.link, styles.last);
 	return styles.link;
 }
-const PaginationAnchor = forwardRef(function PaginationAnchor({ active = false, "aria-current": ariaCurrent, className, disabled = false, href, onClick, slot, tabIndex, ...props }, ref) {
+const PaginationAnchor = forwardRef(function PaginationAnchor({ active: activeProp, "aria-current": ariaCurrent, className, disabled: disabledProp = false, href, onClick, page, slot, tabIndex, ...props }, ref) {
+	const context = usePaginationContext();
+	const active = activeProp ?? (page !== void 0 && context?.page === page);
+	const disabled = Boolean(disabledProp || page !== void 0 && context?.pageCount === 1);
 	return /* @__PURE__ */ jsx("a", {
 		...props,
 		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
 		"aria-disabled": disabled || void 0,
 		ref,
-		className: cx(getAnchorClassName(active, disabled, slot), className),
+		className: cx(getAnchorClassName(Boolean(active), disabled, context?.density, slot), className),
 		"data-active": active || void 0,
 		"data-disabled": disabled || void 0,
+		"data-page": page,
 		"data-slot": slot,
 		href: disabled ? void 0 : href,
 		onClick: (event) => {
@@ -58,12 +101,15 @@ const PaginationAnchor = forwardRef(function PaginationAnchor({ active = false,
 				event.stopPropagation();
 				return;
 			}
+			if (page !== void 0 && context?.pageCount) {
+				event.preventDefault();
+				context.goTo(page);
+			}
 			onClick?.(event);
 		},
 		tabIndex: disabled ? -1 : tabIndex
 	});
 });
-/** A link to a numbered page. Set `active` on the current destination. */
 const PaginationLink = forwardRef(function PaginationLink(props, ref) {
 	return /* @__PURE__ */ jsx(PaginationAnchor, {
 		...props,
@@ -71,11 +117,14 @@ const PaginationLink = forwardRef(function PaginationLink(props, ref) {
 		slot: "pagination-link"
 	});
 });
-/** A directional link to the preceding page. */
-const PaginationPrevious = forwardRef(function PaginationPrevious({ "aria-label": ariaLabel, children, rel, ...props }, ref) {
+const PaginationPrevious = forwardRef(function PaginationPrevious({ "aria-label": ariaLabel, children, page, rel, ...props }, ref) {
+	const context = usePaginationContext();
+	const targetPage = page ?? (context?.page ? context.page - 1 : void 0);
 	return /* @__PURE__ */ jsx(PaginationAnchor, {
 		...props,
 		"aria-label": ariaLabel ?? "Go to previous page",
+		disabled: props.disabled ?? (targetPage !== void 0 && targetPage < 1),
+		page: targetPage,
 		ref,
 		rel: rel ?? "prev",
 		slot: "pagination-previous",
@@ -85,11 +134,14 @@ const PaginationPrevious = forwardRef(function PaginationPrevious({ "aria-label"
 		}), /* @__PURE__ */ jsx("span", { children: "Previous" })] })
 	});
 });
-/** A directional link to the following page. */
-const PaginationNext = forwardRef(function PaginationNext({ "aria-label": ariaLabel, children, rel, ...props }, ref) {
+const PaginationNext = forwardRef(function PaginationNext({ "aria-label": ariaLabel, children, page, rel, ...props }, ref) {
+	const context = usePaginationContext();
+	const targetPage = page ?? (context?.page ? context.page + 1 : void 0);
 	return /* @__PURE__ */ jsx(PaginationAnchor, {
 		...props,
 		"aria-label": ariaLabel ?? "Go to next page",
+		disabled: props.disabled ?? (targetPage !== void 0 && targetPage > (context?.pageCount ?? Infinity)),
+		page: targetPage,
 		ref,
 		rel: rel ?? "next",
 		slot: "pagination-next",
@@ -99,7 +151,27 @@ const PaginationNext = forwardRef(function PaginationNext({ "aria-label": ariaLa
 		})] })
 	});
 });
-/** A non-interactive marker for omitted page ranges. */
+const PaginationFirst = forwardRef(function PaginationFirst({ "aria-label": ariaLabel, children, page, ...props }, ref) {
+	return /* @__PURE__ */ jsx(PaginationAnchor, {
+		...props,
+		"aria-label": ariaLabel ?? "Go to first page",
+		page: page ?? 1,
+		ref,
+		slot: "pagination-first",
+		children: children ?? "First"
+	});
+});
+const PaginationLast = forwardRef(function PaginationLast({ "aria-label": ariaLabel, children, page, ...props }, ref) {
+	const context = usePaginationContext();
+	return /* @__PURE__ */ jsx(PaginationAnchor, {
+		...props,
+		"aria-label": ariaLabel ?? "Go to last page",
+		page: page ?? context?.pageCount,
+		ref,
+		slot: "pagination-last",
+		children: children ?? "Last"
+	});
+});
 const PaginationEllipsis = forwardRef(function PaginationEllipsis({ children = "…", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
@@ -110,16 +182,43 @@ const PaginationEllipsis = forwardRef(function PaginationEllipsis({ children = "
 		children
 	});
 });
+function getPageItems(page, pageCount, siblingCount) {
+	const visible = /* @__PURE__ */ new Set([1, pageCount]);
+	for (let index = page - siblingCount; index <= page + siblingCount; index += 1) if (index > 0 && index <= pageCount) visible.add(index);
+	const pages = [...visible].sort((left, right) => left - right);
+	const items = [];
+	pages.forEach((value, index) => {
+		const previous = pages[index - 1];
+		if (previous !== void 0 && value - previous > 1) items.push("ellipsis");
+		items.push(value);
+	});
+	return items;
+}
+function PaginationGenerated({ page, pageCount, showFirstLast, siblingCount }) {
+	const pageItems = getPageItems(page, pageCount, siblingCount);
+	return /* @__PURE__ */ jsxs(PaginationList, { children: [
+		showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationFirst, { disabled: page <= 1 }) }) : null,
+		/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { disabled: page <= 1 }) }),
+		pageItems.map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${pageItems.slice(0, index).filter((value) => value === "ellipsis").length + 1}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+			page: item,
+			children: item
+		}) }, item)),
+		/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { disabled: page >= pageCount }) }),
+		showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLast, { disabled: page >= pageCount }) }) : null
+	] });
+}
 const Pagination = {
 	Root: PaginationRoot,
 	List: PaginationList,
 	Item: PaginationItem,
 	Link: PaginationLink,
+	First: PaginationFirst,
 	Previous: PaginationPrevious,
 	Next: PaginationNext,
+	Last: PaginationLast,
 	Ellipsis: PaginationEllipsis
 };
 //#endregion
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, PaginationRoot };
+export { Pagination, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, PaginationRoot };
 
 //# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { pagination } from \"../../styled-system/recipes\";\n\nexport type PaginationRootProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A navigation landmark for moving between pages of a result set. */\nexport const PaginationRoot = forwardRef<HTMLElement, PaginationRootProps>(function PaginationRoot(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Pagination\"}\n      ref={ref}\n      className={cx(pagination().root, className)}\n      data-jaci-component=\"pagination\"\n      data-slot=\"pagination\"\n    />\n  );\n});\n\nexport type PaginationListProps = ComponentPropsWithoutRef<\"ul\">;\n\n/** An unordered list of page controls. */\nexport const PaginationList = forwardRef<HTMLUListElement, PaginationListProps>(\n  function PaginationList({ className, ...props }, ref) {\n    return (\n      <ul\n        {...props}\n        ref={ref}\n        className={cx(pagination().list, className)}\n        data-slot=\"pagination-list\"\n      />\n    );\n  },\n);\n\nexport type PaginationItemProps = ComponentPropsWithoutRef<\"li\">;\n\n/** A list item that wraps a page link, direction control, or ellipsis. */\nexport const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(\n  function PaginationItem({ className, ...props }, ref) {\n    return (\n      <li\n        {...props}\n        ref={ref}\n        className={cx(pagination().item, className)}\n        data-slot=\"pagination-item\"\n      />\n    );\n  },\n);\n\nexport interface PaginationLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the link as the current page. */\n  active?: boolean;\n  /** Presents a non-navigable control when no destination is available. */\n  disabled?: boolean;\n}\n\ntype PaginationAnchorSlot = \"pagination-link\" | \"pagination-previous\" | \"pagination-next\";\n\ninterface PaginationAnchorProps extends PaginationLinkProps {\n  children?: ReactNode;\n  slot: PaginationAnchorSlot;\n}\n\nfunction getAnchorClassName(active: boolean, disabled: boolean, slot: PaginationAnchorSlot) {\n  const styles = pagination({ active, disabled });\n\n  if (slot === \"pagination-previous\") {\n    return cx(styles.link, styles.previous);\n  }\n\n  if (slot === \"pagination-next\") {\n    return cx(styles.link, styles.next);\n  }\n\n  return styles.link;\n}\n\nconst PaginationAnchor = forwardRef<HTMLAnchorElement, PaginationAnchorProps>(\n  function PaginationAnchor(\n    {\n      active = false,\n      \"aria-current\": ariaCurrent,\n      className,\n      disabled = false,\n      href,\n      onClick,\n      slot,\n      tabIndex,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        className={cx(getAnchorClassName(active, disabled, slot), className)}\n        data-active={active || undefined}\n        data-disabled={disabled || undefined}\n        data-slot={slot}\n        href={disabled ? undefined : href}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            event.stopPropagation();\n            return;\n          }\n\n          onClick?.(event);\n        }}\n        tabIndex={disabled ? -1 : tabIndex}\n      />\n    );\n  },\n);\n\n/** A link to a numbered page. Set `active` on the current destination. */\nexport const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  function PaginationLink(props, ref) {\n    return <PaginationAnchor {...props} ref={ref} slot=\"pagination-link\" />;\n  },\n);\n\nexport interface PaginationPreviousProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\n\n/** A directional link to the preceding page. */\nexport const PaginationPrevious = forwardRef<HTMLAnchorElement, PaginationPreviousProps>(\n  function PaginationPrevious({ \"aria-label\": ariaLabel, children, rel, ...props }, ref) {\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to previous page\"}\n        ref={ref}\n        rel={rel ?? \"prev\"}\n        slot=\"pagination-previous\"\n      >\n        {children ?? (\n          <>\n            <span aria-hidden=\"true\">‹</span>\n            <span>Previous</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport interface PaginationNextProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\n\n/** A directional link to the following page. */\nexport const PaginationNext = forwardRef<HTMLAnchorElement, PaginationNextProps>(\n  function PaginationNext({ \"aria-label\": ariaLabel, children, rel, ...props }, ref) {\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to next page\"}\n        ref={ref}\n        rel={rel ?? \"next\"}\n        slot=\"pagination-next\"\n      >\n        {children ?? (\n          <>\n            <span>Next</span>\n            <span aria-hidden=\"true\">›</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport type PaginationEllipsisProps = ComponentPropsWithoutRef<\"span\">;\n\n/** A non-interactive marker for omitted page ranges. */\nexport const PaginationEllipsis = forwardRef<HTMLSpanElement, PaginationEllipsisProps>(\n  function PaginationEllipsis({ children = \"…\", className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(pagination().ellipsis, className)}\n        data-slot=\"pagination-ellipsis\"\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nexport const Pagination = {\n  Root: PaginationRoot,\n  List: PaginationList,\n  Item: PaginationItem,\n  Link: PaginationLink,\n  Previous: PaginationPrevious,\n  Next: PaginationNext,\n  Ellipsis: PaginationEllipsis,\n};\n"],"mappings":";;;;;;AASA,MAAa,iBAAiB,WAA6C,SAAS,eAClF,EAAE,cAAc,WAAW,WAAW,GAAG,SACzC,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,cAAY,aAAa;EACpB;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;;AAKD,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,MAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,aAAU;CACX,CAAA;AAEL,CACF;;AAKA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,MAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,MAAM,SAAS;EAC1C,aAAU;CACX,CAAA;AAEL,CACF;AAgBA,SAAS,mBAAmB,QAAiB,UAAmB,MAA4B;CAC1F,MAAM,SAAS,WAAW;EAAE;EAAQ;CAAS,CAAC;CAE9C,IAAI,SAAS,uBACX,OAAO,GAAG,OAAO,MAAM,OAAO,QAAQ;CAGxC,IAAI,SAAS,mBACX,OAAO,GAAG,OAAO,MAAM,OAAO,IAAI;CAGpC,OAAO,OAAO;AAChB;AAEA,MAAM,mBAAmB,WACvB,SAAS,iBACP,EACE,SAAS,OACT,gBAAgB,aAChB,WACA,WAAW,OACX,MACA,SACA,MACA,UACA,GAAG,SAEL,KACA;CACA,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,gBAAc,gBAAgB,SAAS,SAAS,KAAA;EAChD,iBAAe,YAAY,KAAA;EACtB;EACL,WAAW,GAAG,mBAAmB,QAAQ,UAAU,IAAI,GAAG,SAAS;EACnE,eAAa,UAAU,KAAA;EACvB,iBAAe,YAAY,KAAA;EAC3B,aAAW;EACX,MAAM,WAAW,KAAA,IAAY;EAC7B,UAAU,UAAU;GAClB,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB;GACF;GAEA,UAAU,KAAK;EACjB;EACA,UAAU,WAAW,KAAK;CAC3B,CAAA;AAEL,CACF;;AAGA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,OAAO,KAAK;CAClC,OAAO,oBAAC,kBAAD;EAAkB,GAAI;EAAY;EAAK,MAAK;CAAmB,CAAA;AACxE,CACF;;AAOA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,cAAc,WAAW,UAAU,KAAK,GAAG,SAAS,KAAK;CACrF,OACE,oBAAC,kBAAD;EACE,GAAI;EACJ,cAAY,aAAa;EACpB;EACL,KAAK,OAAO;EACZ,MAAK;YAEJ,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;aAAO;EAAO,CAAA,GAChC,oBAAC,QAAD,EAAA,UAAM,WAAc,CAAA,CACpB,EAAA,CAAA;CAEY,CAAA;AAEtB,CACF;;AAOA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,cAAc,WAAW,UAAU,KAAK,GAAG,SAAS,KAAK;CACjF,OACE,oBAAC,kBAAD;EACE,GAAI;EACJ,cAAY,aAAa;EACpB;EACL,KAAK,OAAO;EACZ,MAAK;YAEJ,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAM,OAAU,CAAA,GAChB,oBAAC,QAAD;GAAM,eAAY;aAAO;EAAO,CAAA,CAChC,EAAA,CAAA;CAEY,CAAA;AAEtB,CACF;;AAKA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,KAAK,WAAW,GAAG,SAAS,KAAK;CACxE,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,eAAY;EACP;EACL,WAAW,GAAG,WAAW,CAAC,CAAC,UAAU,SAAS;EAC9C,aAAU;EAET;CACG,CAAA;AAEV,CACF;AAEA,MAAa,aAAa;CACxB,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,UAAU;CACV,MAAM;CACN,UAAU;AACZ"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { pagination } from \"../../styled-system/recipes\";\n\nexport type PaginationDensity = \"compact\" | \"comfortable\";\n\ninterface PaginationContextValue {\n  density: PaginationDensity;\n  goTo: (page: number) => void;\n  page: number | undefined;\n  pageCount: number | undefined;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n  return useContext(PaginationContext);\n}\n\nexport interface PaginationRootProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  children?: ReactNode;\n  defaultPage?: number;\n  density?: PaginationDensity;\n  onPageChange?: (page: number) => void;\n  page?: number;\n  pageCount?: number;\n  showFirstLast?: boolean;\n  siblingCount?: number;\n}\n\nexport const PaginationRoot = forwardRef<HTMLElement, PaginationRootProps>(function PaginationRoot(\n  {\n    children,\n    \"aria-label\": ariaLabel,\n    className,\n    defaultPage = 1,\n    density = \"comfortable\",\n    onPageChange,\n    page: controlledPage,\n    pageCount,\n    showFirstLast = false,\n    siblingCount = 1,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);\n  const page = pageCount\n    ? Math.min(Math.max(controlledPage ?? uncontrolledPage, 1), pageCount)\n    : controlledPage;\n  const goTo = useCallback(\n    (nextPage: number) => {\n      if (!pageCount) return;\n      const next = Math.min(Math.max(nextPage, 1), pageCount);\n      if (controlledPage === undefined) setUncontrolledPage(next);\n      onPageChange?.(next);\n    },\n    [controlledPage, onPageChange, pageCount],\n  );\n  const context = useMemo(\n    () => ({ density, goTo, page, pageCount }),\n    [density, goTo, page, pageCount],\n  );\n\n  return (\n    <PaginationContext.Provider value={context}>\n      <nav\n        {...props}\n        aria-label={ariaLabel ?? \"Pagination\"}\n        ref={ref}\n        className={cx(pagination({ density }).root, className)}\n        data-density={density}\n        data-jaci-component=\"pagination\"\n        data-slot=\"pagination\"\n      >\n        {children ??\n          (pageCount ? (\n            <PaginationGenerated\n              page={page ?? 1}\n              pageCount={pageCount}\n              showFirstLast={showFirstLast}\n              siblingCount={siblingCount}\n            />\n          ) : null)}\n      </nav>\n    </PaginationContext.Provider>\n  );\n});\n\nexport type PaginationListProps = ComponentPropsWithoutRef<\"ul\">;\nexport const PaginationList = forwardRef<HTMLUListElement, PaginationListProps>(\n  function PaginationList({ className, ...props }, ref) {\n    const context = usePaginationContext();\n    return (\n      <ul\n        {...props}\n        ref={ref}\n        className={cx(pagination({ density: context?.density }).list, className)}\n        data-slot=\"pagination-list\"\n      />\n    );\n  },\n);\n\nexport type PaginationItemProps = ComponentPropsWithoutRef<\"li\">;\nexport const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(\n  function PaginationItem({ className, ...props }, ref) {\n    return (\n      <li\n        {...props}\n        ref={ref}\n        className={cx(pagination().item, className)}\n        data-slot=\"pagination-item\"\n      />\n    );\n  },\n);\n\nexport interface PaginationLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  active?: boolean;\n  disabled?: boolean;\n  page?: number | undefined;\n}\n\ntype PaginationAnchorSlot =\n  | \"pagination-link\"\n  | \"pagination-first\"\n  | \"pagination-last\"\n  | \"pagination-previous\"\n  | \"pagination-next\";\n\ninterface PaginationAnchorProps extends PaginationLinkProps {\n  slot: PaginationAnchorSlot;\n}\n\nfunction getAnchorClassName(\n  active: boolean,\n  disabled: boolean,\n  density: PaginationDensity | undefined,\n  slot: PaginationAnchorSlot,\n) {\n  const styles = pagination({ active, density, disabled });\n  if (slot === \"pagination-previous\") return cx(styles.link, styles.previous);\n  if (slot === \"pagination-next\") return cx(styles.link, styles.next);\n  if (slot === \"pagination-first\") return cx(styles.link, styles.first);\n  if (slot === \"pagination-last\") return cx(styles.link, styles.last);\n  return styles.link;\n}\n\nconst PaginationAnchor = forwardRef<HTMLAnchorElement, PaginationAnchorProps>(\n  function PaginationAnchor(\n    {\n      active: activeProp,\n      \"aria-current\": ariaCurrent,\n      className,\n      disabled: disabledProp = false,\n      href,\n      onClick,\n      page,\n      slot,\n      tabIndex,\n      ...props\n    },\n    ref,\n  ) {\n    const context = usePaginationContext();\n    const active = activeProp ?? (page !== undefined && context?.page === page);\n    const disabled = Boolean(disabledProp || (page !== undefined && context?.pageCount === 1));\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        className={cx(\n          getAnchorClassName(Boolean(active), disabled, context?.density, slot),\n          className,\n        )}\n        data-active={active || undefined}\n        data-disabled={disabled || undefined}\n        data-page={page}\n        data-slot={slot}\n        href={disabled ? undefined : href}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            event.stopPropagation();\n            return;\n          }\n          if (page !== undefined && context?.pageCount) {\n            event.preventDefault();\n            context.goTo(page);\n          }\n          onClick?.(event);\n        }}\n        tabIndex={disabled ? -1 : tabIndex}\n      />\n    );\n  },\n);\n\nexport const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  function PaginationLink(props, ref) {\n    return <PaginationAnchor {...props} ref={ref} slot=\"pagination-link\" />;\n  },\n);\n\nexport interface PaginationPreviousProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\nexport const PaginationPrevious = forwardRef<HTMLAnchorElement, PaginationPreviousProps>(\n  function PaginationPrevious({ \"aria-label\": ariaLabel, children, page, rel, ...props }, ref) {\n    const context = usePaginationContext();\n    const targetPage = page ?? (context?.page ? context.page - 1 : undefined);\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to previous page\"}\n        disabled={props.disabled ?? (targetPage !== undefined && targetPage < 1)}\n        page={targetPage}\n        ref={ref}\n        rel={rel ?? \"prev\"}\n        slot=\"pagination-previous\"\n      >\n        {children ?? (\n          <>\n            <span aria-hidden=\"true\">‹</span>\n            <span>Previous</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport interface PaginationNextProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\nexport const PaginationNext = forwardRef<HTMLAnchorElement, PaginationNextProps>(\n  function PaginationNext({ \"aria-label\": ariaLabel, children, page, rel, ...props }, ref) {\n    const context = usePaginationContext();\n    const targetPage = page ?? (context?.page ? context.page + 1 : undefined);\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to next page\"}\n        disabled={\n          props.disabled ??\n          (targetPage !== undefined && targetPage > (context?.pageCount ?? Infinity))\n        }\n        page={targetPage}\n        ref={ref}\n        rel={rel ?? \"next\"}\n        slot=\"pagination-next\"\n      >\n        {children ?? (\n          <>\n            <span>Next</span>\n            <span aria-hidden=\"true\">›</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport interface PaginationFirstProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\nexport const PaginationFirst = forwardRef<HTMLAnchorElement, PaginationFirstProps>(\n  function PaginationFirst({ \"aria-label\": ariaLabel, children, page, ...props }, ref) {\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to first page\"}\n        page={page ?? 1}\n        ref={ref}\n        slot=\"pagination-first\"\n      >\n        {children ?? \"First\"}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport interface PaginationLastProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\nexport const PaginationLast = forwardRef<HTMLAnchorElement, PaginationLastProps>(\n  function PaginationLast({ \"aria-label\": ariaLabel, children, page, ...props }, ref) {\n    const context = usePaginationContext();\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to last page\"}\n        page={page ?? context?.pageCount}\n        ref={ref}\n        slot=\"pagination-last\"\n      >\n        {children ?? \"Last\"}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport type PaginationEllipsisProps = ComponentPropsWithoutRef<\"span\">;\nexport const PaginationEllipsis = forwardRef<HTMLSpanElement, PaginationEllipsisProps>(\n  function PaginationEllipsis({ children = \"…\", className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(pagination().ellipsis, className)}\n        data-slot=\"pagination-ellipsis\"\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\ntype PaginationPageItem = number | \"ellipsis\";\n\nfunction getPageItems(page: number, pageCount: number, siblingCount: number): PaginationPageItem[] {\n  const visible = new Set<number>([1, pageCount]);\n  for (let index = page - siblingCount; index <= page + siblingCount; index += 1) {\n    if (index > 0 && index <= pageCount) visible.add(index);\n  }\n  const pages = [...visible].sort((left, right) => left - right);\n  const items: PaginationPageItem[] = [];\n  pages.forEach((value, index) => {\n    const previous = pages[index - 1];\n    if (previous !== undefined && value - previous > 1) items.push(\"ellipsis\");\n    items.push(value);\n  });\n  return items;\n}\n\nfunction PaginationGenerated({\n  page,\n  pageCount,\n  showFirstLast,\n  siblingCount,\n}: {\n  page: number;\n  pageCount: number;\n  showFirstLast: boolean;\n  siblingCount: number;\n}) {\n  const pageItems = getPageItems(page, pageCount, siblingCount);\n  return (\n    <PaginationList>\n      {showFirstLast ? (\n        <PaginationItem>\n          <PaginationFirst disabled={page <= 1} />\n        </PaginationItem>\n      ) : null}\n      <PaginationItem>\n        <PaginationPrevious disabled={page <= 1} />\n      </PaginationItem>\n      {pageItems.map((item, index) =>\n        item === \"ellipsis\" ? (\n          <PaginationItem\n            key={`ellipsis-${pageItems.slice(0, index).filter((value) => value === \"ellipsis\").length + 1}`}\n          >\n            <PaginationEllipsis />\n          </PaginationItem>\n        ) : (\n          <PaginationItem key={item}>\n            <PaginationLink page={item}>{item}</PaginationLink>\n          </PaginationItem>\n        ),\n      )}\n      <PaginationItem>\n        <PaginationNext disabled={page >= pageCount} />\n      </PaginationItem>\n      {showFirstLast ? (\n        <PaginationItem>\n          <PaginationLast disabled={page >= pageCount} />\n        </PaginationItem>\n      ) : null}\n    </PaginationList>\n  );\n}\n\nexport const Pagination = {\n  Root: PaginationRoot,\n  List: PaginationList,\n  Item: PaginationItem,\n  Link: PaginationLink,\n  First: PaginationFirst,\n  Previous: PaginationPrevious,\n  Next: PaginationNext,\n  Last: PaginationLast,\n  Ellipsis: PaginationEllipsis,\n};\n"],"mappings":"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"}

package/dist/components/sidebar/sidebar.cjs

@@ -1,8 +1,10 @@
 "use client";
 const require_cx = require("../../styled-system/css/cx.cjs");
+const require_base_ui = require("../base-ui.cjs");
 const require_sidebar = require("../../styled-system/recipes/sidebar.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_dialog = require("@base-ui/react/dialog");
 //#region src/components/sidebar/sidebar.tsx
 const SidebarContext = (0, react.createContext)(null);
 /**
@@ -22,7 +24,7 @@ function useSidebarStyles() {
 /**
 * The sidebar container. It supports both controlled and uncontrolled state.
 */
-const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, className, defaultOpen = true, onOpenChange, open: controlledOpen, ...props }, ref) {
+const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, className, closeOnEscape = true, closeOnOutsidePress = true, defaultOpen = true, modal = true, mode = "static", onOpenChange, open: controlledOpen, restoreFocus = true, ...props }, ref) {
 	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen);
 	const isControlled = controlledOpen !== void 0;
 	const open = controlledOpen ?? uncontrolledOpen;
@@ -43,19 +45,61 @@ const SidebarRoot = (0, react.forwardRef)(function SidebarRoot({ children, class
 		toggle
 	]);
 	const styles = require_sidebar.sidebar({ open });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContext.Provider, {
+	const surface = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.root, className),
+		"data-jaci-component": "sidebar",
+		"data-open": open,
+		"data-slot": "sidebar",
+		"data-state": open ? "open" : "closed",
+		children
+	});
+	if (mode === "overlay") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContext.Provider, {
 		value: context,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-			...props,
-			ref,
-			className: require_cx.cx(styles.root, className),
-			"data-jaci-component": "sidebar",
-			"data-open": open,
-			"data-slot": "sidebar",
-			"data-state": open ? "open" : "closed",
-			children
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, {
+			open,
+			modal,
+			onOpenChange: (nextOpen, details) => {
+				if (!nextOpen && (!closeOnEscape && details.reason === "escape-key" || !closeOnOutsidePress && details.reason === "outside-press")) {
+					details.cancel();
+					return;
+				}
+				setOpen(nextOpen);
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+				className: require_cx.cx(styles.backdrop),
+				"data-jaci-component": "sidebar",
+				"data-slot": "sidebar-backdrop"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Viewport, {
+				className: require_cx.cx(styles.viewport),
+				"data-slot": "sidebar-viewport",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
+					"aria-label": props["aria-label"] ?? "Sidebar navigation",
+					className: require_cx.cx(styles.popup),
+					"data-jaci-component": "sidebar",
+					"data-slot": "sidebar-popup",
+					finalFocus: restoreFocus,
+					initialFocus: true,
+					children: surface
+				})
+			})] })
 		})
 	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContext.Provider, {
+		value: context,
+		children: surface
+	});
+});
+const SidebarPortal = _base_ui_react_dialog.Dialog.Portal;
+const SidebarBackdrop = (0, react.forwardRef)(function SidebarBackdrop({ className, ...props }, ref) {
+	const { open } = useSidebar();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
+		...props,
+		className: require_base_ui.withRecipeClassName(require_sidebar.sidebar({ open }).backdrop, className),
+		"data-slot": "sidebar-backdrop",
+		ref
+	});
 });
 /**
 * A floating, accessible control that expands or collapses the sidebar.
@@ -141,6 +185,8 @@ const SidebarLabel = (0, react.forwardRef)(function SidebarLabel({ className, ..
 });
 const Sidebar = {
 	Root: SidebarRoot,
+	Portal: SidebarPortal,
+	Backdrop: SidebarBackdrop,
 	Toggle: SidebarToggle,
 	Header: SidebarHeader,
 	Content: SidebarContent,
@@ -150,11 +196,13 @@ const Sidebar = {
 };
 //#endregion
 exports.Sidebar = Sidebar;
+exports.SidebarBackdrop = SidebarBackdrop;
 exports.SidebarContent = SidebarContent;
 exports.SidebarFooter = SidebarFooter;
 exports.SidebarHeader = SidebarHeader;
 exports.SidebarItem = SidebarItem;
 exports.SidebarLabel = SidebarLabel;
+exports.SidebarPortal = SidebarPortal;
 exports.SidebarRoot = SidebarRoot;
 exports.SidebarToggle = SidebarToggle;
 exports.useSidebar = useSidebar;

package/dist/components/sidebar/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.cjs","names":["sidebar","cx"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  { children, className, defaultOpen = true, onOpenChange, open: controlledOpen, ...props },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n\n  return (\n    <SidebarContext.Provider value={context}>\n      <aside\n        {...props}\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-jaci-component=\"sidebar\"\n        data-open={open}\n        data-slot=\"sidebar\"\n        data-state={open ? \"open\" : \"closed\"}\n      >\n        {children}\n      </aside>\n    </SidebarContext.Provider>\n  );\n});\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.cjs","names":["sidebar","cx","BaseDialog","withRecipeClassName"],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, forwardRef, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { sidebar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport interface SidebarContextValue {\n  /** Whether the sidebar is visually expanded. */\n  open: boolean;\n  /** Updates the expanded state, respecting controlled usage. */\n  setOpen: (open: boolean) => void;\n  /** Convenience callback for toggles placed anywhere in the sidebar. */\n  toggle: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Reads the state exposed by `Sidebar.Root`.\n *\n * Use it in custom sidebar parts when the built-in composition is not enough.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Root component.\");\n  }\n\n  return context;\n}\n\nfunction useSidebarStyles() {\n  const { open } = useSidebar();\n  return sidebar({ open });\n}\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Controlled expanded state. */\n  open?: boolean;\n  /** Initial expanded state for uncontrolled use. */\n  defaultOpen?: boolean;\n  /** Called after the requested expanded state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Renders the sidebar as a modal mobile surface when set to overlay. */\n  mode?: \"static\" | \"overlay\";\n  /** Allows Escape to be disabled for overlay mode. */\n  closeOnEscape?: boolean;\n  /** Allows outside presses to be disabled for overlay mode. */\n  closeOnOutsidePress?: boolean;\n  /** Restores focus to the element that opened the overlay. */\n  restoreFocus?: boolean;\n  /** Controls whether the overlay traps focus and locks page scroll. */\n  modal?: boolean | \"trap-focus\";\n  children?: ReactNode;\n}\n\n/**\n * The sidebar container. It supports both controlled and uncontrolled state.\n */\nexport const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(function SidebarRoot(\n  {\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsidePress = true,\n    defaultOpen = true,\n    modal = true,\n    mode = \"static\",\n    onOpenChange,\n    open: controlledOpen,\n    restoreFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const context = useMemo<SidebarContextValue>(\n    () => ({ open, setOpen, toggle }),\n    [open, setOpen, toggle],\n  );\n  const styles = sidebar({ open });\n\n  const surface = (\n    <aside\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-jaci-component=\"sidebar\"\n      data-open={open}\n      data-slot=\"sidebar\"\n      data-state={open ? \"open\" : \"closed\"}\n    >\n      {children}\n    </aside>\n  );\n\n  if (mode === \"overlay\") {\n    return (\n      <SidebarContext.Provider value={context}>\n        <BaseDialog.Root\n          open={open}\n          modal={modal}\n          onOpenChange={(nextOpen, details) => {\n            if (\n              !nextOpen &&\n              ((!closeOnEscape && details.reason === \"escape-key\") ||\n                (!closeOnOutsidePress && details.reason === \"outside-press\"))\n            ) {\n              details.cancel();\n              return;\n            }\n            setOpen(nextOpen);\n          }}\n        >\n          <BaseDialog.Portal>\n            <BaseDialog.Backdrop\n              className={cx(styles.backdrop)}\n              data-jaci-component=\"sidebar\"\n              data-slot=\"sidebar-backdrop\"\n            />\n            <BaseDialog.Viewport className={cx(styles.viewport)} data-slot=\"sidebar-viewport\">\n              <BaseDialog.Popup\n                aria-label={props[\"aria-label\"] ?? \"Sidebar navigation\"}\n                className={cx(styles.popup)}\n                data-jaci-component=\"sidebar\"\n                data-slot=\"sidebar-popup\"\n                finalFocus={restoreFocus}\n                initialFocus\n              >\n                {surface}\n              </BaseDialog.Popup>\n            </BaseDialog.Viewport>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </SidebarContext.Provider>\n    );\n  }\n\n  return <SidebarContext.Provider value={context}>{surface}</SidebarContext.Provider>;\n});\n\nexport type SidebarPortalProps = ComponentPropsWithoutRef<typeof BaseDialog.Portal>;\nexport const SidebarPortal: typeof BaseDialog.Portal = BaseDialog.Portal;\n\nexport type SidebarBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\nexport const SidebarBackdrop = forwardRef<HTMLDivElement, SidebarBackdropProps>(\n  function SidebarBackdrop({ className, ...props }, ref) {\n    const { open } = useSidebar();\n    return (\n      <BaseDialog.Backdrop\n        {...props}\n        className={withRecipeClassName(sidebar({ open }).backdrop, className)}\n        data-slot=\"sidebar-backdrop\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type SidebarToggleProps = ComponentPropsWithoutRef<\"button\">;\n\n/**\n * A floating, accessible control that expands or collapses the sidebar.\n */\nexport const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(\n  function SidebarToggle(\n    { \"aria-label\": ariaLabel, children, className, onClick, type = \"button\", ...props },\n    ref,\n  ) {\n    const { open, toggle } = useSidebar();\n    const styles = useSidebarStyles();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.defaultPrevented) {\n        toggle();\n      }\n    };\n\n    return (\n      <button\n        {...props}\n        aria-expanded={open}\n        aria-label={ariaLabel ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n        className={cx(styles.toggle, className)}\n        data-slot=\"sidebar-toggle\"\n        onClick={handleClick}\n        ref={ref}\n        type={type}\n      >\n        {children ?? <span aria-hidden=\"true\">{open ? \"‹\" : \"›\"}</span>}\n      </button>\n    );\n  },\n);\n\nexport type SidebarHeaderProps = ComponentPropsWithoutRef<\"header\">;\n\nexport const SidebarHeader = forwardRef<HTMLElement, SidebarHeaderProps>(function SidebarHeader(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <header\n      {...props}\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-slot=\"sidebar-header\"\n    />\n  );\n});\n\nexport type SidebarContentProps = ComponentPropsWithoutRef<\"nav\">;\n\nexport const SidebarContent = forwardRef<HTMLElement, SidebarContentProps>(function SidebarContent(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Sidebar navigation\"}\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-slot=\"sidebar-content\"\n    />\n  );\n});\n\nexport type SidebarFooterProps = ComponentPropsWithoutRef<\"footer\">;\n\nexport const SidebarFooter = forwardRef<HTMLElement, SidebarFooterProps>(function SidebarFooter(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <footer\n      {...props}\n      ref={ref}\n      className={cx(styles.footer, className)}\n      data-slot=\"sidebar-footer\"\n    />\n  );\n});\n\nexport interface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the current navigation destination. */\n  active?: boolean;\n}\n\n/**\n * A semantic navigation item. Pair its icon/content with `Sidebar.Label` so\n * the text transitions out of view while remaining available to assistive\n * technology when the sidebar is collapsed.\n */\nexport const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { \"aria-current\": ariaCurrent, active = false, className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  const styles = sidebar({ active, open });\n\n  return (\n    <a\n      {...props}\n      aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-active={active || undefined}\n      data-slot=\"sidebar-item\"\n    />\n  );\n});\n\nexport type SidebarLabelProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const SidebarLabel = forwardRef<HTMLSpanElement, SidebarLabelProps>(function SidebarLabel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useSidebarStyles();\n\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"sidebar-label\" />\n  );\n});\n\nexport const Sidebar = {\n  Root: SidebarRoot,\n  Portal: SidebarPortal,\n  Backdrop: SidebarBackdrop,\n  Toggle: SidebarToggle,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Item: SidebarItem,\n  Label: SidebarLabel,\n};\n"],"mappings":"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"}