eai-frontend-components 2.0.17 → 2.0.19

package/dist/index.js

@@ -37,6 +37,7 @@ var SliderPrimitive = require('@radix-ui/react-slider');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var ToastPrimitives = require('@radix-ui/react-toast');
+var reactColorful = require('react-colorful');
 var reactTable = require('@tanstack/react-table');
 var zod$1 = require('@hookform/resolvers/zod');
 var zod = require('zod');
@@ -381,22 +382,21 @@ const CarouselNext = React__namespace.forwardRef(({ className, variant = "outlin
 });
 CarouselNext.displayName = "CarouselNext";
 
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" };
+const THEMES = { light: '', dark: '.dark' };
 const ChartContext = React__namespace.createContext(null);
 function useChart() {
     const context = React__namespace.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__namespace.forwardRef(({ id, className, children, config, ...props }, ref) => {
     const uniqueId = React__namespace.useId();
-    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
     return (jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: jsxRuntime.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: [jsxRuntime.jsx(ChartStyle, { id: chartId, config: config }), jsxRuntime.jsx(RechartsPrimitive__namespace.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) {
@@ -410,103 +410,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__namespace.Tooltip;
-const ChartTooltipContent = React__namespace.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
+const ChartTooltipContent = React__namespace.forwardRef(({ active, payload, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
     const { config } = useChart();
     const tooltipLabel = React__namespace.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 (jsxRuntime.jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+            return jsxRuntime.jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, payload) });
         }
         if (!value) {
             return null;
         }
-        return jsxRuntime.jsx("div", { className: cn("font-medium", labelClassName), children: value });
-    }, [
-        label,
-        labelFormatter,
-        payload,
-        hideLabel,
-        labelClassName,
-        config,
-        labelKey,
-    ]);
+        return jsxRuntime.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 (jsxRuntime.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, jsxRuntime.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 (jsxRuntime.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, jsxRuntime.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 (jsxRuntime.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)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [itemConfig?.icon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (!hideIndicator && (jsxRuntime.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 (jsxRuntime.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)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [itemConfig?.icon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (!hideIndicator && (jsxRuntime.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,
-                                    } }))), jsxRuntime.jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [jsxRuntime.jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, jsxRuntime.jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (jsxRuntime.jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                                        '--color-bg': indicatorColor,
+                                        '--color-border': indicatorColor,
+                                    } }))), jsxRuntime.jsxs("div", { className: cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'), children: [jsxRuntime.jsxs("div", { className: 'grid gap-1.5', children: [nestLabel ? tooltipLabel : null, jsxRuntime.jsx("span", { className: 'text-muted-foreground', children: itemConfig?.label || item.name })] }), item.value && (jsxRuntime.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__namespace.Legend;
-const ChartLegendContent = React__namespace.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+const ChartLegendContent = React__namespace.forwardRef(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
     const { config } = useChart();
     if (!payload?.length) {
         return null;
     }
-    return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (jsxRuntime.jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+            return (jsxRuntime.jsxs("div", { className: cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'), children: [itemConfig?.icon && !hideIcon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (jsxRuntime.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__namespace.forwardRef(({ className, value, ...props }, ref) => (jsxRuntime.jsx(CheckboxPrimitive__namespace.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: jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: cn('flex items-center justify-center text-current'), children: jsxRuntime.jsx(lucideReact.Check, { className: 'h-4 w-4' }) }) })));
@@ -2557,6 +2537,130 @@ const formMessage = (FormMessage) => {
     return jsxRuntime.jsx(FormMessage, { className: 'text-red-600 mt-1' });
 };
 
+const FormInputCheckbox = ({ control, name, label, helpText, className, disabled, onCheckedChange }) => {
+    const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
+    return (jsxRuntime.jsx(FormField, { control: control, name: name, render: ({ field }) => (jsxRuntime.jsxs(FormItem, { className: className, children: [jsxRuntime.jsxs("div", { className: 'flex items-center gap-2', children: [jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsx(Checkbox, { value: field.value, className: `${field.value
+                                    ? 'bg-purple-700 border border-purple-900 text-white rounded-[3px]'
+                                    : 'bg-white border border-black text-black'}`, onCheckedChange: (checked) => {
+                                    field?.onChange?.(checked);
+                                    onCheckedChange?.(checked);
+                                }, disabled: disabled }) }), jsxRuntime.jsxs("div", { className: 'flex h-full items-center space-x-1.5', children: [label && formLabel(FormLabel, label), helpText && formHelpText(helpText)] })] }), formMessage(FormMessage)] })) }));
+};
+
+const rgbToHex = ({ r, g, b }) => {
+    const toHex = (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0').toUpperCase();
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: Number.parseInt(result[1], 16),
+            g: Number.parseInt(result[2], 16),
+            b: Number.parseInt(result[3], 16),
+        }
+        : null;
+};
+
+const FormInputColor = ({ control, name, label, subLabel, helpText, placeholder, className, disabled, required }) => {
+    const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
+    const DEFAULT_COLOR = '#000000';
+    const [currentColor, setCurrentColor] = React.useState(DEFAULT_COLOR);
+    const rgb = hexToRgb(currentColor) || { r: 0, g: 0, b: 0 };
+    const handleColorChange = (newColor, onChange) => {
+        onChange?.(newColor);
+        setCurrentColor(newColor);
+    };
+    const handleHexChange = (hex, onChange) => {
+        if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
+            handleColorChange(hex, onChange);
+        }
+        else {
+            setCurrentColor(hex);
+        }
+    };
+    const handleRgbChange = (key, value, onChange) => {
+        const numValue = Number.parseInt(value);
+        if (!Number.isNaN(numValue) && numValue >= 0 && numValue <= 255) {
+            const newRgb = { ...rgb, [key]: numValue };
+            handleColorChange(rgbToHex(newRgb), onChange);
+        }
+    };
+    return (jsxRuntime.jsx(FormField, { control: control, name: name, render: ({ field, formState }) => (jsxRuntime.jsxs(FormItem, { className: className, children: [jsxRuntime.jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxRuntime.jsxs(Popover, { children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(FormControl, { children: jsxRuntime.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: jsxRuntime.jsxs("div", { className: 'w-full flex items-center gap-2', children: [field.value ? (jsxRuntime.jsx("div", { className: 'h-4 w-4 rounded !bg-center !bg-cover transition-all border', style: { backgroundColor: field.value } })) : (jsxRuntime.jsx(lucideReact.Paintbrush, { className: 'h-4 w-4' })), jsxRuntime.jsx("div", { className: 'truncate flex-1 text-sm', children: field.value ? field.value : placeholder || 'Selecione uma cor' })] }) }) }) }), jsxRuntime.jsx(PopoverContent, { className: cn('w-80', className), children: jsxRuntime.jsxs("div", { className: 'flex flex-col gap-4', children: [jsxRuntime.jsx("section", { className: '[&_.react-colorful]:w-auto', children: jsxRuntime.jsx(reactColorful.HexColorPicker, { color: field.value ?? DEFAULT_COLOR, onChange: (newColor) => handleColorChange(newColor, field.onChange) }) }), jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "Hex" }), jsxRuntime.jsx(Input, { value: currentColor, onChange: (e) => handleHexChange(e.target.value, field.onChange), maxLength: 7 })] }), jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "R" }), jsxRuntime.jsx(Input, { value: rgb.r, onChange: (e) => handleRgbChange('r', e.target.value, field.onChange), className: 'w-14' })] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "G" }), jsxRuntime.jsx(Input, { value: rgb.g, onChange: (e) => handleRgbChange('g', e.target.value, field.onChange), className: 'w-14' })] }), jsxRuntime.jsxs("div", { className: 'flex flex-col gap-1', children: [jsxRuntime.jsx(Label, { children: "B" }), jsxRuntime.jsx(Input, { value: rgb.b, onChange: (e) => handleRgbChange('b', e.target.value, field.onChange), className: 'w-14' })] })] })] })] }) })] }), formMessage(FormMessage)] })) }));
+};
+
+const FormCombobox = ({ control, name, label, subLabel, helpText, placeholder, className, disabled, required, options, selectedOption, iconLeft, iconRight, addEmptyOption, canUnselect = false, closePopUpOnChange = true, runInternalSearch = true, disabledSearch = false, onChange, onSearch, footerAction, }) => {
+    const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
+    const [open, setOpen] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const [searchString, setSearchString] = React.useState('');
+    const DEFAULT_PLACEHOLDER = 'Digite para buscar...';
+    React.useEffect(() => {
+        setLoading(false);
+    }, [options]);
+    const getOptions = () => {
+        if (options.length === 0) {
+            return [];
+        }
+        let filteredOptions = options;
+        if (runInternalSearch) {
+            filteredOptions = options.filter((option) => {
+                const title = option.title
+                    .toLowerCase()
+                    .normalize('NFD')
+                    .replace(/[^a-z0-9\s]/gi, '');
+                const subTitle = option.subTitle
+                    ?.toLowerCase()
+                    .normalize('NFD')
+                    .replace(/[^a-z0-9\s]/gi, '');
+                const search = searchString
+                    .toLowerCase()
+                    .normalize('NFD')
+                    .replace(/[^a-z0-9\s]/gi, '');
+                return title.includes(search) || subTitle?.includes(search);
+            });
+        }
+        if (addEmptyOption) {
+            filteredOptions.unshift({ value: undefined, title: '--Selecione--', subTitle: '' });
+        }
+        return filteredOptions;
+    };
+    const getSelectedOption = (value) => {
+        const option = options.find((option) => option.value === value);
+        if (option) {
+            return option;
+        }
+        return selectedOption;
+    };
+    const handleSelect = (value, field) => {
+        const option = value ? getSelectedOption(value) : undefined;
+        if (canUnselect) {
+            field.onChange(field.value === value ? undefined : value);
+        }
+        else {
+            field.onChange(value);
+        }
+        if (onChange) {
+            onChange(option);
+        }
+        if (closePopUpOnChange) {
+            setOpen(false);
+        }
+    };
+    const handleKeyUp = (event) => {
+        const searchString = event.target.value;
+        if (onSearch) {
+            setLoading(true);
+            onSearch(searchString);
+        }
+        setSearchString(searchString);
+    };
+    return (jsxRuntime.jsx(FormField, { control: control, name: name, render: ({ field, formState }) => (jsxRuntime.jsxs(FormItem, { className: className, children: [jsxRuntime.jsxs("div", { className: 'flex items-center space-x-1.5', children: [label && formLabelAndSubLabel(FormLabel, label, subLabel, required), helpText && formHelpText(helpText)] }), jsxRuntime.jsxs(Popover, { open: open, onOpenChange: (open) => {
+                        if (!disabled)
+                            setOpen(open);
+                    }, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsx("div", { className: cn(`rounded-sm outline-none ${open ? 'ring-2 ring-ring ring-offset-2' : 'ring-0'}`, className), children: jsxRuntime.jsxs(Button, { type: 'button', variant: 'outline', role: 'combobox', "aria-expanded": open, className: cn('justify-between disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50', formState.errors[name] ? 'border-red-600' : '', className), disabled: disabled || formState.isSubmitting, children: [iconLeft, jsxRuntime.jsx("div", { className: 'grid flex-1 text-left text-sm leading-tight', children: jsxRuntime.jsx("span", { className: 'truncate font-normal', children: getSelectedOption(field.value) ? (jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [getSelectedOption(field.value)?.icon, getSelectedOption(field.value)?.title] })) : (jsxRuntime.jsx("span", { className: 'text-zinc-500', children: placeholder ?? DEFAULT_PLACEHOLDER })) }) }), iconRight ?? jsxRuntime.jsx(lucideReact.ChevronsUpDown, { size: 20, className: 'stroke-zinc-500' })] }) }) }) }), jsxRuntime.jsxs(PopoverContent, { className: cn('p-0', className, 'w-[--radix-popover-trigger-width]'), children: [jsxRuntime.jsxs(Command, { shouldFilter: false, children: [!disabledSearch && jsxRuntime.jsx(CommandInput, { placeholder: placeholder ?? DEFAULT_PLACEHOLDER, onKeyUp: handleKeyUp }), jsxRuntime.jsxs(CommandList, { children: [jsxRuntime.jsx(CommandEmpty, { className: 'flex flex-col justify-between items-center p-3 font-normal text-sm', children: loading ? (jsxRuntime.jsx(lucideReact.LoaderCircle, { size: 16, className: 'text-muted-foreground animate-spin mr-2' })) : getOptions()?.length === 0 && (searchString !== '' || disabledSearch) ? ('Nenhum resultado encontrado') : ('Utilize o campo de busca acima') }), options.length > 0 && (jsxRuntime.jsx(CommandGroup, { children: getOptions().map((option) => (jsxRuntime.jsxs(CommandItem, { value: option.value, className: 'group', onSelect: () => handleSelect(option.value, field), children: [jsxRuntime.jsxs("div", { className: cn('grid flex-1 text-left text-sm leading-tight', option.className), children: [jsxRuntime.jsxs("div", { className: 'flex gap-2', children: [option.icon, jsxRuntime.jsx("span", { className: 'truncate font-normal', children: option.title })] }), jsxRuntime.jsx("span", { className: 'truncate text-xs text-zinc-500', children: option.subTitle })] }), jsxRuntime.jsxs("div", { className: `ml-auto text-zinc-500 ${field.value === option.value ? 'opacity-100' : 'opacity-0'}`, children: [jsxRuntime.jsx(lucideReact.Check, { className: cn('flex', canUnselect && 'group-hover:hidden hover:hidden'), size: 16 }), jsxRuntime.jsx(lucideReact.X, { className: cn('hidden', canUnselect && 'group-hover:flex hover:flex'), size: 16 })] })] }, `key-opt-${option.value}`))) }))] })] }), footerAction && (jsxRuntime.jsx("div", { className: 'grid w-full p-1 border-t', children: jsxRuntime.jsxs(Button, { type: 'button', variant: 'ghost', className: 'h-8', onClick: () => footerAction.onClick(), children: [footerAction.icon, footerAction.label] }) }))] })] }), formMessage(FormMessage)] })) }));
+};
+
 const masks$1 = ['999.999.999-999', '99.999.999/9999-99'];
 const FormInputCpfCnpj = ({ control, name, label, subLabel, helpText, placeholder, className, disabled, required, onChange, onKeyUp, }) => {
     const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
@@ -3399,11 +3503,14 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.Form = Form;
+exports.FormCombobox = FormCombobox;
 exports.FormControl = FormControl;
 exports.FormDataRange = FormDataRange;
 exports.FormDescription = FormDescription;
 exports.FormField = FormField;
 exports.FormInput = FormInput;
+exports.FormInputCheckbox = FormInputCheckbox;
+exports.FormInputColor = FormInputColor;
 exports.FormInputCpfCnpj = FormInputCpfCnpj;
 exports.FormInputCurrency = FormInputCurrency;
 exports.FormInputDate = FormInputDate;