updates

shared/components/form/controls/checkbox-field.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type { BaseFieldControlProps } from "../types"
-import { Checkbox } from "@/shared/components/ui/checkbox"
+import { Switch } from "@/shared/components/ui/switch"
 
 export type CheckboxFieldProps = BaseFieldControlProps<boolean> & {
   label?: string
@@ -16,7 +16,7 @@ export function CheckboxField({
   invalid,
 }: CheckboxFieldProps) {
   return (
-    <Checkbox
+    <Switch
       checked={value}
       onCheckedChange={(checked) => onChange(checked === true)}
       onBlur={onBlur}

shared/components/form/fields/rhf-checkbox-field.tsx

@@ -1,9 +1,10 @@
 "use client"
 
 import type { FieldValues, FieldPath } from "react-hook-form"
-import { RhfField } from "../rhf-field"
+import { useFormContext, useController } from "react-hook-form"
 import { CheckboxField, type CheckboxFieldProps } from "../controls/checkbox-field"
 import type { BaseFieldControlProps } from "../types"
+import { FieldError } from "@/shared/components/ui/field"
 
 type RhfCheckboxFieldProps<
   TValues extends FieldValues,
@@ -19,6 +20,43 @@ type RhfCheckboxFieldProps<
 export function RhfCheckboxField<
   TValues extends FieldValues,
   TName extends FieldPath<TValues>,
->(props: RhfCheckboxFieldProps<TValues, TName>) {
-  return <RhfField {...props} component={CheckboxField} />
+>({
+  name,
+  label,
+  description,
+  required,
+  disabled,
+  ...controlProps
+}: RhfCheckboxFieldProps<TValues, TName>) {
+  const { control } = useFormContext<TValues>()
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control, disabled })
+
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-lg border p-4">
+      <div className="flex-1 space-y-0.5">
+        {label && (
+          <p className="text-sm font-medium leading-none">
+            {label}
+            {required && <span className="text-destructive"> *</span>}
+          </p>
+        )}
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+        {error && <FieldError>{error.message}</FieldError>}
+      </div>
+      <CheckboxField
+        {...(controlProps as any)}
+        value={field.value}
+        onChange={field.onChange}
+        onBlur={field.onBlur}
+        name={field.name}
+        disabled={field.disabled}
+        invalid={!!error}
+      />
+    </div>
+  )
 }

shared/components/ui/checkbox.tsx

@@ -14,14 +14,14 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "peer relative flex size-4 max-w-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
     >
       <CheckboxPrimitive.Indicator
         data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+        className="grid place-content-center  text-current transition-none [&>svg]:size-3.5"
       >
         <CheckIcon
         />