tw-react-components 0.0.134 → 0.0.136

package/index.cjs.js

@@ -772,7 +772,7 @@ const Label = ({ children, className, description, required, hasErrors, htmlFor,
     return !children ? null : (jsxRuntime.jsxs("label", { className: cn('flex items-center gap-1 font-medium', {
             'text-slate-700 dark:text-slate-100': !hasErrors,
             'text-red-600 dark:text-red-500': hasErrors,
-        }, className), htmlFor: htmlFor, children: [jsxRuntime.jsxs("span", { children: [children, " ", required && jsxRuntime.jsx("span", { className: "text-red-600", children: "*" })] }), description && (jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx("div", { className: "max-w-xs", children: description }), placement: "right", children: jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-5 w-5" }) }))] }));
+        }, className), htmlFor: htmlFor, children: [children, description && (jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx("div", { className: "max-w-xs", children: description }), placement: "top", asChild: true, children: jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-4 w-4" }) })), required && jsxRuntime.jsx("span", { className: "text-red-600", children: "*" })] }));
 };
 
 const inputClasses = {
@@ -864,7 +864,12 @@ const CheckboxInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInpu
 
 const EmailInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: lucideReact.AtSignIcon, ref: ref }))));
 
-const NumberInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "number" }, props, { ref: ref }))));
+const NumberInput = react.forwardRef((_a, ref) => {
+    var { unit } = _a, props = __rest(_a, ["unit"]);
+    return (jsxRuntime.jsx(BasicInput, Object.assign({ type: "number" }, props, { suffixIcon: unit
+            ? ({ className }) => (jsxRuntime.jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
+            : props.suffixIcon, ref: ref })));
+});
 
 const PasswordInput = react.forwardRef((props, ref) => {
     const [type, setType] = react.useState('password');
@@ -1119,7 +1124,7 @@ const DateTimeInput = react.forwardRef((_a, ref) => {
                 setIsOpen(false);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsxRuntime.jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? lucideReact.CalendarIcon : lucideReact.ClockIcon })), isOpen && (jsxRuntime.jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsxRuntime.jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (jsxRuntime.jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsxRuntime.jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), jsxRuntime.jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), children: "OK" })] }))] }))] }));
+    return (jsxRuntime.jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsxRuntime.jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? lucideReact.CalendarIcon : lucideReact.ClockIcon, onSuffixIconClick: handleOnClick })), isOpen && (jsxRuntime.jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsxRuntime.jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (jsxRuntime.jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsxRuntime.jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), jsxRuntime.jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), children: "OK" })] }))] }))] }));
 });
 
 const ListContent = react.forwardRef((_a, ref) => {
@@ -1300,16 +1305,31 @@ const SelectInput = react.forwardRef((_a, ref) => {
                 handleOnSelect(option.id);
             }, children: jsxRuntime.jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
-    return (jsxRuntime.jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsxRuntime.jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: lucideReact.ChevronDownIcon, ref: ref, readOnly: true })) }), jsxRuntime.jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsxRuntime.jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
+    return (jsxRuntime.jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsxRuntime.jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: lucideReact.ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxRuntime.jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsxRuntime.jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
                         (allowAddition && searchValue ? (jsxRuntime.jsxs("button", { className: "rounded bg-slate-100 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsxRuntime.jsx("div", { className: "text-center text-slate-500", children: "No items." }))), jsxRuntime.jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxRuntime.jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsxRuntime.jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsxRuntime.jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsxRuntime.jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsxRuntime.jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 
-const FormGroup = ({ className, label, children }) => (jsxRuntime.jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-300', className), direction: "column", fullWidth: true, children: [jsxRuntime.jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
+const FileInput = react.forwardRef((_a, ref) => {
+    var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
+    const fileInputRef = react.useRef(null);
+    const handleFileChange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ target: { files } }) {
+        console.log(files);
+        if (files && files.length > 0) {
+            const file = files[0];
+            console.log(file, file.name, onChange, onFileChange);
+            onChange === null || onChange === void 0 ? void 0 : onChange(file.name);
+            onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(file);
+        }
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, Object.assign({ className: cn('[&>div>*]:cursor-pointer', className), inputClassName: "text-left" }, props, { value: value !== null && value !== void 0 ? value : '', onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, suffixIcon: lucideReact.CloudUploadIcon, onSuffixIconClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, ref: ref, readOnly: true })), jsxRuntime.jsx("input", { ref: (ref) => (fileInputRef.current = ref), type: "file", hidden: true, accept: accept, onChange: handleFileChange })] }));
+});
+
+const FormGroup = ({ className, label, children }) => (jsxRuntime.jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsxRuntime.jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
 
 function withForm(Component) {
     return react.forwardRef((props, ref) => {
         const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
-        const { control } = reactHookForm.useFormContext();
+        const { control, formState } = reactHookForm.useFormContext();
         return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
                 required: restProps.required,
                 min: restProps.min,
@@ -1320,7 +1340,8 @@ function withForm(Component) {
                 validate,
             }, render: ({ field, fieldState }) => {
                 var _a, _b;
-                return (jsxRuntime.jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
+                return (jsxRuntime.jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: ((_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled) ||
+                        formState.isSubmitting, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
             } }));
     });
 }
@@ -1333,6 +1354,7 @@ const FormInputs = {
     Checkbox: withForm(CheckboxInput),
     DateTime: withForm(DateTimeInput),
     Select: withForm(SelectInput),
+    File: withForm(FileInput),
 };
 
 const HintRoot = react.forwardRef(({ children }, ref) => (jsxRuntime.jsx(Block, { className: "relative", ref: ref, children: children })));
@@ -1530,7 +1552,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                                     : undefined, children: [column.header, sorting &&
                                         !column.noSorting &&
                                         (((_b = sorting.sorting) === null || _b === void 0 ? void 0 : _b.field) !== column.field ? (jsxRuntime.jsx(lucideReact.ArrowUpDownIcon, { className: "absolute top-1/2 float-right ml-1 hidden h-4 w-4 -translate-y-1/2 group-hover:inline-block" })) : ((_c = sorting.sorting) === null || _c === void 0 ? void 0 : _c.direction) === 'asc' ? (jsxRuntime.jsx(lucideReact.SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsxRuntime.jsx(lucideReact.SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
-                        }), actions.length > 0 && jsxRuntime.jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxRuntime.jsxs(Table.Body, { className: "relative", children: [isLoading && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                        }), actions.filter((action) => !action.hide).length > 0 && (jsxRuntime.jsx(Table.HeadCell, { align: "center", children: "Actions" }))] }) }), jsxRuntime.jsxs(Table.Body, { className: "relative", children: [isLoading && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
                                 absolute: rows.length,
                             }), colSpan: columnsLength, children: jsxRuntime.jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { colSpan: columnsLength, children: jsxRuntime.jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
                         jsxRuntime.jsxs(Table.Row, { className: cn({
@@ -1538,7 +1560,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                             }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), children: [rowExtraContent && (jsxRuntime.jsx(Table.Cell, { className: "w-min", align: "center", children: jsxRuntime.jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: lucideReact.MinusIcon, unfoldComponent: lucideReact.PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
                                     var _a, _b, _c;
                                     return (jsxRuntime.jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
-                                }), actions.length > 0 && (jsxRuntime.jsx(Table.Cell, { className: "py-3", children: jsxRuntime.jsx(Flex, { align: "center", justify: "center", children: actions
+                                }), actions.filter((action) => !action.hide).length > 0 && (jsxRuntime.jsx(Table.Cell, { className: "py-3", children: jsxRuntime.jsx(Flex, { align: "center", justify: "center", children: actions
                                             .filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })
                                             .map((action, actionIndex) => {
                                             var _a;
@@ -1824,6 +1846,7 @@ exports.DateTimeInput = DateTimeInput;
 exports.Dialog = Dialog;
 exports.DropdownMenu = DropdownMenu;
 exports.EmailInput = EmailInput;
+exports.FileInput = FileInput;
 exports.Flex = Flex;
 exports.FormDialog = FormDialog;
 exports.FormGroup = FormGroup;

package/index.esm.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
-import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, MenuIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, MenuIcon, MoonIcon, SunIcon } from 'lucide-react';
 import localeData from 'dayjs/plugin/localeData';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -745,7 +745,7 @@ const Label = ({ children, className, description, required, hasErrors, htmlFor,
     return !children ? null : (jsxs("label", { className: cn('flex items-center gap-1 font-medium', {
             'text-slate-700 dark:text-slate-100': !hasErrors,
             'text-red-600 dark:text-red-500': hasErrors,
-        }, className), htmlFor: htmlFor, children: [jsxs("span", { children: [children, " ", required && jsx("span", { className: "text-red-600", children: "*" })] }), description && (jsx(Tooltip, { content: jsx("div", { className: "max-w-xs", children: description }), placement: "right", children: jsx(HelpCircle, { className: "h-5 w-5" }) }))] }));
+        }, className), htmlFor: htmlFor, children: [children, description && (jsx(Tooltip, { content: jsx("div", { className: "max-w-xs", children: description }), placement: "top", asChild: true, children: jsx(HelpCircle, { className: "h-4 w-4" }) })), required && jsx("span", { className: "text-red-600", children: "*" })] }));
 };
 
 const inputClasses = {
@@ -837,7 +837,12 @@ const CheckboxInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign(
 
 const EmailInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: AtSignIcon, ref: ref }))));
 
-const NumberInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "number" }, props, { ref: ref }))));
+const NumberInput = forwardRef((_a, ref) => {
+    var { unit } = _a, props = __rest(_a, ["unit"]);
+    return (jsx(BasicInput, Object.assign({ type: "number" }, props, { suffixIcon: unit
+            ? ({ className }) => (jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
+            : props.suffixIcon, ref: ref })));
+});
 
 const PasswordInput = forwardRef((props, ref) => {
     const [type, setType] = useState('password');
@@ -1092,7 +1097,7 @@ const DateTimeInput = forwardRef((_a, ref) => {
                 setIsOpen(false);
         }
     };
-    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), children: "OK" })] }))] }))] }));
+    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick })), isOpen && (jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), children: "OK" })] }))] }))] }));
 });
 
 const ListContent = forwardRef((_a, ref) => {
@@ -1273,16 +1278,31 @@ const SelectInput = forwardRef((_a, ref) => {
                 handleOnSelect(option.id);
             }, children: jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
-    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
+    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
                         (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "text-center text-slate-500", children: "No items." }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 
-const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-300', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
+const FileInput = forwardRef((_a, ref) => {
+    var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
+    const fileInputRef = useRef(null);
+    const handleFileChange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ target: { files } }) {
+        console.log(files);
+        if (files && files.length > 0) {
+            const file = files[0];
+            console.log(file, file.name, onChange, onFileChange);
+            onChange === null || onChange === void 0 ? void 0 : onChange(file.name);
+            onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(file);
+        }
+    });
+    return (jsxs(Fragment, { children: [jsx(TextInput, Object.assign({ className: cn('[&>div>*]:cursor-pointer', className), inputClassName: "text-left" }, props, { value: value !== null && value !== void 0 ? value : '', onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, suffixIcon: CloudUploadIcon, onSuffixIconClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, ref: ref, readOnly: true })), jsx("input", { ref: (ref) => (fileInputRef.current = ref), type: "file", hidden: true, accept: accept, onChange: handleFileChange })] }));
+});
+
+const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
 
 function withForm(Component) {
     return forwardRef((props, ref) => {
         const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
-        const { control } = useFormContext();
+        const { control, formState } = useFormContext();
         return (jsx(Controller, { name: name, control: control, rules: {
                 required: restProps.required,
                 min: restProps.min,
@@ -1293,7 +1313,8 @@ function withForm(Component) {
                 validate,
             }, render: ({ field, fieldState }) => {
                 var _a, _b;
-                return (jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
+                return (jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: ((_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled) ||
+                        formState.isSubmitting, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
             } }));
     });
 }
@@ -1306,6 +1327,7 @@ const FormInputs = {
     Checkbox: withForm(CheckboxInput),
     DateTime: withForm(DateTimeInput),
     Select: withForm(SelectInput),
+    File: withForm(FileInput),
 };
 
 const HintRoot = forwardRef(({ children }, ref) => (jsx(Block, { className: "relative", ref: ref, children: children })));
@@ -1503,7 +1525,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                                     : undefined, children: [column.header, sorting &&
                                         !column.noSorting &&
                                         (((_b = sorting.sorting) === null || _b === void 0 ? void 0 : _b.field) !== column.field ? (jsx(ArrowUpDownIcon, { className: "absolute top-1/2 float-right ml-1 hidden h-4 w-4 -translate-y-1/2 group-hover:inline-block" })) : ((_c = sorting.sorting) === null || _c === void 0 ? void 0 : _c.direction) === 'asc' ? (jsx(SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsx(SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
-                        }), actions.length > 0 && jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                        }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.HeadCell, { align: "center", children: "Actions" }))] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
                                 absolute: rows.length,
                             }), colSpan: columnsLength, children: jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: columnsLength, children: jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
                         jsxs(Table.Row, { className: cn({
@@ -1511,7 +1533,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                             }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), children: [rowExtraContent && (jsx(Table.Cell, { className: "w-min", align: "center", children: jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: MinusIcon, unfoldComponent: PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
                                     var _a, _b, _c;
                                     return (jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
-                                }), actions.length > 0 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
+                                }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
                                             .filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })
                                             .map((action, actionIndex) => {
                                             var _a;
@@ -1784,4 +1806,4 @@ const ThemeSwitcher = ({ className }) => {
         } }));
 };
 
-export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SIDEBAR_KEY, SelectInput, Sidebar, Spinner, Switch, THEME_KEY, Table, Tabs, TextInput, TextareaInput, ThemeSwitcher, Tooltip, cn, compareDates, generalComparator, getDisplayDate, isEmpty, mergeRefs, resolveTargetObject, useDays, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination };
+export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, FileInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SIDEBAR_KEY, SelectInput, Sidebar, Spinner, Switch, THEME_KEY, Table, Tabs, TextInput, TextareaInput, ThemeSwitcher, Tooltip, cn, compareDates, generalComparator, getDisplayDate, isEmpty, mergeRefs, resolveTargetObject, useDays, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.134",
+  "version": "0.0.136",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {

package/src/components/Form/controls/custom/date-time/DateSelector.d.ts

@@ -3,8 +3,8 @@ export type View = 'days' | 'months' | 'years';
 type DateSelectorProps = {
     date: Date;
     value?: string | Date | null;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     locale?: string;
     calendarView: View;
     setCalendarView: (view: View) => void;

package/src/components/Form/controls/custom/date-time/DaysView.d.ts

@@ -4,8 +4,8 @@ type DaysViewProps = {
     value?: string | Date | null;
     month: number;
     year: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     locale?: string;
     setNewDate: (date: Date) => void;
 };

package/src/components/Form/controls/custom/date-time/MonthsView.d.ts

@@ -3,8 +3,8 @@ type MonthsViewProps = {
     date: Date;
     value?: string | Date | null;
     year: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     locale?: string;
     selectMonth: (month: number) => () => void;
 };

package/src/components/Form/controls/custom/date-time/TimeSelector.d.ts

@@ -2,8 +2,8 @@ import { FC } from 'react';
 type TimeSelectorProps = {
     date: Date;
     step?: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     setNewDate: (date: Date) => void;
 };
 export declare const TimeSelector: FC<TimeSelectorProps>;

package/src/components/Form/controls/custom/date-time/YearsView.d.ts

@@ -3,8 +3,8 @@ type YearsViewProps = {
     date: Date;
     value?: string | Date | null;
     years: number[];
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     selectYear: (month: number) => () => void;
 };
 export declare const YearsView: FC<YearsViewProps>;

package/src/components/Form/controls/custom/date-time/index.d.ts

@@ -6,8 +6,8 @@ export type DateTimeInputProps = {
     hasErrors?: boolean;
     clearable?: boolean;
     step?: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     displayFormat?: string;
     displayLocale?: string;
     onChange?: (date?: Date | null) => void;
@@ -18,8 +18,8 @@ export declare const DateTimeInput: import("react").ForwardRefExoticComponent<{
     hasErrors?: boolean;
     clearable?: boolean;
     step?: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     displayFormat?: string;
     displayLocale?: string;
     onChange?: (date?: Date | null) => void;

package/src/components/Form/controls/custom/file.d.ts

@@ -0,0 +1,11 @@
+import { BasicInputProps } from '../primitive';
+export type FileInputProps = {
+    value?: string | null;
+    onChange?: (item?: string) => void;
+    onFileChange?: (file?: File) => void;
+} & Pick<BasicInputProps<'text'>, 'className' | 'inputClassName' | 'extensionClassName' | 'name' | 'label' | 'placeholder' | 'description' | 'size' | 'accept' | 'required' | 'hasErrors' | 'disabled'>;
+export declare const FileInput: import("react").ForwardRefExoticComponent<{
+    value?: string | null;
+    onChange?: (item?: string) => void;
+    onFileChange?: (file?: File) => void;
+} & Pick<BasicInputProps<"text">, "size" | "label" | "accept" | "disabled" | "name" | "placeholder" | "required" | "className" | "inputClassName" | "extensionClassName" | "description" | "hasErrors"> & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/custom/index.d.ts

@@ -1,2 +1,3 @@
 export * from './date-time';
 export * from './select';
+export * from './file';

package/src/components/Form/controls/custom/select/index.d.ts

@@ -30,7 +30,7 @@ export type SelectInputProps<T = any> = {
     multiple: true;
     value: T[];
     onChange?: (item?: T[]) => void;
-}) & Pick<BasicInputProps<'text'>, 'className' | 'inputClassName' | 'extensionClassName' | 'name' | 'label' | 'size' | 'placeholder' | 'required' | 'hasErrors' | 'disabled' | 'readOnly'>;
+}) & Pick<BasicInputProps<'text'>, 'className' | 'inputClassName' | 'extensionClassName' | 'name' | 'label' | 'description' | 'size' | 'placeholder' | 'required' | 'hasErrors' | 'disabled' | 'readOnly'>;
 export declare const SelectInput: (<T>(props: SelectInputProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => JSX.Element) & {

package/src/components/Form/controls/primitive/BasicInput.d.ts

@@ -1,4 +1,3 @@
-import { LucideIcon } from 'lucide-react';
 import { ComponentProps, FC, MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import { Size } from '../../../types';
 export type InputType = ComponentProps<'input'>['type'] | 'textarea';
@@ -11,7 +10,7 @@ export type BasicInputProps<Type extends InputType> = {
     size?: Size;
     hasErrors?: boolean;
     clearable?: boolean;
-    suffixIcon?: LucideIcon;
+    suffixIcon?: FC<ComponentProps<'svg'>>;
     onClear?: () => void;
     onSuffixIconClick?: (event: MouseEvent<HTMLDivElement>) => void;
 } & Omit<Type extends 'textarea' ? ComponentProps<'textarea'> : ComponentProps<'input'>, 'id' | 'ref' | 'size'>;
@@ -24,7 +23,7 @@ export declare const BasicInput: import("react").ForwardRefExoticComponent<{
     size?: Size;
     hasErrors?: boolean;
     clearable?: boolean;
-    suffixIcon?: LucideIcon;
+    suffixIcon?: FC<ComponentProps<"svg">>;
     onClear?: () => void;
     onSuffixIconClick?: (event: MouseEvent<HTMLDivElement>) => void;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "id" | "ref" | "size"> & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/src/components/Form/controls/primitive/NumberInput.d.ts

@@ -1,3 +1,8 @@
+import { ReactNode } from 'react';
 import { BasicInputProps } from './BasicInput';
-export type NumberInputProps = Omit<BasicInputProps<'number'>, 'type'>;
-export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export type NumberInputProps = Omit<BasicInputProps<'number'>, 'type'> & {
+    unit?: ReactNode;
+};
+export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<BasicInputProps<"number">, "type"> & {
+    unit?: ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/with-form.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent } from 'react';
 import { ControllerRenderProps, Validate } from 'react-hook-form';
-import { DateTimeInputProps, DateTimeInputType, SelectInputProps, SelectInputType } from './custom';
+import { DateTimeInputProps, DateTimeInputType, FileInputProps, SelectInputProps, SelectInputType } from './custom';
 import { BasicInputProps, CheckboxInputProps, EmailInputProps, InputType, NumberInputProps, PasswordInputProps, TextInputProps, TextareaInputProps } from './primitive';
 export type WithFormProps<Type extends InputType | SelectInputType, Props = Type extends DateTimeInputType ? DateTimeInputProps : Type extends SelectInputType ? SelectInputProps : Omit<BasicInputProps<Type>, 'type'>> = {
     name: string;
@@ -48,4 +48,9 @@ export declare const FormInputs: {
         pattern?: RegExp;
         validate?: Validate<any, any> | undefined;
     } & Omit<SelectInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
+    File: ForwardRefExoticComponent<{
+        name: string;
+        pattern?: RegExp;
+        validate?: Validate<string, any> | undefined;
+    } & Omit<FileInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
 };