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({