fix: form ref getter

Signed-off-by: Innei <i@innei.in>

src/components/ui/form/Form.tsx

@@ -33,7 +33,7 @@ export const Form = forwardRef<
     getCurrentValues: () => {
       return Object.fromEntries(
         Object.entries(jotaiStore.get(fieldsAtom)).map(([key, value]) => {
-          const nextValue = (value as any as Field).$ref?.value
+          const nextValue = (value as any as Field).getEl()?.value
 
           return [
             key,
@@ -90,7 +90,7 @@ const FormInternal = (
 
       const fields = jotaiStore.get(fieldsAtom)
       for await (const [key, field] of Object.entries(fields)) {
-        const $ref = field.$ref
+        const $ref = field.getEl()
         if (!$ref) continue
         const value = $ref.value
         const rules = field.rules

src/components/ui/form/FormInput.tsx

@@ -29,7 +29,7 @@ export const FormInput: FC<
   useAddField({
     rules: rules || [],
     transform,
-    $ref: inputRef.current,
+    getEl: () => inputRef.current,
     name,
   })
   const resetFieldStatus = useResetFieldStatus(name)

src/components/ui/form/hooks.tsx

@@ -4,6 +4,8 @@ import { useAtomValue, useStore } from 'jotai'
 import { selectAtom } from 'jotai/utils'
 import type { Field } from './types'
 
+import { useEventCallback } from '~/hooks/common/use-event-callback'
+
 import { useForm } from './FormContext'
 
 const useAssetFormContext = () => {
@@ -34,26 +36,27 @@ export const useFormErrorMessage = (name: string) => {
 export const useAddField = ({
   rules,
   transform,
-  $ref,
+  getEl: getRef,
   name,
 }: Field & { name: string }) => {
   const FormCtx = useAssetFormContext()
 
   const { addField, removeField } = FormCtx
+  const stableGetEl = useEventCallback(getRef)
   useEffect(() => {
     if (!rules) return
     if (!name) return
 
     addField(name, {
       rules,
-      $ref,
+      getEl: stableGetEl,
       transform,
     })
 
     return () => {
       removeField(name)
     }
-  }, [$ref, addField, name, removeField, rules, transform])
+  }, [addField, stableGetEl, name, removeField, rules, transform])
 }
 
 export const useResetFieldStatus = (name: string) => {
@@ -80,7 +83,7 @@ export const useCheckFieldStatus = (name: string) => {
     jotaiStore.set(fields, (p) => {
       return produce(p, (draft) => {
         if (!name) return
-        const value = draft[name].$ref?.value
+        const value = draft[name].getEl()?.value
         if (!value) return
         draft[name].rules.some((rule) => {
           const result = rule.validator(value)

src/components/ui/form/types.ts

@@ -14,7 +14,7 @@ export interface Field {
    */
   transform?: <X, T = string>(value: T) => X
 
-  $ref: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null
+  getEl: () => HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null
 }
 
 export interface FormFieldBaseProps<T> extends Pick<Field, 'transform'> {

src/components/ui/input/Input.tsx

@@ -18,7 +18,7 @@ export const Input = forwardRef<
     <input
       ref={ref}
       className={clsxm(
-        'min-w-0 flex-auto appearance-none rounded-lg border ring-accent/20 duration-200 sm:text-sm',
+        'min-w-0 flex-auto appearance-none rounded-lg border ring-accent/20 duration-200 sm:text-sm lg:text-base',
         'bg-base-100 px-3 py-[calc(theme(spacing.2)-1px)] placeholder:text-zinc-400 focus:outline-none focus:ring-2 dark:bg-zinc-700/[0.15]',
         'border-border',
         'focus:border-accent/80 dark:text-zinc-200 dark:placeholder:text-zinc-500',

src/components/ui/input/TextArea.tsx

@@ -66,6 +66,7 @@ export const TextArea = forwardRef<
           'overflow-auto px-3 py-4',
           '!outline-none',
           'text-neutral-900/80 dark:text-slate-100/80',
+          roundedMap[rounded],
           className,
         )}
         {...rest}