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>
+  )
 }