@g4rcez/components 5.0.1 → 5.0.3

package/dist/components/table/index.js

@@ -0,0 +1,102 @@
+"use client";
+import { r as e } from "../../input-field-ffx1MbHo.js";
+import { t } from "../../AnimatePresence-j36AYeOQ.js";
+import { t as n } from "../../dist-DIjUECx9.js";
+import { r } from "../../table-lib-1bkYSklk.js";
+import { n as i, t as a } from "../../inner-table-CeDX60cL.js";
+import { Metadata as o } from "./metadata.js";
+import { useEffect as s, useMemo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/table/index.tsx
+var d = (e, t) => typeof t == "function" ? t(e) : t, f = (e, t, n) => e === t ? void 0 : n?.(t), p = (p) => {
+	let m = e(), h = c(() => ({ sticky: p.sticky === void 0 ? m.table.sticky ?? void 0 : p.sticky ?? void 0 }), [p.sticky, m.table.sticky]), g = p.operations ?? m.table.operations ?? !0, _ = c(() => r(p.cols), [p.cols]), [v, y] = n({
+		cols: p.cols,
+		sorters: p.sorters ?? [],
+		groups: p.groups ?? [],
+		filters: p.filters ?? []
+	}, (e) => {
+		let t = (t) => (n) => {
+			let r = e.state();
+			return {
+				...r,
+				[t]: d(r[t], n)
+			};
+		};
+		return {
+			cols: t("cols"),
+			sorters: t("sorters"),
+			groups: t("groups"),
+			filters: t("filters")
+		};
+	}, { postMiddleware: [(e, t) => (p.set?.(e), f(t?.filters ?? [], e.filters ?? [], p.setFilters), f(t?.sorters ?? [], e.sorters ?? [], p.setSorters), f(t?.groups ?? [], e.groups ?? [], p.setGroups), f(t?.cols ?? [], e.cols ?? [], p.setCols), e)] });
+	return s(() => {
+		y.cols(p.cols);
+	}, [p.cols]), /* @__PURE__ */ l(i, {
+		value: h,
+		children: /* @__PURE__ */ u(t, {
+			propagate: !0,
+			initial: !1,
+			children: [g ? /* @__PURE__ */ l(o, {
+				cols: v.cols,
+				rows: p.rows,
+				options: _,
+				groups: v.groups,
+				filters: v.filters,
+				setCols: y.cols,
+				sorters: v.sorters,
+				setGroups: y.groups,
+				setFilters: y.filters,
+				setSorters: y.sorters,
+				pagination: p.pagination ?? null,
+				inlineFilter: p.inlineFilter ?? !0,
+				inlineSorter: p.inlineSorter ?? !0
+			}) : null, v.groups.length === 0 ? /* @__PURE__ */ l(a, {
+				...p,
+				index: 0,
+				cols: v.cols,
+				options: _,
+				groups: v.groups,
+				filters: v.filters,
+				optionCols: _,
+				setCols: y.cols,
+				sorters: v.sorters,
+				setGroups: y.groups,
+				setFilters: y.filters,
+				setSorters: y.sorters,
+				onScrollEnd: p.onScrollEnd,
+				pagination: p.pagination ?? null,
+				inlineFilter: p.inlineFilter ?? !0,
+				inlineSorter: p.inlineSorter ?? !0
+			}) : /* @__PURE__ */ l("div", {
+				className: "flex flex-wrap gap-table-groups-gap",
+				children: v.groups.map((e, t) => /* @__PURE__ */ l("div", {
+					className: "min-w-full",
+					children: /* @__PURE__ */ l(a, {
+						...p,
+						group: e,
+						index: t,
+						cols: v.cols,
+						pagination: null,
+						rows: e.rows,
+						options: _,
+						groups: v.groups,
+						filters: v.filters,
+						optionCols: _,
+						setCols: y.cols,
+						sorters: v.sorters,
+						setGroups: y.groups,
+						setFilters: y.filters,
+						setSorters: y.sorters,
+						onScrollEnd: p.onScrollEnd,
+						inlineFilter: p.inlineFilter ?? !0,
+						inlineSorter: p.inlineSorter ?? !0
+					})
+				}, `group-${e.groupId}`))
+			})]
+		})
+	});
+};
+//#endregion
+export { p as Table };
+
+//# sourceMappingURL=index.js.map

package/dist/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["\"use client\";\nimport { AnimatePresence } from \"motion/react\";\nimport { ComponentProps, useEffect, useMemo } from \"react\";\nimport { useReducer } from \"use-typed-reducer\";\nimport { useTweaks } from \"../../hooks/use-tweaks\";\nimport { FilterConfig } from \"./filter\";\nimport { GroupItem } from \"./group\";\nimport { InnerTable, InnerTableProps } from \"./inner-table\";\nimport { Metadata } from \"./metadata\";\nimport { Sorter } from \"./sort\";\nimport { Col, createOptionCols, TableGetters, TableOperationProps } from \"./table-lib\";\nimport { TableContextProps, TableProvider } from \"./table.context\";\n\nexport type TableProps<T extends Record<string, unknown>> = Pick<InnerTableProps<T>, \"cols\" | \"rows\" | \"loadingMore\" | \"border\" | \"Aside\"> & {\n    name: string;\n} & Partial<\n        TableOperationProps<T> & {\n            loading: boolean;\n            reference: keyof T;\n            operations: boolean;\n            useControl: boolean;\n            inlineFilter: boolean;\n            inlineSorter: boolean;\n            sticky: number | null;\n            onScrollEnd: () => void;\n            getScrollRef?: () => HTMLElement | undefined;\n            getRowProps: (row: T) => ComponentProps<\"tr\">;\n        }\n    >;\n\nconst dispatcherFun = <Prev extends object, S extends Prev | ((prev: Prev) => Prev)>(prev: Prev, setter: S) =>\n    typeof setter === \"function\" ? setter(prev) : setter;\n\ntype DispatcherFun<T extends object> = T | ((prev: T) => T);\n\nconst compareAndExec = <T extends unknown[]>(prev: T, state: T, exec?: (t: T) => void) => (prev === state ? undefined : exec?.(state));\n\nexport const Table = <T extends Record<string, unknown>>(props: TableProps<T>) => {\n    const tweaks = useTweaks();\n    const contextState = useMemo(\n        (): TableContextProps => ({\n            sticky: props.sticky === undefined ? (tweaks.table.sticky ?? undefined) : (props.sticky ?? undefined),\n        }),\n        [props.sticky, tweaks.table.sticky]\n    );\n    const operations = props.operations ?? tweaks.table.operations ?? true;\n    const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);\n    const [state, dispatch] = useReducer(\n        {\n            cols: props.cols as Col<T>[],\n            sorters: (props.sorters ?? []) as Sorter<T>[],\n            groups: (props.groups ?? []) as GroupItem<T>[],\n            filters: (props.filters ?? []) as FilterConfig<T>[],\n        },\n        (get) => {\n            const create =\n                <V extends object>(key: string) =>\n                (arg: V) => {\n                    const state = get.state();\n                    type StateValue = (typeof state)[keyof typeof state];\n                    return {\n                        ...state,\n                        [key]: dispatcherFun(state[key as keyof typeof state], arg as StateValue),\n                    };\n                };\n            return {\n                cols: create<DispatcherFun<Col<T>[]>>(\"cols\"),\n                sorters: create<DispatcherFun<Sorter<T>[]>>(\"sorters\"),\n                groups: create<DispatcherFun<GroupItem<T>[]>>(\"groups\"),\n                filters: create<DispatcherFun<FilterConfig<T>[]>>(\"filters\"),\n            };\n        },\n        {\n            postMiddleware: [\n                (state, prev) => {\n                    props.set?.(state as unknown as TableGetters<T>);\n                    compareAndExec(prev?.filters ?? [], state.filters ?? [], props.setFilters);\n                    compareAndExec(prev?.sorters ?? [], state.sorters ?? [], props.setSorters);\n                    compareAndExec(prev?.groups ?? [], state.groups ?? [], props.setGroups);\n                    compareAndExec(prev?.cols ?? [], state.cols ?? [], props.setCols);\n                    return state;\n                },\n            ],\n        }\n    );\n\n    useEffect(() => {\n        dispatch.cols(props.cols);\n    }, [props.cols]);\n\n    return (\n        <TableProvider value={contextState}>\n            <AnimatePresence propagate initial={false}>\n                {operations ? (\n                    <Metadata\n                        cols={state.cols}\n                        rows={props.rows}\n                        options={optionCols}\n                        groups={state.groups}\n                        filters={state.filters}\n                        setCols={dispatch.cols}\n                        sorters={state.sorters}\n                        setGroups={dispatch.groups}\n                        setFilters={dispatch.filters}\n                        setSorters={dispatch.sorters}\n                        pagination={props.pagination ?? null}\n                        inlineFilter={props.inlineFilter ?? true}\n                        inlineSorter={props.inlineSorter ?? true}\n                    />\n                ) : null}\n                {state.groups.length === 0 ? (\n                    <InnerTable\n                        {...props}\n                        index={0}\n                        cols={state.cols}\n                        options={optionCols}\n                        groups={state.groups}\n                        filters={state.filters}\n                        optionCols={optionCols}\n                        setCols={dispatch.cols}\n                        sorters={state.sorters}\n                        setGroups={dispatch.groups}\n                        setFilters={dispatch.filters}\n                        setSorters={dispatch.sorters}\n                        onScrollEnd={props.onScrollEnd}\n                        pagination={props.pagination ?? null}\n                        inlineFilter={props.inlineFilter ?? true}\n                        inlineSorter={props.inlineSorter ?? true}\n                    />\n                ) : (\n                    <div className=\"flex flex-wrap gap-table-groups-gap\">\n                        {state.groups.map((group, index) => (\n                            <div className=\"min-w-full\" key={`group-${group.groupId}`}>\n                                <InnerTable\n                                    {...props}\n                                    group={group}\n                                    index={index}\n                                    cols={state.cols}\n                                    pagination={null}\n                                    rows={group.rows}\n                                    options={optionCols}\n                                    groups={state.groups}\n                                    filters={state.filters}\n                                    optionCols={optionCols}\n                                    setCols={dispatch.cols}\n                                    sorters={state.sorters}\n                                    setGroups={dispatch.groups}\n                                    setFilters={dispatch.filters}\n                                    setSorters={dispatch.sorters}\n                                    onScrollEnd={props.onScrollEnd}\n                                    inlineFilter={props.inlineFilter ?? true}\n                                    inlineSorter={props.inlineSorter ?? true}\n                                />\n                            </div>\n                        ))}\n                    </div>\n                )}\n            </AnimatePresence>\n        </TableProvider>\n    );\n};\n"],"mappings":"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"}

package/dist/components/table/index.jsx

@@ -0,0 +1,63 @@
+"use client";
+import { AnimatePresence } from "motion/react";
+import { useEffect, useMemo } from "react";
+import { useReducer } from "use-typed-reducer";
+import { useTweaks } from "../../hooks/use-tweaks";
+import { InnerTable } from "./inner-table";
+import { Metadata } from "./metadata";
+import { createOptionCols } from "./table-lib";
+import { TableProvider } from "./table.context";
+const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
+const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec?.(state));
+export const Table = (props) => {
+    const tweaks = useTweaks();
+    const contextState = useMemo(() => ({
+        sticky: props.sticky === undefined ? (tweaks.table.sticky ?? undefined) : (props.sticky ?? undefined),
+    }), [props.sticky, tweaks.table.sticky]);
+    const operations = props.operations ?? tweaks.table.operations ?? true;
+    const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);
+    const [state, dispatch] = useReducer({
+        cols: props.cols,
+        sorters: (props.sorters ?? []),
+        groups: (props.groups ?? []),
+        filters: (props.filters ?? []),
+    }, (get) => {
+        const create = (key) => (arg) => {
+            const state = get.state();
+            return {
+                ...state,
+                [key]: dispatcherFun(state[key], arg),
+            };
+        };
+        return {
+            cols: create("cols"),
+            sorters: create("sorters"),
+            groups: create("groups"),
+            filters: create("filters"),
+        };
+    }, {
+        postMiddleware: [
+            (state, prev) => {
+                props.set?.(state);
+                compareAndExec(prev?.filters ?? [], state.filters ?? [], props.setFilters);
+                compareAndExec(prev?.sorters ?? [], state.sorters ?? [], props.setSorters);
+                compareAndExec(prev?.groups ?? [], state.groups ?? [], props.setGroups);
+                compareAndExec(prev?.cols ?? [], state.cols ?? [], props.setCols);
+                return state;
+            },
+        ],
+    });
+    useEffect(() => {
+        dispatch.cols(props.cols);
+    }, [props.cols]);
+    return (<TableProvider value={contextState}>
+            <AnimatePresence propagate initial={false}>
+                {operations ? (<Metadata cols={state.cols} rows={props.rows} options={optionCols} groups={state.groups} filters={state.filters} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} pagination={props.pagination ?? null} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>) : null}
+                {state.groups.length === 0 ? (<InnerTable {...props} index={0} cols={state.cols} options={optionCols} groups={state.groups} filters={state.filters} optionCols={optionCols} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} onScrollEnd={props.onScrollEnd} pagination={props.pagination ?? null} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>) : (<div className="flex flex-wrap gap-table-groups-gap">
+                        {state.groups.map((group, index) => (<div className="min-w-full" key={`group-${group.groupId}`}>
+                                <InnerTable {...props} group={group} index={index} cols={state.cols} pagination={null} rows={group.rows} options={optionCols} groups={state.groups} filters={state.filters} optionCols={optionCols} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} onScrollEnd={props.onScrollEnd} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>
+                            </div>))}
+                    </div>)}
+            </AnimatePresence>
+        </TableProvider>);
+};

package/dist/components/table/inner-table.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentProps, HTMLAttributes } from "react";
+import { OptionProps } from "../form/select";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Sorter } from "./sort";
+import { CellAsideElement, Col, TableOperationProps } from "./table-lib";
+import { Any } from "../../types";
+export type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
+    rows: T[];
+    index: number;
+    cols: Col<T>[];
+    border?: boolean;
+    loading?: boolean;
+    group?: GroupItem<T>;
+    useControl?: boolean;
+    loadingMore?: boolean;
+    sorters?: Sorter<T>[];
+    showMetadata?: boolean;
+    groups?: GroupItem<T>[];
+    onScrollEnd?: () => void;
+    optionCols: OptionProps[];
+    filters?: FilterConfig<T>[];
+    Aside?: React.FC<CellAsideElement<T>>;
+    getScrollRef?: () => HTMLElement | undefined;
+    getRowProps?: (_: T) => ComponentProps<"tr">;
+    setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+};
+export declare const InnerTable: <T extends Record<string, unknown>>({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, pagination, useControl, ...props }: InnerTableProps<T>) => React.JSX.Element;
+//# sourceMappingURL=inner-table.d.ts.map

package/dist/components/table/inner-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAM7H,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAYlC,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACzE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CAAC;AAmFN,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,0HAY3D,eAAe,CAAC,CAAC,CAAC,sBA0EpB,CAAC"}

package/dist/components/table/inner-table.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../inner-table-CeDX60cL.js";
+export { e as InnerTable };

package/dist/components/table/inner-table.jsx

@@ -0,0 +1,102 @@
+import Linq from "linq-arrays";
+import { AnimatePresence } from "motion/react";
+import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { Empty } from "../display/empty";
+import { SkeletonCell } from "../display/skeleton";
+import { Pagination } from "./pagination";
+import { Row } from "./row";
+import { multiSort } from "./sort";
+import { useTable } from "./table.context";
+import { TableHeader } from "./thead";
+const TableBody = React.forwardRef(({ context: _context, className = "", ...props }, ref) => (<tbody {...props} role="rowgroup" className={`divide-y divide-table-border ${className}`} ref={ref}>
+            <AnimatePresence>{props.children}</AnimatePresence>
+        </tbody>));
+const VirtualTable = React.forwardRef(({ context: _context, className = "", ...props }, ref) => (<table {...props} role="table" ref={ref} style={{ ...props.style, "--table-cell-padding": "0.75rem" }} className={`table w-full table-fixed border-separate border-spacing-0 text-left ${className ?? ""}`}/>));
+const Thead = React.forwardRef(({ context: _context, ...props }, ref) => {
+    const ctx = useTable();
+    const style = {
+        ...props.style,
+        top: Is.number(ctx.sticky) ? `${ctx.sticky}px` : undefined,
+    };
+    return <thead {...props} ref={ref} style={style} role="rowgroup" className="group:sticky top-0 hidden bg-transparent md:table-header-group"/>;
+});
+const TRow = React.forwardRef(({ context, item, className, ...props }, ref) => {
+    const contextProps = item ? context?.getRowProps?.(item) : undefined;
+    const innerProps = { ...props, ...contextProps };
+    return (<tr {...innerProps} role="row" ref={ref} className={`group-table-row flex h-fit flex-col flex-wrap justify-center gap-table-row-gap pb-table-row-pb md:table-row ${[className, contextProps?.className].filter(Boolean).join(" ")}`}/>);
+});
+const TFoot = React.forwardRef(({ context, ...props }, ref) => {
+    if (context?.loadingMore) {
+        return (<tfoot {...props} ref={ref} className="bg-card-background">
+                <tr role="row" className="bg-card-background">
+                    <td colSpan={999} className="h-table-loading-h bg-card-background px-table-cell-px">
+                        <span className="block h-table-loading-bar-h w-full animate-pulse rounded-table-loading-bar-radius bg-foreground opacity-60"/>
+                    </td>
+                </tr>
+            </tfoot>);
+    }
+    return null;
+});
+const components = {
+    TableRow: TRow,
+    TableFoot: TFoot,
+    TableHead: Thead,
+    Table: VirtualTable,
+    TableBody: TableBody,
+};
+const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+const EmptyContent = (props) => (<div className="flex h-table-empty-h w-full items-center justify-center px-table-cell-px">{props.loading ? SkeletonCell : <Empty />}</div>);
+const EmptyCell = () => <Fragment />;
+const emptyRows = [];
+export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, pagination = null, useControl = false, ...props }) => {
+    const ref = useRef(null);
+    const [, setShowLoadingFooter] = useState(false);
+    const onScrollEndRef = useStableRef(onScrollEnd);
+    const loadingMoreRef = useStableRef(props.loadingMore);
+    const rows = useMemo(() => {
+        if (props.loading)
+            return loadingArray;
+        if (useControl)
+            return props.rows;
+        const linq = new Linq(props.rows);
+        if (filters.length > 0) {
+            filters.forEach((x) => x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value));
+        }
+        if (sorters.length === 0)
+            return linq.Select();
+        return multiSort(linq.Select(), sorters);
+    }, [props.loading, props.rows, useControl, filters, sorters]);
+    useEffect(() => {
+        if (ref.current === null)
+            return () => { };
+        const div = ref.current;
+        const observer = new IntersectionObserver((entries) => {
+            const endOfPage = entries[entries.length - 1];
+            const condition = endOfPage.isIntersecting && loadingMoreRef.current;
+            if (condition) {
+                onScrollEndRef.current?.();
+                return void setShowLoadingFooter(true);
+            }
+            return setShowLoadingFooter(false);
+        });
+        observer.observe(div);
+        return () => observer.disconnect();
+    }, [loadingMoreRef, onScrollEndRef]);
+    const empty = rows.length === 0;
+    const context = {
+        cols: cols,
+        Aside: props.Aside,
+        loading: props.loading,
+        getRowProps: props.getRowProps,
+        loadingMore: props.loadingMore,
+    };
+    return (<div className="group relative flex w-full flex-col whitespace-nowrap rounded-table-radius bg-table-background">
+            <TableVirtuoso components={components} context={context} totalCount={rows.length} itemContent={empty ? EmptyCell : Row} data={empty ? emptyRows : rows} useWindowScroll={getScrollRef ? false : true} customScrollParent={getScrollRef ? getScrollRef() : undefined} fixedHeaderContent={() => (<TableHeader headers={cols} filters={filters} setCols={setCols} sorters={sorters} setFilters={setFilters} setSorters={setSorters} loading={!!props.loading} inlineFilter={props.inlineFilter} inlineSorter={props.inlineSorter}/>)}/>
+            {empty ? <EmptyContent loading={props.loading}/> : null}
+            <div aria-hidden="true" ref={ref} className="h-0.5 w-full"/>
+            {pagination !== null ? <Pagination {...pagination}/> : null}
+        </div>);
+};

package/dist/components/table/metadata.d.ts

@@ -0,0 +1,4 @@
+import { Any } from "../../types";
+import { TableOperationProps } from "./table-lib";
+export declare const Metadata: <T extends Any>(props: TableOperationProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=metadata.d.ts.map

package/dist/components/table/metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/table/metadata.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAIlC,OAAO,EAAE,mBAAmB,EAAiB,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,mBAAmB,CAAC,CAAC,CAAC,gCA8CpE,CAAC"}

package/dist/components/table/metadata.js

@@ -0,0 +1,73 @@
+import { t as e } from "../../sort-DGmiselV.js";
+import { t } from "../../group-Dl14TJXO.js";
+import { c as n } from "../../table-lib-1bkYSklk.js";
+import { Filter as r } from "./filter.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/table/metadata.tsx
+var o = (o) => /* @__PURE__ */ i("header", {
+	className: "mb-table-metadata-mb min-w-full",
+	children: /* @__PURE__ */ a("div", {
+		className: "flex min-w-full flex-wrap items-center justify-between gap-x-table-metadata-gap-x gap-y-table-metadata-gap-y",
+		children: [/* @__PURE__ */ a("div", {
+			className: "items-centeend flex w-fit gap-table-ops-gap whitespace-nowrap py-table-ops-py",
+			children: [
+				/* @__PURE__ */ i("span", { children: /* @__PURE__ */ i(r, {
+					cols: o.cols,
+					options: o.options,
+					filters: o.filters,
+					set: o.setFilters
+				}) }),
+				/* @__PURE__ */ i("span", { children: /* @__PURE__ */ i(e, {
+					options: o.options,
+					cols: o.cols,
+					sorters: o.sorters,
+					set: o.setSorters
+				}) }),
+				/* @__PURE__ */ i("span", { children: /* @__PURE__ */ i(t, {
+					rows: o.rows,
+					groups: o.groups,
+					setGroups: o.setGroups,
+					options: o.options,
+					cols: o.cols
+				}) })
+			]
+		}), /* @__PURE__ */ i("ul", {
+			className: "flex w-full flex-1 flex-grow flex-row flex-wrap items-center gap-table-filter-gap md:justify-end",
+			children: o.filters.map((e) => /* @__PURE__ */ a("li", {
+				className: "flex items-center gap-table-inline-gap-tight rounded-table-pill-radius border border-card-border px-table-pill-px py-table-pill-py",
+				children: [/* @__PURE__ */ a("span", { children: [
+					/* @__PURE__ */ i("span", {
+						className: "mr-table-filter-dot-mr inline-block aspect-square size-table-filter-dot-size rounded-full bg-primary",
+						"aria-hidden": "true"
+					}),
+					e.label,
+					" ",
+					e.operation.label.toLowerCase(),
+					":"
+				] }), /* @__PURE__ */ a("div", {
+					className: "relative w-min min-w-table-metadata-min-w",
+					children: [/* @__PURE__ */ i("span", {
+						"aria-hidden": "true",
+						className: "invisible whitespace-pre p-0",
+						children: e.value || " "
+					}), /* @__PURE__ */ i("input", {
+						type: e.type,
+						value: e.value,
+						className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+						onChange: (t) => {
+							let r = n(t.target);
+							o.setFilters((t) => t.map((t) => e.id === t.id ? {
+								...t,
+								value: r
+							} : t));
+						}
+					})]
+				})]
+			}, `filter-table-${e.id}`))
+		})]
+	})
+});
+//#endregion
+export { o as Metadata };
+
+//# sourceMappingURL=metadata.js.map

package/dist/components/table/metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.js","names":[],"sources":["../../../src/components/table/metadata.tsx"],"sourcesContent":["import { Any } from \"../../types\";\nimport { Filter } from \"./filter\";\nimport { Group } from \"./group\";\nimport { Sort } from \"./sort\";\nimport { TableOperationProps, valueFromType } from \"./table-lib\";\n\nexport const Metadata = <T extends Any>(props: TableOperationProps<T>) => (\n    <header className=\"mb-table-metadata-mb min-w-full\">\n        <div className=\"flex min-w-full flex-wrap items-center justify-between gap-x-table-metadata-gap-x gap-y-table-metadata-gap-y\">\n            <div className=\"items-centeend flex w-fit gap-table-ops-gap whitespace-nowrap py-table-ops-py\">\n                <span>\n                    <Filter cols={props.cols} options={props.options} filters={props.filters} set={props.setFilters} />\n                </span>\n                <span>\n                    <Sort options={props.options} cols={props.cols} sorters={props.sorters} set={props.setSorters} />\n                </span>\n                <span>\n                    <Group rows={props.rows} groups={props.groups} setGroups={props.setGroups} options={props.options} cols={props.cols} />\n                </span>\n            </div>\n            <ul className=\"flex w-full flex-1 flex-grow flex-row flex-wrap items-center gap-table-filter-gap md:justify-end\">\n                {props.filters.map((x) => (\n                    <li\n                        key={`filter-table-${x.id}`}\n                        className=\"flex items-center gap-table-inline-gap-tight rounded-table-pill-radius border border-card-border px-table-pill-px py-table-pill-py\"\n                    >\n                        <span>\n                            <span\n                                className=\"mr-table-filter-dot-mr inline-block aspect-square size-table-filter-dot-size rounded-full bg-primary\"\n                                aria-hidden=\"true\"\n                            />\n                            {x.label} {x.operation.label.toLowerCase()}:\n                        </span>\n                        <div className=\"relative w-min min-w-table-metadata-min-w\">\n                            <span aria-hidden=\"true\" className=\"invisible whitespace-pre p-0\">\n                                {x.value || \" \"}\n                            </span>\n                            <input\n                                type={x.type}\n                                value={x.value as string}\n                                className=\"absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none\"\n                                onChange={(e) => {\n                                    const value = valueFromType(e.target);\n                                    props.setFilters((prev) => prev.map((item) => (x.id === item.id ? { ...item, value } : item)));\n                                }}\n                            />\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    </header>\n);\n"],"mappings":";;;;;;AAMA,IAAa,KAA2B,MACpC,kBAAC,UAAD;CAAQ,WAAU;WACd,kBAAC,OAAD;EAAK,WAAU;YAAf,CACI,kBAAC,OAAD;GAAK,WAAU;aAAf;IACI,kBAAC,QAAD,EAAA,UACI,kBAAC,GAAD;KAAQ,MAAM,EAAM;KAAM,SAAS,EAAM;KAAS,SAAS,EAAM;KAAS,KAAK,EAAM;IAAa,CAAA,EAChG,CAAA;IACN,kBAAC,QAAD,EAAA,UACI,kBAAC,GAAD;KAAM,SAAS,EAAM;KAAS,MAAM,EAAM;KAAM,SAAS,EAAM;KAAS,KAAK,EAAM;IAAa,CAAA,EAC9F,CAAA;IACN,kBAAC,QAAD,EAAA,UACI,kBAAC,GAAD;KAAO,MAAM,EAAM;KAAM,QAAQ,EAAM;KAAQ,WAAW,EAAM;KAAW,SAAS,EAAM;KAAS,MAAM,EAAM;IAAO,CAAA,EACpH,CAAA;GACL;MACL,kBAAC,MAAD;GAAI,WAAU;aACT,EAAM,QAAQ,KAAK,MAChB,kBAAC,MAAD;IAEI,WAAU;cAFd,CAII,kBAAC,QAAD,EAAA,UAAA;KACI,kBAAC,QAAD;MACI,WAAU;MACV,eAAY;KACf,CAAA;KACA,EAAE;KAAM;KAAE,EAAE,UAAU,MAAM,YAAY;KAAE;IACzC,EAAA,CAAA,GACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACI,kBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;gBAC9B,EAAE,SAAS;KACV,CAAA,GACN,kBAAC,SAAD;MACI,MAAM,EAAE;MACR,OAAO,EAAE;MACT,WAAU;MACV,WAAW,MAAM;OACb,IAAM,IAAQ,EAAc,EAAE,MAAM;OACpC,EAAM,YAAY,MAAS,EAAK,KAAK,MAAU,EAAE,OAAO,EAAK,KAAK;QAAE,GAAG;QAAM;OAAM,IAAI,CAAK,CAAC;MACjG;KACH,CAAA,CACA;MACL;MAxBK,gBAAgB,EAAE,IAwBvB,CACP;EACD,CAAA,CACH;;AACD,CAAA"}

package/dist/components/table/metadata.jsx

@@ -0,0 +1,36 @@
+import { Filter } from "./filter";
+import { Group } from "./group";
+import { Sort } from "./sort";
+import { valueFromType } from "./table-lib";
+export const Metadata = (props) => (<header className="mb-table-metadata-mb min-w-full">
+        <div className="flex min-w-full flex-wrap items-center justify-between gap-x-table-metadata-gap-x gap-y-table-metadata-gap-y">
+            <div className="items-centeend flex w-fit gap-table-ops-gap whitespace-nowrap py-table-ops-py">
+                <span>
+                    <Filter cols={props.cols} options={props.options} filters={props.filters} set={props.setFilters}/>
+                </span>
+                <span>
+                    <Sort options={props.options} cols={props.cols} sorters={props.sorters} set={props.setSorters}/>
+                </span>
+                <span>
+                    <Group rows={props.rows} groups={props.groups} setGroups={props.setGroups} options={props.options} cols={props.cols}/>
+                </span>
+            </div>
+            <ul className="flex w-full flex-1 flex-grow flex-row flex-wrap items-center gap-table-filter-gap md:justify-end">
+                {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="flex items-center gap-table-inline-gap-tight rounded-table-pill-radius border border-card-border px-table-pill-px py-table-pill-py">
+                        <span>
+                            <span className="mr-table-filter-dot-mr inline-block aspect-square size-table-filter-dot-size rounded-full bg-primary" aria-hidden="true"/>
+                            {x.label} {x.operation.label.toLowerCase()}:
+                        </span>
+                        <div className="relative w-min min-w-table-metadata-min-w">
+                            <span aria-hidden="true" className="invisible whitespace-pre p-0">
+                                {x.value || " "}
+                            </span>
+                            <input type={x.type} value={x.value} className="absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" onChange={(e) => {
+            const value = valueFromType(e.target);
+            props.setFilters((prev) => prev.map((item) => (x.id === item.id ? { ...item, value } : item)));
+        }}/>
+                        </div>
+                    </li>))}
+            </ul>
+        </div>
+    </header>);

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { TablePagination } from "./table-lib";
+export declare function createPaginationItems(current: number, max: number): (string | number)[];
+export declare const Pagination: (pagination: TablePagination) => React.JSX.Element;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,uBAmBjE;AAED,eAAO,MAAM,UAAU,GAAI,YAAY,eAAe,sBA4ErD,CAAC"}

package/dist/components/table/pagination.js

@@ -0,0 +1,70 @@
+import { Polymorph as e } from "../core/polymorph.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import { Fragment as n, useId as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/table/pagination.tsx
+function s(e, t) {
+	if (!e || !t) return [];
+	let n = [1];
+	if (e === 1 && t === 1) return n;
+	e > 4 && n.push("-");
+	let r = e - 2, i = e + 2;
+	for (let e = r > 2 ? r : 2; e <= Math.min(t, i); e++) n.push(e);
+	let a = t - 2;
+	return i + 1 !== a && i + 1 < t && n.push("_"), i < t && (n.push(t - 2), n.push(t - 1), n.push(t)), Array.from(new Set(n));
+}
+var c = (c) => {
+	let l = r(), u = t(), d = i(() => s(c.current, c.pages), [c]), f = c.current < c.pages, p = c.asLink ?? "button";
+	return /* @__PURE__ */ o("footer", {
+		className: "text-typography-sm flex flex-wrap items-center justify-center gap-table-pag-gap border-t-muted p-table-pag-p lg:flex-nowrap lg:justify-between",
+		children: [/* @__PURE__ */ a("p", { children: /* @__PURE__ */ a(u.tablePaginationFooter, {
+			...c,
+			sizes: c.sizes,
+			select: c.onChangeSize && Array.isArray(c.sizes) ? /* @__PURE__ */ o(n, { children: [
+				/* @__PURE__ */ a("label", {
+					htmlFor: l,
+					children: u.tablePaginationSelectLabel
+				}),
+				/* @__PURE__ */ a("select", {
+					id: l,
+					value: c.size,
+					className: "cursor-pointer bg-transparent",
+					onChange: (e) => {
+						c.onChangeSize?.(Number(e.target.value));
+					},
+					children: c.sizes.map((e) => /* @__PURE__ */ a("option", {
+						value: e,
+						children: e
+					}, `pagination-opt-${e}`))
+				}),
+				" "
+			] }) : null
+		}) }), /* @__PURE__ */ a("nav", { children: /* @__PURE__ */ o("ul", {
+			className: "flex items-center gap-table-pag-items-gap",
+			children: [
+				c.current > 1 ? /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(e, {
+					as: p,
+					href: "previous",
+					className: "",
+					children: u.tablePaginationPrevious
+				}) }) : null,
+				d.map((t) => t === null ? null : /* @__PURE__ */ a(n, { children: typeof t == "string" ? /* @__PURE__ */ a("li", { children: "..." }) : /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(e, {
+					href: t,
+					as: p,
+					className: `cursor-pointer border-b-2 px-table-pag-item-px py-table-pag-item-py proportional-nums transition-colors hover:border-primary-subtle hover:text-primary-subtle ${t === c.current ? "border-primary text-primary" : "border-transparent"}`,
+					children: t
+				}) }) }, `pagination-${t}`)),
+				f ? /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(e, {
+					as: p,
+					href: "next",
+					className: "",
+					children: u.tablePaginationNext
+				}) }) : null
+			]
+		}) })]
+	});
+};
+//#endregion
+export { c as Pagination, s as createPaginationItems };
+
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/table/pagination.tsx"],"sourcesContent":["import React, { Fragment, useId, useMemo } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { Polymorph } from \"../core/polymorph\";\nimport { TablePagination } from \"./table-lib\";\n\nexport function createPaginationItems(current: number, max: number) {\n    if (!current || !max) return [];\n    const items: Array<string | number> = [1];\n    if (current === 1 && max === 1) return items;\n    if (current > 4) items.push(\"-\");\n    const r = 2;\n    const r1 = current - r;\n    const r2 = current + r;\n    for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++) items.push(i);\n    const p2 = max - 2;\n    if (r2 + 1 !== p2) {\n        if (r2 + 1 < max) items.push(\"_\");\n    }\n    if (r2 < max) {\n        items.push(max - 2);\n        items.push(max - 1);\n        items.push(max);\n    }\n    return Array.from(new Set(items));\n}\n\nexport const Pagination = (pagination: TablePagination) => {\n    const id = useId();\n    const translation = useTranslations();\n    const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination]);\n    const hasNext = pagination.current < pagination.pages;\n    const Link: React.ElementType = pagination.asLink ?? \"button\";\n\n    return (\n        <footer className=\"text-typography-sm flex flex-wrap items-center justify-center gap-table-pag-gap border-t-muted p-table-pag-p lg:flex-nowrap lg:justify-between\">\n            <p>\n                <translation.tablePaginationFooter\n                    {...pagination}\n                    sizes={pagination.sizes}\n                    select={\n                        pagination.onChangeSize && Array.isArray(pagination.sizes) ? (\n                            <Fragment>\n                                <label htmlFor={id}>{translation.tablePaginationSelectLabel}</label>\n                                <select\n                                    id={id}\n                                    value={pagination.size}\n                                    className=\"cursor-pointer bg-transparent\"\n                                    onChange={(e) => {\n                                        pagination.onChangeSize?.(Number(e.target.value));\n                                    }}\n                                >\n                                    {pagination.sizes.map((value) => (\n                                        <option key={`pagination-opt-${value}`} value={value}>\n                                            {value}\n                                        </option>\n                                    ))}\n                                </select>{\" \"}\n                            </Fragment>\n                        ) : null\n                    }\n                />\n            </p>\n            <nav>\n                <ul className=\"flex items-center gap-table-pag-items-gap\">\n                    {pagination.current > 1 ? (\n                        <li>\n                            <Polymorph as={Link} href=\"previous\" className=\"\">\n                                {translation.tablePaginationPrevious}\n                            </Polymorph>\n                        </li>\n                    ) : null}\n                    {pageNavigation.map((x) => {\n                        if (x === null) return null;\n                        return (\n                            <Fragment key={`pagination-${x}`}>\n                                {typeof x === \"string\" ? (\n                                    <li>...</li>\n                                ) : (\n                                    <li>\n                                        <Polymorph\n                                            href={x}\n                                            as={Link}\n                                            className={`cursor-pointer border-b-2 px-table-pag-item-px py-table-pag-item-py proportional-nums transition-colors hover:border-primary-subtle hover:text-primary-subtle ${x === pagination.current ? \"border-primary text-primary\" : \"border-transparent\"}`}\n                                        >\n                                            {x}\n                                        </Polymorph>\n                                    </li>\n                                )}\n                            </Fragment>\n                        );\n                    })}\n                    {hasNext ? (\n                        <li>\n                            <Polymorph as={Link} href=\"next\" className=\"\">\n                                {translation.tablePaginationNext}\n                            </Polymorph>\n                        </li>\n                    ) : null}\n                </ul>\n            </nav>\n        </footer>\n    );\n};\n"],"mappings":";;;;;AAKA,SAAgB,EAAsB,GAAiB,GAAa;CAChE,IAAI,CAAC,KAAW,CAAC,GAAK,OAAO,CAAC;CAC9B,IAAM,IAAgC,CAAC,CAAC;CACxC,IAAI,MAAY,KAAK,MAAQ,GAAG,OAAO;CACvC,AAAI,IAAU,KAAG,EAAM,KAAK,GAAG;CAC/B,IACM,IAAK,IAAU,GACf,IAAK,IAAU;CACrB,KAAK,IAAI,IAAI,IAAK,IAAI,IAAK,GAAG,KAAK,KAAK,IAAI,GAAK,CAAE,GAAG,KAAK,EAAM,KAAK,CAAC;CACvE,IAAM,IAAK,IAAM;CASjB,OARI,IAAK,MAAM,KACP,IAAK,IAAI,KAAK,EAAM,KAAK,GAAG,GAEhC,IAAK,MACL,EAAM,KAAK,IAAM,CAAC,GAClB,EAAM,KAAK,IAAM,CAAC,GAClB,EAAM,KAAK,CAAG,IAEX,MAAM,KAAK,IAAI,IAAI,CAAK,CAAC;AACpC;AAEA,IAAa,KAAc,MAAgC;CACvD,IAAM,IAAK,EAAM,GACX,IAAc,EAAgB,GAC9B,IAAiB,QAAc,EAAsB,EAAW,SAAS,EAAW,KAAK,GAAG,CAAC,CAAU,CAAC,GACxG,IAAU,EAAW,UAAU,EAAW,OAC1C,IAA0B,EAAW,UAAU;CAErD,OACI,kBAAC,UAAD;EAAQ,WAAU;YAAlB,CACI,kBAAC,KAAD,EAAA,UACI,kBAAC,EAAY,uBAAb;GACI,GAAI;GACJ,OAAO,EAAW;GAClB,QACI,EAAW,gBAAgB,MAAM,QAAQ,EAAW,KAAK,IACrD,kBAAC,GAAD,EAAA,UAAA;IACI,kBAAC,SAAD;KAAO,SAAS;eAAK,EAAY;IAAkC,CAAA;IACnE,kBAAC,UAAD;KACQ;KACJ,OAAO,EAAW;KAClB,WAAU;KACV,WAAW,MAAM;MACb,EAAW,eAAe,OAAO,EAAE,OAAO,KAAK,CAAC;KACpD;eAEC,EAAW,MAAM,KAAK,MACnB,kBAAC,UAAD;MAA+C;gBAC1C;KACG,GAFK,kBAAkB,GAEvB,CACX;IACG,CAAA;IAAE;GACJ,EAAA,CAAA,IACV;EAEX,CAAA,EACF,CAAA,GACH,kBAAC,OAAD,EAAA,UACI,kBAAC,MAAD;GAAI,WAAU;aAAd;IACK,EAAW,UAAU,IAClB,kBAAC,MAAD,EAAA,UACI,kBAAC,GAAD;KAAW,IAAI;KAAM,MAAK;KAAW,WAAU;eAC1C,EAAY;IACN,CAAA,EACX,CAAA,IACJ;IACH,EAAe,KAAK,MACb,MAAM,OAAa,OAEnB,kBAAC,GAAD,EAAA,UACK,OAAO,KAAM,WACV,kBAAC,MAAD,EAAA,UAAI,MAAO,CAAA,IAEX,kBAAC,MAAD,EAAA,UACI,kBAAC,GAAD;KACI,MAAM;KACN,IAAI;KACJ,WAAW,iKAAiK,MAAM,EAAW,UAAU,gCAAgC;eAEtO;IACM,CAAA,EACX,CAAA,EAEF,GAdK,cAAc,GAcnB,CAEjB;IACA,IACG,kBAAC,MAAD,EAAA,UACI,kBAAC,GAAD;KAAW,IAAI;KAAM,MAAK;KAAO,WAAU;eACtC,EAAY;IACN,CAAA,EACX,CAAA,IACJ;GACJ;KACH,CAAA,CACD;;AAEhB"}

package/dist/components/table/pagination.jsx

@@ -0,0 +1,74 @@
+import React, { Fragment, useId, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { Polymorph } from "../core/polymorph";
+export function createPaginationItems(current, max) {
+    if (!current || !max)
+        return [];
+    const items = [1];
+    if (current === 1 && max === 1)
+        return items;
+    if (current > 4)
+        items.push("-");
+    const r = 2;
+    const r1 = current - r;
+    const r2 = current + r;
+    for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++)
+        items.push(i);
+    const p2 = max - 2;
+    if (r2 + 1 !== p2) {
+        if (r2 + 1 < max)
+            items.push("_");
+    }
+    if (r2 < max) {
+        items.push(max - 2);
+        items.push(max - 1);
+        items.push(max);
+    }
+    return Array.from(new Set(items));
+}
+export const Pagination = (pagination) => {
+    const id = useId();
+    const translation = useTranslations();
+    const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination]);
+    const hasNext = pagination.current < pagination.pages;
+    const Link = pagination.asLink ?? "button";
+    return (<footer className="text-typography-sm flex flex-wrap items-center justify-center gap-table-pag-gap border-t-muted p-table-pag-p lg:flex-nowrap lg:justify-between">
+            <p>
+                <translation.tablePaginationFooter {...pagination} sizes={pagination.sizes} select={pagination.onChangeSize && Array.isArray(pagination.sizes) ? (<Fragment>
+                                <label htmlFor={id}>{translation.tablePaginationSelectLabel}</label>
+                                <select id={id} value={pagination.size} className="cursor-pointer bg-transparent" onChange={(e) => {
+                pagination.onChangeSize?.(Number(e.target.value));
+            }}>
+                                    {pagination.sizes.map((value) => (<option key={`pagination-opt-${value}`} value={value}>
+                                            {value}
+                                        </option>))}
+                                </select>{" "}
+                            </Fragment>) : null}/>
+            </p>
+            <nav>
+                <ul className="flex items-center gap-table-pag-items-gap">
+                    {pagination.current > 1 ? (<li>
+                            <Polymorph as={Link} href="previous" className="">
+                                {translation.tablePaginationPrevious}
+                            </Polymorph>
+                        </li>) : null}
+                    {pageNavigation.map((x) => {
+            if (x === null)
+                return null;
+            return (<Fragment key={`pagination-${x}`}>
+                                {typeof x === "string" ? (<li>...</li>) : (<li>
+                                        <Polymorph href={x} as={Link} className={`cursor-pointer border-b-2 px-table-pag-item-px py-table-pag-item-py proportional-nums transition-colors hover:border-primary-subtle hover:text-primary-subtle ${x === pagination.current ? "border-primary text-primary" : "border-transparent"}`}>
+                                            {x}
+                                        </Polymorph>
+                                    </li>)}
+                            </Fragment>);
+        })}
+                    {hasNext ? (<li>
+                            <Polymorph as={Link} href="next" className="">
+                                {translation.tablePaginationNext}
+                            </Polymorph>
+                        </li>) : null}
+                </ul>
+            </nav>
+        </footer>);
+};