@g4rcez/components 2.0.31 → 2.0.33

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

@@ -1 +1 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/components/table/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,WAAW,EAAU,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAExF,KAAK,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3F,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1H,KAAK,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAEnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;AAEhE,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CACJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,GAAG,EAC7C,GAAG,GAAG,CAAC,CAAC,CAAC,EACT,SAAS,gBAAgB,EACzB,YAAY,UAAU,EACtB,OAAM,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAM,KACpC,YAAY,CAAC,CAAC,CAOhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CA0CxB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,4CA0GvD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,EAAE,2BAA2B,uBAAuB,CAAC,CAAC,CAAC,4CAiDzG,CAAC"}
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../src/components/table/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,WAAW,EAAU,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAExF,KAAK,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3F,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1H,KAAK,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAEnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;AAEhE,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CACJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,GAAG,EAC7C,GAAG,GAAG,CAAC,CAAC,CAAC,EACT,SAAS,gBAAgB,EACzB,YAAY,UAAU,EACtB,OAAM,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAM,KACpC,YAAY,CAAC,CAAC,CAOhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CA0CxB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA0GvD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,EAAE,2BAA2B,uBAAuB,CAAC,CAAC,CAAC,sBAiDzG,CAAC"}

package/dist/components/table/{filter.js → filter.jsx}

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ListFilterIcon, PlusIcon, Trash2Icon } from "lucide-react";
-import { Fragment, useMemo } from "react";
+import React, { Fragment, useMemo } from "react";
 import { useTranslations } from "../../hooks/use-translations";
 import { uuid } from "../../lib/fns";
 import { Dropdown } from "../floating/dropdown";
@@ -86,10 +85,33 @@ export const Filter = (props) => {
         const value = valueFromType(e.target);
         props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
     };
-    return (_jsx(Fragment, { children: _jsx(Dropdown, { arrow: true, title: translation.tableFilterDropdownTitle, trigger: _jsxs("span", { className: "flex gap-1 items-center proportional-nums", children: [_jsx(ListFilterIcon, { size: 14 }), translation.tableFilterLabel, " ", props.filters.length === 0 ? "" : ` (${props.filters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.filters.map((filter) => {
-                        const options = operators.options[filter.type];
-                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { options: props.options, title: translation.tableFilterColumnTitle, placeholder: translation.tableFilterColumnPlaceholder, value: filter.name, "data-id": filter.id, onChange: onSelectProperty }), _jsx(Select, { "data-id": filter.id, onChange: onSelectOperation, value: filter.operation.value, options: options, title: translation.tableFilterOperatorTitle, placeholder: translation.tableFilterOperatorPlaceholder }), _jsx(Input, { optionalText: "", "data-id": filter.id, onChange: onChangeValue, value: filter.value, type: filter.type, title: translation.tableFilterValueTitle, placeholder: translation.tableFilterValuePlaceholder }), _jsx("div", { className: "flex justify-center items-center mt-5", children: _jsx("button", { "data-id": filter.id, type: "button", onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 16 }) }) })] }, `filter-select-${filter.id}`));
-                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddFilter, className: "flex gap-1 items-center text-primary", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] }) }) }));
+    return (<Fragment>
+            <Dropdown arrow title={translation.tableFilterDropdownTitle} trigger={<span className="flex gap-1 items-center proportional-nums">
+                        <ListFilterIcon size={14}/>
+                        {translation.tableFilterLabel} {props.filters.length === 0 ? "" : ` (${props.filters.length})`}
+                    </span>}>
+                <ul className="mt-4 space-y-2">
+                    {props.filters.map((filter) => {
+            const options = operators.options[filter.type];
+            return (<li key={`filter-select-${filter.id}`} className="flex flex-nowrap gap-3">
+                                <Select options={props.options} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder} value={filter.name} data-id={filter.id} onChange={onSelectProperty}/>
+                                <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={options} title={translation.tableFilterOperatorTitle} placeholder={translation.tableFilterOperatorPlaceholder}/>
+                                <Input optionalText="" data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValuePlaceholder}/>
+                                <div className="flex justify-center items-center mt-5">
+                                    <button data-id={filter.id} type="button" onClick={onDelete}>
+                                        <Trash2Icon className="text-danger" size={16}/>
+                                    </button>
+                                </div>
+                            </li>);
+        })}
+                    <li>
+                        <button type="button" onClick={onAddFilter} className="flex gap-1 items-center text-primary">
+                            <PlusIcon size={14}/> {translation.tableFilterNewFilter}
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>);
 };
 export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
     const translation = useTranslations();
@@ -109,5 +131,11 @@ export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
         const value = valueFromType(e.target);
         set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
     };
-    return (_jsxs("div", { className: "flex flex-nowrap gap-4 items-center py-2", children: [_jsx(Select, { "data-id": filter.id, onChange: onSelectOperation, value: filter.operation.value, options: operators.options[filter.type], title: translation.tableFilterColumnTitle, placeholder: translation.tableFilterColumnPlaceholder }), _jsx(Input, { optionalText: " ", "data-id": filter.id, onChange: onChangeValue, value: filter.value, type: filter.type, title: translation.tableFilterValueTitle, placeholder: translation.tableFilterValueTitle }), _jsx("button", { onClick: onDelete, "data-id": filter.id, type: "button", className: "mt-4", children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }));
+    return (<div className="flex flex-nowrap gap-4 items-center py-2">
+            <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={operators.options[filter.type]} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder}/>
+            <Input optionalText=" " data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValueTitle}/>
+            <button onClick={onDelete} data-id={filter.id} type="button" className="mt-4">
+                <Trash2Icon className="text-danger" size={14}/>
+            </button>
+        </div>);
 };

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

@@ -12,6 +12,6 @@ type Props<T extends object> = TableConfiguration<T, {
     groups: GroupItem<T>[];
     setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
 }>;
-export declare const Group: <T extends object>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Group: <T extends object>(props: Props<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/components/table/group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,GAAG,EAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CACJ,CAAC;AAqBF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,4CA4EtD,CAAC"}
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/components/table/group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,GAAG,EAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CACJ,CAAC;AAqBF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA4EtD,CAAC"}

package/dist/components/table/group.jsx

@@ -0,0 +1,68 @@
+"use client";
+import { LayoutGroup, Reorder, useDragControls, useMotionValue } from "motion/react";
+import Linq from "linq-arrays";
+import { GripVerticalIcon, Trash2Icon, UngroupIcon } from "lucide-react";
+import React, { Fragment, useState } from "react";
+import { keys } from "sidekicker";
+import { useTranslations } from "../../hooks/use-translations";
+import { uuid } from "../../lib/fns";
+import { Button } from "../core/button";
+import { Dropdown } from "../floating/dropdown";
+import { Select } from "../form/select";
+import { createOptionCols } from "./table-lib";
+const Item = ({ item, onPointerDown }) => {
+    const y = useMotionValue(0);
+    return (<Reorder.Item onPointerDown={onPointerDown} id={item.groupId} className="flex flex-row items-center gap-2" key={item.groupId} value={item} style={{ y }}>
+            <button type="button" className="cursor-grab">
+                <GripVerticalIcon size={14}/>
+            </button>
+            <span>{item.groupName}</span>
+        </Reorder.Item>);
+};
+export const Group = (props) => {
+    const translations = useTranslations();
+    const options = createOptionCols(props.cols);
+    const controls = useDragControls();
+    const [group, setGroup] = useState(props.groups[0]?.thead || "");
+    const onChange = (e) => {
+        const select = e.target;
+        const key = select.value;
+        const index = select.options.selectedIndex;
+        const label = select.options.item(index)?.label || "";
+        setGroup(label);
+        const groupBy = new Linq(props.rows).GroupBy(key);
+        const col = props.cols.find((x) => x.id === key);
+        props.setGroups(keys(groupBy).map((groupName, index) => {
+            const rows = groupBy[groupName];
+            return { ...col, groupId: uuid(), groupKey: key, index, rows, groupName: groupName };
+        }));
+    };
+    const onDelete = () => props.setGroups([]);
+    return (<Fragment>
+            <Dropdown arrow={false} title={translations.tableGroupLabel} trigger={<span className="flex items-center gap-1 proportional-nums">
+                        <UngroupIcon size={14}/>
+                        {translations.tableGroupLabelWithCount}
+                        {props.groups.length > 0 ? ` - ${group}(${props.groups.length})` : ""}
+                    </span>}>
+                <div className="flex flex-nowrap items-center">
+                    <Select value={group} title="Tipo de agrupamento" onChange={onChange} options={options} placeholder="Agrupar por..."/>
+                    <Button className="mt-4" onClick={onDelete} theme="raw" data-id={group}>
+                        <Trash2Icon size={16} className="text-danger"/>
+                    </Button>
+                </div>
+                {props.groups.length > 0 ? (<section className="my-4">
+                        <header>
+                            <h2 className="text-xl font-medium">Order groups</h2>
+                        </header>
+                        <LayoutGroup>
+                            <Reorder.Group axis="y" className="relative space-y-2" drag dragControls={controls} dragListener={false} layoutScroll onReorder={props.setGroups} values={props.groups}>
+                                {props.groups.map((item) => (<Item key={item.groupId} item={item} onPointerDown={(e) => {
+                    controls.start(e);
+                    props.setGroups([...props.groups]);
+                }}/>))}
+                            </Reorder.Group>
+                        </LayoutGroup>
+                    </section>) : null}
+            </Dropdown>
+        </Fragment>);
+};

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

@@ -16,5 +16,5 @@ export type TableProps<T extends Any> = Pick<InnerTableProps<T>, "cols" | "rows"
     getScrollRef?: () => HTMLElement | undefined;
     getRowProps: (row: T) => ComponentProps<"tr">;
 }>;
-export declare const Table: <T extends Any>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends Any>(props: TableProps<T>) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAW,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAyB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIzE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACrH,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACP,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;CACjD,CACJ,CAAC;AASF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,4CAgHxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAyB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGzE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACvH,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,OAAO,CACT,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;CAC/C,CACF,CAAC;AASF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,gCAoHxD,CAAC"}

package/dist/components/table/{index.js → index.jsx}

@@ -1,7 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence } from "motion/react";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useReducer } from "use-typed-reducer";
 import { useTweaks } from "../../hooks/use-tweaks";
 import { InnerTable } from "./inner-table";
@@ -45,5 +44,17 @@ export const Table = (props) => {
             },
         ],
     });
-    return (_jsx(TableProvider, { value: contextState, children: _jsxs(AnimatePresence, { initial: false, children: [operations ? (_jsx(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 ? (_jsx(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 })) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => (_jsx("div", { className: "min-w-full", children: _jsx(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 }) }, `group-${group.groupId}`))) }))] }) }));
+    useEffect(() => {
+        dispatch.cols(props.cols);
+    }, [props.cols]);
+    return (<TableProvider value={contextState}>
+      <AnimatePresence 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-4">
+            {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

@@ -25,5 +25,5 @@ export type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> &
     getRowProps?: (_: T) => ComponentProps<"tr">;
     setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
 };
-export declare const InnerTable: <T extends Any>({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, border, pagination, useControl, ...props }: InnerTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const InnerTable: <T extends Any>({ 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

@@ -1 +1 @@
-{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAI7H,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,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;AAIzE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GAC3E,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,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;CACjE,CAAC;AA8FJ,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,kIAavC,eAAe,CAAC,CAAC,CAAC,4CA0EpB,CAAC"}
+{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAI7H,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,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;AAIzE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GAC3E,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,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;CACjE,CAAC;AA8FJ,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,0HAYvC,eAAe,CAAC,CAAC,CAAC,sBA0EpB,CAAC"}

package/dist/components/table/{inner-table.js → inner-table.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Linq from "linq-arrays";
 import { AnimatePresence } from "motion/react";
 import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
@@ -13,25 +12,33 @@ import { multiSort } from "./sort";
 import { useTable } from "./table.context";
 import { TableHeader } from "./thead";
 const TableBody = React.forwardRef(({ context, className = "", ...props }, ref) => {
-    return (_jsx("tbody", { ...props, role: "rowgroup", className: `divide-y divide-table-border ${className}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) }));
+    return (<tbody {...props} role="rowgroup" className={`divide-y divide-table-border ${className}`} ref={ref}>
+        <AnimatePresence>{props.children}</AnimatePresence>
+      </tbody>);
 });
-const VirtualTable = React.forwardRef(({ context, className = "", ...props }, ref) => (_jsx("table", { ...props, role: "table", ref: ref, style: { ...props.style, "--table-cell-padding": "0.75rem" }, className: `table w-full table-fixed border-spacing-0 border-separate text-left ${className ?? ""}` })));
+const VirtualTable = React.forwardRef(({ 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-spacing-0 border-separate text-left ${className ?? ""}`}/>));
 const Thead = React.forwardRef(({ context, ...props }, ref) => {
     const ctx = useTable();
     const style = {
         ...props?.style,
         top: Is.number(ctx.sticky) ? `${ctx.sticky}px` : undefined,
     };
-    return (_jsx("thead", { ...props, ref: ref, style: style, role: "rowgroup", className: "hidden top-0 bg-transparent md:table-header-group group:sticky" }));
+    return (<thead {...props} ref={ref} style={style} role="rowgroup" className="hidden top-0 bg-transparent md:table-header-group group:sticky"/>);
 });
 const TRow = React.forwardRef(({ context, item, ...props }, ref) => {
     const contextProps = context?.getRowProps?.(item);
     const innerProps = { ...props, ...contextProps };
-    return (_jsx("tr", { ...innerProps, role: "row", ref: ref, className: `group-table-row pb-4 flex h-fit flex-col flex-wrap justify-center gap-1 md:table-row ${props?.className ?? ""}` }));
+    return (<tr {...innerProps} role="row" ref={ref} className={`group-table-row pb-4 flex h-fit flex-col flex-wrap justify-center gap-1 md:table-row ${props?.className ?? ""}`}/>);
 });
 const TFoot = React.forwardRef((props, ref) => {
     if (props.context.loadingMore) {
-        return (_jsx("tfoot", { ...props, ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "px-2 h-14 bg-card-background", children: _jsx("span", { className: "block w-full h-2 rounded opacity-60 animate-pulse bg-foreground" }) }) }) }));
+        return (<tfoot {...props} ref={ref} className="bg-card-background">
+        <tr role="row" className="bg-card-background">
+          <td colSpan={999} className="px-2 h-14 bg-card-background">
+            <span className="block w-full h-2 rounded opacity-60 animate-pulse bg-foreground"/>
+          </td>
+        </tr>
+      </tfoot>);
     }
     return null;
 });
@@ -43,12 +50,12 @@ const components = {
     TableBody: TableBody,
 };
 const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-const EmptyContent = (props) => (_jsx("div", { className: "flex justify-center items-center px-2 w-full h-48", children: props.loading ? SkeletonCell : _jsx(Empty, {}) }));
-const EmptyCell = () => _jsx(Fragment, {});
+const EmptyContent = (props) => (<div className="flex justify-center items-center px-2 w-full h-48">{props.loading ? SkeletonCell : <Empty />}</div>);
+const EmptyCell = () => <Fragment />;
 const emptyRows = [];
-export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, border = true, pagination = null, useControl = false, ...props }) => {
+export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, pagination = null, useControl = false, ...props }) => {
     const ref = useRef(null);
-    const [showLoadingFooter, setShowLoadingFooter] = useState(false);
+    const [, setShowLoadingFooter] = useState(false);
     const onScrollEndRef = useStableRef(onScrollEnd);
     const loadingMoreRef = useStableRef(props.loadingMore);
     const rows = useMemo(() => {
@@ -88,5 +95,10 @@ export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSor
         getRowProps: props.getRowProps,
         loadingMore: props.loadingMore,
     };
-    return (_jsxs("div", { className: "flex relative flex-col w-full whitespace-nowrap rounded-lg group", children: [_jsx(TableVirtuoso, { context: context, components: components, totalCount: rows.length, itemContent: empty ? EmptyCell : Row, data: empty ? emptyRows : rows, useWindowScroll: getScrollRef ? false : true, customScrollParent: getScrollRef ? getScrollRef() : undefined, fixedHeaderContent: () => (_jsx(TableHeader, { headers: cols, filters: filters, setCols: setCols, sorters: sorters, setFilters: setFilters, setSorters: setSorters, loading: !!props.loading, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter })) }), empty ? _jsx(EmptyContent, { loading: props.loading }) : null, _jsx("div", { "aria-hidden": "true", ref: ref, className: "w-full h-0.5" }), pagination !== null ? _jsx(Pagination, { ...pagination }) : null] }));
+    return (<div className="flex relative flex-col w-full whitespace-nowrap rounded-lg group">
+      <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="w-full h-0.5"/>
+      {pagination !== null ? <Pagination {...pagination}/> : null}
+    </div>);
 };

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

@@ -1,4 +1,4 @@
 import { Any } from "../../types";
 import { TableOperationProps } from "./table-lib";
-export declare const Metadata: <T extends Any>(props: TableOperationProps<T>) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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,4CAiDpE,CAAC"}
+{"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,gCA6CpE,CAAC"}

package/dist/components/table/metadata.jsx

@@ -0,0 +1,37 @@
+import { Filter } from "./filter";
+import { Group } from "./group";
+import { Sort } from "./sort";
+import { valueFromType } from "./table-lib";
+export const Metadata = (props) => (<header className="mb-1 min-w-full">
+    <div className="flex flex-wrap gap-y-1 gap-x-4 justify-between items-center min-w-full">
+      <div className="flex gap-4 py-2 whitespace-nowrap w-fit items-centeend">
+        <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 flex-row flex-wrap flex-1 flex-grow gap-4 items-center w-full md:justify-end">
+        {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="flex gap-1 items-center py-0.5 px-4 rounded-xl border border-card-border">
+            <span>
+              <span className="inline-block mr-2 rounded-full size-3 aspect-square bg-primary" aria-hidden="true"/>
+              {x.label} {x.operation.label.toLowerCase()}:
+            </span>
+            <div className="relative w-min min-w-[1ch]">
+              <span aria-hidden="true" className="invisible p-0 whitespace-pre">
+                {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

@@ -1,3 +1,3 @@
 import { TablePagination } from "./table-lib";
-export declare const Pagination: (pagination: TablePagination) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: (pagination: TablePagination) => import("react").JSX.Element;
 //# sourceMappingURL=pagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAuB9C,eAAO,MAAM,UAAU,GAAI,YAAY,eAAe,4CA2ErD,CAAC"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAuB9C,eAAO,MAAM,UAAU,GAAI,YAAY,eAAe,gCA2ErD,CAAC"}

package/dist/components/table/pagination.jsx

@@ -0,0 +1,73 @@
+import { Fragment, useId, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { Polymorph } from "../core/polymorph";
+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.current, pagination.pages]);
+    const hasNext = pagination.current < pagination.pages;
+    return (<footer className="flex flex-wrap items-center justify-center gap-4 p-3 border-t-muted text-sm 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-2">
+                    {pagination.current > 1 ? (<li>
+                            <Polymorph as={pagination.asLink || "button"} 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={pagination.asLink || "button"} className={`cursor-pointer border-b-2 px-3 py-1 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={pagination.asLink || "button"} href="next" className="">
+                                {translation.tablePaginationNext}
+                            </Polymorph>
+                        </li>) : null}
+                </ul>
+            </nav>
+        </footer>);
+};

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

@@ -7,6 +7,6 @@ type ItemContentContext = {
     loadingMore?: boolean;
     Aside?: React.FC<CellAsideElement<any>>;
 };
-export declare const Row: (index: number, row: any, context: ItemContentContext) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: (index: number, row: any, context: ItemContentContext) => React.JSX.Element;
 export {};
 //# sourceMappingURL=row.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;CAC3C,CAAC;AA6CF,eAAO,MAAM,GAAG,GAAI,OAAO,MAAM,EAAE,KAAK,GAAG,EAAE,SAAS,kBAAkB,4CA0CvE,CAAC"}
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;CACzC,CAAC;AA6CF,eAAO,MAAM,GAAG,GAAI,OAAO,MAAM,EAAE,KAAK,GAAG,EAAE,SAAS,kBAAkB,sBAwCvE,CAAC"}

package/dist/components/table/row.jsx

@@ -0,0 +1,58 @@
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { Is } from "sidekicker";
+import { path } from "../../lib/fns";
+import { SkeletonCell } from "../display/skeleton";
+const RowAside = (props) => {
+    const parentRef = useRef(null);
+    const ref = useRef(null);
+    const [className, setClassName] = useState("opacity-0");
+    const ariaHidden = className === "opacity-0";
+    const onLeave = () => setClassName("opacity-0");
+    const callback = () => {
+        const child = ref.current;
+        const parent = parentRef.current;
+        if (child === null || parent === null)
+            return;
+        parent.style.left = `-${child.getBoundingClientRect().width + 4}px`;
+    };
+    const onEnter = () => setClassName("opacity-100");
+    useEffect(() => {
+        const child = ref.current;
+        if (child === null || parent === null)
+            return;
+        callback();
+        const observer = new IntersectionObserver((entries) => entries.forEach(callback), { root: document.documentElement });
+        observer.observe(child);
+        return () => observer.disconnect();
+    }, []);
+    return (<div ref={parentRef} onMouseEnter={onEnter} onMouseLeave={onLeave} data-component="cell-aside" inert={ariaHidden ? true : undefined} tabIndex={ariaHidden ? -1 : undefined} className={`group-table-cell-aside absolute inset-0 top-0 flex h-full w-full items-stretch transition-opacity duration-300 ease-in-out ${className}`}>
+      <div ref={ref} className="block isolate">
+        {props.children}
+      </div>
+    </div>);
+};
+export const Row = (index, row, context) => {
+    const cols = context.cols;
+    const loading = context.loading;
+    return (<Fragment>
+      {cols.map((col, colIndex) => {
+            const matrix = `${colIndex},${index}`;
+            const value = path(row, col.id);
+            const Component = col.Element;
+            const className = col.cellProps?.className || "";
+            const exposeAside = colIndex === 0 && context.Aside && loading === false;
+            const Aside = context.Aside;
+            return (<td {...col.cellProps} role="cell" data-matrix={matrix} key={`accessor-${index}-${colIndex}`} className={`typography group-table-cell p-[var(--table-cell-padding)] whitespace-pre-wrap flex flex-col md:table-cell border-b border md:border-l-transparent md:border-b-0 border-y border-collapse border-table-border md:border-r md:last:border-r-transparent ${className}`}>
+            {exposeAside ? (<RowAside>
+                <Aside col={col} row={row} rowIndex={index}/>
+              </RowAside>) : null}
+            <span className="block text-sm font-bold leading-tight md:hidden">{col.thead}</span>
+            <span className="relative">
+              {loading ? SkeletonCell : Component ? (<Fragment>
+                  <Component row={row} matrix={matrix} col={col} rowIndex={index} value={value}/>
+                </Fragment>) : (<Fragment>{Is.nil(value) ? "" : value}</Fragment>)}
+            </span>
+          </td>);
+        })}
+    </Fragment>);
+};

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

@@ -19,10 +19,10 @@ type Props<T extends Any> = TableConfiguration<T, {
     sorters: Sorter<T>[];
     set: React.Dispatch<React.SetStateAction<Sorter<T>[]>>;
 }>;
-export declare const Sort: <T extends Any>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Sort: <T extends Any>(props: Props<T>) => React.JSX.Element;
 type SorterHeadProps<T extends Any> = Pick<TableOperationProps<T>, "sorters" | "setSorters"> & {
     col: Col<T>;
 };
-export declare const SorterHead: <T extends Any>(props: SorterHeadProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SorterHead: <T extends Any>(props: SorterHeadProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=sort.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE/E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,GAAG,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY/F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,EAAE,QAA2C,CAAC;AAEpH,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,kBAAkB,CAC1C,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,4CA0ElD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE/G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,eAAe,CAAC,CAAC,CAAC,4CAkClE,CAAC"}
+{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE/E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,GAAG,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY/F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,EAAE,QAA2C,CAAC;AAEpH,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,kBAAkB,CAC1C,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA0ElD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE/G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,eAAe,CAAC,CAAC,CAAC,sBAkClE,CAAC"}

package/dist/components/table/{sort.js → sort.jsx}

@@ -1,7 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown01Icon, ArrowUp01Icon, ArrowUpDownIcon, PlusIcon, Trash2Icon } from "lucide-react";
-import { Fragment, useEffect, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { useTranslations } from "../../hooks/use-translations";
 import { uuid } from "../../lib/fns";
 import { Dropdown } from "../floating/dropdown";
@@ -50,9 +49,29 @@ export const Sort = (props) => {
         const id = e.currentTarget.dataset.id || "";
         props.set((prev) => prev.filter((x) => x.id !== id));
     };
-    return (_jsx(Fragment, { children: _jsx(Dropdown, { title: translation.tableSortDropdownTitle, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ArrowUpDownIcon, { size: 14 }), translation.tableSortOrderByLabel, " ", props.sorters.length === 0 ? "" : ` (${props.sorters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.sorters.map((sorter) => {
-                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { options: props.options, value: sorter.value, onChange: onSetSorter(sorter.id), title: translation.tableSortOrderInputTitle, placeholder: translation.tableSortOrderInputPlaceholder }), _jsx(Select, { onChange: onSortOrderType(sorter.id), value: sorter.type, options: orderOptions, title: translation.tableSortTypeInputTitle, placeholder: translation.tableSortTypeInputPlaceholder }), _jsx("button", { className: "mt-4", "data-id": sorter.id, onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }, `sorter-select-${sorter.id}`));
-                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddSorter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableSortAddButton] }) })] }) }) }));
+    return (<Fragment>
+            <Dropdown title={translation.tableSortDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
+                        <ArrowUpDownIcon size={14}/>
+                        {translation.tableSortOrderByLabel} {props.sorters.length === 0 ? "" : ` (${props.sorters.length})`}
+                    </span>}>
+                <ul className="mt-4 space-y-2">
+                    {props.sorters.map((sorter) => {
+            return (<li key={`sorter-select-${sorter.id}`} className="flex flex-nowrap gap-3">
+                                <Select options={props.options} value={sorter.value} onChange={onSetSorter(sorter.id)} title={translation.tableSortOrderInputTitle} placeholder={translation.tableSortOrderInputPlaceholder}/>
+                                <Select onChange={onSortOrderType(sorter.id)} value={sorter.type} options={orderOptions} title={translation.tableSortTypeInputTitle} placeholder={translation.tableSortTypeInputPlaceholder}/>
+                                <button className="mt-4" data-id={sorter.id} onClick={onDelete}>
+                                    <Trash2Icon className="text-danger" size={14}/>
+                                </button>
+                            </li>);
+        })}
+                    <li>
+                        <button type="button" onClick={onAddSorter} className="text-primary flex items-center gap-1">
+                            <PlusIcon size={14}/> {translation.tableSortAddButton}
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>);
 };
 export const SorterHead = (props) => {
     const translations = useTranslations();
@@ -75,5 +94,12 @@ export const SorterHead = (props) => {
     }, [status, props.col]);
     const labelId = `${props.col.id}-sorter-id`;
     const label = getLabel(props.col);
-    return (_jsxs("button", { "aria-labelledby": labelId, className: "isolate flex items-center", onClick: onClick, type: "button", children: [_jsxs("span", { id: labelId, className: "sr-only", children: [translations.tableSortDropdownTitle, " ", label] }), status === Order.Asc ? _jsx(ArrowUp01Icon, { size: 14 }) : null, status === Order.Desc ? _jsx(ArrowDown01Icon, { size: 14 }) : null, status === Order.Undefined ? _jsx(ArrowUpDownIcon, { size: 14 }) : null] }));
+    return (<button aria-labelledby={labelId} className="isolate flex items-center" onClick={onClick} type="button">
+            <span id={labelId} className="sr-only">
+                {translations.tableSortDropdownTitle} {label}
+            </span>
+            {status === Order.Asc ? <ArrowUp01Icon size={14}/> : null}
+            {status === Order.Desc ? <ArrowDown01Icon size={14}/> : null}
+            {status === Order.Undefined ? <ArrowUpDownIcon size={14}/> : null}
+        </button>);
 };