@manta-eu/react 0.1.0

package/dist/components/table/table-column-rearrange-popover.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { sentenceCase } from "change-case";
+import { GripVertical, SlidersHorizontal } from "lucide-react";
+import { equals } from "ramda";
+import { useEffect, useMemo, useState } from "react";
+import { tv } from "tailwind-variants";
+import { Button } from "#components/button/index";
+import { Checkbox } from "#components/checkbox/index";
+import { cn } from "#style";
+const rearrangePopoverContent = tv({
+    base: [
+        "z-50 w-70 overflow-hidden p-1.5",
+        "bg-card border border-default-border rounded-md-v4 shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        // A closed overlay stays hit-testable — see the note on the modal overlay.
+        "data-[state=closed]:hidden",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "origin-(--radix-popover-content-transform-origin)",
+    ],
+});
+const rearrangeItem = tv({
+    base: [
+        "flex items-center gap-2 px-1.5 py-2 rounded-sm-v4",
+        "bg-card transition-all duration-200 ease-out",
+        "cursor-move",
+        "hover:bg-faint",
+    ],
+});
+const rearrangeHeader = tv({
+    base: ["flex items-center px-1.5 py-2 rounded-sm-v4", "bg-card", "typography-caption-medium text-muted-foreground"],
+});
+function RearrangePopoverContent(props) {
+    const { className, title = "Edit Columns", items, onToggle, onReorder, onReset, resetLabel = "Reset", side = "bottom", align = "start", sideOffset = 4, ref, ...otherProps } = props;
+    const [draggedIndex, setDraggedIndex] = useState();
+    const [displayItems, setDisplayItems] = useState(items);
+    const [originalIndex, setOriginalIndex] = useState();
+    const currentDisplayItems = isPresent(draggedIndex) ? displayItems : items;
+    const handleDragStart = (index) => {
+        setDisplayItems(items);
+        setDraggedIndex(index);
+        setOriginalIndex(index);
+    };
+    const reorderItems = (fromIndex, toIndex) => {
+        if (fromIndex === toIndex)
+            return;
+        const newItems = [...currentDisplayItems];
+        const [draggedItem] = newItems.splice(fromIndex, 1);
+        if (!draggedItem)
+            return;
+        newItems.splice(toIndex, 0, draggedItem);
+        setDisplayItems(newItems);
+    };
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        if (!isPresent(draggedIndex) || draggedIndex === index)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const midpoint = rect.top + rect.height / 2;
+        const mouseY = e.clientY;
+        let targetIndex = index;
+        if (draggedIndex < index && mouseY < midpoint) {
+            targetIndex = index - 1;
+        }
+        else if (draggedIndex > index && mouseY > midpoint) {
+            targetIndex = index + 1;
+        }
+        if (targetIndex !== draggedIndex && targetIndex >= 0 && targetIndex < currentDisplayItems.length) {
+            reorderItems(draggedIndex, targetIndex);
+            setDraggedIndex(targetIndex);
+        }
+    };
+    const finalizeDrag = () => {
+        if (isPresent(draggedIndex) && originalIndex !== draggedIndex) {
+            onReorder(displayItems);
+        }
+        setDraggedIndex(undefined);
+        setOriginalIndex(undefined);
+        setDisplayItems(items);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        finalizeDrag();
+    };
+    const handleDragEnd = () => {
+        finalizeDrag();
+    };
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, side: side, align: align, sideOffset: sideOffset, className: cn(rearrangePopoverContent(), className), ...otherProps, children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: rearrangeHeader(), children: title }), _jsx("div", { className: "flex flex-col", children: currentDisplayItems.map((item, index) => (_jsxs("div", { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDrop: handleDrop, onDragEnd: handleDragEnd, className: cn(rearrangeItem(), draggedIndex === index && "opacity-50 scale-95"), children: [_jsx(GripVertical, { className: "size-5 shrink-0 text-muted-foreground cursor-grab active:cursor-grabbing" }), _jsx(Checkbox, { checked: item.checked, onCheckedChange: () => onToggle(item.id), label: item.label })] }, item.id))) }), onReset && (_jsx(Button, { variant: "tertiary", size: "sm", rounded: "sm", className: "w-full", onClick: onReset, children: resetLabel }))] }) }) }));
+}
+export function TableColumnRearrangePopover(props) {
+    const { table, className, formatLabel: formatLabelProp, columnLabels, title = "Edit Columns", enableReset = false, resetLabel, defaultState, defaultOrder, defaultVisibility, } = props;
+    const formatLabel = useMemo(() => formatLabelProp ?? (columnLabels ? (id) => columnLabels[id] ?? sentenceCase(id) : sentenceCase), [formatLabelProp, columnLabels]);
+    const [open, setOpen] = useState(false);
+    const { columnVisibility, columnOrder } = table.getState();
+    const tableItems = useMemo(() => {
+        const hideableColumns = table.getAllColumns().filter((col) => col.getCanHide());
+        if (columnOrder.length > 0) {
+            hideableColumns.sort((a, b) => {
+                const indexA = columnOrder.indexOf(a.id);
+                const indexB = columnOrder.indexOf(b.id);
+                if (indexA === -1 && indexB === -1)
+                    return 0;
+                if (indexA === -1)
+                    return 1;
+                if (indexB === -1)
+                    return -1;
+                return indexA - indexB;
+            });
+        }
+        return hideableColumns.map((column) => ({
+            id: column.id,
+            label: formatLabel(column.id),
+            checked: column.getIsVisible(),
+        }));
+    }, [table, formatLabel, columnVisibility, columnOrder]);
+    const [pendingItems, setPendingItems] = useState(null);
+    useEffect(() => {
+        setPendingItems(null);
+    }, [tableItems]);
+    const items = pendingItems ?? tableItems;
+    if (items.length === 0)
+        return null;
+    const handleToggle = (id) => {
+        const column = table.getColumn(id);
+        if (!column)
+            return;
+        const base = pendingItems ?? tableItems;
+        const current = base.find((item) => item.id === id);
+        const newVisible = !(current?.checked ?? column.getIsVisible());
+        column.toggleVisibility(newVisible);
+        setPendingItems(base.map((item) => (item.id === id ? { ...item, checked: newVisible } : item)));
+    };
+    const handleReorder = (newItems) => {
+        setPendingItems(newItems);
+        const allColumns = table.getAllColumns();
+        const nonHideableColumns = allColumns.filter((col) => !col.getCanHide()).map((col) => col.id);
+        const newOrder = [...nonHideableColumns, ...newItems.map((item) => item.id)];
+        if (!equals(table.getState().columnOrder, newOrder)) {
+            table.setColumnOrder(newOrder);
+        }
+    };
+    const handleReset = () => {
+        const allColumns = table.getAllColumns();
+        const hideableColumns = allColumns.filter((col) => col.getCanHide());
+        const hideableColumnIds = new Set(hideableColumns.map((col) => col.id));
+        const nonHideableColumns = allColumns.filter((col) => !col.getCanHide()).map((col) => col.id);
+        let targetOrder;
+        let targetVisibility;
+        if (defaultState) {
+            targetOrder = defaultState.order.filter((id) => hideableColumnIds.has(id));
+            targetVisibility = defaultState.visibility;
+        }
+        else if (defaultOrder || defaultVisibility) {
+            const order = (defaultOrder ?? hideableColumns.map((col) => col.id)).filter((id) => hideableColumnIds.has(id));
+            const vis = defaultVisibility ?? {};
+            targetOrder = order;
+            targetVisibility = Object.fromEntries(order.map((id) => [id, vis[id] !== false]));
+        }
+        else {
+            targetOrder = hideableColumns.map((col) => col.id);
+            targetVisibility = Object.fromEntries(hideableColumns.map((col) => [col.id, true]));
+        }
+        setPendingItems(targetOrder.map((id) => ({
+            id,
+            label: formatLabel(id),
+            checked: targetVisibility[id] ?? true,
+        })));
+        hideableColumns.forEach((column) => {
+            column.toggleVisibility(targetVisibility[column.id] ?? true);
+        });
+        table.setColumnOrder([...nonHideableColumns, ...targetOrder]);
+    };
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx(Button, { size: "base", variant: "tertiary", icon: SlidersHorizontal, iconOnly: true, "aria-label": "Columns", className: cn("rounded-xl border border-default-border p-2.5 [&_svg]:size-5", className) }) }), _jsx(RearrangePopoverContent, { items: items, onToggle: handleToggle, onReorder: handleReorder, title: title, onReset: enableReset ? handleReset : undefined, resetLabel: resetLabel, align: "end" })] }));
+}

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

@@ -0,0 +1,24 @@
+import type { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, OnChangeFn, PaginationState, Row, SortingState, VisibilityState, RowSelectionState, TableOptions } from "@tanstack/react-table";
+export interface TableConfigProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    sorting?: SortingState;
+    setSorting?: OnChangeFn<SortingState>;
+    columnFilters?: ColumnFiltersState;
+    setColumnFilters?: OnChangeFn<ColumnFiltersState>;
+    columnVisibility?: VisibilityState;
+    setColumnVisibility?: OnChangeFn<VisibilityState>;
+    columnOrder?: ColumnOrderState;
+    setColumnOrder?: OnChangeFn<ColumnOrderState>;
+    rowSelection?: RowSelectionState;
+    setRowSelection?: OnChangeFn<RowSelectionState>;
+    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+    getRowId?: (row: T, index: number, parent?: Row<T>) => string;
+    columnPinning?: ColumnPinningState;
+    pagination?: PaginationState;
+    setPagination?: OnChangeFn<PaginationState>;
+    manualSorting?: boolean;
+    manualPagination?: boolean;
+}
+export declare function createTableConfig<T>(tableConfig: TableConfigProps<T>): TableOptions<T>;
+//# sourceMappingURL=table-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-config.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,eAAe,EACf,GAAG,EACH,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,YAAY,EACb,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,gBAAgB,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAClD,gBAAgB,CAAC,EAAE,eAAe,CAAC;IACnC,mBAAmB,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,cAAc,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,eAAe,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;IAC9D,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,aAAa,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAgBD,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAkDtF"}

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

@@ -0,0 +1,44 @@
+import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/react-table";
+// Module-level, not fresh literals: `createTableConfig` runs inside render, and a new `[]` changes
+// `getFilteredRowModel`'s memo deps every render, which fires `_autoResetPageIndex` -> a microtask
+// `setPagination` with a new object -> React cannot bail out -> the table locks. Only bites a caller
+// that omits a key and wires its setter, and only after a post-mount render, so a full page load
+// looks fine and a client-side navigation hangs. Not frozen: TanStack's state types are mutable and
+// identity is the requirement, not immutability. `table-config.test.ts` pins it.
+const emptySorting = [];
+const emptyColumnFilters = [];
+const emptyColumnOrder = [];
+const emptyColumnVisibility = {};
+const emptyRowSelection = {};
+const emptyColumnPinning = {};
+const defaultPagination = { pageIndex: 0, pageSize: 10 };
+export function createTableConfig(tableConfig) {
+    const { data, columns, sorting = emptySorting, setSorting, columnFilters = emptyColumnFilters, setColumnFilters, columnVisibility = emptyColumnVisibility, setColumnVisibility, columnOrder = emptyColumnOrder, setColumnOrder, rowSelection = emptyRowSelection, setRowSelection, enableRowSelection, getRowId, pagination = defaultPagination, setPagination, columnPinning = emptyColumnPinning, manualSorting = false, manualPagination = false, } = tableConfig;
+    return {
+        data,
+        columns,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            columnOrder,
+            rowSelection,
+            pagination,
+            columnPinning,
+        },
+        manualSorting,
+        manualPagination,
+        enableRowSelection,
+        ...(getRowId === undefined ? {} : { getRowId }),
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnOrderChange: setColumnOrder,
+        onRowSelectionChange: setRowSelection,
+        onPaginationChange: setPagination,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    };
+}

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

@@ -0,0 +1,13 @@
+import type { Column } from "@tanstack/react-table";
+import type { CSSProperties } from "react";
+export type CombinedSortOption<T extends string> = `${T}-${"asc" | "desc"}`;
+export type PinnedColumnInfo = {
+    isLeftPinned: boolean;
+    isRightPinned: boolean;
+    isPinned: boolean;
+    isLastLeftPinnedColumn: boolean;
+    isFirstRightPinnedColumn: boolean;
+};
+export declare function getPinnedColumnInfo<TData, TValue>(column: Column<TData, TValue>): PinnedColumnInfo;
+export declare function getCommonPinnedColumnStyles<TData, TValue>(column: Column<TData, TValue>): CSSProperties;
+//# sourceMappingURL=table-utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-utils.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,GAAG,CAAC,IAAI,KAAK,GAAG,MAAM,EAAE,CAAC;AAE5E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,EAAE,OAAO,CAAC;IAChC,wBAAwB,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,gBAAgB,CAclG;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,aAAa,CAWvG"}

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

@@ -0,0 +1,25 @@
+export function getPinnedColumnInfo(column) {
+    const isPinned = column.getIsPinned();
+    const isLeftPinned = isPinned === "left";
+    const isRightPinned = isPinned === "right";
+    const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+    const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+    return {
+        isLeftPinned,
+        isRightPinned,
+        isPinned: isLeftPinned || isRightPinned,
+        isLastLeftPinnedColumn,
+        isFirstRightPinnedColumn,
+    };
+}
+export function getCommonPinnedColumnStyles(column) {
+    const { isPinned, isLeftPinned, isRightPinned } = getPinnedColumnInfo(column);
+    if (!isPinned)
+        return {};
+    return {
+        position: "sticky",
+        zIndex: 20,
+        ...(isLeftPinned && { left: `${column.getStart?.("left") ?? 0}px` }),
+        ...(isRightPinned && { right: `${column.getAfter?.("right") ?? 0}px` }),
+    };
+}

package/dist/components/table/use-max-table-rows.d.ts

@@ -0,0 +1,2 @@
+export declare function useMaxTableRows(): number | undefined;
+//# sourceMappingURL=use-max-table-rows.d.ts.map

package/dist/components/table/use-max-table-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-max-table-rows.d.ts","sourceRoot":"","sources":["../../../src/components/table/use-max-table-rows.ts"],"names":[],"mappings":"AAWA,wBAAgB,eAAe,uBAc9B"}

package/dist/components/table/use-max-table-rows.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useMainContentSizing } from "#components/main-content/index";
+const tableHeaderHeight = 52;
+const tableRowHeight = 57;
+const contentPadding = 48;
+const paginationHeight = 32;
+const uiGap = 24;
+export function useMaxTableRows() {
+    const { availableContentHeight, fullPageFilterHeight } = useMainContentSizing();
+    const [maxRows, setMaxRows] = useState();
+    useEffect(() => {
+        if (availableContentHeight > 0) {
+            const availableHeight = availableContentHeight - fullPageFilterHeight - contentPadding - paginationHeight - tableHeaderHeight - uiGap;
+            const calculatedMaxRows = Math.floor(availableHeight / tableRowHeight);
+            setMaxRows(Math.max(calculatedMaxRows, 1));
+        }
+    }, [availableContentHeight, fullPageFilterHeight]);
+    return maxRows;
+}

package/dist/components/table/use-table-state.d.ts

@@ -0,0 +1,28 @@
+import type { ColumnFiltersState, ColumnOrderState, PaginationState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { type SetStateAction } from "react";
+export type UseTableStateOptions = {
+    useLocalState?: boolean;
+    defaultPageSize?: number;
+    enableRowSelection?: boolean;
+};
+export declare function useTableState(tableKey: string, initialSorting?: SortingState, options?: UseTableStateOptions): {
+    pagination: PaginationState;
+    setPagination: import("react").Dispatch<SetStateAction<PaginationState>>;
+    pageIndex: number;
+    setPageIndex: (pageIndex: number) => void;
+    searchQuery: string;
+    setSearchQuery: (value: string | ((old: string) => string | null) | null, options?: import("nuqs").Options) => Promise<URLSearchParams>;
+    debouncedSearchQuery: string;
+    sorting: SortingState;
+    setSorting: import("react").Dispatch<SetStateAction<SortingState>>;
+    columnFilters: ColumnFiltersState;
+    setColumnFilters: import("react").Dispatch<SetStateAction<ColumnFiltersState>>;
+    columnVisibility: VisibilityState;
+    setColumnVisibility: import("react").Dispatch<SetStateAction<VisibilityState>>;
+    columnOrder: ColumnOrderState;
+    setColumnOrder: import("react").Dispatch<SetStateAction<ColumnOrderState>>;
+    rowSelection: {};
+    setRowSelection: import("react").Dispatch<SetStateAction<{}>>;
+    enableRowSelection: boolean | undefined;
+};
+//# sourceMappingURL=use-table-state.d.ts.map

package/dist/components/table/use-table-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-state.d.ts","sourceRoot":"","sources":["../../../src/components/table/use-table-state.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,eAAe,EAChB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGtD,MAAM,MAAM,oBAAoB,GAAG;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,GAAE,YAAiB,EAAE,OAAO,CAAC,EAAE,oBAAoB;;;;8BAiDnF,MAAM;;;;;;;;;;;;;;;EAgBnC"}

package/dist/components/table/use-table-state.js

@@ -0,0 +1,54 @@
+"use client";
+import { parseAsInteger, useQueryState } from "nuqs";
+import { useState } from "react";
+import { useDebounceValue, useLocalStorage } from "usehooks-ts";
+export function useTableState(tableKey, initialSorting = [], options) {
+    const useLocalState = options?.useLocalState ?? false;
+    const defaultPageSize = options?.defaultPageSize ?? 20;
+    const enableRowSelection = options?.enableRowSelection;
+    const [localPagination, setLocalPagination] = useState({
+        pageIndex: 0,
+        pageSize: defaultPageSize,
+    });
+    const [urlPageIndex, setUrlPageIndex] = useQueryState(`${tableKey}-page`, parseAsInteger.withDefault(0));
+    const [urlPageSize, setUrlPageSize] = useQueryState(`${tableKey}-pageSize`, parseAsInteger.withDefault(defaultPageSize));
+    const pagination = useLocalState
+        ? localPagination
+        : { pageIndex: urlPageIndex, pageSize: urlPageSize };
+    const setPagination = useLocalState
+        ? setLocalPagination
+        : (updater) => {
+            const nextPagination = typeof updater === "function" ? updater({ pageIndex: urlPageIndex, pageSize: urlPageSize }) : updater;
+            void setUrlPageIndex(nextPagination.pageIndex);
+            void setUrlPageSize(nextPagination.pageSize);
+        };
+    const [searchQuery, setSearchQuery] = useQueryState(`${tableKey}-search`, {
+        defaultValue: "",
+    });
+    const [debouncedSearchQuery] = useDebounceValue(searchQuery, 500);
+    const [sorting, setSorting] = useState(initialSorting);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useLocalStorage(`table-${tableKey}-column-visibility`, {});
+    const [columnOrder, setColumnOrder] = useLocalStorage(`table-${tableKey}-column-order`, []);
+    const [rowSelection, setRowSelection] = useState({});
+    return {
+        pagination,
+        setPagination,
+        pageIndex: pagination.pageIndex,
+        setPageIndex: (pageIndex) => setPagination((prev) => ({ ...prev, pageIndex })),
+        searchQuery,
+        setSearchQuery,
+        debouncedSearchQuery,
+        sorting,
+        setSorting,
+        columnFilters,
+        setColumnFilters,
+        columnVisibility,
+        setColumnVisibility,
+        columnOrder,
+        setColumnOrder,
+        rowSelection,
+        setRowSelection,
+        enableRowSelection,
+    };
+}

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

@@ -0,0 +1,7 @@
+import type { Table } from "@tanstack/react-table";
+export type TablePaginationProps<Row> = {
+    table: Table<Row>;
+    total: number;
+};
+export declare function TablePagination<Row>(props: TablePaginationProps<Row>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table-pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGnD,MAAM,MAAM,oBAAoB,CAAC,GAAG,IAAI;IACtC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,2CAsBpE"}

package/dist/components/table-pagination/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PaginationBlock } from "../pagination/index.js";
+export function TablePagination(props) {
+    const { table, total } = props;
+    const { pageIndex, pageSize } = table.getState().pagination;
+    // Not the filtered row model: a server-paged table only holds the page in hand, so that would
+    // report "1-20 of 20" against a 45-row result. getRowCount answers the served count when the
+    // table paginates manually, and the filtered count when it paginates itself.
+    const filteredCount = table.getRowCount();
+    const totalPages = table.getPageCount() || 1;
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(PaginationBlock, { currentPageIndex: pageIndex, totalPages: totalPages, onPageChange: (page) => table.setPageIndex(page), showPageSize: true, pageSize: pageSize, totalCount: filteredCount }), filteredCount !== total && _jsxs("p", { className: "typography-tiny text-muted-foreground", children: ["Filtered from ", total, " total"] })] }));
+}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type TableSkeletonProps = {
+    gridColsClassName: string;
+    headerColumnCount: number;
+    rows?: number;
+    renderRow: (rowIndex: number) => ReactNode;
+    withWrapper?: boolean;
+    className?: string;
+};
+export declare function TableSkeleton(props: TableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table-skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA6BtD"}

package/dist/components/table-skeleton/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../skeleton/index.js";
+import { cn } from "#style";
+export function TableSkeleton(props) {
+    const { gridColsClassName, headerColumnCount, rows = 8, renderRow, withWrapper = true, className } = props;
+    const content = (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("grid gap-3 border-b border-muted-border bg-faint px-4 py-3", gridColsClassName), children: Array.from({ length: headerColumnCount }, (_, index) => (_jsx(Skeleton, { className: "h-4 w-2/3 rounded-md" }, `table-skeleton-header-${index}`))) }), Array.from({ length: rows }, (_, rowIndex) => (_jsx("div", { className: cn("grid items-center gap-3 border-b border-muted-border px-4 py-4 last:border-b-0", gridColsClassName), children: renderRow(rowIndex) }, `table-skeleton-row-${rowIndex}`)))] }));
+    if (!withWrapper)
+        return content;
+    return (_jsx("div", { className: cn("rounded-xl border border-muted-border bg-card overflow-hidden", className), children: content }));
+}

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

@@ -0,0 +1,37 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { type ComponentProps } from "react";
+import { type VariantPropsOf } from "#style";
+export declare const tabsListConfig: {
+    base: string;
+    variants: {
+        size: {
+            default: string;
+            small: string;
+        };
+    };
+    defaultVariants: {
+        readonly size: "default";
+    };
+};
+export declare function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare const tabTriggerConfig: {
+    base: string[];
+    variants: {
+        size: {
+            default: string;
+            small: string;
+        };
+    };
+    defaultVariants: {
+        readonly size: "default";
+    };
+};
+export declare function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export type TabCountProps = {
+    count: number;
+};
+export declare function TabCount(props: TabCountProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export type TabsProps = ComponentProps<typeof TabsPrimitive.Root> & (VariantPropsOf<typeof tabTriggerConfig> | VariantPropsOf<typeof tabsListConfig>);
+export declare function Tabs({ className, size, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,KAAK,cAAc,EAAsC,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAM,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAQjD,eAAO,MAAM,cAAc;;;;;;;;;;;CAW1B,CAAC;AAIF,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAI1F;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAqB5B,CAAC;AAIF,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAUhG;AAED,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAQ5C;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAEhG;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAC/D,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC;AAEpF,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAO5D"}

package/dist/components/tabs/index.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { createContext, useContext, useMemo } from "react";
+import { tv } from "tailwind-variants";
+import { cn } from "#style";
+const TabsContext = createContext({
+    size: "default",
+});
+const useTabsContext = () => useContext(TabsContext);
+export const tabsListConfig = {
+    base: "bg-muted text-default-foreground inline-flex w-fit items-center justify-center",
+    variants: {
+        size: {
+            default: "rounded-md-v4 p-1 h-10",
+            small: "rounded-sm-v4 p-0.5 h-8",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+};
+const tabsListVariants = tv(tabsListConfig);
+export function TabsList({ className, ...props }) {
+    const { size } = useTabsContext();
+    return _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn(tabsListVariants({ size }), className), ...props });
+}
+export const tabTriggerConfig = {
+    base: [
+        "inline-flex flex-1 items-center justify-center gap-1.5",
+        "border border-transparent",
+        "text-default-foreground typography-small text-default-foreground whitespace-nowrap",
+        "data-[state=active]:bg-card",
+        "focus-visible:border-active-border focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-active-border/25",
+        "disabled:pointer-events-none disabled:text-disabled-foreground",
+        "transition-[color_150ms_ease,box-shadow_150ms_ease,transform_100ms_ease-out] motion-reduce:transition-none",
+        "active:scale-[0.98] motion-reduce:active:scale-100",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    ],
+    variants: {
+        size: {
+            default: "h-8 px-4 py-2 rounded-sm-v4",
+            small: "h-7 px-3 py-1.5 rounded-xs-v4",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+};
+const tabTriggerVariants = tv(tabTriggerConfig);
+export function TabsTrigger({ className, ...props }) {
+    const { size } = useTabsContext();
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(tabTriggerVariants({ size }), className), ...props }));
+}
+export function TabCount(props) {
+    const { count } = props;
+    return (_jsx("span", { className: "inline-flex min-w-6 shrink-0 items-center justify-center rounded-full px-2 py-0.5 typography-tiny bg-faint text-muted-foreground tabular-nums", children: count.toLocaleString() }));
+}
+export function TabsContent({ className, ...props }) {
+    return _jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props });
+}
+export function Tabs({ className, size, ...props }) {
+    const context = useMemo(() => ({ size }), [size]);
+    return (_jsx(TabsContext.Provider, { value: context, children: _jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("flex flex-col gap-2", className), ...props }) }));
+}

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,4 @@
+import type { TextareaHTMLAttributes } from "react";
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAIpD,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAExE,eAAO,MAAM,QAAQ,+GAanB,CAAC"}

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "#lib/utils";
+export const Textarea = forwardRef(function Textarea({ className, ...props }, ref) {
+    return (_jsx("textarea", { className: cn("flex w-full rounded-radius px-3 py-2 typography-body", "placeholder:text-muted-foreground focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
+});

package/dist/components/theme-selector-dropdown.d.ts

@@ -0,0 +1,2 @@
+export declare function ThemeSelectorDropdown(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-selector-dropdown.d.ts.map

package/dist/components/theme-selector-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-selector-dropdown.d.ts","sourceRoot":"","sources":["../../src/components/theme-selector-dropdown.tsx"],"names":[],"mappings":"AAqBA,wBAAgB,qBAAqB,4CAmDpC"}

package/dist/components/theme-selector-dropdown.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Moon, Sun, SunMoon } from "lucide-react";
+import { match } from "ts-pattern";
+import { useTheme } from "../providers/ThemeProvider.js";
+import { Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownTrigger, preventPointerFocus, } from "#components/dropdown/index";
+function getThemeIcon(theme) {
+    return match(theme)
+        .with("system", () => _jsx(SunMoon, { className: "size-5" }))
+        .with("light", () => _jsx(Sun, { className: "size-5" }))
+        .with("dark", () => _jsx(Moon, { className: "size-5" }))
+        .exhaustive();
+}
+export function ThemeSelectorDropdown() {
+    const { theme, setTheme } = useTheme();
+    return (_jsxs(Dropdown, { children: [_jsx(DropdownTrigger, { asChild: true, children: _jsxs(DropdownItem, { className: "flex flex-row items-center gap-1.5 typography-caption h-11", onPointerMove: preventPointerFocus, onPointerLeave: preventPointerFocus, children: [getThemeIcon(theme), _jsx("span", { className: "typography-caption", children: "Appearance" })] }) }), _jsx(DropdownContent, { side: "right", children: _jsxs(DropdownGroup, { className: "p-2", children: [_jsxs(DropdownItem, { selected: theme === "system", className: "flex flex-row items-center gap-1.5 typography-caption h-11", onClick: () => setTheme("system"), onPointerMove: preventPointerFocus, onPointerLeave: preventPointerFocus, children: [getThemeIcon("system"), _jsx("span", { className: "typography-caption", children: "System theme" })] }), _jsxs(DropdownItem, { selected: theme === "light", className: "flex flex-row items-center gap-1.5 typography-caption h-11", onClick: () => setTheme("light"), onPointerMove: preventPointerFocus, onPointerLeave: preventPointerFocus, children: [getThemeIcon("light"), _jsx("span", { className: "typography-caption", children: "Light" })] }), _jsxs(DropdownItem, { selected: theme === "dark", className: "flex flex-row items-center gap-1.5 typography-caption h-11", onClick: () => setTheme("dark"), onPointerMove: preventPointerFocus, onPointerLeave: preventPointerFocus, children: [getThemeIcon("dark"), _jsx("span", { className: "typography-caption", children: "Dark" })] })] }) })] }));
+}

package/dist/components/thinking/gradient-border.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type GradientBorderProps = {
+    thinking?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+export declare function GradientBorder(props: GradientBorderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=gradient-border.d.ts.map