feat: add error status

Author: Ohh-889

packages/ui/src/components/form/FormField.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useId } from 'react';
-import { Field, useFieldErrors } from 'skyroc-form';
+import { Field, useFieldError } from 'skyroc-form';
 
 import { cn } from '@/lib/utils';
 
@@ -15,7 +15,13 @@ const FormField = <Values = any,>(props: FormFieldProps<Values>) => {
 
   const id = useId();
 
-  const errors = useFieldErrors<Values>(name);
+  const errors = useFieldError<Values>(name);
+
+  const hasError = errors.length > 0;
+
+  const formItemId = `${id}-form-item`;
+  const formDescriptionId = `${id}-form-item-description`;
+  const formMessageId = `${id}-form-item-message`;
 
   const {
     description: descriptionCls,
@@ -35,6 +41,8 @@ const FormField = <Values = any,>(props: FormFieldProps<Values>) => {
     <div className={mergedCls.item}>
       <FormLabel
         className={mergedCls.label}
+        data-error={hasError}
+        data-slot="form-label"
         htmlFor={id}
         size={size}
       >
@@ -43,6 +51,8 @@ const FormField = <Values = any,>(props: FormFieldProps<Values>) => {
 
       <Field
         {...rest}
+        aria-describedby={!hasError ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={hasError}
         id={id}
         name={name}
       >
@@ -52,16 +62,16 @@ const FormField = <Values = any,>(props: FormFieldProps<Values>) => {
       {description && (
         <p
           className={mergedCls.description}
-          id={id}
+          id={formDescriptionId}
         >
           {description}
         </p>
       )}
 
-      {errors.length > 0 && (
+      {hasError && (
         <p
           className={mergedCls.message}
-          id={id}
+          id={formMessageId}
         >
           {errors[0]}
         </p>

packages/ui/src/components/form/form-variants.ts

@@ -8,7 +8,7 @@ export const formVariants = tv({
   slots: {
     description: `text-muted-foreground`,
     item: `form-item`,
-    label: 'flex items-center',
+    label: 'flex items-center data-[error=true]:text-destructive',
     message: `font-medium text-destructive`
   },
   variants: {

packages/ui/src/components/form/index.ts

@@ -1,6 +1,6 @@
 'use client';
 
-export { Form, useForm } from 'skyroc-form';
+export { Form, useFieldError, useFieldErrors, useFieldState, useForm } from 'skyroc-form';
 
 export { default as FormField } from './FormField';
 

packages/ui/src/components/input/input-variants.ts

@@ -4,8 +4,10 @@ export const inputVariants = tv({
   base: [
     `flex w-full rounded-md border border-solid border-input bg-background`,
     `file:border-0 file:bg-transparent file:font-medium`,
+    'placeholder:text-muted-foreground selection:bg-primary',
     `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,
-    `disabled:cursor-not-allowed disabled:opacity-50`
+    `disabled:cursor-not-allowed disabled:opacity-50`,
+    `aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`
   ],
   defaultVariants: {
     size: 'md'