@g4rcez/components 4.0.2 → 4.1.2

package/dist/components/page-calendar/page-calendar.utils.js

@@ -0,0 +1,93 @@
+import { addDays, startOfMonth, startOfWeek, getISOWeek } from "date-fns";
+export function toDateKey(d) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+export function groupEventsByDate(events) {
+    const map = new Map();
+    for (const event of events) {
+        const key = toDateKey(event.date);
+        const existing = map.get(key);
+        if (existing) {
+            existing.push(event);
+        }
+        else {
+            map.set(key, [event]);
+        }
+    }
+    return map;
+}
+export function getMonthDays(date) {
+    const monthStart = startOfMonth(date);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 42; i++) {
+        days.push(addDays(gridStart, i));
+    }
+    return days;
+}
+export function getWeekDays(date) {
+    const weekStart = startOfWeek(date, { weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        days.push(addDays(weekStart, i));
+    }
+    return days;
+}
+export function getHourSlots() {
+    return Array.from({ length: 24 }, (_, i) => i);
+}
+export function formatEventTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(date));
+}
+export function formatDay(date, locale) {
+    return new Intl.DateTimeFormat(locale, { day: "numeric" }).format(date);
+}
+export function formatWeekDay(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+}
+export function formatWeekdayLong(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "long" }).format(date);
+}
+export function formatWeekdayShort(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+}
+export function formatMonthYear(date, locale) {
+    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+}
+export function formatMonthShort(date, locale) {
+    return new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
+}
+export function formatHourLabel(hour, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(0, 0, 0, hour));
+}
+export function formatFullDate(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "long", month: "short", day: "numeric", year: "numeric" }).format(date);
+}
+export function formatTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
+}
+export function getWeekNumber(date) {
+    return getISOWeek(date);
+}
+export function computeEventColumns(events) {
+    const sorted = [...events].sort((a, b) => a.date.getTime() - b.date.getTime());
+    const hourGroups = new Map();
+    for (const event of sorted) {
+        const hour = event.date.getHours();
+        const group = hourGroups.get(hour);
+        if (group) {
+            group.push(event);
+        }
+        else {
+            hourGroups.set(hour, [event]);
+        }
+    }
+    const result = [];
+    for (const group of hourGroups.values()) {
+        const columnCount = group.length;
+        group.forEach((event, columnIndex) => {
+            result.push({ event, columnIndex, columnCount });
+        });
+    }
+    return result;
+}

package/dist/components/page-calendar/week-view.jsx

@@ -0,0 +1,71 @@
+import { isToday } from "date-fns";
+import { useEffect, useRef } from "react";
+import { useLocale } from "../../hooks/use-locale";
+import { EventPill } from "./event-pill";
+import { getHourSlots, toDateKey, formatWeekdayShort, formatDay, formatHourLabel, formatFullDate, computeEventColumns } from "./page-calendar.utils";
+const HOUR_HEIGHT = 48;
+function getTopOffset(event) {
+    const hour = event.date.getHours();
+    const minutes = event.date.getMinutes();
+    return hour * HOUR_HEIGHT + (minutes / 60) * HOUR_HEIGHT;
+}
+export function WeekView({ days, eventsByDate, onEventClick, onSlotClick }) {
+    const locale = useLocale();
+    const currentHourRef = useRef(null);
+    const scrollBodyRef = useRef(null);
+    const hours = getHourSlots();
+    useEffect(() => {
+        if (scrollBodyRef.current && currentHourRef.current) {
+            const top = currentHourRef.current.offsetTop;
+            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;
+        }
+    }, []);
+    return (<div className="flex flex-1 flex-col overflow-hidden">
+            <div className="flex flex-shrink-0 border-b border-border">
+                <div className="w-[60px] flex-shrink-0"/>
+                {days.map((day, idx) => {
+            const isCurrentDay = isToday(day);
+            return (<div key={idx} aria-label={formatFullDate(day, locale)} className="flex-1 py-2 text-center text-xs font-medium text-muted-foreground">
+                            <span className="block">{formatWeekdayShort(day, locale)}</span>
+                            <span className={`inline-flex h-6 w-6 items-center justify-center rounded-full text-sm font-bold ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                                {formatDay(day, locale)}
+                            </span>
+                        </div>);
+        })}
+            </div>
+            <div ref={scrollBodyRef} className="flex flex-1 items-start overflow-y-auto">
+                <div className="w-[60px] flex-shrink-0">
+                    {hours.map((hour) => (<div key={hour} className="relative" style={{ height: HOUR_HEIGHT }}>
+                            <span className="absolute -top-2.5 right-2 text-[10px] text-muted-foreground">
+                                {hour === 0 ? "" : formatHourLabel(hour, locale)}
+                            </span>
+                            {hour === new Date().getHours() && <div ref={currentHourRef}/>}
+                        </div>))}
+                </div>
+                {days.map((day, dayIdx) => {
+            const key = toDateKey(day);
+            const events = eventsByDate.get(key) || [];
+            return (<div key={dayIdx} className="relative flex-1 border-l border-card-border">
+                            {hours.map((hour) => {
+                    const slotDate = new Date(day);
+                    slotDate.setHours(hour, 0, 0, 0);
+                    return (<div key={hour} role="button" tabIndex={0} aria-label={formatHourLabel(hour, locale)} className="cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)} onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                onSlotClick?.(slotDate);
+                            }
+                        }}/>);
+                })}
+                            {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} className="absolute" style={{
+                        top: getTopOffset(event),
+                        height: HOUR_HEIGHT,
+                        left: `calc(${(columnIndex / columnCount) * 100}% + 1px)`,
+                        width: `calc(${100 / columnCount}% - 2px)`,
+                    }} onClick={(e) => e.stopPropagation()}>
+                                    <EventPill event={event} onClick={() => onEventClick(event)}/>
+                                </div>))}
+                        </div>);
+        })}
+            </div>
+        </div>);
+}

package/dist/components/table/filter.jsx

@@ -0,0 +1,141 @@
+import { FunnelIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import React, { Fragment, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { uuid } from "../../lib/fns";
+import { Dropdown } from "../floating/dropdown";
+import { Input } from "../form/input";
+import { Select } from "../form/select";
+import { ColType, getLabel, valueFromType } from "./table-lib";
+export const createFilterFromCol = (f, options, operations, rest = {}) => {
+    const name = f.id;
+    const type = f.type ?? ColType.Text;
+    const typeOptions = options[type] ?? [];
+    const operatorId = (typeOptions.find((x) => x["data-default"])?.value ?? typeOptions[0]?.value);
+    const operation = operations[operatorId];
+    return { id: uuid(), operation, label: getLabel(f), name, type, value: "", ...rest };
+};
+export const useOperators = () => {
+    const translation = useTranslations();
+    const operations = useMemo(() => ({
+        contains: {
+            value: "contains",
+            label: translation.tableFilterTypeContains,
+            symbol: "includes",
+            "data-default": "true",
+        },
+        is: { value: "is", label: translation.tableFilterTypeIs, symbol: "is" },
+        isNot: { value: "isNot", label: translation.tableFilterTypeIsNot, symbol: "!==" },
+        notContains: {
+            value: "notContains",
+            label: translation.tableFilterTypeNotContains,
+            symbol: "notIncludes",
+        },
+        lessThan: { value: "lessThan", label: translation.tableFilterTypeLessThan, symbol: "<=" },
+        greaterThan: { value: "greaterThan", label: translation.tableFilterTypeGreaterThan, symbol: ">=" },
+        startsWith: { value: "startsWith", label: translation.tableFilterTypeStartsWith, symbol: "startsWith" },
+        endsWith: { value: "endsWith", label: translation.tableFilterTypeEndsWith, symbol: "endsWith" },
+    }), [translation]);
+    const options = useMemo(() => ({
+        [ColType.Text]: [
+            operations.is,
+            operations.isNot,
+            operations.contains,
+            operations.notContains,
+            operations.startsWith,
+            operations.endsWith,
+        ],
+        [ColType.Boolean]: [operations.is, operations.isNot],
+        [ColType.Number]: [operations.is, operations.isNot, operations.greaterThan, operations.lessThan],
+    }), [operations]);
+    return { options, operations };
+};
+export const Filter = (props) => {
+    const translation = useTranslations();
+    const operators = useOperators();
+    const onAddFilter = () => {
+        const col = props.cols.at(0);
+        props.set((prev) => [...prev, createFilterFromCol(col, operators.options, operators.operations)]);
+    };
+    const onSelectProperty = (e) => {
+        const changedId = e.target.dataset.id || "";
+        const newId = e.target.value;
+        props.set((prev) => prev.map((x) => {
+            if (changedId !== x.id)
+                return x;
+            const col = props.cols.find((x) => newId === x.id);
+            return createFilterFromCol(col, operators.options, operators.operations, { value: "" });
+        }));
+    };
+    const onSelectOperation = (e) => {
+        const id = e.target.dataset.id || "";
+        const operator = e.target.value;
+        props.set((prev) => prev.map((x) => x.id === id
+            ? {
+                ...x,
+                operation: operators.operations[operator],
+            }
+            : x));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
+    };
+    return (<Fragment>
+            <Dropdown arrow title={translation.tableFilterDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
+                        <FunnelIcon 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="mt-5 flex items-center justify-center">
+                                    <button data-id={filter.id} type="button" onClick={onDelete}>
+                                        <TrashIcon className="text-danger" size={16}/>
+                                    </button>
+                                </div>
+                            </li>);
+        })}
+                    <li>
+                        <button type="button" onClick={onAddFilter} className="flex items-center gap-1 text-primary">
+                            <PlusIcon size={14}/> {translation.tableFilterNewFilter}
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>);
+};
+export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
+    const translation = useTranslations();
+    const operators = useOperators();
+    const onSelectOperation = (e) => {
+        const operator = e.target.value;
+        const id = e.target.dataset.id || "";
+        set((prev) => prev.map((x) => x.id === id
+            ? {
+                ...x,
+                operation: operators.operations[operator],
+            }
+            : x));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
+    };
+    return (<div className="flex flex-nowrap items-center gap-4 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">
+                <TrashIcon className="text-danger" size={14}/>
+            </button>
+        </div>);
+};

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 { DotsSixVerticalIcon, TrashIcon, StackMinusIcon } from "@phosphor-icons/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">
+                <DotsSixVerticalIcon 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">
+                        <StackMinusIcon 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}>
+                        <TrashIcon 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

@@ -1,8 +1,7 @@
 import { ComponentProps } from "react";
-import { Any } from "../../types";
 import { InnerTableProps } from "./inner-table";
 import { TableOperationProps } from "./table-lib";
-export type TableProps<T extends Any> = Pick<InnerTableProps<T>, "cols" | "rows" | "loadingMore" | "border" | "Aside"> & {
+export type TableProps<T extends Record<string, unknown>> = Pick<InnerTableProps<T>, "cols" | "rows" | "loadingMore" | "border" | "Aside"> & {
     name: string;
 } & Partial<TableOperationProps<T> & {
     loading: boolean;
@@ -16,5 +15,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.Element;
+export declare const Table: <T extends Record<string, unknown>>(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,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;IACrH,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACH,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;AASN,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,gCAuHxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAuC,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGvF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzI,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACH,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;AASN,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,gCAwH5E,CAAC"}

package/dist/components/table/index.jsx

@@ -0,0 +1,60 @@
+"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-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

@@ -1,11 +1,10 @@
 import React, { ComponentProps, HTMLAttributes } from "react";
-import { Any } from "../../types";
 import { OptionProps } from "../form/select";
 import { FilterConfig } from "./filter";
 import { GroupItem } from "./group";
 import { Sorter } from "./sort";
 import { CellAsideElement, Col, TableOperationProps } from "./table-lib";
-export type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
+export type InnerTableProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
     rows: T[];
     index: number;
     cols: Col<T>[];
@@ -25,5 +24,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, pagination, useControl, ...props }: InnerTableProps<T>) => React.JSX.Element;
+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

@@ -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,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;AAsFN,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,0HAYvC,eAAe,CAAC,CAAC,CAAC,sBA0EpB,CAAC"}
+{"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;AAczE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,cAAc,CAAC,gBAAgB,CAAC,GAC7F,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.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-1 pb-4 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-14 bg-card-background px-2">
+                        <span className="block h-2 w-full animate-pulse rounded 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-48 w-full items-center justify-center px-2">{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-lg 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.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-1 min-w-full">
+        <div className="flex min-w-full flex-wrap items-center justify-between gap-x-4 gap-y-1">
+            <div className="items-centeend flex w-fit gap-4 whitespace-nowrap py-2">
+                <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-4 md:justify-end">
+                {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="flex items-center gap-1 rounded-xl border border-card-border px-4 py-0.5">
+                        <span>
+                            <span className="mr-2 inline-block aspect-square size-3 rounded-full 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 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

@@ -1,3 +1,5 @@
+import React from "react";
 import { TablePagination } from "./table-lib";
-export declare const Pagination: (pagination: TablePagination) => import("react").JSX.Element;
+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

@@ -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,gCA2ErD,CAAC"}
+{"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"}