@g4rcez/components 4.0.2 → 4.1.2

package/dist/components/table/pagination.jsx

@@ -0,0 +1,74 @@
+import React, { Fragment, useId, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { Polymorph } from "../core/polymorph";
+export function createPaginationItems(current, max) {
+    if (!current || !max)
+        return [];
+    const items = [1];
+    if (current === 1 && max === 1)
+        return items;
+    if (current > 4)
+        items.push("-");
+    const r = 2;
+    const r1 = current - r;
+    const r2 = current + r;
+    for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++)
+        items.push(i);
+    const p2 = max - 2;
+    if (r2 + 1 !== p2) {
+        if (r2 + 1 < max)
+            items.push("_");
+    }
+    if (r2 < max) {
+        items.push(max - 2);
+        items.push(max - 1);
+        items.push(max);
+    }
+    return Array.from(new Set(items));
+}
+export const Pagination = (pagination) => {
+    const id = useId();
+    const translation = useTranslations();
+    const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
+    const hasNext = pagination.current < pagination.pages;
+    const Link = pagination.asLink ?? "button";
+    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={Link} href="previous" className="">
+                                {translation.tablePaginationPrevious}
+                            </Polymorph>
+                        </li>) : null}
+                    {pageNavigation.map((x) => {
+            if (x === null)
+                return null;
+            return (<Fragment key={`pagination-${x}`}>
+                                {typeof x === "string" ? (<li>...</li>) : (<li>
+                                        <Polymorph href={x} as={Link} className={`cursor-pointer border-b-2 px-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={Link} href="next" className="">
+                                {translation.tablePaginationNext}
+                            </Polymorph>
+                        </li>) : null}
+                </ul>
+            </nav>
+        </footer>);
+};

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

@@ -1,12 +1,11 @@
 import React from "react";
-import { Any } from "../../types";
 import { CellAsideElement, Col } from "./table-lib";
-type ItemContentContext = {
-    cols: Col<Any>[];
+type ItemContentContext<T extends Record<string, unknown>> = {
+    cols: Col<T>[];
     loading?: boolean;
     loadingMore?: boolean;
-    Aside?: React.FC<CellAsideElement<any>>;
+    Aside?: React.FC<CellAsideElement<T>>;
 };
-export declare const Row: (index: number, row: any, context: ItemContentContext) => React.JSX.Element;
+export declare const Row: <T extends Record<string, unknown>>(index: number, row: T, context: ItemContentContext<T>) => 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,sBA0CvE,CAAC"}
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACzD,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,CAAC;AAoCF,eAAO,MAAM,GAAG,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC,sBAgD3G,CAAC"}

package/dist/components/table/row.jsx

@@ -0,0 +1,49 @@
+import React, { Fragment, 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 onEnter = () => {
+        const child = ref.current;
+        const parent = parentRef.current;
+        if (child !== null && parent !== null) {
+            parent.style.left = `-${child.getBoundingClientRect().width + 4}px`;
+        }
+        setClassName("opacity-100");
+    };
+    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>);
+};

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,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"}
+{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,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,QAGvE,CAAC;AAEF,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.jsx

@@ -0,0 +1,109 @@
+"use client";
+import { SortAscendingIcon, SortDescendingIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import React, { Fragment, useState } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { uuid } from "../../lib/fns";
+import { Dropdown } from "../floating/dropdown";
+import { Select } from "../form/select";
+import { getLabel } from "./table-lib";
+var Order;
+(function (Order) {
+    Order["Asc"] = "asc";
+    Order["Desc"] = "desc";
+    Order["Undefined"] = "undefined";
+})(Order || (Order = {}));
+const createSorterFn = (fields) => (a, b) => fields.reduce((acc, x) => {
+    const reverse = x.type === "desc" ? -1 : 1;
+    const property = x.value;
+    const p = a[property] > b[property] ? reverse : a[property] < b[property] ? -reverse : 0;
+    return acc !== 0 ? acc : p;
+}, 0);
+export const multiSort = (array, fields) => {
+    array.sort(createSorterFn(fields));
+    return array;
+};
+const createSorter = (col, label, order) => ({
+    label,
+    id: uuid(),
+    type: order,
+    value: col.id,
+});
+export const Sort = (props) => {
+    const translation = useTranslations();
+    const orders = {
+        asc: { label: translation.tableSortAsc, value: Order.Asc },
+        desc: { label: translation.tableSortDesc, value: Order.Desc },
+    };
+    const orderOptions = [orders.asc, orders.desc];
+    const onAddSorter = () => {
+        const col = props.cols[0];
+        if (col)
+            props.set((prev) => [...prev, createSorter(col, orders.asc.label, orders.asc.value)]);
+    };
+    const onSetSorter = (id) => (e) => {
+        const value = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value: value } : x)));
+    };
+    const onSortOrderType = (id) => (e) => {
+        const type = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, type: type } : x)));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    return (<Fragment>
+            <Dropdown title={translation.tableSortDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
+                        <CaretUpDownIcon 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}>
+                                    <TrashIcon className="text-danger" size={14}/>
+                                </button>
+                            </li>);
+        })}
+                    <li>
+                        <button type="button" onClick={onAddSorter} className="flex items-center gap-1 text-primary">
+                            <PlusIcon size={14}/> {translation.tableSortAddButton}
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>);
+};
+export const SorterHead = (props) => {
+    const translations = useTranslations();
+    const [status, setStatus] = useState(() => {
+        const sorter = props.sorters.find((sort) => sort.value === props.col.id);
+        return sorter ? sorter.type : Order.Undefined;
+    });
+    const onClick = () => {
+        const next = status === Order.Undefined ? Order.Asc : status === Order.Asc ? Order.Desc : Order.Undefined;
+        setStatus(next);
+        props.setSorters((prev) => {
+            if (next === Order.Undefined)
+                return prev.filter((x) => x.value !== props.col.id);
+            const findIndex = prev.findIndex((p) => p.value === props.col.id);
+            const sorter = createSorter(props.col, next, next);
+            if (findIndex === -1)
+                return [...prev, sorter];
+            prev[findIndex] = sorter;
+            return [...prev];
+        });
+    };
+    const labelId = `${props.col.id}-sorter-id`;
+    const label = getLabel(props.col);
+    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 ? <SortAscendingIcon size={14}/> : null}
+            {status === Order.Desc ? <SortDescendingIcon size={14}/> : null}
+            {status === Order.Undefined ? <CaretUpDownIcon size={14}/> : null}
+        </button>);
+};

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

@@ -79,7 +79,7 @@ export type TablePagination = {
         className: string;
     }>>;
 };
-type TableGetters<T extends POJO> = {
+export type TableGetters<T extends POJO> = {
     rows: T[];
     cols: Col<T>[];
     sorters: Sorter<T>[];

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

@@ -1 +1 @@
-{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-lib.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-lib.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,83 @@
+"use client";
+import { useCallback, useRef } from "react";
+import { LocalStorage } from "storage-manager-js";
+import { useReducer } from "use-typed-reducer";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { isSsr } from "../../lib/fns";
+export const getLabel = (col) => col.headerLabel ?? col.thead ?? col.id;
+export const createOptionCols = (cols) => cols.map((opt) => ({
+    value: opt.id,
+    label: (opt.thead ?? opt.headerLabel ?? opt.id),
+}));
+export var ColType;
+(function (ColType) {
+    ColType["Boolean"] = "boolean";
+    ColType["Number"] = "number";
+    ColType["Select"] = "select";
+    ColType["Text"] = "text";
+})(ColType || (ColType = {}));
+export const valueFromType = (input) => (input.type === "number" ? input.valueAsNumber : input.value);
+const cols = () => (id, thead, options) => ({ ...options, id, thead });
+export const createColumns = (callback) => {
+    let items = [];
+    const add = (id, thead, options) => items.push({ ...options, id, thead });
+    const remove = (id) => (items = items.filter((x) => x.id !== id));
+    const getAll = () => Array.from(items);
+    const filter = (c) => (items = Array.from(items.filter(c)));
+    callback({ add, remove, getAll, filter });
+    return items;
+};
+const noop = {};
+const mergeCols = (cols, saved) => {
+    if (!Array.isArray(saved))
+        return cols;
+    const savedSet = new Set(saved.map((x) => x.id));
+    if (!cols.every((x) => savedSet.has(x.id))) {
+        return cols;
+    }
+    const map = new Map(cols.map((x) => [x.id, x]));
+    return saved.map((mock, index) => {
+        const original = map.get(mock.id);
+        if (original === undefined)
+            return cols[index];
+        return original;
+    });
+};
+export const useTablePreferences = (name, cols, options = noop) => {
+    const init = isSsr() ? null : LocalStorage.get(`@components/table-${name}`) || null;
+    const [state, dispatch] = useReducer({
+        name,
+        groups: options.groups || init?.groups || [],
+        sorters: options.sorters || init?.sorters || [],
+        filters: options.filters || init?.filters || [],
+        cols: mergeCols(cols, init?.cols),
+    }, (get) => {
+        const intercept = (partial) => {
+            const prev = get.state();
+            const result = { ...prev, ...partial };
+            if (!isSsr())
+                LocalStorage.set(`@components/table-${prev.name}`, result);
+            return result;
+        };
+        intercept(get.state());
+        return {
+            set: (getters) => intercept(getters),
+        };
+    });
+    return { ...state, ...dispatch, name };
+};
+export const useWidthControl = (reorder) => {
+    const stableRef = useStableRef(reorder);
+    const ref = useRef(null);
+    const onChange = useCallback((cols) => {
+        stableRef.current(cols);
+        cols.forEach((x) => {
+            const c = ref.current.querySelector(`th[data-tableheader="${x.id}"]`);
+            if (!c)
+                return;
+            c.style.width = "auto";
+        });
+    }, [stableRef]);
+    return [ref, onChange];
+};
+export const getModalScrollerRef = () => (isSsr() ? undefined : document.querySelector(`[data-component="modal-body"]`));

package/dist/components/table/table.context.jsx

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const TableContext = createContext({});
+export const TableProvider = TableContext.Provider;
+export const useTable = () => useContext(TableContext);

package/dist/components/table/table.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "react";
-import "../../index-Z-fZHxfJ.js";
-import "../../input-field-5vYcz5tT.js";
-import { T as e } from "../../index-BelDtX5M.js";
+import "../../index-BJ1ayTam.js";
+import "../../input-field-CDCOODOl.js";
+import { T as e } from "../../index-DDeQW0JW.js";
 import "../../proxy-BZcQiBrp.js";
 export {
   e as Table

package/dist/components/table/thead.jsx

@@ -0,0 +1,103 @@
+"use client";
+import { AnimatePresence, motion, Reorder } from "motion/react";
+import { Order } from "linq-arrays";
+import { PlusIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon } from "@phosphor-icons/react";
+import React, { Fragment, useCallback, useRef } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { useTweaks } from "../../hooks/use-tweaks";
+import { Dropdown } from "../floating/dropdown";
+import { ColumnHeaderFilter, createFilterFromCol, useOperators } from "./filter";
+import { SorterHead } from "./sort";
+import { getLabel, useWidthControl } from "./table-lib";
+const dragConstraints = { top: 0, left: 0, right: 0, bottom: -1 };
+const HeaderChild = (props) => {
+    const tweaks = useTweaks();
+    const translation = useTranslations();
+    const ownFilters = props.filters.filter((x) => x.name === props.header.id);
+    const hasFilters = ownFilters.length > 0;
+    const defaultAllowSort = props.header.allowSort ?? tweaks.table.sorters ?? true;
+    const defaultAllowFilter = props.header.allowFilter ?? tweaks.table.filters ?? true;
+    const operators = useOperators();
+    const FilterIcon = hasFilters ? MagnifyingGlassIcon : MagnifyingGlassMinusIcon;
+    const th = useRef(null);
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        return props.setFilters((prev) => prev.filter((x) => x.id !== id));
+    };
+    const dragRef = useCallback((dom) => {
+        if (dom === null)
+            return;
+        th.current = dom;
+        const controller = new AbortController();
+        dom.addEventListener("pointerdown", (e) => {
+            const target = e.target;
+            if (target.dataset.type === "resizer") {
+                e.stopPropagation();
+                return e.stopImmediatePropagation();
+            }
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, []);
+    const ownSorter = props.sorters.find((x) => props.header.id === x.value);
+    const ariaSort = !ownSorter?.type ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
+    const label = getLabel(props.header);
+    return (<Reorder.Item {...props.header.thProps} as="th" ref={dragRef} initial={false} dragSnapToOrigin dragDirectionLock role="columnheader" aria-sort={ariaSort} value={props.header} aria-busy={props.loading} data-tableheader={props.header.id} whileDrag={{ cursor: "grabbing" }} className={`typography relative min-w-0 cursor-grab overflow-clip border-r-[1px] border-table-border bg-table-header font-medium first:rounded-tl-lg last:rounded-tr-lg last:border-r-transparent md:h-14 ${props.header.thProps?.className ?? ""}`}>
+            <span className={`flex h-full items-center justify-between bg-table-header p-[var(--table-cell-padding)] ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`}>
+                <span className="flex items-center gap-1">
+                    {props.inlineFilter && defaultAllowFilter ? (<Dropdown arrow trigger={<span>
+                                    <span id={`${props.header.id}-filter-dropdown-button`} className="sr-only">
+                                        {translation.tableFilterDropdownTitleUnique} {label}
+                                    </span>
+                                    <FilterIcon aria-labelledby={`${props.header.id}-filter-dropdown-button`} size={14}/>
+                                </span>} title={<span className="text-lg">
+                                    {translation.tableFilterDropdownTitleUnique} <span className="font-medium">{label}</span>
+                                </span>}>
+                            <ul className="font-medium">
+                                {ownFilters.length === 0 ? null : (<Fragment>
+                                        {ownFilters.map((filter) => (<li key={`thead-filter-${filter.id}`} className="my-1">
+                                                <ColumnHeaderFilter onDelete={onDelete} filter={filter} set={props.setFilters}/>
+                                            </li>))}
+                                    </Fragment>)}
+                                <li>
+                                    <button type="button" className="flex items-center gap-1 text-primary" onClick={() => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations)))}>
+                                        <PlusIcon size={14}/> {translation.tableFilterNewFilter}
+                                    </button>
+                                </li>
+                            </ul>
+                        </Dropdown>) : null}
+                    <span className="pointer-events-auto text-balance text-base">{props.header.thead}</span>
+                    {props.inlineSorter && defaultAllowSort ? (<SorterHead col={props.header} setSorters={props.setSorters} sorters={props.sorters}/>) : null}
+                </span>
+            </span>
+            {props.isLast ? null : (<motion.button drag="x" draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} dragSnapToOrigin dragDirectionLock data-type="resizer" title={props.header.id} dragConstraints={dragConstraints} className="absolute -right-[0.5px] top-0 z-calendar block h-full w-[1px] cursor-col-resize bg-transparent hover:w-1.5 hover:bg-primary active:w-1.5 active:bg-primary" onClick={(e) => void e.currentTarget.focus()} onKeyDown={(e) => {
+                if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+                    if (th.current === null)
+                        return;
+                    th.current.setAttribute("data-resized", "true");
+                    const v = th.current.getBoundingClientRect().width;
+                    const move = e.shiftKey ? 50 : 10;
+                    const delta = move * (e.key === "ArrowLeft" ? -1 : 1);
+                    th.current.style.width = `${Math.abs(v + delta)}px`;
+                }
+            }} onDoubleClick={() => {
+                if (th.current === null)
+                    return;
+                th.current.style.width = "auto";
+            }} onDrag={(_, info) => {
+                if (th.current === null)
+                    return;
+                th.current.setAttribute("data-resized", "true");
+                const v = th.current.getBoundingClientRect().width;
+                const delta = info.delta.x;
+                th.current.style.width = `${Math.abs(v + delta)}px`;
+            }}/>)}
+        </Reorder.Item>);
+};
+export const TableHeader = (props) => {
+    const [ref, onChange] = useWidthControl(props.setCols);
+    return (<Reorder.Group layout as="tr" axis="x" drag="x" ref={ref} layoutRoot role="row" layoutScroll onReorder={onChange} values={props.headers}>
+            <AnimatePresence>
+                {props.headers.map((header, index) => (<HeaderChild index={index} header={header} filters={props.filters} loading={props.loading} sorters={props.sorters} setFilters={props.setFilters} setSorters={props.setSorters} inlineFilter={props.inlineFilter} inlineSorter={props.inlineSorter} isLast={index === props.headers.length - 1} key={`header-child-item-${header.id}`}/>))}
+            </AnimatePresence>
+        </Reorder.Group>);
+};

package/dist/config/context.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext } from "react";
+import { parsers } from "../styles/design-tokens";
+import { defaultTranslations } from "./default-translations";
+import { defaultTweaks } from "./default-tweaks";
+export const Context = createContext({
+    parser: parsers.hsla,
+    tweaks: defaultTweaks,
+    floatingRef: undefined,
+    map: defaultTranslations,
+    locale: undefined,
+});

package/dist/config/default-translations.d.ts

@@ -85,6 +85,10 @@ export declare const defaultTranslations: {
     }) => string;
     uploadDialogTitle: string;
     datepickerPlaceholder: (_: string) => string;
+    spinnerLoading: string;
+    skeletonLoading: string;
+    closeButton: string;
+    fileUploadZoneLabel: string;
 };
 export type Translations = typeof defaultTranslations;
 //# sourceMappingURL=default-translations.d.ts.map

package/dist/config/default-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;+BAgBD,MAAM;;gCAEL,MAAM;;;;;;gCAMN,MAAM;iCACL,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmCb;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;4BAqB7G;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;+BAGV,MAAM;CACpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;+BAgBD,MAAM;;gCAEL,MAAM;;;;;;gCAMN,MAAM;iCACL,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmCb;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;4BAqB7G;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;+BAGV,MAAM;;;;;CAKpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}

package/dist/config/default-translations.jsx

@@ -0,0 +1,87 @@
+import React, { Fragment } from "react";
+export const defaultTranslations = {
+    autocompleteEmpty: "Nothing here...",
+    calendarBackMonth: "Back month",
+    calendarFromDate: "From",
+    calendarMonthLabel: "Month",
+    calendarNextMonth: "Next month",
+    calendarDatetimeTitle: "Time",
+    calendarToDate: "To",
+    calendarToday: "Today",
+    pageCalendarMonthView: "Month view",
+    pageCalendarWeekView: "Week view",
+    pageCalendarDayView: "Day view",
+    pageCalendarPrevious: "Previous",
+    pageCalendarNext: "Next",
+    pageCalendarToday: "Today",
+    pageCalendarAddEvent: "Add event",
+    pageCalendarWeekLabel: (n) => `Week ${n}`,
+    pageCalendarFilter: "Filter:",
+    pageCalendarMoreEvents: (n) => `+${n} more...`,
+    pageCalendarLabel: "Calendar",
+    pageCalendarNavigation: "Calendar navigation",
+    pageCalendarMonthGrid: "Calendar month",
+    pageCalendarFilterEnabled: "enabled",
+    pageCalendarFilterDisabled: "disabled",
+    pageCalendarEventCount: (n) => (n === 1 ? "1 event" : `${n} events`),
+    pageCalendarEventAt: (title, time) => `${title} at ${time}`,
+    commandPaletteEmpty: "Nothing here...",
+    commandPaletteLoading: "Loading...",
+    datePickerCalendarButtonLabel: "Click to open a date picker",
+    emptyDataMessage: "No data",
+    inputCaretDown: "Click to see all options",
+    inputCloseValue: "Click to clear the value",
+    inputOptionalLabel: "Optional",
+    wizardNext: "Next",
+    wizardPrev: "Previous",
+    wizardFinish: "Finish",
+    wizardSkip: "Skip",
+    multiSelectInnerPlaceholder: "Search...",
+    multiSelectSelectedLabel: "Selected",
+    tableColumnResizer: "Resize column",
+    tableFilterColumnPlaceholder: "Filter by",
+    tableFilterColumnTitle: "Filter by",
+    tableFilterDropdownTitle: "Filters",
+    tableFilterDropdownTitleUnique: "Filter by",
+    tableFilterLabel: "Filters",
+    tableFilterNewFilter: "New filter",
+    tableFilterOperatorPlaceholder: "Equals to...",
+    tableFilterOperatorTitle: "Operation",
+    tableFilterTypeContains: "Contains",
+    tableFilterTypeEndsWith: "Ends with",
+    tableFilterTypeGreaterThan: "Greater than",
+    tableFilterTypeIs: "Is",
+    tableFilterTypeIsNot: "Is not",
+    tableFilterTypeLessThan: "Less than",
+    tableFilterTypeNotContains: "Not contains",
+    tableFilterTypeStartsWith: "Starts with",
+    tableFilterValuePlaceholder: "Something...",
+    tableFilterValueTitle: "Value",
+    tableGroupLabel: "Group",
+    tableGroupLabelWithCount: "Group",
+    tablePaginationFooter: (pagination) => (<Fragment>
+            {pagination.current} to {pagination.pages} of {pagination.totalItems} items.{Array.isArray(pagination.sizes) ? pagination.select : null}{" "}
+            per page.
+        </Fragment>),
+    tablePaginationNext: "Next",
+    tablePaginationPrevious: "Previous",
+    tablePaginationSelectLabel: "Select the size of page",
+    tableSortAddButton: "Add sort",
+    tableSortAsc: "Ascending",
+    tableSortDesc: "Descending",
+    tableSortDropdownTitle: "Order by",
+    tableSortOrderByLabel: "Order by",
+    tableSortOrderInputPlaceholder: "Order by",
+    tableSortOrderInputTitle: "Order by",
+    tableSortTypeInputPlaceholder: "Ascending",
+    tableSortTypeInputTitle: "Sort type",
+    uploadIdle: "You can drag your files here",
+    uploadIdleButton: "Choose your files",
+    uploadDragging: (props) => `Dragging ${props.n} ${props.n > 0 ? "files" : "file"}`,
+    uploadDialogTitle: "Details of your file",
+    datepickerPlaceholder: (_) => "day/month/year",
+    spinnerLoading: "Loading",
+    skeletonLoading: "Loading content",
+    closeButton: "Close",
+    fileUploadZoneLabel: "File upload area. Drag files here or press Enter to browse.",
+};

package/dist/config/default-tweaks.js

@@ -0,0 +1,4 @@
+export const defaultTweaks = {
+    input: { iconFeedback: true },
+    table: { operations: true, sorters: true, filters: true, sticky: undefined },
+};

package/dist/constants.js

@@ -0,0 +1,2 @@
+export const FLOATING_DELAY = 200;
+export const TYPEAHEAD_RESET_DELAY = 500;