diff --git a/src/components/form/form-date-picker.tsx b/src/components/form/form-date-picker.tsx index 4f178e5..53ca41e 100644 --- a/src/components/form/form-date-picker.tsx +++ b/src/components/form/form-date-picker.tsx @@ -10,9 +10,16 @@ interface FormDatePickerProps { label?: string; placeholder?: string; disabled?: (date: Date) => boolean; + className?: string; } -export function FormDatePicker({ name, label, placeholder = 'Pick a date', disabled }: FormDatePickerProps) { +export function FormDatePicker({ + name, + label, + placeholder = 'Pick a date', + disabled, + className, +}: FormDatePickerProps) { const form = useFormContext(); return ( @@ -28,6 +35,7 @@ export function FormDatePicker({ name, label, placeholder = 'Pick a date', disab onChange={(date) => field.onChange(date ?? '')} placeholder={placeholder} calendarDisabled={disabled} + className={className} /> diff --git a/src/components/form/form-number-input.tsx b/src/components/form/form-number-input.tsx index be94191..2b493ea 100644 --- a/src/components/form/form-number-input.tsx +++ b/src/components/form/form-number-input.tsx @@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form'; import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; import { Input } from '@/components/ui/input'; -import { NumberParser } from '@/lib/utils'; +import { cn, NumberParser } from '@/lib/utils'; interface FormNumberInputProps { name: string; @@ -18,6 +18,7 @@ interface FormNumberInputProps { minimumFractionDigits?: number; maximumFractionDigits?: number; autoFocus?: boolean; + className?: string; } export function FormNumberInput({ @@ -32,6 +33,7 @@ export function FormNumberInput({ minimumFractionDigits = 2, maximumFractionDigits = 2, autoFocus, + className, }: FormNumberInputProps) { const form = useFormContext(); @@ -77,9 +79,11 @@ export function FormNumberInput({ const value = parser.strip(event.target.value); field.onChange(value); }} - className={`[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${ - prefix ? 'pl-12 ' : '' - }`} + className={cn( + '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', + prefix && 'pl-12', + className, + )} /> diff --git a/src/components/form/form-select.tsx b/src/components/form/form-select.tsx index 39d2d99..ec9857f 100644 --- a/src/components/form/form-select.tsx +++ b/src/components/form/form-select.tsx @@ -13,6 +13,7 @@ import { FormMessage, } from '@/components/ui/form'; import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { cn } from '@/lib/utils'; type SelectOption = | { @@ -35,6 +36,7 @@ interface FormSelectProps { align?: 'start' | 'center' | 'end'; customContent?: () => ReactNode; clearable?: boolean; + className?: string; } export function FormSelect({ @@ -49,6 +51,7 @@ export function FormSelect({ align = 'start', customContent, clearable = false, + className, }: FormSelectProps) { const t = useTranslations('common'); const form = useFormContext(); @@ -63,7 +66,7 @@ export function FormSelect({