sharpcodes-heroui 1.0.1 → 1.0.2

package/dist/components/fields/autocomplete.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import { Autocomplete as HeroUIAutoComplete, EmptyState, Label, ListBox, SearchField, Tag, TagGroup, useFilter, } from "@heroui/react";
+// prettier-ignore
+export const AutoComplete = ({ emptyMessage, items, idKey, nameKey, properties, label, onChange, value }) => {
+    const { contains } = useFilter({ sensitivity: "base" });
+    const isSingle = properties?.base?.autoComplete?.selectionMode === "single";
+    // @ts-expect-error values
+    return _jsxs(HeroUIAutoComplete, { selectionMode: "multiple", variant: "secondary", value: isSingle ? value :
+            !value ? undefined : _.isArray(value) ? value : [value], ...properties?.base?.autoComplete, onChange: (keys) => {
+            if (isSingle)
+                // @ts-expect-error keys
+                return onChange(keys);
+            if (!_.isArray(keys))
+                return onChange([]);
+            // @ts-expect-error keys
+            return onChange(keys);
+        }, children: [_jsx(Label, { ...properties?.label, children: label }), _jsxs(HeroUIAutoComplete.Trigger, { ...properties?.base?.trigger, children: [_jsx(HeroUIAutoComplete.Value, { ...properties?.base?.value, children: ({ defaultChildren, isPlaceholder, state }) => {
+                            if (isPlaceholder || !state.selectedItems.length)
+                                return defaultChildren;
+                            const selectedItemKeys = state.selectedItems.map((item) => item.key);
+                            return _jsx(TagGroup, { size: "sm", "aria-label": "autocomplete tags", ...properties?.tag?.group, onRemove: (keys) => {
+                                    const keysToRemove = _.toArray(keys);
+                                    const keysCurrent = _.isArray(value) ? value : [value];
+                                    return onChange(keysCurrent.filter((key) => !keysToRemove.includes(key)));
+                                }, children: _jsx(TagGroup.List, { ...properties?.tag?.list, children: selectedItemKeys.map((selectedItemKey) => {
+                                        const item = items.find((s) => _.get(s, idKey) == selectedItemKey);
+                                        if (!item)
+                                            return null;
+                                        const current = {
+                                            id: _.get(item, idKey),
+                                            name: _.get(item, nameKey)
+                                        };
+                                        return _jsx(Tag, { id: current.id, ...properties?.tag?.item, children: current.name }, current.id);
+                                    }) }) });
+                        } }), _jsx(HeroUIAutoComplete.Indicator, {})] }), _jsx(HeroUIAutoComplete.Popover, { isNonModal: true, placement: "bottom left", ...properties?.popover?.popover, children: _jsxs(HeroUIAutoComplete.Filter, { filter: contains, ...properties?.popover?.filter, children: [_jsx(SearchField, { autoFocus: true, fullWidth: true, "aria-label": "autocomplete search", name: "search", variant: "secondary", ...properties?.search?.field, children: _jsxs(SearchField.Group, { ...properties?.search?.group, children: [_jsx(SearchField.SearchIcon, { ...properties?.search?.icon }), _jsx(SearchField.Input, { placeholder: "Search...", ...properties?.search?.input }), _jsx(SearchField.ClearButton, { ...properties?.search?.clear })] }) }), _jsx(ListBox, { renderEmptyState: () => _jsx(EmptyState, { ...properties?.list?.empty, children: _jsx("span", { children: emptyMessage || "No results found" }) }), children: items.map((item) => {
+                                const current = {
+                                    id: _.get(item, idKey),
+                                    name: _.get(item, nameKey)
+                                };
+                                return _jsxs(ListBox.Item, { id: current.id, textValue: current.name, "aria-label": current.name, ...properties?.list?.item, children: [_jsx("span", { children: current.name }), _jsx(ListBox.ItemIndicator, { ...properties?.list?.check })] }, current.id);
+                            }) })] }) })] });
+};

package/dist/components/fields/breadcrumbs.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumbs } from "@heroui/react";
+// prettier-ignore
+export const BreadCrumbs = ({ data }) => {
+    return _jsx(Breadcrumbs, { children: !data ? null :
+            Object.keys(data).map((key, index) => {
+                const item = data[key];
+                if (!item)
+                    return;
+                return _jsx(Breadcrumbs.Item, { ...item, children: _jsx("span", { children: key }) }, index);
+            }) });
+};

package/dist/components/fields/button.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, Spinner, Tooltip, } from "@heroui/react";
+import { Ripple } from "m3-ripple";
+// prettier-ignore
+export const RippledButton = ({ onPress, isLoading, type, tooltipContent, children, properties }) => {
+    return _jsxs(Tooltip, { delay: 0, isDisabled: !tooltipContent, ...properties?.tooltip, children: [_jsx(Tooltip.Content, { ...properties?.tooltipContent, children: tooltipContent }), _jsxs(Button, { type: type, variant: "secondary", isPending: isLoading, ...properties?.button, className: cn("font-semibold text-xs active:scale-95 shadow transition-all", properties?.button?.className), onPress: onPress, children: [_jsx(Ripple, { ...properties?.ripple }), isLoading ?
+                        _jsx(Spinner, { size: "sm", ...properties?.spinner, className: cn("text-accent-foreground", properties?.spinner?.className) }) : null, isLoading && properties?.button?.isIconOnly ? null : children] })] });
+};

package/dist/components/fields/date-range.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import { DateField, DateRangePicker, Label, RangeCalendar } from "@heroui/react";
+import { parseAbsoluteToLocal } from "@internationalized/date";
+import { toMoment } from "../../libs/utils/date";
+// prettier-ignore
+export const DateRange = ({ onChange, value, properties, label }) => {
+    const parsed = {
+        start: _.isDate(value?.from) ? parseAbsoluteToLocal(value.from.toISOString()) : undefined,
+        end: _.isDate(value?.to) ? parseAbsoluteToLocal(value.to.toISOString()) : undefined,
+    };
+    return _jsxs(DateRangePicker, { hideTimeZone: true, "aria-label": "date range picker", granularity: "day", 
+        // defaultValue={parsed.start && parsed.end ? parsed : undefined}
+        value: parsed, ...properties?.picker, startName: "from", endName: "to", onChange: (value) => {
+            if (!value)
+                return onChange?.(null);
+            const { start, end } = value;
+            const from = toMoment().set({
+                month: start.month - 1,
+                date: start.day,
+                year: start.year,
+                hour: start.hour,
+                minute: start.minute,
+                second: start.second,
+                millisecond: start.millisecond
+            });
+            const to = toMoment().set({
+                month: end.month - 1,
+                date: end.day,
+                year: end.year,
+                hour: end.hour,
+                minute: end.minute,
+                second: end.second,
+                millisecond: end.millisecond
+            });
+            return onChange?.({
+                from: from.toDate(),
+                to: to.toDate()
+            });
+        }, children: [_jsx(Label, { ...properties?.label, children: label }), _jsxs(DateField.Group, { variant: "secondary", ...properties?.input?.group, children: [_jsx(DateField.Input, { ...properties?.input?.input, slot: "start", children: (segment) => _jsx(DateField.Segment, { segment: segment, ...properties?.input?.segment }) }), _jsx(DateRangePicker.RangeSeparator, { ...properties?.input?.separator }), _jsx(DateField.Input, { ...properties?.input?.input, slot: "end", children: (segment) => _jsx(DateField.Segment, { segment: segment, ...properties?.input?.segment }) }), _jsx(DateField.Suffix, { ...properties?.input?.trigger?.suffix, children: _jsx(DateRangePicker.Trigger, { ...properties?.input?.trigger?.trigger, children: _jsx(DateRangePicker.TriggerIndicator, { ...properties?.input?.trigger?.indicator }) }) })] }), _jsx(DateRangePicker.Popover, { isNonModal: true, placement: "bottom end", ...properties?.calendar?.popover, children: _jsxs(RangeCalendar, { "aria-label": "calendar period", ...properties?.calendar?.calendar, children: [_jsxs(RangeCalendar.Header, { ...properties?.calendar?.header, children: [_jsxs(RangeCalendar.YearPickerTrigger, { ...properties?.calendar?.yearPicker?.tigger, children: [_jsx(RangeCalendar.YearPickerTriggerHeading, { ...properties?.calendar?.yearPicker?.heading }), _jsx(RangeCalendar.YearPickerTriggerIndicator, { ...properties?.calendar?.yearPicker?.indicator })] }), _jsx(RangeCalendar.NavButton, { slot: "previous", ...properties?.calendar?.previous }), _jsx(RangeCalendar.NavButton, { slot: "next", ...properties?.calendar?.next })] }), _jsxs(RangeCalendar.Grid, { children: [_jsx(RangeCalendar.GridHeader, { children: (day) => _jsx(RangeCalendar.HeaderCell, { children: day }) }), _jsx(RangeCalendar.GridBody, { children: (date) => _jsx(RangeCalendar.Cell, { date: date }) })] }), _jsx(RangeCalendar.YearPickerGrid, { children: _jsx(RangeCalendar.YearPickerGridBody, { children: ({ year }) => _jsx(RangeCalendar.YearPickerCell, { year: year }) }) })] }) })] });
+};

package/dist/components/fields/index.js

@@ -0,0 +1,10 @@
+export * from "./autocomplete";
+export * from "./breadcrumbs";
+export * from "./button";
+export * from "./date-range";
+export * from "./modal";
+export * from "./number";
+export * from "./scroll";
+export * from "./search";
+export * from "./table";
+export * from "./tabs";

package/dist/components/fields/modal.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Description, Modal as HeroUIModal, Separator, } from "@heroui/react";
+import { createElement } from "react";
+// prettier-ignore
+export const Modal = ({ isOpen, icon, footer, onOpenChange, properties, showCloseButton, description, heading, children }) => {
+    return _jsx(HeroUIModal, { isOpen: isOpen, onOpenChange: onOpenChange, ...properties?.modal, children: _jsx(HeroUIModal.Backdrop, { isDismissable: false, ...properties?.backdrop, children: _jsx(HeroUIModal.Container, { size: "lg", ...properties?.container, children: _jsxs(HeroUIModal.Dialog, { ...properties?.dialog, children: [!showCloseButton ? null :
+                            _jsx(HeroUIModal.CloseTrigger, { ...properties?.close, className: cn("text-danger bg-danger-soft", properties?.close?.className) }), _jsxs(HeroUIModal.Header, { ...properties?.header, children: [!icon ? null :
+                                    _jsx(HeroUIModal.Icon, { ...properties?.icon, className: cn("bg-default text-foreground", properties?.icon?.className), children: createElement(icon) }), !heading ? null :
+                                    _jsx(HeroUIModal.Heading, { ...properties?.heading, children: heading }), !description ? null :
+                                    _jsx(Description, { ...properties?.description, className: cn("text-muted text-sm", properties?.description?.className), children: description })] }), _jsx(Separator, { ...properties?.separator, className: cn("mt-5 mb-3", properties?.separator?.className) }), _jsx(HeroUIModal.Body, { ...properties?.body, children: children }), !footer ? null :
+                            _jsx(HeroUIModal.Footer, { ...properties?.footer, children: footer })] }) }) }) });
+};

package/dist/components/fields/number.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Label, NumberField, } from "@heroui/react";
+// prettier-ignore
+export const NumericInput = ({ label, onChange, properties, value }) => {
+    return _jsxs(NumberField, { minValue: 0, fullWidth: true, ...properties?.field, className: cn("max-w-32", properties?.field?.className), value: value, onChange: onChange, children: [_jsx(Label, { ...properties?.label, children: label }), _jsxs(NumberField.Group, { ...properties?.group, children: [_jsx(NumberField.DecrementButton, { ...properties?.decrement }), _jsx(NumberField.Input, { ...properties?.input }), _jsx(NumberField.IncrementButton, { ...properties?.increment })] })] });
+};

package/dist/components/fields/scroll.js

@@ -0,0 +1,3 @@
+"use client";
+import { ScrollShadow } from "@heroui/react";
+export { ScrollShadow };

package/dist/components/fields/search.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Label, SearchField, } from "@heroui/react";
+import { useEffect, useState } from "react";
+import { useDebounce } from "react-haiku";
+// prettier-ignore
+export const SearchInputField = ({ label, delay, onDebounce, properties }) => {
+    const [text, setText] = useState("");
+    const debounced = useDebounce(text, delay || 300);
+    useEffect(() => {
+        onDebounce?.(debounced);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debounced]);
+    return _jsxs(SearchField, { variant: "secondary", "aria-label": "search for keyword", ...properties?.field, value: text, onChange: setText, children: [_jsx(Label, { ...properties?.label, children: label }), _jsxs(SearchField.Group, { ...properties?.group, children: [_jsx(SearchField.SearchIcon, { ...properties?.icon }), _jsx(SearchField.Input, { placeholder: "Search...", ...properties?.input, className: cn("w-70", properties?.input?.className) }), _jsx(SearchField.ClearButton, { ...properties?.clear })] })] });
+};

package/dist/components/fields/table/base.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import z from "zod";
+import { DataTablePagination } from "./pagination";
+import useLocalStorageState from "use-local-storage-state";
+import { Checkbox, cn, Table, TableLayout, Virtualizer } from "@heroui/react";
+import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { ChevronUp } from "lucide-react";
+import { useEffect, useState } from "react";
+// prettier-ignore
+export const DataTable = ({ name, onSelectRows, columns, items, properties, rowIdKey, renderCell, storageBaseName, ...pagination }) => {
+    const enableRowSelection = Boolean(onSelectRows);
+    const [columnWidths, setColumnWidths] = useLocalStorageState([storageBaseName || "DataTable", name].join("::"), {
+        defaultValue: Object.fromEntries(columns.map(({ key }) => [key, null]))
+    });
+    const [sorting, setSorting] = useState([]);
+    const [rowSelection, setRowSelection] = useState({});
+    const table = useReactTable({
+        getFilteredRowModel: getFilteredRowModel(),
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        columns: createColumns({ columns }),
+        enableRowSelection,
+        data: items,
+        initialState: {
+            pagination: { pageSize: pagination.count.value }
+        },
+        state: {
+            sorting,
+            rowSelection,
+            columnVisibility: Object.fromEntries(columns.map((col) => [col.key, !col.hide]))
+        },
+        columnResizeMode: "onEnd",
+        onSortingChange: setSorting,
+        onRowSelectionChange: setRowSelection,
+    });
+    const sortDescriptor = toSortDescriptor(sorting);
+    useEffect(() => {
+        if (!onSelectRows)
+            return;
+        const arr = z.coerce.number().array().safeParse(Object.keys(rowSelection));
+        if (arr.success) {
+            const keys = arr.data
+                .map((index) => _.get(items[index], rowIdKey) ?? null)
+                .filter((item) => item !== null);
+            // @ts-expect-error keys
+            onSelectRows(keys);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowSelection, items, rowIdKey]);
+    return _jsx(Virtualizer, { layout: TableLayout, layoutOptions: {
+            headingHeight: 42,
+            rowHeight: 52,
+            ...properties?.virtualization
+        }, children: _jsxs(Table, { ...properties?.table, className: cn("min-h-[50dvh]", properties?.table?.className), children: [_jsx(Table.ScrollContainer, { ...properties?.scrollContainer, children: _jsx(Table.ResizableContainer, { onResize: (...map) => {
+                            const next = Object.fromEntries(Array.from(map.entries())
+                                .map(([key, value]) => [String(key),
+                                Object.fromEntries(value)
+                            ]));
+                            // @ts-expect-error next[0]
+                            setColumnWidths(next[0]);
+                        }, ...properties?.tableReizeableContainer, children: _jsxs(Table.Content, { "aria-label": "tanstack usable data table", sortDescriptor: sortDescriptor, onSortChange: (s) => setSorting(toSortingState(s)), ...properties?.tableContent, className: cn("w-full overflow-x-auto", properties?.tableContent?.className), children: [_jsxs(Table.Header, { ...properties?.tableHeader, children: [!enableRowSelection ? null :
+                                            _jsx(Table.Column, { maxWidth: 20, children: _jsx(InditerminateCheckbox, { id: "all", properties: {
+                                                        checkbox: {
+                                                            "aria-label": "Select all",
+                                                            variant: "primary",
+                                                            className: "w-fit"
+                                                        }
+                                                    }, 
+                                                    // onChange={table.getToggleAllRowsSelectedHandler()}
+                                                    onChange: table.toggleAllRowsSelected, isSelected: table.getIsAllRowsSelected(), isIndeterminate: table.getIsSomeRowsSelected() }) }), table.getHeaderGroups().at(0)?.headers.map((header, index) => {
+                                            // @ts-expect-error width
+                                            return _jsx(Table.Column, { id: header.id, isRowHeader: index === 0, allowsSorting: header.column.getCanSort(), ...properties?.tableColumn, defaultWidth: columnWidths?.[header.id], className: cn("rounded-none p-0", properties?.tableColumn?.className), children: ({ sortDirection }) => _jsxs(SortableColumnHeader, { direction: sortDirection, children: [flexRender(header.column.columnDef.header, header.getContext()), _jsx(Table.ColumnResizer, { ...properties?.tableColumnResizer })] }) }, header.id);
+                                        })] }), _jsx(Table.Body, { ...properties?.tableBody, children: table.getRowModel().rows.map((row, rowIndex) => {
+                                        return _jsxs(Table.Row, { id: row.id, ...properties?.tableRow, children: [!enableRowSelection ? null :
+                                                    _jsx(Table.Cell, { className: "pr-0", children: _jsx(InditerminateCheckbox, { id: row.id, label: String(_.get(row, rowIdKey)), onChange: row.getToggleSelectedHandler(), isSelected: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), properties: {
+                                                                checkbox: {
+                                                                    className: "w-fit"
+                                                                }
+                                                            } }) }, row.id), row.getVisibleCells().map((cell) => {
+                                                    const original = row.original;
+                                                    // @ts-expect-error cell
+                                                    return _jsx(Table.Cell, { ...properties?.tableCell, className: cn("whitespace-nowrap flex items-center", properties?.tableCell?.className), children: renderCell?.({ row: original, rowIndex })?.[cell.column.id] ??
+                                                            flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+                                                })] }, row.id);
+                                    }) })] }) }) }), _jsx(Table.Footer, { ...properties?.tableFooter, className: cn("flex items-end", properties?.tableFooter?.className), children: _jsx(DataTablePagination, { ...pagination, properties: properties, prev: {
+                            ...pagination.prev,
+                            onPress: pagination.prev?.onPress ?? table.previousPage,
+                            canPrev: pagination.prev?.canPrev ?? table.getCanPreviousPage(),
+                        }, next: {
+                            ...pagination.next,
+                            onPress: pagination.next?.onPress ?? table.nextPage,
+                            canNext: pagination.next?.canNext ?? table.getCanNextPage(),
+                        } }) })] }) });
+};
+// prettier-ignore
+const createColumns = ({ columns }) => {
+    const helper = createColumnHelper();
+    // @ts-expect-error columnKey
+    return columns.map((column) => helper.accessor(column.key, {
+        header: column.title
+    }));
+};
+// prettier-ignore
+const toSortDescriptor = (sorting) => {
+    const first = _.head(sorting);
+    if (!first)
+        return undefined;
+    return {
+        column: first.id,
+        direction: first.desc ? "descending" : "ascending",
+    };
+};
+// prettier-ignore
+const toSortingState = (descriptor) => {
+    return [{ desc: descriptor.direction === "descending", id: String(descriptor.column) }];
+};
+// prettier-ignore
+const SortableColumnHeader = ({ children, direction }) => {
+    return _jsxs("div", { className: "flex items-center gap-x-2 p-4 header-cell truncate", children: [children, !direction ? null :
+                _jsx(ChevronUp, { className: cn("transform size-3 transition-transform duration-100 ease-out", 
+                    // @ts-expect-error overlap
+                    direction === "descending" ? "rotate-180" : "") })] });
+};
+// prettier-ignore
+const InditerminateCheckbox = ({ label, properties, ...rest }) => {
+    return _jsx(Checkbox, { "aria-label": `Select row ${label || ""}`.trim(), slot: "selection", variant: "secondary", isDisabled: false, ...properties?.checkbox, ...rest, children: _jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }) });
+};

package/dist/components/fields/table/empty.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Surface } from "@heroui/react";
+import { PackageOpenIcon } from "lucide-react";
+// prettier-ignore
+export const RenderEmptyDataTable = ({ isDropTarget, isEmpty }) => {
+    return _jsxs(Surface, { variant: "secondary", className: "h-full rounded-2xl flex items-center text-center justify-center flex-col", children: [_jsx(PackageOpenIcon, { className: "size-15 mb-3" }), _jsx("h5", { className: "text-lg", children: "No records found." }), _jsx("p", { className: "text-sm text-zinc-500", children: "Try adjusting your filters or add new entries." })] });
+};

package/dist/components/fields/table/index.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import z from "zod";
+import { cn } from "@heroui/react";
+import { FilesIcon, InfoIcon, PencilIcon, ShieldAlertIcon, TrashIcon } from "lucide-react";
+import { createElement } from "react";
+import { RippledButton } from "../button";
+import { toMoment } from "../../../libs/utils/date";
+export { DataTable } from "./base";
+export { RenderEmptyDataTable } from "./empty";
+export { DataTablePagination } from "./pagination";
+// prettier-ignore
+export const RenderDateRangeDataTableValue = ({ dates: [from, to] }) => {
+    return _jsxs("div", { className: "flex gap-x-2 items-center", children: [_jsx("div", { className: "w-20.5", children: toMoment(from).format("ll") }), _jsx("span", { className: "mr-1", children: "-" }), _jsx("div", { children: toMoment(to).format("ll") })] });
+};
+// prettier-ignore
+export const RenderDateTimeDataTableValue = ({ date }) => {
+    return _jsxs("div", { className: "flex gap-x-2 items-center", children: [_jsx("div", { className: "w-20.5", children: toMoment(date).format("ll") }), _jsx("span", { className: "mr-1", children: "-" }), _jsx("div", { children: toMoment(date).format("hh:mm A") })] });
+};
+// prettier-ignore
+export const RenderCurrencyDataTableValue = ({ isNegativeDanger, value }) => {
+    if (_.isNil(value))
+        return null;
+    const schema = z.coerce.number().safeParse(value);
+    if (!schema.success)
+        return value;
+    return _jsx("div", { className: "flex gap-x-2 items-center", children: _jsx("div", { className: cn("w-20.5", isNegativeDanger && schema.data < 0 ? "text-danger" : ""), children: Intl.NumberFormat("en-PH", {
+                style: "currency",
+                currency: "PHP"
+            }).format(schema.data) }) });
+};
+// prettier-ignore
+export const RenderActionDataTableValue = (props) => {
+    const options = {
+        view: {
+            icon: InfoIcon,
+            variant: "tertiary"
+        },
+        edit: {
+            icon: PencilIcon,
+            variant: "tertiary"
+        },
+        delete: {
+            icon: TrashIcon,
+            variant: "danger-soft"
+        },
+        audit: {
+            icon: ShieldAlertIcon,
+            variant: "tertiary"
+        },
+        files: {
+            icon: FilesIcon,
+            variant: "secondary"
+        }
+    };
+    const items = Object.entries(props).reduce((acc, [k, value]) => {
+        const key = k;
+        const { onPress, tooltip } = value;
+        acc[key] = _jsx(RippledButton, { properties: {
+                button: {
+                    size: "sm",
+                    isIconOnly: true,
+                    variant: options[key].variant
+                }
+            }, tooltipContent: tooltip, onPress: onPress, type: "button", children: createElement(options[key].icon, { className: "size-4" }) }, key);
+        return acc;
+    }, {});
+    return _jsx("div", { className: "flex gap-2", children: Object.values(items) });
+};

package/dist/components/fields/table/pagination.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Pagination } from "@heroui/react";
+import { useMemo } from "react";
+import { NumericInput } from "../number";
+import { Ripple } from "m3-ripple";
+// prettier-ignore
+export const DataTablePagination = ({ renderPaginationSummary, gotoPage, locale, count, page, totalPages, properties, next, prev, hidePageNumbers }) => {
+    const { displayPage, take } = useMemo(() => ({
+        take: page * count.value + 1,
+        displayPage: page,
+    }), [count.value, page]);
+    const getPageNumbers = () => {
+        const content = [];
+        if (totalPages <= 7) {
+            for (let index = 1; index <= totalPages; index++) {
+                content.push(index);
+            }
+        }
+        else {
+            content.push(1);
+            if (page > 3) {
+                content.push("...");
+            }
+            const start = Math.max(2, page - 1);
+            const end = Math.min(totalPages - 1, page + 1);
+            for (let index = start; index <= end; index++) {
+                content.push(index);
+            }
+            if (page < totalPages - 2) {
+                content.push("...");
+            }
+            content.push(totalPages);
+        }
+        return content;
+    };
+    return _jsxs(Pagination, { size: "sm", ...properties?.pagination, className: cn("items-center", properties?.pagination?.className), children: [_jsx(NumericInput, { onChange: count.onChange, value: count.value, properties: {
+                    field: {
+                        maxValue: count.max,
+                        minValue: 1,
+                    },
+                    label: { className: "text-zinc-500 text-xs" }
+                }, label: "Row count" }), _jsx(Pagination.Summary, { ...properties?.paginationSummary, children: renderPaginationSummary?.(take) ||
+                    _jsx("div", { className: "flex flex-col", children: _jsx("span", { children: `Page ${displayPage.toLocaleString(locale)} of ${totalPages.toLocaleString(locale)}` }) }) }), _jsxs(Pagination.Content, { ...properties?.paginationContent, children: [_jsx(Pagination.Item, { ...properties?.paginationItem, children: _jsxs(Pagination.Previous, { isDisabled: !prev?.canPrev, onPress: prev?.onPress, ...properties?.paginationPrevButton, children: [_jsx(Ripple, {}), _jsx(Pagination.PreviousIcon, { ...properties?.paginationPrevIcon }), _jsx("span", { children: prev?.text || "Prev" })] }) }), hidePageNumbers ? null :
+                        getPageNumbers().map((current, index) => {
+                            const isActive = current === page;
+                            if (current === "...")
+                                return _jsx(Pagination.Item, { ...properties?.paginationItem, children: _jsx(Pagination.Ellipsis, {}) }, ["e", index].join(":"));
+                            return _jsx(Pagination.Item, { ...properties?.paginationItem, children: _jsx(Pagination.Link, { isActive: isActive, onPress: () => gotoPage?.(current), className: cn(isActive ? "bg-accent/5" : ""), children: _jsx("span", { className: isActive ? "text-accent font-bold" : "font-normal", children: current }) }) }, current);
+                        }), _jsx(Pagination.Item, { ...properties?.paginationItem, children: _jsxs(Pagination.Next, { isDisabled: !next?.canNext, onPress: next?.onPress, ...properties?.paginationNextButton, children: [_jsx(Ripple, {}), _jsx("span", { children: next?.text || "Next" }), _jsx(Pagination.NextIcon, { ...properties?.paginationNextIcon })] }) })] })] });
+};

package/dist/components/fields/tabs.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import { cn, Tabs as HeroUITabs } from "@heroui/react";
+import { useMemo } from "react";
+// prettier-ignore
+export const Tabs = ({ pathname, renderTab, data, properties }) => {
+    const activeKey = useMemo(() => {
+        const paths = pathname.split("/");
+        const path = paths[paths.length - 1];
+        const activeKey = Object.keys(data).find((key) => {
+            const item = _.get(data, key);
+            if (item.href)
+                return item.href.startsWith(pathname);
+            return key.toLowerCase() == path.toLowerCase();
+        });
+        return activeKey;
+    }, [pathname, data]);
+    return _jsxs(HeroUITabs, { defaultSelectedKey: activeKey, ...properties?.tabs, children: [_jsx(HeroUITabs.ListContainer, { ...properties?.listContainer, children: _jsx(HeroUITabs.List, { "aria-label": "list options", ...properties?.list, children: Object.keys(data).map((k) => {
+                        const key = k;
+                        const { href } = data[key];
+                        return _jsxs(HeroUITabs.Tab, { id: key, href: href, ...properties?.tab, className: cn("w-fit", properties?.tab?.className), children: [renderTab?.[key] ?? key, _jsx(HeroUITabs.Indicator, { ...properties?.indicator })] }, key);
+                    }) }) }), Object.keys(data).map((key) => {
+                const { component } = data[key];
+                return _jsx(HeroUITabs.Panel, { id: key, ...properties?.panel, children: component }, key);
+            })] });
+};

package/dist/components/form-fields/autocomplete.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import { Autocomplete, cn, EmptyState, Label, ListBox, SearchField, Tag, TagGroup, useFilter, } from "@heroui/react";
+import { FormField } from "./field";
+// prettier-ignore
+export const AutoCompleteFormField = ({ emptyMessage, items, idKey, nameKey, properties, label, ...form }) => {
+    const { contains } = useFilter({ sensitivity: "base" });
+    const isSingle = properties?.base?.autoComplete?.selectionMode === "single";
+    return _jsx(FormField, { ...form, children: ({ field: { value, onChange, ...field }, fieldState }) => {
+            // @ts-expect-error keys
+            return _jsxs(Autocomplete, { isInvalid: fieldState.invalid, selectionMode: "multiple", variant: "secondary", value: isSingle ? value :
+                    !value ? undefined : _.isArray(value) ? value : [value], ...properties?.base?.autoComplete, ...field, onChange: (keys) => {
+                    if (isSingle)
+                        return onChange(keys);
+                    if (!_.isArray(keys))
+                        return onChange([]);
+                    return onChange(keys);
+                }, children: [_jsx(Label, { ...properties?.label, children: label }), _jsxs(Autocomplete.Trigger, { ...properties?.base?.trigger, className: cn("py-0 items-center", properties?.base?.trigger?.className), children: [_jsx(Autocomplete.Value, { ...properties?.base?.value, children: ({ defaultChildren, isPlaceholder, state }) => {
+                                    if (isPlaceholder || !state.selectedItems.length)
+                                        return defaultChildren;
+                                    const selectedItemKeys = state.selectedItems.map((item) => item.key);
+                                    return _jsx(TagGroup, { size: "lg", "aria-label": "autocomplete tags", ...properties?.tag?.group, onRemove: (keys) => {
+                                            const keysToRemove = _.toArray(keys);
+                                            const keysCurrent = _.isArray(value) ? value : [value];
+                                            return onChange(keysCurrent.filter((key) => !keysToRemove.includes(key)));
+                                        }, children: _jsx(TagGroup.List, { ...properties?.tag?.list, children: selectedItemKeys.map((selectedItemKey) => {
+                                                const item = items.find((s) => _.get(s, idKey) == selectedItemKey);
+                                                if (!item)
+                                                    return null;
+                                                const current = {
+                                                    id: _.get(item, idKey),
+                                                    name: _.get(item, nameKey)
+                                                };
+                                                return _jsx(Tag, { id: current.id, ...properties?.tag?.item, className: cn(isSingle ? "[&_.close-button]:hidden" : undefined, "bg-transparent!", properties?.tag?.item?.className), textValue: current.name, children: _jsx("span", { children: current.name }) }, current.id);
+                                            }) }) });
+                                } }), _jsx(Autocomplete.Indicator, {})] }), _jsx(Autocomplete.Popover, { isNonModal: true, placement: "bottom left", ...properties?.popover?.popover, children: _jsxs(Autocomplete.Filter, { filter: contains, ...properties?.popover?.filter, children: [_jsx(SearchField, { autoFocus: true, fullWidth: true, "aria-label": "autocomplete search", name: "search", variant: "secondary", ...properties?.search?.field, children: _jsxs(SearchField.Group, { ...properties?.search?.group, children: [_jsx(SearchField.SearchIcon, { ...properties?.search?.icon }), _jsx(SearchField.Input, { placeholder: "Search...", ...properties?.search?.input }), _jsx(SearchField.ClearButton, { ...properties?.search?.clear })] }) }), _jsx(ListBox, { renderEmptyState: () => _jsx(EmptyState, { ...properties?.list?.empty, children: _jsx("span", { children: emptyMessage || "No results found" }) }), children: items.map((item) => {
+                                        const current = {
+                                            id: _.get(item, idKey),
+                                            name: _.get(item, nameKey)
+                                        };
+                                        return _jsxs(ListBox.Item, { id: current.id, textValue: current.name, "aria-label": current.name, ...properties?.list?.item, children: [_jsx("span", { children: current.name }), _jsx(ListBox.ItemIndicator, { ...properties?.list?.check })] }, current.id);
+                                    }) })] }) })] });
+        } });
+};

package/dist/components/form-fields/date-range.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import { FormField } from "./field";
+import { DateField, DateRangePicker, Label, RangeCalendar } from "@heroui/react";
+import { parseAbsoluteToLocal } from "@internationalized/date";
+import { FormFieldErrorMessage } from "./error";
+import { toMoment } from "../../libs/utils/date";
+// prettier-ignore
+export const DateRangeFormField = ({ startName, endName, properties, label, ...form }) => {
+    return _jsx(FormField, { ...form, children: ({ field: { onChange, value, ...field }, fieldState }) => {
+            const start = _.get(value, startName.split(".").slice(1).join("."));
+            const end = _.get(value, startName.split(".").slice(1).join("."));
+            const parsed = {
+                start: _.isDate(start) ? parseAbsoluteToLocal(start.toISOString()) : undefined,
+                end: _.isDate(end) ? parseAbsoluteToLocal(end.toISOString()) : undefined,
+            };
+            return _jsxs(DateRangePicker, { hideTimeZone: true, isInvalid: fieldState.invalid, "aria-label": "date range picker", granularity: "day", defaultValue: parsed.start && parsed.end ? parsed : undefined, ...properties?.picker, ...field, startName: startName, endName: endName, onChange: (value) => {
+                    if (!value)
+                        return onChange(null);
+                    const { start, end } = value;
+                    const from = toMoment().set({
+                        month: start.month - 1,
+                        date: start.day,
+                        year: start.year,
+                        hour: start.hour,
+                        minute: start.minute,
+                        second: start.second,
+                        millisecond: start.millisecond
+                    });
+                    const to = toMoment().set({
+                        month: end.month - 1,
+                        date: end.day,
+                        year: end.year,
+                        hour: end.hour,
+                        minute: end.minute,
+                        second: end.second,
+                        millisecond: end.millisecond
+                    });
+                    return onChange({
+                        from: from.toDate(),
+                        to: to.toDate()
+                    });
+                }, children: [_jsx(Label, { ...properties?.label, children: label }), _jsxs(DateField.Group, { variant: "secondary", ...properties?.input?.group, children: [_jsx(DateField.Input, { ...properties?.input?.input, slot: "start", children: (segment) => _jsx(DateField.Segment, { segment: segment, ...properties?.input?.segment }) }), _jsx(DateRangePicker.RangeSeparator, { ...properties?.input?.separator }), _jsx(DateField.Input, { ...properties?.input?.input, slot: "end", children: (segment) => _jsx(DateField.Segment, { segment: segment, ...properties?.input?.segment }) }), _jsx(DateField.Suffix, { ...properties?.input?.trigger?.suffix, children: _jsx(DateRangePicker.Trigger, { ...properties?.input?.trigger?.trigger, children: _jsx(DateRangePicker.TriggerIndicator, { ...properties?.input?.trigger?.indicator }) }) })] }), _jsx(FormFieldErrorMessage, { fieldState: fieldState, properties: { error: properties?.error } }), _jsx(DateRangePicker.Popover, { isNonModal: true, placement: "bottom end", ...properties?.calendar?.popover, children: _jsxs(RangeCalendar, { "aria-label": "calendar period", ...properties?.calendar?.calendar, children: [_jsxs(RangeCalendar.Header, { ...properties?.calendar?.header, children: [_jsxs(RangeCalendar.YearPickerTrigger, { ...properties?.calendar?.yearPicker?.tigger, children: [_jsx(RangeCalendar.YearPickerTriggerHeading, { ...properties?.calendar?.yearPicker?.heading }), _jsx(RangeCalendar.YearPickerTriggerIndicator, { ...properties?.calendar?.yearPicker?.indicator })] }), _jsx(RangeCalendar.NavButton, { slot: "previous", ...properties?.calendar?.previous }), _jsx(RangeCalendar.NavButton, { slot: "next", ...properties?.calendar?.next })] }), _jsxs(RangeCalendar.Grid, { children: [_jsx(RangeCalendar.GridHeader, { children: (day) => _jsx(RangeCalendar.HeaderCell, { children: day }) }), _jsx(RangeCalendar.GridBody, { children: (date) => _jsx(RangeCalendar.Cell, { date: date }) })] }), _jsx(RangeCalendar.YearPickerGrid, { children: _jsx(RangeCalendar.YearPickerGridBody, { children: ({ year }) => _jsx(RangeCalendar.YearPickerCell, { year: year }) }) })] }) })] });
+        } });
+};

package/dist/components/form-fields/date.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormField } from "./field";
+import { DateField, DatePicker, Calendar, Label, TimeField, cn } from "@heroui/react";
+import { parseAbsoluteToLocal } from "@internationalized/date";
+import { FormFieldErrorMessage } from "./error";
+import { toMoment } from "../../libs/utils/date";
+// prettier-ignore
+export const DateFormField = ({ label, properties, ...form }) => {
+    const showTimePicker = properties?.picker?.granularity && ["hour", "minute", "second"].includes(properties.picker.granularity);
+    return _jsx(FormField, { ...form, children: ({ field: { value, onChange, ...field }, fieldState }) => _jsxs(DatePicker, { hideTimeZone: true, isInvalid: fieldState.invalid, "aria-label": label || "date picker", value: !value ? undefined : parseAbsoluteToLocal(value.toISOString()), shouldCloseOnSelect: !showTimePicker, ...properties?.picker, ...field, onChange: (value) => {
+                if (!value)
+                    return onChange(null);
+                const date = toMoment().set({
+                    month: value.month - 1,
+                    date: value.day,
+                    year: value.year,
+                    hour: value.hour,
+                    minute: value.minute,
+                    second: value.second,
+                    millisecond: value.millisecond
+                });
+                return onChange(date.toDate());
+            }, children: [_jsx(Label, { ...properties?.label, children: label }), _jsxs(DateField.Group, { variant: "secondary", ...properties?.input?.group, children: [_jsx(DateField.Input, { ...properties?.input?.input, children: (segment) => _jsx(DateField.Segment, { segment: segment, ...properties?.input?.segment }) }), _jsx(DateField.Suffix, { ...properties?.input?.trigger?.suffix, children: _jsx(DatePicker.Trigger, { ...properties?.input?.trigger?.trigger, children: _jsx(DatePicker.TriggerIndicator, { ...properties?.input?.trigger?.indicator }) }) })] }), _jsx(FormFieldErrorMessage, { fieldState: fieldState, properties: { error: properties?.error } }), _jsxs(DatePicker.Popover, { isNonModal: true, placement: "bottom end", ...properties?.calendar?.popover, className: cn("min-w-64", properties?.calendar?.popover?.className), children: [_jsxs(Calendar, { "aria-label": "calendar period", ...properties?.calendar?.calendar, children: [_jsxs(Calendar.Header, { ...properties?.calendar?.header, children: [_jsxs(Calendar.YearPickerTrigger, { ...properties?.calendar?.yearPicker?.tigger, children: [_jsx(Calendar.YearPickerTriggerHeading, { ...properties?.calendar?.yearPicker?.heading }), _jsx(Calendar.YearPickerTriggerIndicator, { ...properties?.calendar?.yearPicker?.indicator })] }), _jsx(Calendar.NavButton, { slot: "previous", ...properties?.calendar?.previous }), _jsx(Calendar.NavButton, { slot: "next", ...properties?.calendar?.next })] }), _jsxs(Calendar.Grid, { children: [_jsx(Calendar.GridHeader, { children: (day) => _jsx(Calendar.HeaderCell, { children: day }) }), _jsx(Calendar.GridBody, { children: (date) => _jsx(Calendar.Cell, { date: date }) })] }), _jsx(Calendar.YearPickerGrid, { children: _jsx(Calendar.YearPickerGridBody, { children: ({ year }) => _jsx(Calendar.YearPickerCell, { year: year }) }) })] }), showTimePicker ?
+                            _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, {}), _jsx(TimeField, { defaultValue: value, shouldForceLeadingZeros: properties?.picker?.shouldForceLeadingZeros, hideTimeZone: properties?.picker?.hideTimeZone, "aria-label": label?.concat(" time ") || "time picker", hourCycle: properties?.picker?.hourCycle, onChange: (timeValue) => {
+                                            if (!timeValue)
+                                                return;
+                                            const date = toMoment(value).set({
+                                                hour: timeValue.hour,
+                                                minute: timeValue.minute,
+                                                second: timeValue.second,
+                                                millisecond: timeValue.millisecond
+                                            });
+                                            return onChange(date.toDate());
+                                        }, children: _jsx(TimeField.Group, { variant: "secondary", children: _jsx(TimeField.Input, { children: (segment) => _jsx(TimeField.Segment, { segment: segment }) }) }) })] })
+                            : null] })] }) });
+};

package/dist/components/form-fields/error.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldError } from "@heroui/react";
+// prettier-ignore
+export const FormFieldErrorMessage = ({ fieldState, properties }) => {
+    return _jsxs(FieldError, { ...properties?.error, children: [" ", fieldState.error?.message || fieldState.error?.root?.message] });
+};