eai-frontend-components 2.0.4

package/src/components/ui/command.tsx

@@ -0,0 +1,145 @@
+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

@@ -0,0 +1,198 @@
+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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,140 @@
+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>
+			)}
+		/>
+	);
+};