eai-frontend-components 2.0.18 → 2.0.19

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" | "secondary" | "surface" | "destructive" | "outline" | "green" | "red" | "gray" | "blue" | "orange" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "surface" | "outline" | "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> {
 }
@@ -105,7 +105,7 @@ declare const BreadcrumbEllipsis: {
 };
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -808,7 +808,7 @@ interface Props$8 {
 declare const FormInputMask: React.FC<Props$8>;
 
 declare const multiSelectVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "inverted" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "inverted" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface MultiSelectOption {
     value: string;
@@ -1536,4 +1536,4 @@ declare const addDaysToToday: (days: number) => Date;
 declare function isUUIDv4(str: string): boolean;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_THEME_DATA, DataTable, DataTableExport, DataTableFooter, DataTableHeader, DataTableRows, DatePickerWithRange as DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormCombobox, FormControl, FormDataRange, FormDescription, FormField, FormInput, FormInputCheckbox, FormInputColor, FormInputCpfCnpj, FormInputCurrency, FormInputDate, FormInputDecimal, FormInputFile, FormInputGhost, FormInputMask, FormInputPassWord, FormInputPercent, FormInputPhone, FormInputSwitch, FormInputText, FormItem, FormLabel, FormMessage, FormRadioGroup, FormSelect, FormTextarea, Header, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, LabelWithTitle, ModuleSwitcher, MultiSelect, NavFooter, NavMain, NavSubmenuCollapsible, NavSubmenuDropdown, NavUser, NotFound, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarItem, SidebarItemTwoLines, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSubmenuType, SidebarTrigger, Skeleton, Slider, StepNewForm, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toast$1 as Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UseCalendar, aYearAgo, addDaysToToday, badgeVariants, buttonVariants, cn, convertBytesToMB, convertDaysToMonth, convertGbToMb, convertMbToGb, convertMonthToDays, convertSecondsToMinutes, formHelpText, formLabel, formLabelAndSubLabel, formMessage, formatCpfCnpj, formatDate, formatDateCalendar, formatDateTime, formatDecimal, formatNumber, formatPhone, getFirstDayOf90DaysAgo, getFirstDayOfCurrentMonth, getTailwindColorShades, invertDate, isUUIDv4, modifyCpfCnpj, modifyPhone, replaceThemeTailwindColors, roundNumber, stringDateToDate, stringToDate, stringToNumber, toast, useFormField, useSidebar, useTheme, useToast };
-export type { ActionRow, ActionTable, ButtonProps, CalendarProps, CarouselApi, ComboboxOption, DataTableProps, ExportDataTable, FiltersActions, Module, MultiSelectOption, OriginalDataTableData, PropsStepNewForm, RadioOption, SelectOption, SidebarPage, TailwindColorName };
+export type { ActionRow, ActionTable, ButtonProps, CalendarProps, CarouselApi, ChartConfig, ComboboxOption, DataTableProps, ExportDataTable, FiltersActions, Module, MultiSelectOption, OriginalDataTableData, PropsStepNewForm, RadioOption, SelectOption, SidebarPage, TailwindColorName };

package/dist/index.esm.js

@@ -342,22 +342,21 @@ const CarouselNext = React.forwardRef(({ className, variant = "outline", size =
 });
 CarouselNext.displayName = "CarouselNext";
 
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" };
+const THEMES = { light: '', dark: '.dark' };
 const ChartContext = React.createContext(null);
 function useChart() {
     const context = React.useContext(ChartContext);
     if (!context) {
-        throw new Error("useChart must be used within a <ChartContainer />");
+        throw new Error('useChart must be used within a <ChartContainer />');
     }
     return context;
 }
 const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
     const uniqueId = React.useId();
-    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
     return (jsx(ChartContext.Provider, { value: { config }, children: jsxs("div", { "data-chart": chartId, ref: ref, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className), ...props, children: [jsx(ChartStyle, { id: chartId, config: config }), jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
 });
-ChartContainer.displayName = "Chart";
+ChartContainer.displayName = 'Chart';
 const ChartStyle = ({ id, config }) => {
     const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
     if (!colorConfig.length) {
@@ -371,103 +370,83 @@ const ChartStyle = ({ id, config }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
-                const color = itemConfig.theme?.[theme] ||
-                    itemConfig.color;
+                const color = itemConfig.theme?.[theme] || itemConfig.color;
                 return color ? `  --color-${key}: ${color};` : null;
             })
-                .join("\n")}
+                .join('\n')}
 }
 `)
-                .join("\n"),
+                .join('\n'),
         } }));
 };
 const ChartTooltip = RechartsPrimitive.Tooltip;
-const ChartTooltipContent = React.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
+const ChartTooltipContent = React.forwardRef(({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
     const { config } = useChart();
     const tooltipLabel = React.useMemo(() => {
         if (hideLabel || !payload?.length) {
             return null;
         }
         const [item] = payload;
-        const key = `${labelKey || item.dataKey || item.name || "value"}`;
+        const key = `${labelKey || item.dataKey || item.name || 'value'}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        const value = !labelKey && typeof label === "string"
-            ? config[label]?.label || label
-            : itemConfig?.label;
+        const value = !labelKey && typeof label === 'string' ? config[label]?.label || label : itemConfig?.label;
         if (labelFormatter) {
-            return (jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+            return jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, payload) });
         }
         if (!value) {
             return null;
         }
-        return jsx("div", { className: cn("font-medium", labelClassName), children: value });
-    }, [
-        label,
-        labelFormatter,
-        payload,
-        hideLabel,
-        labelClassName,
-        config,
-        labelKey,
-    ]);
+        return jsx("div", { className: cn('font-medium', labelClassName), children: value });
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
     if (!active || !payload?.length) {
         return null;
     }
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-    return (jsxs("div", { ref: ref, className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
-                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+    return (jsxs("div", { ref: ref, className: cn('grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl', className), children: [!nestLabel ? tooltipLabel : null, jsx("div", { className: 'grid gap-1.5', children: payload.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || 'value'}`;
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
                     const indicatorColor = color || item.payload.fill || item.color;
-                    return (jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-                                        "h-2.5 w-2.5": indicator === "dot",
-                                        "w-1": indicator === "line",
-                                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                                        "my-0.5": nestLabel && indicator === "dashed",
+                    return (jsx("div", { className: cn('flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn('shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', {
+                                        'h-2.5 w-2.5': indicator === 'dot',
+                                        'w-1': indicator === 'line',
+                                        'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                                        'my-0.5': nestLabel && indicator === 'dashed',
                                     }), style: {
-                                        "--color-bg": indicatorColor,
-                                        "--color-border": indicatorColor,
-                                    } }))), jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor,
+                                    } }))), jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [jsxs("div", { className: 'grid gap-1.5', children: [nestLabel ? tooltipLabel : null, jsx("span", { className: 'text-muted-foreground', children: itemConfig?.label || item.name })] }), item.value && (jsx("span", { className: 'font-mono font-medium tabular-nums text-foreground', children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
                 }) })] }));
 });
-ChartTooltipContent.displayName = "ChartTooltip";
+ChartTooltipContent.displayName = 'ChartTooltip';
 const ChartLegend = RechartsPrimitive.Legend;
-const ChartLegendContent = React.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+const ChartLegendContent = React.forwardRef(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
     const { config } = useChart();
     if (!payload?.length) {
         return null;
     }
-    return (jsx("div", { ref: ref, className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload.map((item) => {
-            const key = `${nameKey || item.dataKey || "value"}`;
+    return (jsx("div", { ref: ref, className: cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className), children: payload.map((item) => {
+            const key = `${nameKey || item.dataKey || 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (jsx(itemConfig.icon, {})) : (jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+            return (jsxs("div", { className: cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'), children: [itemConfig?.icon && !hideIcon ? (jsx(itemConfig.icon, {})) : (jsx("div", { className: 'h-2 w-2 shrink-0 rounded-[2px]', style: {
                             backgroundColor: item.color,
                         } })), itemConfig?.label] }, item.value));
         }) }));
 });
-ChartLegendContent.displayName = "ChartLegend";
+ChartLegendContent.displayName = 'ChartLegend';
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(config, payload, key) {
-    if (typeof payload !== "object" || payload === null) {
+    if (typeof payload !== 'object' || payload === null) {
         return undefined;
     }
-    const payloadPayload = "payload" in payload &&
-        typeof payload.payload === "object" &&
-        payload.payload !== null
-        ? payload.payload
-        : undefined;
+    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;
     let configLabelKey = key;
-    if (key in payload &&
-        typeof payload[key] === "string") {
+    if (key in payload && typeof payload[key] === 'string') {
         configLabelKey = payload[key];
     }
-    else if (payloadPayload &&
-        key in payloadPayload &&
-        typeof payloadPayload[key] === "string") {
+    else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === 'string') {
         configLabelKey = payloadPayload[key];
     }
-    return configLabelKey in config
-        ? config[configLabelKey]
-        : config[key];
+    return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
 const Checkbox = React.forwardRef(({ className, value, ...props }, ref) => (jsx(CheckboxPrimitive.Root, { ref: ref, checked: !!value, className: cn('peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-primary data-[state=checked]:text-primary-foreground', className), ...props, children: jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: jsx(Check, { className: 'h-4 w-4' }) }) })));