@cryptlex/web-components 5.3.0 → 5.4.0

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

@@ -1,265 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import { ArrowDownNarrowWide, ArrowDownWideNarrow, ArrowUpDown, Columns3, GripVertical, Info } from "lucide-react";
-import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
-/** Reserved name for actions column */
-export const ACTIONS_COLUMN_ID = "tableActions";
-/**
- * Hook for handling all data-table state. Used in DataTableContext
- */
-export function useDataTableState({ columns, fetchFn, columnsToHideByDefault = {}, allowSelection = false, filterConfig }) {
-    const id = useId();
-    // TODO: Would it be better for this state to be more granular?
-    const [tableState, _setTableState] = useState({
-        /** TODO Reflect in URL  */
-        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state
-        sorting: [], // Sorting state
-        /** Ephemeral */
-        rowSelection: {}, // Row selection state
-    });
-    /** TODO Reflect in URL  */
-    const [searchQuery, setSearchQuery] = useState('');
-    /** TODO Store on browser as preference */
-    const [columnOrder, setColumnOrder] = useState([]);
-    // TODO Store on browser
-    const [columnVisibility, setColumnVisibility] = useState({
-        id: false,
-        updatedAt: false,
-        ...columnsToHideByDefault,
-    });
-    const [filters, setFilters] = useState([]);
-    const mergedFilters = useMemo(() => {
-        return filters.reduce((acc, current) => {
-            return merge(acc, current);
-        }, {});
-    }, [filters]);
-    // Update table state with new values
-    const updateTableState = (updates) => {
-        _setTableState((prev) => ({ ...prev, ...updates }));
-    };
-    const { sorting, rowSelection, pagination, } = tableState;
-    const query = useQuery({
-        queryKey: [id, pagination, sorting, searchQuery],
-        queryFn: () => fetchFn(pagination, sorting, searchQuery, mergedFilters),
-        placeholderData: keepPreviousData, // Keep previous data while loading new data
-        retry: 0,
-        refetchOnWindowFocus: false,
-    });
-    useEffect(() => {
-        // TODO, store in localStorage
-    }, [columnVisibility]);
-    const columnHelper = useMemo(() => createColumnHelper(), []);
-    const metadataColumns = useMemo(() => {
-        const data = query.data?.data;
-        if (!data?.length)
-            return [];
-        const rowHasMetadata = (row) => row != null &&
-            typeof row === 'object' &&
-            'metadata' in row &&
-            Array.isArray((row).metadata);
-        const rowsWithMeta = data.filter(rowHasMetadata);
-        if (rowsWithMeta.length === 0)
-            return [];
-        const keys = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));
-        return keys.map(key => columnHelper.accessor((row) => {
-            if (rowHasMetadata(row)) {
-                return row?.metadata?.find(m => m.key === key)?.value ?? '';
-            }
-            return '';
-        }, {
-            id: key,
-            header: key, // tooltip header
-            enableSorting: false,
-            cell: (info) => {
-                const value = info.getValue();
-                // Handle null/undefined values
-                if (value === null || value === undefined)
-                    return "";
-                // For primitive types, return the string representation
-                return String(value);
-            },
-        }));
-    }, [query.data?.data]);
-    /**
-     * ID,createdAt and updatedAt will be added by default for all tables
-     * If selection is allowed, checkbox will be added
-     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)
-     * If there are actions for the table, they will be placed fixed at the right side of table.
-     */
-    const cols = [
-        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),
-        ...TABLE_ID_COLUMN,
-        ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),
-        ...(metadataColumns.length ? metadataColumns : []),
-        ...TABLE_DEFAULT_DATE_COLUMNS,
-        // Actions column
-        ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),
-    ];
-    // Type-guard for updater
-    function isUpdaterFunction(updater) {
-        return typeof updater === "function";
-    }
-    // Utility function to resolve updater
-    function resolveUpdater(updater, currentValue) {
-        if (isUpdaterFunction(updater)) {
-            return updater(currentValue);
-        }
-        return updater;
-    }
-    // Use react-table's hook to create the table instance
-    const tanTable = useReactTable({
-        data: query.data?.data ?? [],
-        columns: cols,
-        getCoreRowModel: getCoreRowModel(),
-        rowCount: query.data?.total,
-        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables
-        onPaginationChange: (updater) => {
-            updateTableState({ pagination: resolveUpdater(updater, pagination) });
-        },
-        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables
-        onSortingChange: (updater) => {
-            updateTableState({ sorting: [...resolveUpdater(updater, sorting)], rowSelection: {} }); // Reset selection when sorting.
-        },
-        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables
-        onColumnVisibilityChange: (updater) => {
-            setColumnVisibility(resolveUpdater(updater, columnVisibility));
-        },
-        onRowSelectionChange: (updater) => {
-            updateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });
-        },
-        onColumnOrderChange: (updater) => {
-            setColumnOrder(resolveUpdater(updater, columnOrder));
-        },
-        state: {
-            sorting: sorting,
-            columnVisibility: columnVisibility,
-            pagination: pagination,
-            rowSelection: rowSelection,
-            columnOrder: columnOrder
-        },
-        meta: {
-            refetch: query.refetch,
-        },
-    });
-    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.
-    // This populates the columnIds in the columnOrder state
-    // TODO, add localStorage access layer for this. 
-    useEffect(() => {
-        setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);
-    }, []);
-    return { tableState, updateTableState, query, setSearchQuery, searchQuery, tanTable, mergedFilters, filters, setFilters, filterConfig };
-}
-export const DataTableContext = createContext(null);
-export const useDataTable = () => {
-    const ctx = useContext(DataTableContext);
-    if (!ctx) {
-        throw Error("DataTable should be used within DataTableProvider.");
-    }
-    return ctx;
-};
-export function DataTableProvider({ children, ...props }) {
-    return (_jsx(DataTableContext.Provider, { value: props, children: children }));
-}
-export function DataTable({ tableActions, className, ...props
-// filterableFields,
- }) {
-    // State for managing table data and filters
-    const { query, tanTable } = useDataTable();
-    return (_jsx(_Fragment, { children: _jsxs("section", { ...props, className: cn("flex flex-col bg-card", className), children: [_jsx(Actions, { tableActions: tableActions }), _jsxs("div", { className: "w-full overflow-auto border-x grow min-h-table relative", tabIndex: 0, children: [query.isLoading && (_jsx(TableOverlay, { className: "cursor-wait", children: _jsx(Loader, {}) })), !query.isLoading && tanTable.getRowModel().rows.length === 0 && (
-                        // Empty table
-                        _jsx(TableOverlay, { className: "cursor-not-allowed", children: !query.isFetching &&
-                                (query.isError ? (_jsxs("span", { className: "flex gap-3 justify-center items-center", children: [_jsx(Info, {}), _jsx("span", { children: "You don't have the required permissions. Please contact your admin." })] })) : !query.data?.data ? (_jsx(_Fragment, { children: "No results found." })) : (_jsx(_Fragment, { children: "Unknown error. Please contact customer support." }))) })), !query.isLoading && tanTable.getRowModel().rows.length !== 0 &&
-                            _jsx(TableContent, { className: "size-full" })] }), _jsxs("div", { className: "flex w-full justify-between border gap-icon p-icon overflow-x-auto", children: [_jsxs("div", { className: "flex gap-icon", children: [_jsx(ColumnPicker, {}), _jsx(PageSize, {})] }), _jsx(Paginator, {})] })] }) }));
-}
-/** Table overlay to be shown for loaders or other messages */
-function TableOverlay({ children, className, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: cn(className, "absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center"), children: children }), _jsx("span", { className: "relative h-full w-0 block" })] }));
-}
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-function ColumnPicker() {
-    const { tanTable } = useDataTable();
-    const [activeId, setActiveId] = useState(null);
-    const resourceFormatter = useResourceFormatter();
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }));
-    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: (event) => {
-            const { active } = event;
-            setActiveId(active.id.toString());
-        }, onDragEnd: (event) => {
-            const { active, over } = event;
-            if (over && active.id !== over.id) {
-                const columnOrder = tanTable.getState().columnOrder;
-                const oldIndex = columnOrder.indexOf(active.id.toString());
-                const newIndex = columnOrder.indexOf(over.id.toString());
-                tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);
-            }
-            setActiveId(null);
-        }, children: _jsxs(SortableContext, { items: tanTable.getState().columnOrder, strategy: verticalListSortingStrategy, children: [_jsxs(EasyMenu, { label: _jsxs(_Fragment, { children: [_jsx(Columns3, {}), "Columns"] }), selectionMode: "multiple", items: tanTable.getAllFlatColumns(), selectedKeys: tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id), children: [_jsx(MenuItem, { onAction: () => tanTable.toggleAllColumnsVisible(), className: 'italic', children: "(select all)" }), tanTable.getState().columnOrder.map(colId => {
-                            const col = tanTable.getAllFlatColumns().find(c => c.id === colId);
-                            if (!col)
-                                return null;
-                            return _jsx(SortableItem, { column: col }, col.id);
-                        })] }), _jsx(DragOverlay, { children: activeId ? _jsx("div", { className: "dropdown-item opacity-70 border-2 border-primary", children: resourceFormatter(activeId) }) : null })] }) }));
-    function SortableItem({ column }) {
-        const { attributes, listeners, setNodeRef, transform, transition, } = useSortable({ id: column.id });
-        const style = {
-            transform: CSS.Transform.toString(transform),
-            transition,
-            zIndex: '999'
-        };
-        return _jsxs(MenuItem, { ref: setNodeRef, style: style, ...attributes, id: column.id, onAction: () => column.toggleVisibility(), isDisabled: !column.getCanHide(), className: "flex items-center", children: [_jsx(GripVertical, { ...listeners, className: "size-icon cursor-grab" }), resourceFormatter(column.id), column.getIsSorted() && _jsx(SortIcon, { className: "size-icon", direction: column.getIsSorted() })] });
-    }
-}
-import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, } from "lucide-react";
-function Paginator() {
-    const { tanTable, query } = useDataTable();
-    const rowCount = query.data?.total ?? 0;
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "whitespace-nowrap caption text-muted", children: `${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min((tanTable.getState().pagination.pageIndex + 1) *
-                    tanTable.getState().pagination.pageSize, rowCount)} of ${rowCount?.toLocaleString()}` }), _jsx(Button, { onPress: () => tanTable.firstPage(), isDisabled: !tanTable.getCanPreviousPage(), variant: "neutral", size: "icon", children: _jsx(ChevronFirst, {}) }), _jsx(Button, { onPress: () => tanTable.previousPage(), isDisabled: !tanTable.getCanPreviousPage(), variant: "neutral", size: "icon", children: _jsx(ChevronLeft, {}) }), _jsx(Button, { onPress: () => tanTable.nextPage(), isDisabled: !tanTable.getCanNextPage(), variant: "neutral", size: "icon", children: _jsx(ChevronRight, {}) }), _jsx(Button, { onClick: () => tanTable.lastPage(), isDisabled: !tanTable.getCanNextPage(), variant: "neutral", size: "icon", children: _jsx(ChevronLast, {}) })] }));
-}
-function PageSize() {
-    const { tanTable } = useDataTable();
-    const PAGE_SIZES = [10, 20, 30, 40, 50];
-    return (_jsx(EasyMenu, { label: tanTable.getState().pagination.pageSize.toString(), selectionMode: "single", selectedKeys: [tanTable.getState().pagination.pageSize.toString()], items: PAGE_SIZES.map(s => ({ id: s.toString(), value: s })), children: (items) => _jsx(MenuItem, { onAction: () => tanTable.setPageSize(items.value), children: items.value }) }));
-}
-import { RotateCw } from "lucide-react";
-function Actions({ tableActions }) {
-    const { query, tanTable, searchQuery, setSearchQuery } = useDataTable();
-    return (_jsxs("section", { className: "flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto", children: [_jsxs("div", { className: "flex gap-icon", children: [_jsx(Button, { isPending: query.isFetching, onClick: () => query.refetch(), variant: "neutral", size: "icon", children: _jsx(RotateCw, {}) }), tableActions
-                        .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)
-                        .map((ta, i) => {
-                        const Icon = ta.icon;
-                        return (_jsx(Button, { type: "button", isDisabled: query.isFetching, className: "animate-in fade-in slide-in-from-left-15 duration-300 transition-transform", onPress: (e) => { ta.onClick(e, tanTable); }, size: 'icon', children: _jsx(Icon, {}) }, `${i}-${ta.bulk}`));
-                    })] }), _jsxs("div", { className: "flex gap-icon", children: [_jsx(DataTableFilter, {}), (_jsx(SearchField, { value: searchQuery, onChange: setSearchQuery }))] })] }));
-}
-import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
-import { CSS } from "@dnd-kit/utilities";
-import { flexRender } from "@tanstack/react-table";
-import { DataTableFilter } from "lib/components/data-table/data-table-filter";
-import { TABLE_CHECK_BOX_COLUMN, TABLE_DEFAULT_DATE_COLUMNS, TABLE_ID_COLUMN } from "lib/components/data-table/table-commons";
-import { SearchField } from "lib/components/inputs/searchfield";
-import { Button } from "lib/components/ui/button";
-import { Loader } from "lib/components/ui/loader";
-import { EasyMenu, MenuItem } from "lib/components/ui/menu";
-import { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow, } from "lib/components/ui/table";
-import { cn } from "lib/utils/primitives";
-import { useResourceFormatter } from "lib/utils/resource-names";
-import { merge } from "lodash-es";
-function SortIcon({ direction, ...props }) {
-    if (direction === 'asc')
-        return _jsx(ArrowDownNarrowWide, { ...props });
-    else if (direction === 'desc')
-        return _jsx(ArrowDownWideNarrow, { ...props });
-    else
-        return _jsx(ArrowUpDown, { ...props });
-}
-// TODO, automate checking valid HTML
-function TableContent({ className }) {
-    const { tanTable } = useDataTable();
-    const tableCellStyle = (isSticky, className) => cn("animate-in fade-in slide-in-from-top-10", "px-icon py-2 text-left text-sm font-medium whitespace-nowrap", isSticky && "bg-card sticky right-0 z-50 text-center", className);
-    return (_jsxs(TableComponent, { className: cn(className), children: [_jsx(TableHeader, { className: "sticky top-0 z-10", children: tanTable.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: cn("h-input"), children: headerGroup.headers.map((header) => (_jsxs(TableHead, { className: tableCellStyle(false, "bg-card"), children: [!header.column.getCanSort() && !header.isPlaceholder
-                                && _jsx(_Fragment, { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getCanSort() && (_jsxs(Button, { variant: "ghost", className: "w-full !justify-start !px-1.5", onPress: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), _jsx(SortIcon, { direction: header.column.getIsSorted() })] }))] }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { className: "flex-1 overflow-y-auto relative", children: tanTable.getRowModel().rows.map((row) => (_jsx(TableRow, { className: cn("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"), "data-selected": row.getIsSelected(), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { className: tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }));
-}

package/dist/components/data-table/table-commons.js

@@ -1,137 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createColumnHelper } from "@tanstack/react-table";
-import { Checkbox } from "lib/components/inputs/checkbox";
-const cH = createColumnHelper();
-export const TABLE_CHECK_BOX_COLUMN = [
-    cH.accessor("checkbox", {
-        header: ({ table }) => (_jsx(Checkbox, { isIndeterminate: table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected(), isSelected: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected(), onChange: () => table.toggleAllPageRowsSelected(), "aria-label": "Select all" })),
-        cell: ({ row }) => (_jsx(Checkbox, { isSelected: row.getIsSelected(), onChange: () => row.toggleSelected(), "aria-label": "Select row" })),
-        enableSorting: false,
-        enableHiding: false,
-    }),
-];
-export const TABLE_ID_COLUMN = [
-    cH.accessor("id", {
-        header: () => "ID",
-    }),
-];
-export const TABLE_DEFAULT_DATE_COLUMNS = [
-    cH.accessor("createdAt", {
-        header: () => "Creation Date",
-        cell: ({ row }) => {
-            const date = row.getValue("createdAt");
-            return formatDate(date);
-        },
-        enableHiding: false,
-    }),
-    cH.accessor("updatedAt", {
-        header: () => "Last Updated",
-        cell: ({ row }) => {
-            const date = row.getValue("updatedAt");
-            return formatDate(date);
-        },
-        enableHiding: false,
-    }),
-];
-// TODO, i18n
-export function formatDate(date) {
-    if (!date)
-        return null;
-    const _date = new Date(date);
-    return new Intl.DateTimeFormat(undefined, {
-        dateStyle: "medium",
-        timeStyle: "short",
-    }).format(_date);
-}
-/**
- * Format multiple license parameters (expired, suspended, revoked) into a single status
- */
-export function getLicenseStatus(license) {
-    const licenseExpired = license.expiresAt && new Date(license.expiresAt) < new Date();
-    // Status Column
-    switch (true) {
-        case license.revoked && license.suspended && licenseExpired:
-            return "Revoked, Suspended, Expired";
-        case license.revoked && license.suspended:
-            return "Revoked, Suspended";
-        case license.revoked && licenseExpired:
-            return "Revoked, Expired";
-        case license.suspended && licenseExpired:
-            return "Suspended, Expired";
-        case license.suspended:
-            return "Suspended";
-        case license.revoked:
-            return "Revoked";
-        case licenseExpired:
-            return "Expired";
-        default:
-            return "Active";
-    }
-}
-export function getValidityDisplay(validity) {
-    if (validity === 0 || !validity) {
-        return "Lifetime";
-    }
-    else {
-        return secondsToDuration(validity);
-    }
-}
-export function secondsToDuration(seconds) {
-    //@ts-ignore
-    const duration = intervalToDuration({
-        start: 0,
-        end: seconds * 1000,
-    });
-    const parts = [
-        duration.years && `${duration.years}y`,
-        duration.months && `${duration.months}m`,
-        duration.days && `${duration.days}d`,
-        duration.hours && `${duration.hours}h`,
-    ];
-    // Filter out undefined values and join
-    return parts.filter(Boolean).join(" ").trim();
-}
-export function getValueFromData(data, accessor) {
-    const accessors = accessor.toString().split(".");
-    let value = data;
-    for (const acc of accessors) {
-        value = value?.[acc];
-    }
-    return value;
-}
-export const ALL_OS = {
-    windows: "Windows",
-    macos: "macOS",
-    linux: "Linux",
-    ios: "iOS",
-    android: "Android",
-};
-export function createTableFetchFn(ctxclient, path) {
-    return async (pagination, sorting, searching, filters) => {
-        const query = {
-            ...filters,
-            page: pagination.pageIndex + 1,
-            limit: pagination.pageSize,
-            sort: generateSortParam(sorting[0]),
-            search: searching,
-        };
-        // const pathParams = merge(_baseQueryObject, params);
-        return ctxclient.GET(path, { query }).then((value) => {
-            const rowCount = Number.parseInt(value.response.headers.get("Pagination-Count") || "0");
-            return { total: rowCount, data: value.data };
-        });
-    };
-}
-function generateSortParam(sort) {
-    if (sort) {
-        if (sort.desc) {
-            return `-${sort.id}`;
-        }
-        else {
-            return `+${sort.id}`;
-        }
-    }
-    else {
-        return "-createdAt";
-    }
-}

package/dist/components/inputs/checkbox.js

@@ -1,25 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox as AriaCheckbox, CheckboxGroup as AriaCheckboxGroup, composeRenderProps } from "react-aria-components";
-import { FormField, labelVariants } from "lib/components/inputs/field";
-import { useFieldContext } from "lib/utils/form-context";
-import { cn } from "lib/utils/primitives";
-import { Check, Minus } from "lucide-react";
-export const CheckboxGroup = AriaCheckboxGroup;
-export function Checkbox({ className, label, description, errorMessage, ...props }) {
-    return (_jsx("div", { className: "group form-field", children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsx(AriaCheckbox, { className: composeRenderProps(className, (className) => cn("group/checkbox cursor-pointer focus-ring flex items-center gap-x-2", 
-                /* Disabled */
-                "disabled-muted", labelVariants, className)), ...props, children: composeRenderProps(_jsx(_Fragment, {}), (_, renderProps) => (_jsx(_Fragment, { children: _jsx("div", { className: cn("flex size-input shrink-0 items-center bg-card justify-center border border-input text-current ring-offset-background", 
-                        /* Selected */
-                        "group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground", 
-                        /* Disabled */
-                        "group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50", 
-                        /* Invalid */
-                        "group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground", 
-                        /* Resets */
-                        "focus:outline-none focus-visible:outline-none"), children: renderProps.isIndeterminate ? (_jsx(Minus, { className: "size-icon" })) : renderProps.isSelected ? (_jsx(Check, { className: "size-icon" })) : null }) }))) }) }) }));
-}
-export function TfCheckbox({ ...props }) {
-    const field = useFieldContext();
-    return (_jsx(Checkbox, { isSelected: field.state.value, isDisabled: field.form.state.isSubmitting || props.isDisabled, onChange: () => field.handleChange(!field.state.value), onBlur: field.handleBlur, ...props }));
-}
-;

package/dist/components/inputs/date-picker.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CalendarIcon } from "lucide-react";
-import { DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, Dialog as AriaDialog, composeRenderProps, Popover } from "react-aria-components";
-import { getLocalTimeZone, parseAbsolute } from "@internationalized/date";
-import { DateInput } from "lib/components/inputs/datefield";
-import { FieldGroup, FormField } from "lib/components/inputs/field";
-import { Button } from "lib/components/ui/button";
-import { Calendar, RangeCalendar } from "lib/components/ui/calendar";
-import { useFieldContext } from "lib/utils/form-context";
-import { getFieldErrorMessage } from "lib/utils/form-hook";
-import { cn } from "lib/utils/primitives";
-const DatePickerContent = ({ className, popoverClassName, ...props }) => (_jsx(Popover, { className: composeRenderProps(popoverClassName, (className) => cn("w-auto p-3", className)), children: _jsx(AriaDialog, { className: cn("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0", className), ...props }) }));
-export function DatePicker({ label, description, errorMessage, className, ...props }) {
-    return (_jsxs(AriaDatePicker, { className: composeRenderProps(className, (className) => cn("group flex flex-col gap-2", className)), ...props, children: [_jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsxs(FieldGroup, { "aria-label": label, children: [_jsx(DateInput, { className: "flex-1", variant: "ghost" }), _jsx(Button, { variant: "ghost", size: "icon", className: '-me-2 ms-2', children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), _jsx(DatePickerContent, { children: _jsx(Calendar, {}) })] }));
-}
-export function TfDatePicker({ ...props }) {
-    const field = useFieldContext();
-    return (_jsx(DatePicker, { hideTimeZone: true, value: field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null, onChange: (v) => v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null), onBlur: field.handleBlur, isInvalid: !!getFieldErrorMessage(field), errorMessage: getFieldErrorMessage(field), ...props }));
-}
-export function DateRangePicker({ label, description, errorMessage, className, ...props }) {
-    return (_jsxs(AriaDateRangePicker, { className: composeRenderProps(className, (className) => cn("group flex flex-col gap-2", className)), ...props, children: [_jsx(FormField, { label: label, errorMessage: errorMessage, description: description, children: _jsxs(FieldGroup, { children: [_jsx(DateInput, { variant: "ghost", slot: "start" }), _jsx("span", { "aria-hidden": true, className: "px-2 text-sm text-muted-foreground", children: "-" }), _jsx(DateInput, { className: "flex-1", variant: "ghost", slot: "end" }), _jsx(Button, { variant: "ghost", size: "icon", className: "mr-1 data-[focus-visible]:ring-offset-0", children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), _jsx(DatePickerContent, { children: _jsx(RangeCalendar, {}) })] }));
-}

package/dist/components/inputs/datefield.js

@@ -1,25 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DateField as AriaDateField, DateInput as AriaDateInput, DateSegment as AriaDateSegment, TimeField as AriaTimeField, composeRenderProps } from "react-aria-components";
-import { cn } from "lib/utils/primitives";
-import { fieldGroupVariants, FormField } from "./field";
-export function DateSegment({ className, ...props }) {
-    return (_jsx(AriaDateSegment, { className: composeRenderProps(className, (className) => cn("inline caret-transparent outline-0", 
-        /* Placeholder */
-        "data-[placeholder]:text-muted-foreground", 
-        /* Disabled */
-        "disabled-muted", 
-        /* Focused */
-        "data-[focused]:bg-accent data-[focused]:text-accent-foreground", 
-        /* Invalid */
-        "data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive", className)), ...props }));
-}
-export function DateInput({ className, variant, ...props }) {
-    return (_jsx(AriaDateInput, { className: composeRenderProps(className, (className) => cn(fieldGroupVariants({ variant }), "text-sm", className)), ...props, children: (segment) => _jsx(DateSegment, { segment: segment }) }));
-}
-export function DateField({ label, description, className, errorMessage, ...props }) {
-    return (_jsx(AriaDateField, { className: composeRenderProps(className, (className) => cn("group form-field", className)), ...props, children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsx(DateInput, {}) }) }));
-}
-export function TimeField({ label, description, errorMessage, className, ...props }) {
-    return (_jsx(AriaTimeField, { className: composeRenderProps(className, (className) => cn("group form-field", className)), ...props, children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsx(DateInput, {}) }) }));
-}

package/dist/components/inputs/field.js

@@ -1,48 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { Group as AriaGroup, Label as AriaLabel, Text as AriaText, composeRenderProps } from "react-aria-components";
-import { cn } from "lib/utils/primitives";
-import { CircleX, Info } from "lucide-react";
-export const labelVariants = cva([
-    "select-none text-sm font-medium leading-none",
-    /* Disabled */
-    "disabled-muted",
-    /* Invalid */
-    "group-data-[invalid]:text-destructive",
-]);
-export function FieldLabel({ className, ...props }) {
-    return (_jsx(AriaLabel, { className: cn(labelVariants(), className), ...props }));
-}
-export function FieldDescription({ className, children, ...props }) {
-    return (_jsxs(AriaText, { className: cn("text-sm text-muted leading-tight", className), ...props, slot: "description", children: [children, _jsx(Info, { className: "inline size-2 align-text-top ms-0.5" })] }));
-}
-// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but
-// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.
-export function FieldError({ className, children, ...props }) {
-    return (_jsxs("div", { className: cn("text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in", className), ...props, children: [children, _jsx(CircleX, { className: "inline size-2 align-text-top ms-0.5" })] }));
-}
-export const fieldGroupVariants = cva("", {
-    variants: {
-        variant: {
-            default: [
-                // TODO standardize the padding here
-                "relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-2 py-2 text-sm ring-offset-background",
-                /* Focus Within */
-                "focus-ring",
-                /* Disabled */
-                "disabled-muted",
-            ],
-            ghost: "",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
-});
-export function FieldGroup({ className, variant, ...props }) {
-    return (_jsx(AriaGroup, { className: composeRenderProps(className, (className) => cn(fieldGroupVariants({ variant }), className)), ...props }));
-}
-export function FormField({ label, description, errorMessage, children }) {
-    return _jsxs(_Fragment, { children: [label && _jsx(FieldLabel, { children: label }), children, description && (_jsx(FieldDescription, { children: description })), errorMessage && _jsx(FieldError, { children: errorMessage })] });
-}

package/dist/components/inputs/id-search.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useQuery } from "@tanstack/react-query";
-import { SearchField } from "lib/components/inputs/searchfield";
-import { Button } from "lib/components/ui/button";
-import { Loader } from "lib/components/ui/loader";
-import { Menu, MenuItem } from "lib/components/ui/menu";
-import { Popover, PopoverTrigger } from "lib/components/ui/popover";
-import { useFieldContext } from "lib/utils/form-context";
-import { useId, useState } from "react";
-import { Autocomplete } from 'react-aria-components';
-export function IdSearchInput({ value, disabled = false, searchFn, multiple, onChange, onBlur, accessor = 'id', idLookup }) {
-    const id = useId();
-    const [search, _setSearch] = useState('');
-    const { data, isError, isFetching, error } = useQuery({
-        queryKey: [id, search],
-        queryFn: () => searchFn(search)
-    });
-    const namesQuery = useQuery({
-        queryKey: [id, value],
-        queryFn: () => idLookup(Array.from(value.keys()).map(id => id.toString())),
-        enabled: idLookup && value.size > 0
-    });
-    const renderButtonLabel = () => {
-        return namesQuery.data?.join(',');
-    };
-    return _jsx(_Fragment, { children: _jsxs(PopoverTrigger, { onOpenChange: (o) => {
-                if (!o) {
-                    // searchInputRef.current?.focus();
-                    onBlur?.(value);
-                }
-            }, children: [_jsx(Button, { className: 'min-w-3xs', isDisabled: disabled, children: renderButtonLabel() }), _jsx(Popover, { className: 'p-2', children: _jsxs(Autocomplete, { inputValue: search, onInputChange: _setSearch, children: [_jsx(SearchField, { className: 'mb-icon', autoFocus: true }), isFetching && _jsx(Loader, { className: "p-input" }), !isFetching && !isError && _jsx(Menu, { selectedKeys: value, selectionMode: multiple ? "multiple" : 'single', onSelectionChange: (s) => {
-                                    if (typeof (s) === 'string')
-                                        return;
-                                    onChange(s);
-                                }, className: 'text-sm', items: data, renderEmptyState: () => 'No results found.', children: (item) => (_jsx(MenuItem, { id: item[accessor], children: item.name }, item['id'])) }), isError && _jsx("div", { className: "text-destructive p-icon", children: error.message })] }) })] }) });
-}
-export function TfIdSearchInput({ disabled, ...props }) {
-    const field = useFieldContext();
-    return (_jsx(IdSearchInput, { ...props, disabled: disabled || field.form.state.isSubmitting, value: field.state.value, onBlur: _ => field.handleBlur(), onChange: (e) => field.handleChange(e) }));
-}

package/dist/components/inputs/input-otp.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { cn } from "lib/utils/primitives";
-import { Minus } from "lucide-react";
-import * as React from "react";
-export function InputOTP({ className, containerClassName, ...props }) {
-    return (_jsx(OTPInput, { containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props }));
-}
-export function InputOTPGroup({ className, ...props }) {
-    return _jsx("div", { className: cn("flex items-center", className), ...props });
-}
-export function InputOTPSlot({ index, className, ...props }) {
-    const inputOTPContext = React.use(OTPInputContext);
-    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-    return (_jsxs("div", { className: cn("relative flex h-input w-9 items-center justify-center border-2 border-input body transition-all", isActive ? "z-10  border-2 border-primary" : "", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-icon w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
-}
-export function InputOTPSeparator({ ...props }) {
-    return (_jsx("div", { role: "separator", ...props, children: _jsx(Minus, {}) }));
-}

package/dist/components/inputs/multi-select.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from "lib/components/inputs/field";
-import { EasyMenu, MenuItem } from "lib/components/ui/menu";
-import { useFieldContext } from "lib/utils/form-context";
-import { getFieldErrorMessage } from "lib/utils/form-hook";
-export function MultiSelect({ items, value, onChange: setValue, label, errorMessage, description, ...props }) {
-    return (_jsx("div", { className: "group form-field", children: _jsx(FormField, { label, description, errorMessage, children: _jsx(EasyMenu, { selectionMode: "multiple", selectedKeys: value, onSelectionChange: (v) => {
-                    if (typeof (v) === 'string')
-                        return;
-                    setValue(v);
-                }, items: items, label: value.size, ...props, children: (item) => _jsx(MenuItem, { id: item.id, isDisabled: item?.disabled, children: item.label }, item.id) }) }) }));
-}
-;
-export function TfMultiSelect({ ...props }) {
-    const field = useFieldContext();
-    return (_jsx(MultiSelect, { value: field.state.value, onChange: field.setValue, onClose: field.handleBlur, errorMessage: getFieldErrorMessage(field), ...props }));
-}
-;

package/dist/components/inputs/numberfield.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input as AriaInput, NumberField as AriaNumberField, composeRenderProps } from "react-aria-components";
-import { Button } from "lib/components/ui/button";
-import { useFieldContext } from "lib/utils/form-context";
-import { getFieldErrorMessage } from "lib/utils/form-hook";
-import { cn } from "lib/utils/primitives";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { FieldGroup, FormField } from "./field";
-const ANumberField = AriaNumberField;
-function NumberFieldInput({ className, ...props }) {
-    return (_jsx(AriaInput, { className: composeRenderProps(className, (className) => cn("w-fit min-w-0 flex-1 border-r border-transparent bg-card pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden", className)), ...props }));
-}
-function NumberFieldSteppers({ className, ...props }) {
-    return (_jsxs("div", { className: cn("absolute right-0 flex h-full flex-col border-l", className), ...props, children: [_jsx(NumberFieldStepper, { slot: "increment", children: _jsx(ChevronUp, { "aria-hidden": true, className: "size-icon" }) }), _jsx("div", { className: "border-b" }), _jsx(NumberFieldStepper, { slot: "decrement", children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-icon" }) })] }));
-}
-function NumberFieldStepper({ className, ...props }) {
-    return (_jsx(Button, { className: composeRenderProps(className, (className) => cn("w-auto grow h-3 px-0.5 text-muted-foreground", className)), variant: "ghost", size: "none", ...props }));
-}
-export function NumberField({ label, description, errorMessage, className, ...props }) {
-    return (_jsx(ANumberField, { className: composeRenderProps(className, (className) => cn("group form-field", className)), ...props, children: _jsx(FormField, { label: label, description: description, errorMessage: errorMessage, children: _jsxs(FieldGroup, { children: [_jsx(NumberFieldInput, {}), _jsx(NumberFieldSteppers, {})] }) }) }));
-}
-export function TfNumberField({ isDisabled, ...props }) {
-    const field = useFieldContext();
-    return (_jsx(NumberField, { isInvalid: !!getFieldErrorMessage(field), isDisabled: isDisabled || field.form.state.isSubmitting, value: field.state.value, id: field.name, onChange: field.handleChange, onBlur: field.handleBlur, errorMessage: getFieldErrorMessage(field), ...props }));
-}