eai-frontend-components 2.0.5 → 2.0.6

package/src/components/ui/command.tsx

@@ -1,145 +0,0 @@
-import { cn } from "@/lib/utils"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-import * as React from "react"
-import { Dialog, DialogContent } from "./dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog, CommandEmpty,
-  CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut
-}
-

package/src/components/ui/context-menu.tsx

@@ -1,198 +0,0 @@
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ContextMenu = ContextMenuPrimitive.Root
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-
-const ContextMenuGroup = ContextMenuPrimitive.Group
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-
-const ContextMenuSub = ContextMenuPrimitive.Sub
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}

package/src/components/ui/custom/date-picker.tsx

@@ -1,97 +0,0 @@
-import { getMonth, getYear, setMonth, setYear } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import { Calendar as CalendarIcon } from 'lucide-react';
-import React, { useState } from 'react';
-import { DayPicker } from 'react-day-picker';
-import { cn } from '../../../lib/utils';
-import { Calendar as CalendarComponent } from '../calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '../popover';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-interface CalendarFormProps extends React.HTMLAttributes<HTMLDivElement> {
-	onDateSelected: (selectedDateProps: Date | null) => void;
-	selectedDateProps?: Date | null;
-	startYear?: number;
-	endYear?: number;
-}
-
-const DatePicker = React.forwardRef<HTMLDivElement, CalendarFormProps>(
-	({ className, onDateSelected, selectedDateProps, startYear = getYear(new Date()) - 100, endYear = getYear(new Date()) + 100, ...props }, ref) => {
-		const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-		const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-		const months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
-
-		const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
-
-		const handleMonthChange = (month: string) => {
-			if (selectedDate) {
-				const newDate = setMonth(selectedDate, months.indexOf(month));
-				setSelectedDate(newDate);
-			}
-		};
-
-		const handleYearChange = (year: string) => {
-			if (selectedDate) {
-				const newDate = setYear(selectedDate, parseInt(year, 10));
-				setSelectedDate(newDate);
-			}
-		};
-
-		const handleDateChange = (selectedDate: Date | undefined) => {
-			const newDate = selectedDate || null;
-			setSelectedDate(newDate);
-			setIsPopoverOpen(false);
-			onDateSelected(newDate);
-		};
-
-		return (
-			<div className={cn('gap-2', className)} ref={ref} {...props}>
-				<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-					<PopoverTrigger asChild>
-						<CalendarIcon size={16} className='cursor-pointer text-gray-500' onClick={() => setIsPopoverOpen(true)} />
-					</PopoverTrigger>
-					<PopoverContent className='w-auto p-0 flex flex-col justify-center' align='start'>
-						<div className='flex justify-between pt-5 px-5'>
-							<Select onValueChange={handleMonthChange} value={months[getMonth(selectedDate || new Date())]}>
-								<SelectTrigger className='w-[100px]'>
-									<SelectValue placeholder='Month' />
-								</SelectTrigger>
-								<SelectContent>
-									{months.map((month) => (
-										<SelectItem key={month} value={month}>
-											{month}
-										</SelectItem>
-									))}
-								</SelectContent>
-							</Select>
-							<Select onValueChange={handleYearChange} value={getYear(selectedDate || new Date()).toString()}>
-								<SelectTrigger className='w-[100px]'>
-									<SelectValue placeholder='Year' />
-								</SelectTrigger>
-								<SelectContent>
-									{years.map((year) => (
-										<SelectItem key={year} value={year.toString()}>
-											{year}
-										</SelectItem>
-									))}
-								</SelectContent>
-							</Select>
-						</div>
-						<CalendarComponent
-							mode='single'
-							locale={ptBR}
-							onSelect={handleDateChange}
-							className='bg-white text-black'
-							month={selectedDate || undefined}
-						/>
-					</PopoverContent>
-				</Popover>
-			</div>
-		);
-	},
-);
-
-export { DatePicker };
-

package/src/components/ui/custom/form/checkbox.tsx

@@ -1,53 +0,0 @@
-import { Checkbox } from '../../checkbox';
-import * as FormComponents from '../../form';
-import { formHelpText } from './form-help-text';
-import { formLabel } from './form-label';
-import { formMessage } from './form-message';
-
-interface Props {
-	control: any;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	className?: string;
-	disabled?: boolean;
-	onCheckedChange?: (checked: boolean) => void;
-}
-
-export const FormInputCheckbox: React.FC<Props> = ({ control, name, label, helpText, className, disabled, onCheckedChange }) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field }) => (
-				<FormItem className={className}>
-					<div className='flex items-center gap-2'>
-						<FormControl>
-							<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 as boolean);
-								}}
-								disabled={disabled}
-							/>
-						</FormControl>
-						<div className='flex h-full items-center space-x-1.5'>
-							{label && formLabel(FormLabel, label)}
-							{helpText && formHelpText(helpText)}
-						</div>
-					</div>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/color.tsx

@@ -1,140 +0,0 @@
-import { Paintbrush } from 'lucide-react';
-import { useState } from 'react';
-import { HexColorPicker } from 'react-colorful';
-import { cn } from '../../../../lib/utils';
-import { Button } from '../../button';
-import * as FormComponents from '../../form';
-import { Input } from '../../input';
-import { Label } from '../../label';
-import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-import { hexToRgb, rgbToHex } from './utils';
-
-interface Props {
-	control: any;
-	id?: string;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	placeholder?: string;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-}
-
-export const FormInputColor: React.FC<Props> = ({ control, name, label, subLabel, helpText, placeholder, className, disabled, required }) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-
-	const DEFAULT_COLOR = '#000000';
-	const [currentColor, setCurrentColor] = useState<string>(DEFAULT_COLOR);
-	const rgb = hexToRgb(currentColor) || { r: 0, g: 0, b: 0 };
-
-	const handleColorChange = (newColor: string, onChange: (...event: any[]) => void) => {
-		onChange?.(newColor);
-		setCurrentColor(newColor);
-	};
-
-	const handleHexChange = (hex: string, onChange: (...event: any[]) => void) => {
-		if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
-			handleColorChange(hex, onChange);
-		} else {
-			setCurrentColor(hex);
-		}
-	};
-
-	const handleRgbChange = (key: keyof typeof rgb, value: string, onChange: (...event: any[]) => void) => {
-		const numValue = Number.parseInt(value);
-
-		if (!Number.isNaN(numValue) && numValue >= 0 && numValue <= 255) {
-			const newRgb = { ...rgb, [key]: numValue };
-
-			handleColorChange(rgbToHex(newRgb), onChange);
-		}
-	};
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }) => (
-				<FormItem className={className}>
-					<div className='flex items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<Popover>
-						<PopoverTrigger asChild>
-							<FormControl>
-								<Button
-									variant='outline'
-									className={cn('w-[240px] justify-start text-left font-normal', !field.value && 'text-zinc-500', className)}
-									disabled={disabled || formState.isSubmitting}
-								>
-									<div className='w-full flex items-center gap-2'>
-										{field.value ? (
-											<div
-												className='h-4 w-4 rounded !bg-center !bg-cover transition-all border'
-												style={{ backgroundColor: field.value }}
-											/>
-										) : (
-											<Paintbrush className='h-4 w-4' />
-										)}
-										<div className='truncate flex-1 text-sm'>
-											{field.value ? field.value : placeholder || 'Selecione uma cor'}
-										</div>
-									</div>
-								</Button>
-							</FormControl>
-						</PopoverTrigger>
-						<PopoverContent className={cn('w-80', className)}>
-							<div className='flex flex-col gap-4'>
-								<section className='[&_.react-colorful]:w-auto'>
-									<HexColorPicker
-										color={field.value ?? DEFAULT_COLOR}
-										onChange={(newColor) => handleColorChange(newColor, field.onChange)}
-									/>
-								</section>
-								<div className='flex gap-2'>
-									<div className='flex flex-col gap-1'>
-										<Label>Hex</Label>
-										<Input value={currentColor} onChange={(e) => handleHexChange(e.target.value, field.onChange)} maxLength={7} />
-									</div>
-									<div className='flex gap-2'>
-										<div className='flex flex-col gap-1'>
-											<Label>R</Label>
-											<Input
-												value={rgb.r}
-												onChange={(e) => handleRgbChange('r', e.target.value, field.onChange)}
-												className='w-14'
-											/>
-										</div>
-										<div className='flex flex-col gap-1'>
-											<Label>G</Label>
-											<Input
-												value={rgb.g}
-												onChange={(e) => handleRgbChange('g', e.target.value, field.onChange)}
-												className='w-14'
-											/>
-										</div>
-										<div className='flex flex-col gap-1'>
-											<Label>B</Label>
-											<Input
-												value={rgb.b}
-												onChange={(e) => handleRgbChange('b', e.target.value, field.onChange)}
-												className='w-14'
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						</PopoverContent>
-					</Popover>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};