@contractspec/lib.ui-kit-web 0.0.0-canary-20260113162409

package/dist/ui/organisms/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,107 @@
+'use client';
+
+import { Button } from "../../button.js";
+import React from "react";
+import { AlertTriangle, Home, RefreshCw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ui/organisms/ErrorBoundary/ErrorBoundary.tsx
+const DefaultErrorFallback = ({ error, errorId, resetError }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-screen items-center justify-center bg-gray-50 px-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-full max-w-md rounded-lg bg-white p-6 text-center shadow-lg",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-4 flex justify-center",
+					children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-12 w-12 text-red-500" })
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "mb-2 text-2xl font-semibold text-gray-900",
+					children: "Une erreur s'est produite"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-6 text-gray-600",
+					children: "Nous nous excusons pour ce désagrément. Notre équipe a été notifiée et travaille à résoudre le problème."
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-6 rounded-md bg-red-50 p-4 text-left",
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "mb-2 text-base font-medium text-red-800",
+							children: "Erreur de développement:"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "font-mono text-sm break-all text-red-700",
+							children: error.message
+						}),
+						errorId && /* @__PURE__ */ jsxs("p", {
+							className: "mt-2 text-sm text-red-600",
+							children: ["ID: ", errorId]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col justify-center gap-3 sm:flex-row",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						onClick: resetError,
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }), "Réessayer"]
+					}), /* @__PURE__ */ jsxs(Button, {
+						onClick: () => window.location.href = "/",
+						variant: "secondary",
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), "Accueil"]
+					})]
+				}),
+				false
+			]
+		})
+	});
+};
+var ErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null,
+			errorId: null
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return {
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		const errorId = `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+		this.setState({ errorId });
+		this.props.onError?.(error, errorInfo);
+		console.error("ErrorBoundary caught an error:", error, errorInfo);
+	}
+	resetError = () => {
+		this.setState({
+			hasError: false,
+			error: null,
+			errorId: null
+		});
+	};
+	render() {
+		if (this.state.hasError && this.state.error) return /* @__PURE__ */ jsx(this.props.fallback || DefaultErrorFallback, {
+			error: this.state.error,
+			errorId: this.state.errorId,
+			resetError: this.resetError
+		});
+		return this.props.children;
+	}
+};
+const useErrorHandler = () => {
+	return React.useCallback((error) => {
+		throw error;
+	}, []);
+};
+
+//#endregion
+export { ErrorBoundary, useErrorHandler };
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/ui/organisms/ErrorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","names":[],"sources":["../../../../ui/organisms/ErrorBoundary/ErrorBoundary.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n// import * as Sentry from '@sentry/nextjs';\nimport { AlertTriangle, RefreshCw, Home } from 'lucide-react';\nimport { Button } from '../../button';\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n  errorId: string | null;\n}\n\ninterface ErrorBoundaryProps {\n  children: React.ReactNode;\n  fallback?: React.ComponentType<ErrorFallbackProps>;\n  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;\n}\n\ninterface ErrorFallbackProps {\n  error: Error;\n  errorId: string | null;\n  resetError: () => void;\n}\n\nconst DefaultErrorFallback: React.FC<ErrorFallbackProps> = ({\n  error,\n  errorId,\n  resetError,\n}) => {\n  const isDevelopment = process.env.NODE_ENV === 'development';\n\n  return (\n    <div className=\"flex min-h-screen items-center justify-center bg-gray-50 px-4\">\n      <div className=\"w-full max-w-md rounded-lg bg-white p-6 text-center shadow-lg\">\n        <div className=\"mb-4 flex justify-center\">\n          <AlertTriangle className=\"h-12 w-12 text-red-500\" />\n        </div>\n\n        <h1 className=\"mb-2 text-2xl font-semibold text-gray-900\">\n          Une erreur s'est produite\n        </h1>\n\n        <p className=\"mb-6 text-gray-600\">\n          Nous nous excusons pour ce désagrément. Notre équipe a été notifiée et\n          travaille à résoudre le problème.\n        </p>\n\n        {isDevelopment && (\n          <div className=\"mb-6 rounded-md bg-red-50 p-4 text-left\">\n            <p className=\"mb-2 text-base font-medium text-red-800\">\n              Erreur de développement:\n            </p>\n            <p className=\"font-mono text-sm break-all text-red-700\">\n              {error.message}\n            </p>\n            {errorId && (\n              <p className=\"mt-2 text-sm text-red-600\">ID: {errorId}</p>\n            )}\n          </div>\n        )}\n\n        <div className=\"flex flex-col justify-center gap-3 sm:flex-row\">\n          <Button onClick={resetError} className=\"flex items-center gap-2\">\n            <RefreshCw className=\"h-4 w-4\" />\n            Réessayer\n          </Button>\n\n          <Button\n            onClick={() => (window.location.href = '/')}\n            variant=\"secondary\"\n            className=\"flex items-center gap-2\"\n          >\n            <Home className=\"h-4 w-4\" />\n            Accueil\n          </Button>\n        </div>\n\n        {!isDevelopment && errorId && (\n          <p className=\"mt-4 text-sm text-gray-500\">Code d'erreur: {errorId}</p>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport class ErrorBoundary extends React.Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = {\n      hasError: false,\n      error: null,\n      errorId: null,\n    };\n  }\n\n  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\n    return {\n      hasError: true,\n      error,\n    };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    // Generate unique error ID\n    const errorId = `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n\n    // Log to Sentry with additional context\n    // Sentry.withScope((scope) => {\n    //   scope.setTag('errorBoundary', true);\n    //   scope.setContext('errorInfo', { ...errorInfo });\n    //   scope.setContext('errorId', { errorId });\n    //   Sentry.captureException(error);\n    // });\n\n    // Update state with error ID\n    this.setState({ errorId });\n\n    // Call custom error handler if provided\n    this.props.onError?.(error, errorInfo);\n\n    // Log to console in development\n    if (process.env.NODE_ENV === 'development') {\n      console.error('ErrorBoundary caught an error:', error, errorInfo);\n    }\n  }\n\n  resetError = () => {\n    this.setState({\n      hasError: false,\n      error: null,\n      errorId: null,\n    });\n  };\n\n  render() {\n    if (this.state.hasError && this.state.error) {\n      const FallbackComponent = this.props.fallback || DefaultErrorFallback;\n\n      return (\n        <FallbackComponent\n          error={this.state.error}\n          errorId={this.state.errorId}\n          resetError={this.resetError}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\n// Hook for functional components to trigger error boundary\nexport const useErrorHandler = () => {\n  return React.useCallback((error: Error) => {\n    // This will be caught by the nearest error boundary\n    throw error;\n  }, []);\n};\n\nexport type { ErrorBoundaryProps, ErrorFallbackProps };\n"],"mappings":";;;;;;;;AAyBA,MAAM,wBAAsD,EAC1D,OACA,SACA,iBACI;AAGJ,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAI,WAAU;eACb,oBAAC,iBAAc,WAAU,2BAA2B;MAChD;IAEN,oBAAC;KAAG,WAAU;eAA4C;MAErD;IAEL,oBAAC;KAAE,WAAU;eAAqB;MAG9B;IAGF,qBAAC;KAAI,WAAU;;MACb,oBAAC;OAAE,WAAU;iBAA0C;QAEnD;MACJ,oBAAC;OAAE,WAAU;iBACV,MAAM;QACL;MACH,WACC,qBAAC;OAAE,WAAU;kBAA4B,QAAK;QAAY;;MAExD;IAGR,qBAAC;KAAI,WAAU;gBACb,qBAAC;MAAO,SAAS;MAAY,WAAU;iBACrC,oBAAC,aAAU,WAAU,YAAY;OAE1B,EAET,qBAAC;MACC,eAAgB,OAAO,SAAS,OAAO;MACvC,SAAQ;MACR,WAAU;iBAEV,oBAAC,QAAK,WAAU,YAAY;OAErB;MACL;IAEL;;IAGG;GACF;;AAIV,IAAa,gBAAb,cAAmC,MAAM,UAGvC;CACA,YAAY,OAA2B;AACrC,QAAM,MAAM;AACZ,OAAK,QAAQ;GACX,UAAU;GACV,OAAO;GACP,SAAS;GACV;;CAGH,OAAO,yBAAyB,OAA2C;AACzE,SAAO;GACL,UAAU;GACV;GACD;;CAGH,kBAAkB,OAAc,WAA4B;EAE1D,MAAM,UAAU,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,EAAE;AAW5E,OAAK,SAAS,EAAE,SAAS,CAAC;AAG1B,OAAK,MAAM,UAAU,OAAO,UAAU;AAIpC,UAAQ,MAAM,kCAAkC,OAAO,UAAU;;CAIrE,mBAAmB;AACjB,OAAK,SAAS;GACZ,UAAU;GACV,OAAO;GACP,SAAS;GACV,CAAC;;CAGJ,SAAS;AACP,MAAI,KAAK,MAAM,YAAY,KAAK,MAAM,MAGpC,QACE,oBAHwB,KAAK,MAAM,YAAY;GAI7C,OAAO,KAAK,MAAM;GAClB,SAAS,KAAK,MAAM;GACpB,YAAY,KAAK;IACjB;AAIN,SAAO,KAAK,MAAM;;;AAKtB,MAAa,wBAAwB;AACnC,QAAO,MAAM,aAAa,UAAiB;AAEzC,QAAM;IACL,EAAE,CAAC"}

package/dist/ui/organisms/ErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+import { ErrorBoundary, ErrorBoundaryProps, ErrorFallbackProps, useErrorHandler } from "./ErrorBoundary.js";
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorFallbackProps, useErrorHandler };

package/dist/ui/organisms/ErrorBoundary/index.js

@@ -0,0 +1,3 @@
+import { ErrorBoundary, useErrorHandler } from "./ErrorBoundary.js";
+
+export { ErrorBoundary, useErrorHandler };

package/dist/ui/organisms/ListPage/ListPage.d.ts

@@ -0,0 +1,29 @@
+import { ListPageProps } from "./types.js";
+import * as react_jsx_runtime250 from "react/jsx-runtime";
+
+//#region ui/organisms/ListPage/ListPage.d.ts
+declare function ListPage<T>({
+  title,
+  description,
+  header,
+  items,
+  totalItems,
+  totalPages,
+  isLoading,
+  isFetching,
+  error,
+  listState,
+  searchPlaceholder,
+  filters,
+  onRefresh,
+  primaryAction,
+  toolbar,
+  renderItem,
+  renderEmpty,
+  renderStats,
+  className,
+  itemClassName
+}: ListPageProps<T>): react_jsx_runtime250.JSX.Element;
+//#endregion
+export { ListPage };
+//# sourceMappingURL=ListPage.d.ts.map

package/dist/ui/organisms/ListPage/ListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPage.d.ts","names":[],"sources":["../../../../ui/organisms/ListPage/ListPage.tsx"],"sourcesContent":[],"mappings":";;;;iBAWgB;;;;;;;;;;;;;;;;;;;;;GAqBb,cAAc,KAAE,oBAAA,CAAA,GAAA,CAAA"}

package/dist/ui/organisms/ListPage/ListPage.js

@@ -0,0 +1,198 @@
+import { Button } from "../../button.js";
+import { Card, CardContent } from "../../card.js";
+import { HStack, VStack } from "../../stack.js";
+import { Separator } from "../../separator.js";
+import { Pagination } from "../../atoms/Pagination/Pagination.js";
+import { SearchAndFilter } from "../../molecules/SearchAndFilter/SearchAndFilter.js";
+import React from "react";
+import { AlertTriangle, Loader2, Plus, RefreshCcw } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import NextLink from "next/link";
+
+//#region ui/organisms/ListPage/ListPage.tsx
+function ListPage({ title, description, header, items, totalItems, totalPages, isLoading, isFetching, error, listState, searchPlaceholder, filters = [], onRefresh, primaryAction, toolbar, renderItem, renderEmpty, renderStats, className = "", itemClassName = "" }) {
+	const { searchQuery, setSearchQuery, filters: filterValues, setFilter, currentPage, itemsPerPage, setCurrentPage, setItemsPerPage } = listState;
+	if (isLoading && !items.length) return /* @__PURE__ */ jsxs(VStack, {
+		className: `space-y-4 md:space-y-6 ${className}`,
+		children: [header ? header : /* @__PURE__ */ jsxs(VStack, {
+			className: "gap-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold md:text-3xl",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-base",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-[400px] items-center justify-center",
+			children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
+				className: "flex items-center gap-4 p-6",
+				children: [/* @__PURE__ */ jsx(Loader2, { className: "text-primary h-8 w-8 animate-spin" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+					className: "font-medium",
+					children: "Chargement..."
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-base",
+					children: "Récupération des données en cours"
+				})] })]
+			}) })
+		})]
+	});
+	if (error && !items.length) return /* @__PURE__ */ jsxs(VStack, {
+		className: `space-y-4 md:space-y-6 ${className}`,
+		children: [header ? header : /* @__PURE__ */ jsxs(VStack, {
+			className: "gap-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold md:text-3xl",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-base",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-[400px] items-center justify-center",
+			children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
+				className: "flex flex-col items-center gap-4 p-6 text-center",
+				children: [
+					/* @__PURE__ */ jsx(AlertTriangle, { className: "text-destructive h-12 w-12" }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-medium",
+						children: "Erreur de chargement"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-base",
+						children: error.message || "Une erreur est survenue"
+					})] }),
+					onRefresh && /* @__PURE__ */ jsxs(Button, {
+						onClick: onRefresh,
+						variant: "outline",
+						size: "sm",
+						children: [/* @__PURE__ */ jsx(RefreshCcw, { className: "mr-2 h-4 w-4" }), "Réessayer"]
+					})
+				]
+			}) })
+		})]
+	});
+	const filterConfigs = filters.map((filter) => ({
+		key: filter.key,
+		label: filter.label,
+		value: filterValues[filter.key] || "",
+		options: filter.options,
+		onChange: (value) => {
+			setFilter(filter.key, value === "all" ? "" : value);
+		},
+		showCounts: filter.showCounts
+	}));
+	return /* @__PURE__ */ jsxs(VStack, {
+		className: `space-y-4 md:space-y-6 ${className}`,
+		children: [
+			header ? header : /* @__PURE__ */ jsxs(HStack, {
+				className: "items-center justify-between",
+				children: [/* @__PURE__ */ jsxs(VStack, {
+					className: "gap-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl font-bold md:text-3xl",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-base",
+						children: description
+					})]
+				}), /* @__PURE__ */ jsxs(HStack, {
+					className: "items-center gap-4",
+					children: [
+						toolbar,
+						(isLoading || isFetching) && /* @__PURE__ */ jsxs("div", {
+							className: "text-muted-foreground flex items-center gap-2 text-base",
+							children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ jsx("span", {
+								className: "hidden sm:inline",
+								children: "Mise à jour..."
+							})]
+						}),
+						onRefresh && /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onRefresh,
+							disabled: Boolean(isLoading),
+							"aria-label": "Rafraîchir",
+							children: [/* @__PURE__ */ jsx(RefreshCcw, { className: `mr-2 h-4 w-4 ${isLoading || isFetching ? "animate-spin" : ""}` }), /* @__PURE__ */ jsx("span", {
+								className: "hidden sm:inline",
+								children: "Rafraîchir"
+							})]
+						}),
+						primaryAction && /* @__PURE__ */ jsx(Fragment, { children: primaryAction.href ? /* @__PURE__ */ jsx(NextLink, {
+							href: primaryAction.href,
+							children: /* @__PURE__ */ jsxs(Button, { children: [
+								primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "hidden sm:inline",
+									children: primaryAction.label
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "sm:hidden",
+									children: "Nouveau"
+								})
+							] })
+						}) : /* @__PURE__ */ jsxs(Button, {
+							onClick: primaryAction.onClick,
+							children: [
+								primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "hidden sm:inline",
+									children: primaryAction.label
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "sm:hidden",
+									children: "Nouveau"
+								})
+							]
+						}) })
+					]
+				})]
+			}),
+			renderStats && /* @__PURE__ */ jsxs(Fragment, { children: [renderStats(items), /* @__PURE__ */ jsx(Separator, {})] }),
+			/* @__PURE__ */ jsx(SearchAndFilter, {
+				searchValue: searchQuery,
+				onSearchChange: setSearchQuery,
+				searchPlaceholder,
+				filters: filterConfigs,
+				isLoading
+			}),
+			items.length === 0 && !isLoading ? renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
+				className: "flex flex-col items-center gap-4 p-8 text-center",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "bg-muted flex h-12 w-12 items-center justify-center rounded-full",
+						children: /* @__PURE__ */ jsx("div", { className: "bg-muted-foreground/20 h-6 w-6 rounded-full" })
+					}),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-medium",
+						children: "Aucun élément trouvé"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-base",
+						children: searchQuery || Object.values(filterValues).some((v) => v) ? "Essayez de modifier vos critères de recherche" : "Commencez par créer votre premier élément"
+					})] }),
+					primaryAction && !searchQuery && !Object.values(filterValues).some((v) => v) && /* @__PURE__ */ jsx(Fragment, { children: primaryAction.href ? /* @__PURE__ */ jsx(NextLink, {
+						href: primaryAction.href,
+						children: /* @__PURE__ */ jsxs(Button, { children: [primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }), primaryAction.label] })
+					}) : /* @__PURE__ */ jsxs(Button, {
+						onClick: primaryAction.onClick,
+						children: [primaryAction.icon || /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }), primaryAction.label]
+					}) })
+				]
+			}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: `space-y-4 ${itemClassName}`,
+				children: items.map((item, index) => renderItem(item, index))
+			}), totalPages > 1 && /* @__PURE__ */ jsx(Pagination, {
+				currentPage,
+				totalPages,
+				totalItems,
+				itemsPerPage,
+				onPageChange: setCurrentPage,
+				onItemsPerPageChange: setItemsPerPage,
+				disabled: isLoading
+			})] })
+		]
+	});
+}
+
+//#endregion
+export { ListPage };
+//# sourceMappingURL=ListPage.js.map

package/dist/ui/organisms/ListPage/ListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPage.js","names":["Link"],"sources":["../../../../ui/organisms/ListPage/ListPage.tsx"],"sourcesContent":["import React from 'react';\nimport Link from 'next/link';\nimport { AlertTriangle, Loader2, Plus, RefreshCcw } from 'lucide-react';\nimport { Button } from '../../button';\nimport { Card, CardContent } from '../../card';\nimport { VStack, HStack } from '../../stack';\nimport { Separator } from '../../separator';\nimport { SearchAndFilter } from '../../molecules/SearchAndFilter';\nimport { Pagination } from '../../atoms/Pagination';\nimport type { ListPageProps } from './types';\n\nexport function ListPage<T>({\n  title,\n  description,\n  header,\n  items,\n  totalItems,\n  totalPages,\n  isLoading,\n  isFetching,\n  error,\n  listState,\n  searchPlaceholder,\n  filters = [],\n  onRefresh,\n  primaryAction,\n  toolbar,\n  renderItem,\n  renderEmpty,\n  renderStats,\n  className = '',\n  itemClassName = '',\n}: ListPageProps<T>) {\n  const {\n    searchQuery,\n    setSearchQuery,\n    filters: filterValues,\n    setFilter,\n    currentPage,\n    itemsPerPage,\n    setCurrentPage,\n    setItemsPerPage,\n  } = listState;\n\n  // Loading state with no items\n  if (isLoading && !items.length) {\n    return (\n      <VStack className={`space-y-4 md:space-y-6 ${className}`}>\n        {header ? (\n          header\n        ) : (\n          <VStack className=\"gap-1\">\n            <h1 className=\"text-2xl font-bold md:text-3xl\">{title}</h1>\n            {description && (\n              <p className=\"text-muted-foreground text-base\">{description}</p>\n            )}\n          </VStack>\n        )}\n\n        <div className=\"flex min-h-[400px] items-center justify-center\">\n          <Card>\n            <CardContent className=\"flex items-center gap-4 p-6\">\n              <Loader2 className=\"text-primary h-8 w-8 animate-spin\" />\n              <div>\n                <h3 className=\"font-medium\">Chargement...</h3>\n                <p className=\"text-muted-foreground text-base\">\n                  Récupération des données en cours\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </VStack>\n    );\n  }\n\n  // Error state with no items\n  if (error && !items.length) {\n    return (\n      <VStack className={`space-y-4 md:space-y-6 ${className}`}>\n        {header ? (\n          header\n        ) : (\n          <VStack className=\"gap-1\">\n            <h1 className=\"text-2xl font-bold md:text-3xl\">{title}</h1>\n            {description && (\n              <p className=\"text-muted-foreground text-base\">{description}</p>\n            )}\n          </VStack>\n        )}\n\n        <div className=\"flex min-h-[400px] items-center justify-center\">\n          <Card>\n            <CardContent className=\"flex flex-col items-center gap-4 p-6 text-center\">\n              <AlertTriangle className=\"text-destructive h-12 w-12\" />\n              <div>\n                <h3 className=\"font-medium\">Erreur de chargement</h3>\n                <p className=\"text-muted-foreground text-base\">\n                  {error.message || 'Une erreur est survenue'}\n                </p>\n              </div>\n              {onRefresh && (\n                <Button onClick={onRefresh} variant=\"outline\" size=\"sm\">\n                  <RefreshCcw className=\"mr-2 h-4 w-4\" />\n                  Réessayer\n                </Button>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </VStack>\n    );\n  }\n\n  // Prepare filter configurations\n  const filterConfigs = filters.map((filter) => ({\n    key: filter.key,\n    label: filter.label,\n    value: filterValues[filter.key] || '',\n    options: filter.options,\n    onChange: (value: string) => {\n      setFilter(filter.key, value === 'all' ? '' : value);\n    },\n    showCounts: filter.showCounts,\n  }));\n\n  return (\n    <VStack className={`space-y-4 md:space-y-6 ${className}`}>\n      {/* Header */}\n      {header ? (\n        header\n      ) : (\n        <HStack className=\"items-center justify-between\">\n          <VStack className=\"gap-1\">\n            <h1 className=\"text-2xl font-bold md:text-3xl\">{title}</h1>\n            {description && (\n              <p className=\"text-muted-foreground text-base\">{description}</p>\n            )}\n          </VStack>\n\n          <HStack className=\"items-center gap-4\">\n            {toolbar}\n            {(isLoading || isFetching) && (\n              <div className=\"text-muted-foreground flex items-center gap-2 text-base\">\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n                <span className=\"hidden sm:inline\">Mise à jour...</span>\n              </div>\n            )}\n\n            {onRefresh && (\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={onRefresh}\n                disabled={Boolean(isLoading)}\n                aria-label=\"Rafraîchir\"\n              >\n                <RefreshCcw\n                  className={`mr-2 h-4 w-4 ${isLoading || isFetching ? 'animate-spin' : ''}`}\n                />\n                <span className=\"hidden sm:inline\">Rafraîchir</span>\n              </Button>\n            )}\n\n            {primaryAction && (\n              <>\n                {primaryAction.href ? (\n                  <Link href={primaryAction.href}>\n                    <Button>\n                      {primaryAction.icon || <Plus className=\"mr-2 h-4 w-4\" />}\n                      <span className=\"hidden sm:inline\">\n                        {primaryAction.label}\n                      </span>\n                      <span className=\"sm:hidden\">Nouveau</span>\n                    </Button>\n                  </Link>\n                ) : (\n                  <Button onClick={primaryAction.onClick}>\n                    {primaryAction.icon || <Plus className=\"mr-2 h-4 w-4\" />}\n                    <span className=\"hidden sm:inline\">\n                      {primaryAction.label}\n                    </span>\n                    <span className=\"sm:hidden\">Nouveau</span>\n                  </Button>\n                )}\n              </>\n            )}\n          </HStack>\n        </HStack>\n      )}\n\n      {/* Stats (optional) */}\n      {renderStats && (\n        <>\n          {renderStats(items)}\n          <Separator />\n        </>\n      )}\n\n      {/* Search and Filters */}\n      <SearchAndFilter\n        searchValue={searchQuery}\n        onSearchChange={setSearchQuery}\n        searchPlaceholder={searchPlaceholder}\n        filters={filterConfigs}\n        isLoading={isLoading}\n      />\n\n      {/* Content */}\n      {items.length === 0 && !isLoading ? (\n        renderEmpty ? (\n          renderEmpty()\n        ) : (\n          <Card>\n            <CardContent className=\"flex flex-col items-center gap-4 p-8 text-center\">\n              <div className=\"bg-muted flex h-12 w-12 items-center justify-center rounded-full\">\n                <div className=\"bg-muted-foreground/20 h-6 w-6 rounded-full\" />\n              </div>\n              <div>\n                <h3 className=\"font-medium\">Aucun élément trouvé</h3>\n                <p className=\"text-muted-foreground text-base\">\n                  {searchQuery || Object.values(filterValues).some((v) => v)\n                    ? 'Essayez de modifier vos critères de recherche'\n                    : 'Commencez par créer votre premier élément'}\n                </p>\n              </div>\n              {primaryAction &&\n                !searchQuery &&\n                !Object.values(filterValues).some((v) => v) && (\n                  <>\n                    {primaryAction.href ? (\n                      <Link href={primaryAction.href}>\n                        <Button>\n                          {primaryAction.icon || (\n                            <Plus className=\"mr-2 h-4 w-4\" />\n                          )}\n                          {primaryAction.label}\n                        </Button>\n                      </Link>\n                    ) : (\n                      <Button onClick={primaryAction.onClick}>\n                        {primaryAction.icon || (\n                          <Plus className=\"mr-2 h-4 w-4\" />\n                        )}\n                        {primaryAction.label}\n                      </Button>\n                    )}\n                  </>\n                )}\n            </CardContent>\n          </Card>\n        )\n      ) : (\n        <>\n          {/* Items List */}\n          <div className={`space-y-4 ${itemClassName}`}>\n            {items.map((item, index) => renderItem(item, index))}\n          </div>\n\n          {/* Pagination */}\n          {totalPages > 1 && (\n            <Pagination\n              currentPage={currentPage}\n              totalPages={totalPages}\n              totalItems={totalItems}\n              itemsPerPage={itemsPerPage}\n              onPageChange={setCurrentPage}\n              onItemsPerPageChange={setItemsPerPage}\n              disabled={isLoading}\n            />\n          )}\n        </>\n      )}\n    </VStack>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/organisms/ListPage/index.d.ts

@@ -0,0 +1,3 @@
+import { ListPageFilter, ListPageProps } from "./types.js";
+import { ListPage } from "./ListPage.js";
+export { ListPage, type ListPageFilter, type ListPageProps };

package/dist/ui/organisms/ListPage/index.js

@@ -0,0 +1,3 @@
+import { ListPage } from "./ListPage.js";
+
+export { ListPage };

package/dist/ui/organisms/ListPage/types.d.ts

@@ -0,0 +1,41 @@
+import { UseListStateReturn } from "../../useListState.js";
+import { ReactNode } from "react";
+import { FilterOption } from "@contractspec/lib.ui-kit-web/ui/atoms/FilterSelect";
+
+//#region ui/organisms/ListPage/types.d.ts
+interface ListPageFilter {
+  key: string;
+  label: string;
+  options: FilterOption[];
+  showCounts?: boolean;
+}
+interface ListPageProps<T = unknown> {
+  title: string;
+  description?: string;
+  header?: ReactNode;
+  items: T[];
+  totalItems: number;
+  totalPages: number;
+  isLoading: boolean;
+  isFetching?: boolean;
+  error?: Error | null;
+  listState: UseListStateReturn;
+  searchPlaceholder?: string;
+  filters?: ListPageFilter[];
+  onRefresh?: () => void;
+  primaryAction?: {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+  };
+  toolbar?: ReactNode;
+  renderItem: (item: T, index: number) => ReactNode;
+  renderEmpty?: () => ReactNode;
+  renderStats?: (items: T[]) => ReactNode;
+  className?: string;
+  itemClassName?: string;
+}
+//#endregion
+export { ListPageFilter, ListPageProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/ui/organisms/ListPage/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../ui/organisms/ListPage/types.ts"],"sourcesContent":[],"mappings":";;;;;UAIiB,cAAA;;EAAA,KAAA,EAAA,MAAA;EAOA,OAAA,EAJN,YAImB,EAAA;EAInB,UAAA,CAAA,EAAA,OAAA;;AAQD,UAZO,aAYP,CAAA,IAAA,OAAA,CAAA,CAAA;EAGG,KAAA,EAAA,MAAA;EAID,WAAA,CAAA,EAAA,MAAA;EAQD,MAAA,CAAA,EAvBA,SAuBA;EAEC,KAAA,EAtBH,CAsBG,EAAA;EAGS,UAAA,EAAA,MAAA;EAAqB,UAAA,EAAA,MAAA;EACpB,SAAA,EAAA,OAAA;EACE,UAAA,CAAA,EAAA,OAAA;EAAQ,KAAA,CAAA,EAtBtB,KAsBsB,GAAA,IAAA;EAAS,SAAA,EAnB5B,kBAmB4B;;YAf7B;;;;;;WAQD;;YAEC;qBAGS,qBAAqB;sBACpB;wBACE,QAAQ"}

package/dist/ui/page-header.d.ts

@@ -0,0 +1,27 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime73 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types4 from "class-variance-authority/types";
+
+//#region ui/page-header.d.ts
+declare const headerVariants: (props?: ({
+  spacing?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types4.ClassProp) | undefined) => string;
+interface PageHeaderProps extends VariantProps<typeof headerVariants> {
+  breadcrumb?: React$1.ReactNode;
+  title: React$1.ReactNode;
+  subtitle?: React$1.ReactNode;
+  actions?: React$1.ReactNode;
+  className?: string;
+}
+declare function PageHeader({
+  breadcrumb,
+  title,
+  subtitle,
+  actions,
+  spacing,
+  className
+}: PageHeaderProps): react_jsx_runtime73.JSX.Element;
+//#endregion
+export { PageHeader, PageHeaderProps };
+//# sourceMappingURL=page-header.d.ts.map

package/dist/ui/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","names":[],"sources":["../../ui/page-header.tsx"],"sourcesContent":[],"mappings":";;;;;;cAKM;;IAWJ,+BAAA,CAAA;UAEe,eAAA,SAAwB,oBAAoB;EAbvD,UAAA,CAAA,EAcS,OAAA,CAAM,SAHnB;EAEe,KAAA,EAER,OAAA,CAAM,SAFkB;EAA4B,QAAA,CAAA,EAGhD,OAAA,CAAM,SAH0C;EAC9C,OAAM,CAAA,EAGT,OAAA,CAAM,SAHG;EACZ,SAAM,CAAA,EAAA,MAAA;;AAEH,iBAII,UAAA,CAJE;EAAA,UAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAWf,eAXe,CAAA,EAWA,mBAAA,CAAA,GAAA,CAAA,OAXA"}

package/dist/ui/page-header.js

@@ -0,0 +1,40 @@
+import { HStack, VStack } from "./stack.js";
+import "react";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region ui/page-header.tsx
+const headerVariants = cva("", {
+	variants: { spacing: {
+		sm: "gap-1",
+		md: "gap-2",
+		lg: "gap-3"
+	} },
+	defaultVariants: { spacing: "md" }
+});
+function PageHeader({ breadcrumb, title, subtitle, actions, spacing, className }) {
+	return /* @__PURE__ */ jsxs(VStack, {
+		className: cn(headerVariants({ spacing }), className),
+		children: [breadcrumb, /* @__PURE__ */ jsxs(HStack, {
+			className: "flex-col items-start justify-between md:flex-row",
+			children: [/* @__PURE__ */ jsxs(VStack, {
+				className: "gap-1",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-2xl font-semibold md:text-3xl",
+					children: title
+				}), subtitle ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-base",
+					children: subtitle
+				}) : null]
+			}), actions ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: actions
+			}) : null]
+		})]
+	});
+}
+
+//#endregion
+export { PageHeader };
+//# sourceMappingURL=page-header.js.map

package/dist/ui/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../ui/page-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@contractspec/lib.ui-kit-core/utils';\nimport { HStack, VStack } from './stack';\n\nconst headerVariants = cva('', {\n  variants: {\n    spacing: {\n      sm: 'gap-1',\n      md: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    spacing: 'md',\n  },\n});\n\nexport interface PageHeaderProps extends VariantProps<typeof headerVariants> {\n  breadcrumb?: React.ReactNode;\n  title: React.ReactNode;\n  subtitle?: React.ReactNode;\n  actions?: React.ReactNode;\n  className?: string;\n}\n\nexport function PageHeader({\n  breadcrumb,\n  title,\n  subtitle,\n  actions,\n  spacing,\n  className,\n}: PageHeaderProps) {\n  return (\n    <VStack className={cn(headerVariants({ spacing }), className)}>\n      {breadcrumb}\n      <HStack className=\"flex-col items-start justify-between md:flex-row\">\n        <VStack className=\"gap-1\">\n          <h1 className=\"text-2xl font-semibold md:text-3xl\">{title}</h1>\n          {subtitle ? (\n            <p className=\"text-muted-foreground text-base\">{subtitle}</p>\n          ) : null}\n        </VStack>\n        {actions ? (\n          <div className=\"flex items-center gap-2\">{actions}</div>\n        ) : null}\n      </HStack>\n    </VStack>\n  );\n}\n"],"mappings":";;;;;;;AAKA,MAAM,iBAAiB,IAAI,IAAI;CAC7B,UAAU,EACR,SAAS;EACP,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,SAAS,MACV;CACF,CAAC;AAUF,SAAgB,WAAW,EACzB,YACA,OACA,UACA,SACA,SACA,aACkB;AAClB,QACE,qBAAC;EAAO,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,UAAU;aAC1D,YACD,qBAAC;GAAO,WAAU;cAChB,qBAAC;IAAO,WAAU;eAChB,oBAAC;KAAG,WAAU;eAAsC;MAAW,EAC9D,WACC,oBAAC;KAAE,WAAU;eAAmC;MAAa,GAC3D;KACG,EACR,UACC,oBAAC;IAAI,WAAU;cAA2B;KAAc,GACtD;IACG;GACF"}

package/dist/ui/pagination.d.ts

@@ -0,0 +1,50 @@
+import { ButtonProps } from "./button.js";
+import * as React$1 from "react";
+import * as react_jsx_runtime75 from "react/jsx-runtime";
+
+//#region ui/pagination.d.ts
+declare const Pagination: {
+  ({
+    className,
+    ...props
+  }: React$1.ComponentPropsWithoutRef<"nav">): react_jsx_runtime75.JSX.Element;
+  displayName: string;
+};
+declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> & React$1.ComponentPropsWithoutRef<'a'>;
+declare const PaginationLink: {
+  ({
+    className,
+    isActive,
+    size,
+    ...props
+  }: PaginationLinkProps): react_jsx_runtime75.JSX.Element;
+  displayName: string;
+};
+declare const PaginationPrevious: {
+  ({
+    className,
+    ...props
+  }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime75.JSX.Element;
+  displayName: string;
+};
+declare const PaginationNext: {
+  ({
+    className,
+    ...props
+  }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime75.JSX.Element;
+  displayName: string;
+};
+declare const PaginationEllipsis: {
+  ({
+    className,
+    ...props
+  }: React$1.ComponentPropsWithoutRef<"span">): react_jsx_runtime75.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/ui/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","names":[],"sources":["../../ui/pagination.tsx"],"sourcesContent":[],"mappings":";;;;;cAMM;;;;KAGH,OAAA,CAAM,kCAA+B,mBAAA,CAAA,GAAA,CAAA;;AALoB,CAAA;cAetD,mBAAiB,OAAA,CAAA,0BAAA,KAAA,OAAA,CAAA,kBAAA,OAAA,CAAA,eAAA,mBAAA,4BAAA,OAAA,CAAA,cAAA;cAYjB,cAtBG,EAsBW,OAAA,CAAA,yBAtBX,CAsBW,IAtBX,CAsBW,OAAA,CAAA,iBAtBX,CAsBW,OAAA,CAAA,gBAtBX,CAsBW,aAtBX,CAAA,EAsBW,aAtBX,CAAA,EAAA,KAAA,CAAA,GAsBW,OAAA,CAAA,aAtBX,CAsBW,aAtBX,CAAA,CAAA;KA8BJ,mBAAA,GA9BmC;EAAA,QAAA,CAAA,EAAA,OAAA;AAAA,CAAA,GAgCpC,IAtBE,CAsBG,WAtBH,EAAA,MASJ,CAAA,GAcA,OAAA,CAAM,wBAdN,CAAA,GAAA,CAAA;cAgBI,cAzBiB,EAAA;EAAA,CAAA;IAAA,SAAA;IAAA,QAAA;IAAA,IAAA;IAAA,GAAA;EAAA,CAAA,EA8BpB,mBA9BoB,CAAA,EA8BD,mBAAA,CAAA,GAAA,CAAA,OA9BC;EAAA,WAAA,EAAA,MAAA;CAAA;cA6CjB,kBA7CiB,EAAA;EAAA,CAAA;IAAA,SAAA;IAAA,GAAA;EAAA,CAAA,EAgDpB,OAAA,CAAM,cAhDc,CAAA,OAgDQ,cAhDR,CAAA,CAAA,EAgDuB,mBAAA,CAAA,GAAA,CAAA,OAhDvB;EAAA,WAAA,EAAA,MAAA;CAAA;cA6DjB,cA7DiB,EAAA;EAYjB,CAAA;IAAA,SAAA;IAAA,GAKJ;EAAA,CAAA,EA+CC,OAAA,CAAM,cA/CP,CAAA,OA+C6B,cA/C7B,CAAA,CAAA,EA+C4C,mBAAA,CAAA,GAAA,CAAA,OA/C5C;EALkB,WAAA,EAAA,MAAA;CAAA;cAiEd,kBAjEc,EAAA;EAAA,CAAA;IAAA,SAAA;IAAA,GAAA;EAAA,CAAA,EAoEjB,OAAA,CAAM,wBApEW,CAAA,MAAA,CAAA,CAAA,EAoEqB,mBAAA,CAAA,GAAA,CAAA,OApErB;EAAA,WAAA,EAAA,MAAA;CAAA"}

package/dist/ui/pagination.js

@@ -0,0 +1,65 @@
+import { buttonVariants } from "./button.js";
+import * as React$1 from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ui/pagination.tsx
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	role: "navigation",
+	"aria-label": "pagination",
+	className: cn("mx-auto flex w-full justify-center", className),
+	...props
+});
+Pagination.displayName = "Pagination";
+const PaginationContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	className: cn("flex flex-row items-center gap-1", className),
+	...props
+}));
+PaginationContent.displayName = "PaginationContent";
+const PaginationItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	className: cn("", className),
+	...props
+}));
+PaginationItem.displayName = "PaginationItem";
+const PaginationLink = ({ className, isActive, size = "icon", ...props }) => /* @__PURE__ */ jsx("a", {
+	"aria-current": isActive ? "page" : void 0,
+	className: cn(buttonVariants({
+		variant: isActive ? "outline" : "ghost",
+		size
+	}), className),
+	...props
+});
+PaginationLink.displayName = "PaginationLink";
+const PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ jsxs(PaginationLink, {
+	"aria-label": "Go to previous page",
+	size: "default",
+	className: cn("gap-1 pl-2.5", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", { children: "Previous" })]
+});
+PaginationPrevious.displayName = "PaginationPrevious";
+const PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs(PaginationLink, {
+	"aria-label": "Go to next page",
+	size: "default",
+	className: cn("gap-1 pr-2.5", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })]
+});
+PaginationNext.displayName = "PaginationNext";
+const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": true,
+	className: cn("flex h-9 w-9 items-center justify-center", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More pages"
+	})]
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=pagination.js.map