eai-frontend-components 2.0.28 → 2.0.30

package/dist/index.d.ts

@@ -80,7 +80,7 @@ declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitiv
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "surface" | "outline" | "green" | "red" | "gray" | "blue" | "orange" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "outline" | "surface" | "green" | "red" | "gray" | "blue" | "orange" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/index.esm.js

@@ -529,7 +529,7 @@ function DatePickerWithRange({ className }) {
         from: new Date(2022, 0, 20),
         to: addDays(new Date(2022, 0, 20), 20),
     });
-    return (jsx("div", { className: cn('grid gap-2', className), children: jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { id: 'date', variant: 'outline', className: cn('w-[300px] justify-start text-left font-normal', !date && 'text-muted-foreground'), children: [jsx(CalendarIcon, {}), date?.from ? (date.to ? (jsxs(Fragment, { children: [format(date.from, 'LLL dd, y'), " - ", format(date.to, 'LLL dd, y')] })) : (format(date.from, 'LLL dd, y'))) : (jsx("span", { children: "Pick a date" }))] }) }), jsx(PopoverContent, { className: 'w-auto p-0', align: 'start', children: jsx(Calendar, { initialFocus: true, mode: 'range', defaultMonth: date?.from, selected: date, onSelect: setDate, numberOfMonths: 2 }) })] }) }));
+    return (jsx("div", { className: cn('grid gap-2', className), children: jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { id: 'date', type: 'button', variant: 'outline', className: cn('w-[300px] justify-start text-left font-normal', !date && 'text-muted-foreground'), children: [jsx(CalendarIcon, {}), date?.from ? (date.to ? (jsxs(Fragment, { children: [format(date.from, 'LLL dd, y'), " - ", format(date.to, 'LLL dd, y')] })) : (format(date.from, 'LLL dd, y'))) : (jsx("span", { children: "Pick a date" }))] }) }), jsx(PopoverContent, { className: 'w-auto p-0', align: 'start', children: jsx(Calendar, { initialFocus: true, mode: 'range', defaultMonth: date?.from, selected: date, onSelect: setDate, numberOfMonths: 2 }) })] }) }));
 }
 
 const Drawer = ({ shouldScaleBackground = true, ...props }) => (jsx(Drawer$1.Root, { shouldScaleBackground: shouldScaleBackground, ...props }));
@@ -2272,7 +2272,7 @@ function UseCalendar({ className, getDataFilter }) {
             getDataFilter(date.from, date.to);
         }
     };
-    return (jsx("div", { className: cn('grid gap-2', className), children: jsxs(Popover$1, { children: [jsx(PopoverTrigger$1, { asChild: true, children: jsxs(Button, { id: 'date', variant: 'outline', className: 'flex justify-center items-center px-4 py-2 cursor-pointer bg-primaryBack text-textFilter rounded-md', children: [jsx(CalendarDays, { color: '#0F172A', size: 16, className: 'mr-4' }), date?.to ? (jsxs(Fragment, { children: [format(date.from, 'dd/MM', { locale: ptBR }), " - ", format(date.to, 'dd/MM', { locale: ptBR })] })) : (jsx("span", { children: "Filtrar por Per\u00EDodo" }))] }) }), jsxs(PopoverContent$1, { className: 'w-auto p-0 testeCalendar flex flex-col justify-center bg-white  z-10 shadow-md text-black ', align: 'start', children: [jsx(Calendar, { mode: 'range', locale: ptBR, selected: date, onSelect: setDate, className: '  ' }), jsx(PopoverClose, { className: 'flex justify-center items-center p-4', children: jsx(Button, { className: 'w-[150px] bg-background-primary mt-8  px-4 py-2 text-white', onClick: submitDate, children: "Aplicar Filtro" }) })] })] }) }));
+    return (jsx("div", { className: cn('grid gap-2', className), children: jsxs(Popover$1, { children: [jsx(PopoverTrigger$1, { asChild: true, children: jsxs(Button, { type: 'button', id: 'date', variant: 'outline', className: 'flex justify-center items-center px-4 py-2 cursor-pointer bg-primaryBack text-textFilter rounded-md', children: [jsx(CalendarDays, { color: '#0F172A', size: 16, className: 'mr-4' }), date?.to ? (jsxs(Fragment, { children: [format(date.from, 'dd/MM', { locale: ptBR }), " - ", format(date.to, 'dd/MM', { locale: ptBR })] })) : (jsx("span", { children: "Filtrar por Per\u00EDodo" }))] }) }), jsxs(PopoverContent$1, { className: 'w-auto p-0 testeCalendar flex flex-col justify-center bg-white  z-10 shadow-md text-black ', align: 'start', children: [jsx(Calendar, { mode: 'range', locale: ptBR, selected: date, onSelect: setDate, className: '  ' }), jsx(PopoverClose, { className: 'flex justify-center items-center p-4', children: jsx(Button, { type: 'button', className: 'w-[150px] bg-background-primary mt-8  px-4 py-2 text-white', onClick: submitDate, children: "Aplicar Filtro" }) })] })] }) }));
 }
 
 const formHelpText = (helpText) => {
@@ -2339,7 +2339,7 @@ const FormInputColor = ({ control, name, label, subLabel, helpText, placeholder,
             handleColorChange(rgbToHex(newRgb), onChange);
         }
     };
-    return (jsx(FormField, { control: control, name: name, render: ({ field, formState }) => (jsxs(FormItem, { className: className, children: [jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsx(FormControl, { children: jsx(Button, { variant: 'outline', className: cn('w-[240px] justify-start text-left font-normal', !field.value && 'text-zinc-500', className), disabled: disabled || formState.isSubmitting, children: jsxs("div", { className: 'w-full flex items-center gap-2', children: [field.value ? (jsx("div", { className: 'h-4 w-4 rounded !bg-center !bg-cover transition-all border', style: { backgroundColor: field.value } })) : (jsx(Paintbrush, { className: 'h-4 w-4' })), jsx("div", { className: 'truncate flex-1 text-sm', children: field.value ? field.value : placeholder || 'Selecione uma cor' })] }) }) }) }), jsx(PopoverContent, { className: cn('w-80', className), children: jsxs("div", { className: 'flex flex-col gap-4', children: [jsx("section", { className: '[&_.react-colorful]:w-auto', children: jsx(HexColorPicker, { color: field.value ?? DEFAULT_COLOR, onChange: (newColor) => handleColorChange(newColor, field.onChange) }) }), jsxs("div", { className: 'flex gap-2', children: [jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "Hex" }), jsx(Input, { value: currentColor, onChange: (e) => handleHexChange(e.target.value, field.onChange), maxLength: 7 })] }), jsxs("div", { className: 'flex gap-2', children: [jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "R" }), jsx(Input, { value: rgb.r, onChange: (e) => handleRgbChange('r', e.target.value, field.onChange), className: 'w-14' })] }), jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "G" }), jsx(Input, { value: rgb.g, onChange: (e) => handleRgbChange('g', e.target.value, field.onChange), className: 'w-14' })] }), jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "B" }), jsx(Input, { value: rgb.b, onChange: (e) => handleRgbChange('b', e.target.value, field.onChange), className: 'w-14' })] })] })] })] }) })] }), formMessage(FormMessage)] })) }));
+    return (jsx(FormField, { control: control, name: name, render: ({ field, formState }) => (jsxs(FormItem, { className: className, children: [jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsx(FormControl, { children: jsx(Button, { type: 'button', variant: 'outline', className: cn('w-[240px] justify-start text-left font-normal', !field.value && 'text-zinc-500', className), disabled: disabled || formState.isSubmitting, children: jsxs("div", { className: 'w-full flex items-center gap-2', children: [field.value ? (jsx("div", { className: 'h-4 w-4 rounded !bg-center !bg-cover transition-all border', style: { backgroundColor: field.value } })) : (jsx(Paintbrush, { className: 'h-4 w-4' })), jsx("div", { className: 'truncate flex-1 text-sm', children: field.value ? field.value : placeholder || 'Selecione uma cor' })] }) }) }) }), jsx(PopoverContent, { className: cn('w-80', className), children: jsxs("div", { className: 'flex flex-col gap-4', children: [jsx("section", { className: '[&_.react-colorful]:w-auto', children: jsx(HexColorPicker, { color: field.value ?? DEFAULT_COLOR, onChange: (newColor) => handleColorChange(newColor, field.onChange) }) }), jsxs("div", { className: 'flex gap-2', children: [jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "Hex" }), jsx(Input, { value: currentColor, onChange: (e) => handleHexChange(e.target.value, field.onChange), maxLength: 7 })] }), jsxs("div", { className: 'flex gap-2', children: [jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "R" }), jsx(Input, { value: rgb.r, onChange: (e) => handleRgbChange('r', e.target.value, field.onChange), className: 'w-14' })] }), jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "G" }), jsx(Input, { value: rgb.g, onChange: (e) => handleRgbChange('g', e.target.value, field.onChange), className: 'w-14' })] }), jsxs("div", { className: 'flex flex-col gap-1', children: [jsx(Label, { children: "B" }), jsx(Input, { value: rgb.b, onChange: (e) => handleRgbChange('b', e.target.value, field.onChange), className: 'w-14' })] })] })] })] }) })] }), formMessage(FormMessage)] })) }));
 };
 
 const FormCombobox = ({ control, variant = 'outline', name, label, subLabel, helpText, placeholder, className, disabled, required, options, selectedOption, iconLeft, iconRight, addEmptyOption, canUnselect = false, closePopUpOnChange = true, runInternalSearch = true, disabledSearch = false, onChange, onSearch, footerAction, }) => {
@@ -2611,7 +2611,7 @@ const MultiSelect = React.forwardRef(({ control, name, label, subLabel, helpText
             field.onChange(allValues);
         }
     };
-    return (jsx(FormField, { control: control, name: name, render: ({ field }) => (jsxs(FormItem, { children: [jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, modal: modalPopover, children: [jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { ref: ref, ...props, onClick: handleTogglePopover, className: cn('flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-background hover:bg-background [&_svg]:size-3.5', className), children: field.value?.length > 0 ? (jsxs("div", { className: 'flex justify-between items-center w-full', children: [jsxs("div", { className: 'flex items-center', children: [jsx("div", { className: `grid grid-cols-${maxCount}`, children: field.value.slice(0, maxCount).map((option) => {
+    return (jsx(FormField, { control: control, name: name, render: ({ field }) => (jsxs(FormItem, { children: [jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, modal: modalPopover, children: [jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { ref: ref, ...props, onClick: handleTogglePopover, type: 'button', className: cn('flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-background hover:bg-background [&_svg]:size-3.5', className), children: field.value?.length > 0 ? (jsxs("div", { className: 'flex justify-between items-center w-full', children: [jsxs("div", { className: 'flex items-center', children: [jsx("div", { className: `grid grid-cols-${maxCount}`, children: field.value.slice(0, maxCount).map((option) => {
                                                         return (jsxs(Badge, { className: cn(multiSelectVariants({ variant })), onClick: (event) => {
                                                                 event.stopPropagation();
                                                                 toggleOption(option, field);
@@ -3208,7 +3208,7 @@ const LabelWithTitle = ({ title, value, value2, required, showCopyIcon = false,
 };
 
 const NotFound = () => {
-    return (jsx("div", { className: "flex flex-col items-center justify-center h-screen bg-[url('/imgs/404.png')] bg-cover bg-no-repeat bg-center", children: jsxs("div", { className: 'flex flex-col items-center justify-center gap-8 w-[424px]', children: [jsxs("div", { className: 'flex flex-col items-center w-full', children: [jsx("div", { className: 'text-5xl font-extrabold', children: "404" }), jsx("div", { className: 'text-3xl font-semibold', children: "P\u00E1gina Indispon\u00EDvel" })] }), jsx("div", { className: 'flex text-center text-xl font-semibold text-zinc-500', children: "A p\u00E1gina que voc\u00EA est\u00E1 tentando acessar se encontra indispon\u00EDvel no momento, tente novamente mais tarde" }), jsx("div", { className: 'flex justify-center w-full', children: jsxs(Button, { onClick: () => {
+    return (jsx("div", { className: "flex flex-col items-center justify-center h-screen bg-[url('/imgs/404.png')] bg-cover bg-no-repeat bg-center", children: jsxs("div", { className: 'flex flex-col items-center justify-center gap-8 w-[424px]', children: [jsxs("div", { className: 'flex flex-col items-center w-full', children: [jsx("div", { className: 'text-5xl font-extrabold', children: "404" }), jsx("div", { className: 'text-3xl font-semibold', children: "P\u00E1gina Indispon\u00EDvel" })] }), jsx("div", { className: 'flex text-center text-xl font-semibold text-zinc-500', children: "A p\u00E1gina que voc\u00EA est\u00E1 tentando acessar se encontra indispon\u00EDvel no momento, tente novamente mais tarde" }), jsx("div", { className: 'flex justify-center w-full', children: jsxs(Button, { type: 'button', onClick: () => {
                             window.location.href = '/';
                         }, className: '[&_svg]:size-5', children: [jsx(BarChart2, {}), "Voltar Para Inicial"] }) })] }) }));
 };
@@ -3338,7 +3338,7 @@ function DataTableExport({ exportData, totalRows }) {
         if (!exportData)
             return null;
         if (exportData.type === 'xlsx') {
-            return (jsx(Button, { variant: 'secondary', onClick: exportXlSX, children: "Exportar" }));
+            return (jsx(Button, { type: 'button', variant: 'secondary', onClick: exportXlSX, children: "Exportar" }));
         }
         if (exportData.type === 'dialog') {
             const onSubmit = async (_values) => {
@@ -3355,7 +3355,7 @@ function DataTableExport({ exportData, totalRows }) {
                     variant: 'destructive',
                 });
             };
-            return (jsx(Form, { ...form, onSubmit: handleSubmit(onSubmit, onError), children: jsxs(Dialog, { children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { variant: 'secondary', children: "Exportar" }) }), jsxs(DialogContent, { hideClose: true, className: 'fixed p-6 rounded-lg w-[451px]', children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Exportar" }), jsx(DialogDescription, {})] }), jsxs("div", { className: 'flex flex-col gap-6', children: [jsx(FormRadioGroup, { control: control, name: 'model', label: 'Selecione o modelo de visualiza\u00E7\u00E3o', options: [
+            return (jsx(Form, { ...form, onSubmit: handleSubmit(onSubmit, onError), children: jsxs(Dialog, { children: [jsx(DialogTrigger, { asChild: true, children: jsx(Button, { type: 'button', variant: 'secondary', children: "Exportar" }) }), jsxs(DialogContent, { hideClose: true, className: 'fixed p-6 rounded-lg w-[451px]', children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Exportar" }), jsx(DialogDescription, {})] }), jsxs("div", { className: 'flex flex-col gap-6', children: [jsx(FormRadioGroup, { control: control, name: 'model', label: 'Selecione o modelo de visualiza\u00E7\u00E3o', options: [
                                                 { value: '0', label: 'Resumido' },
                                                 { value: '1', label: 'Detalhado' },
                                             ], className: 'text-sm font-normal', classNameOptions: 'flex flex-col gap-4 mt-4 text-sm font-normal' }), jsx(FormRadioGroup, { control: control, name: 'format', label: 'Selecione o formato desejado para exporta\u00E7\u00E3o', options: [
@@ -3405,7 +3405,7 @@ function DataTableFooter({ isLoading, totalRows, totalPages, currentPage, hidePa
 
 function DataTableHeader({ table, canActionsRow, enableMultiRowSelection }) {
     const headerGroups = table.getHeaderGroups();
-    return (jsx(TableHeader, { children: headerGroups.map((headerGroup) => (jsxs(TableRow, { className: 'bg-background dark:bg-datatable-accent rounded-t-md sticky top-0 z-10', children: [enableMultiRowSelection && (jsx(TableHead, { className: 'h-[65px] w-6', children: jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value) }) })), headerGroup.headers.map((header) => (jsx(TableHead, { className: cn('h-[65px] whitespace-nowrap', header.column.id === 'id' ? 'sticky left-0 z-20' : '', header.column.columnDef.enableSorting ? 'pl-2' : ''), children: header.column.columnDef.enableSorting ? (jsxs(Button, { variant: 'ghost', onClick: () => header.column.toggleSorting(header.column.getIsSorted() === 'asc'), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() === 'asc' ? (jsx(MoveUp, { className: 'ml-2 h-4 w-4' })) : header.column.getIsSorted() === 'desc' ? (jsx(MoveDown, { className: 'ml-2 h-4 w-4' })) : (jsx(ArrowUpDown, { className: 'ml-2 h-4 w-4' }))] })) : (flexRender(header.column.columnDef.header, header.getContext())) }, header.id))), canActionsRow && jsx(TableHead, {})] }, headerGroup.id))) }));
+    return (jsx(TableHeader, { children: headerGroups.map((headerGroup) => (jsxs(TableRow, { className: 'bg-background dark:bg-datatable-accent rounded-t-md sticky top-0 z-10', children: [enableMultiRowSelection && (jsx(TableHead, { className: 'h-[65px] w-6', children: jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value) }) })), headerGroup.headers.map((header) => (jsx(TableHead, { className: cn('h-[65px] whitespace-nowrap', header.column.id === 'id' ? 'sticky left-0 z-20' : '', header.column.columnDef.enableSorting && 'px-2'), children: header.column.columnDef.enableSorting ? (jsxs(Button, { type: 'button', variant: 'ghost', onClick: () => header.column.toggleSorting(header.column.getIsSorted() === 'asc'), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() === 'asc' ? (jsx(MoveUp, { className: 'ml-2 h-4 w-4' })) : header.column.getIsSorted() === 'desc' ? (jsx(MoveDown, { className: 'ml-2 h-4 w-4' })) : (jsx(ArrowUpDown, { className: 'ml-2 h-4 w-4' }))] })) : (flexRender(header.column.columnDef.header, header.getContext())) }, header.id))), canActionsRow && jsx(TableHead, {})] }, headerGroup.id))) }));
 }
 
 function DataTableRows({ table, isLoading, columns, actionsRow, textNoRecords, enableMultiRowSelection }) {
@@ -3418,7 +3418,7 @@ function DataTableRows({ table, isLoading, columns, actionsRow, textNoRecords, e
         return rows;
     };
     const renderRows = () => {
-        return rows.map((row) => (jsxs(TableRow, { "data-state": row.getIsSelected() && 'selected', className: 'group', children: [enableMultiRowSelection && (jsx(TableCell, { className: 'py-4', children: jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": 'Select row' }) })), row.getVisibleCells().map((cell) => (jsx(TableCell, { className: 'py-4', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), actionsRow && (jsx(TableCell, { className: 'opacity-0 group-hover:opacity-100 hover:opacity-100 relative overflow-visible w-[0px]', children: jsx("div", { className: 'absolute transition-colors group-hover:bg-datatable-accent overflow-visible right-5 -translate-y-1/2 flex space-x-4', children: actionsRow.map((action, index) => (jsxs(Button, { variant: action.variant || 'default', className: cn('bg-datatable-accent', action.className?.(row.original) || ''), onClick: () => action.onClick?.(row.original), disabled: action.disabled?.(row.original) || false, children: [action.icon, action.label] }, `action-row-${index}`))) }) }, `buttons-${row.id}`))] }, row.id)));
+        return rows.map((row) => (jsxs(TableRow, { "data-state": row.getIsSelected() && 'selected', className: 'group', children: [enableMultiRowSelection && (jsx(TableCell, { className: 'py-4', children: jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": 'Select row' }) })), row.getVisibleCells().map((cell) => (jsx(TableCell, { className: 'py-4', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), actionsRow && (jsx(TableCell, { className: 'opacity-0 group-hover:opacity-100 hover:opacity-100 relative overflow-visible w-[0px]', children: jsx("div", { className: 'absolute transition-colors group-hover:bg-datatable-accent overflow-visible right-5 -translate-y-1/2 flex space-x-4', children: actionsRow.map((action, index) => (jsxs(Button, { type: 'button', variant: action.variant || 'default', className: cn('bg-datatable-accent', action.className?.(row.original) || ''), onClick: () => action.onClick?.(row.original), disabled: action.disabled?.(row.original) || false, children: [action.icon, action.label] }, `action-row-${index}`))) }) }, `buttons-${row.id}`))] }, row.id)));
     };
     const renderEmptyRows = () => {
         const colSpan = columns.length + (actionsRow ? 1 : 0);
@@ -3513,7 +3513,7 @@ function DataTable({ columns, data, className, title, rowsPage, actions, actions
     };
     return (jsxs("div", { className: 'flex flex-col flex-1', children: [(!hideFilterField || filtersActions || customFilters || actions) && (jsxs("div", { className: 'flex items-end justify-between mb-4 space-x-6', children: [jsxs("div", { className: 'flex items-center gap-x-4', children: [!hideFilterField && (jsxs("div", { className: 'flex bg-background items-center border border-slate-300 rounded-sm w-[350px] overflow-hidden focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 group', children: [jsx("div", { className: 'pl-3.5 transform transition-transform duration-300 group-hover:-translate-x-1', children: jsx(Search, { size: 18, className: 'w-5 h-5 stroke-zinc-500 dark:stroke-default' }) }), jsx("input", { placeholder: 'Buscar', onKeyUp: (event) => {
                                             handleSearchChange(event);
-                                        }, className: 'w-full bg-background text-default border-none focus:ring-0 focus:outline-none px-3 py-2 transform transition-transform duration-300 group-hover:-translate-x-1 ' })] })), filtersActions && (jsxs(Sheet, { open: filtersActions.filterOpen, onOpenChange: filtersActions.setFilterOpen, children: [jsx(SheetTrigger, { asChild: true, children: jsxs(Button, { variant: 'secondary', type: 'button', children: [jsx(Filter, { size: 20, className: 'h-4 w-4' }), " Filtros", filtersActions.countFilters > 0 && (jsx("div", { className: 'bg-background-primary text-white rounded-full h-5 w-5 flex items-center justify-center text-sm placeholder:text-muted-foreground', children: filtersActions.countFilters }))] }) }), jsxs(SheetContent, { children: [jsxs(SheetHeader, { children: [jsx(SheetTitle, { children: "Filtros" }), jsx(SheetDescription, {})] }), jsx("div", { className: 'flex flex-col py-6', children: filtersActions.fields })] })] }))] }), customFilters, jsx("div", { className: 'flex space-x-4 content-end', children: actions?.map((action, index) => (jsx("div", { children: jsxs(Button, { onClick: () => action.onClick?.(selectedIds, selectedRows), className: cn(action.className, action.hideUnselectedRows && selectedRows.length === 0 ? 'hidden' : ''), variant: action.variant || 'default', disabled: action.disabled, children: [jsx("div", { className: '[&_svg]:size-5', children: action.icon }), action.label] }) }, `action-table-${index}`))) })] })), jsxs("div", { className: `flex-1 flex flex-col rounded-md border ${className}`, children: [jsx("div", { className: 'flex items-center justify-between', children: title && jsx("div", { className: 'text-h4 p-4', children: title }) }), jsx("div", { id: 'data-table', ref: tableContainerRef, style: fixedHeight ? { height: fixedHeight } : { height: tableHeight }, className: 'flex flex-col justify-between rounded-md overflow-x-auto overflow-y-auto', children: jsxs(Table, { children: [jsx(DataTableHeader, { table: table, canActionsRow: actionsRow && actionsRow.length > 0, enableMultiRowSelection: enableMultiRowSelection }), jsx(TableBody, { className: 'bg-background', children: jsx(DataTableRows, { table: table, columns: columns, isLoading: isLoading, actionsRow: actionsRow, textNoRecords: textNoRecords, enableMultiRowSelection: enableMultiRowSelection }) })] }) })] }), jsx(DataTableFooter, { hidePagination: hidePagination, disablePagination: disablePagination, isLoading: isLoading, totalRows: totalRows, totalPages: totalPages, currentPage: currentPage, pagination: pagination, handlePageSize: handlePageSize, handlePage: handlePage, previousPage: { action: () => table.previousPage(), disabled: !table.getCanPreviousPage() }, nextPage: { action: () => table.nextPage(), disabled: !table.getCanNextPage() }, exportData: exportData })] }));
+                                        }, className: 'w-full bg-background text-default border-none focus:ring-0 focus:outline-none px-3 py-2 transform transition-transform duration-300 group-hover:-translate-x-1 ' })] })), filtersActions && (jsxs(Sheet, { open: filtersActions.filterOpen, onOpenChange: filtersActions.setFilterOpen, children: [jsx(SheetTrigger, { asChild: true, children: jsxs(Button, { variant: 'secondary', type: 'button', children: [jsx(Filter, { size: 20, className: 'h-4 w-4' }), " Filtros", filtersActions.countFilters > 0 && (jsx("div", { className: 'bg-background-primary text-white rounded-full h-5 w-5 flex items-center justify-center text-sm placeholder:text-muted-foreground', children: filtersActions.countFilters }))] }) }), jsxs(SheetContent, { children: [jsxs(SheetHeader, { children: [jsx(SheetTitle, { children: "Filtros" }), jsx(SheetDescription, {})] }), jsx("div", { className: 'flex flex-col py-6', children: filtersActions.fields })] })] }))] }), customFilters, jsx("div", { className: 'flex space-x-4 content-end', children: actions?.map((action, index) => (jsx("div", { children: jsxs(Button, { type: 'button', onClick: () => action.onClick?.(selectedIds, selectedRows), className: cn(action.className, action.hideUnselectedRows && selectedRows.length === 0 ? 'hidden' : ''), variant: action.variant || 'default', disabled: action.disabled, children: [jsx("div", { className: '[&_svg]:size-5', children: action.icon }), action.label] }) }, `action-table-${index}`))) })] })), jsxs("div", { className: `flex-1 flex flex-col rounded-md border ${className}`, children: [jsx("div", { className: 'flex items-center justify-between', children: title && jsx("div", { className: 'text-h4 p-4', children: title }) }), jsx("div", { id: 'data-table', ref: tableContainerRef, style: fixedHeight ? { height: fixedHeight } : { height: tableHeight }, className: 'flex flex-col justify-between rounded-md overflow-x-auto overflow-y-auto', children: jsxs(Table, { children: [jsx(DataTableHeader, { table: table, canActionsRow: actionsRow && actionsRow.length > 0, enableMultiRowSelection: enableMultiRowSelection }), jsx(TableBody, { className: 'bg-background', children: jsx(DataTableRows, { table: table, columns: columns, isLoading: isLoading, actionsRow: actionsRow, textNoRecords: textNoRecords, enableMultiRowSelection: enableMultiRowSelection }) })] }) })] }), jsx(DataTableFooter, { hidePagination: hidePagination, disablePagination: disablePagination, isLoading: isLoading, totalRows: totalRows, totalPages: totalPages, currentPage: currentPage, pagination: pagination, handlePageSize: handlePageSize, handlePage: handlePage, previousPage: { action: () => table.previousPage(), disabled: !table.getCanPreviousPage() }, nextPage: { action: () => table.nextPage(), disabled: !table.getCanNextPage() }, exportData: exportData })] }));
 }
 
 function isUUIDv4(str) {