eai-frontend-components 2.0.22 → 2.0.24

package/dist/index.js

@@ -406,15 +406,15 @@ const ChartStyle = ({ id, config }) => {
         // biome-ignore lint/security/noDangerouslySetInnerHtml: Chart theme CSS generation requires dynamic CSS injection
         dangerouslySetInnerHTML: {
             __html: Object.entries(THEMES)
-                .map(([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
                 const color = itemConfig.theme?.[theme] || itemConfig.color;
                 return color ? `  --color-${key}: ${color};` : null;
             })
-                .join('\n')}
-}
+                .join('\n')}
+}
 `)
                 .join('\n'),
         } }));
@@ -2793,7 +2793,7 @@ const FormInputColor = ({ control, name, label, subLabel, helpText, placeholder,
     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 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, }) => {
     const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
     const [open, setOpen] = React.useState(false);
     const [loading, setLoading] = React.useState(false);
@@ -2862,7 +2862,7 @@ const FormCombobox = ({ control, name, label, subLabel, helpText, placeholder, c
     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)] })) }));
+                    }, 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: variant, 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'];