@g4rcez/components 3.0.0 → 3.0.1

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

@@ -1,64 +0,0 @@
-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 } 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);
-                    } }}/>);
-                })}
-                            {events.map((event) => (<div key={event.id} className="absolute left-0.5 right-0.5" style={{ top: getTopOffset(event), height: HOUR_HEIGHT }} onClick={(e) => e.stopPropagation()}>
-                                    <EventPill event={event} onClick={() => onEventClick(event)}/>
-                                </div>))}
-                        </div>);
-        })}
-            </div>
-        </div>);
-}

package/dist/components/table/filter.jsx

@@ -1,141 +0,0 @@
-import { ListFilterIcon, PlusIcon, Trash2Icon } from "lucide-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">
-                        <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="mt-5 flex items-center justify-center">
-                                    <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 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">
-                <Trash2Icon className="text-danger" size={14}/>
-            </button>
-        </div>);
-};

package/dist/components/table/group.jsx

@@ -1,68 +0,0 @@
-"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.jsx

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

@@ -1,104 +0,0 @@
-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, className = "", ...props }, ref) => {
-    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) => (<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, ...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, ...props }, ref) => {
-    const contextProps = context?.getRowProps?.(item);
-    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 ${[props?.className, contextProps?.className].filter(Boolean).join(" ")}`}/>);
-});
-const TFoot = React.forwardRef((props, ref) => {
-    if (props.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 bg-table-background relative flex w-full flex-col whitespace-nowrap rounded-lg">
-            <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

@@ -1,36 +0,0 @@
-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.jsx

@@ -1,73 +0,0 @@
-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 border-t-muted p-3 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.jsx

@@ -1,58 +0,0 @@
-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="isolate block">
-                {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 flex border-collapse flex-col whitespace-pre-wrap border border-y border-b border-table-border p-[var(--table-cell-padding)] md:table-cell md:border-b-0 md:border-r md:border-l-transparent 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>);
-};