@codefast/ui 0.0.9 → 0.0.11

package/src/dropdown-menu.tsx

@@ -2,83 +2,79 @@
 
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenu
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
+type DropdownMenuProps = React.ComponentProps<typeof DropdownMenuPrimitive.Root>;
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuTrigger
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
+type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuGroup
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSub
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuSubProps = DropdownMenuPrimitive.DropdownMenuSubProps;
+type DropdownMenuSubProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuRadioGroupProps =
-  DropdownMenuPrimitive.DropdownMenuRadioGroupProps;
+type DropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
-interface DropdownMenuSubTriggerProps
-  extends DropdownMenuPrimitive.DropdownMenuSubTriggerProps {
+type DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;
+
+interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
   inset?: boolean;
 }
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  DropdownMenuSubTriggerProps
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto size-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubTrigger = React.forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
+  ({ className, inset, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  ),
+);
+
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubContent
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuSubContentProps =
-  DropdownMenuPrimitive.DropdownMenuSubContentProps;
+type DropdownMenuSubContentProps = DropdownMenuPrimitive.DropdownMenuSubContentProps;
+
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   DropdownMenuSubContentProps
@@ -94,154 +90,154 @@ const DropdownMenuSubContent = React.forwardRef<
     />
   </DropdownMenuPrimitive.Portal>
 ));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuContent
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuContentProps = DropdownMenuPrimitive.DropdownMenuContentProps;
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  DropdownMenuContentProps
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
+type DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;
+type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
+
+const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
+  ({ className, sideOffset = 4, ...props }, ref) => (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  ),
+);
+
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuItem
  * -------------------------------------------------------------------------- */
 
-interface DropdownMenuItemProps
-  extends DropdownMenuPrimitive.DropdownMenuItemProps {
+type DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;
+
+interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
   inset?: boolean;
 }
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuItemProps
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
+
+const DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
+  ({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm transition-colors focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuCheckboxItem
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuCheckboxItemProps =
-  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps;
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  DropdownMenuCheckboxItemProps
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition-colors focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+type DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;
+type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
+
+const DropdownMenuCheckboxItem = React.forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
+  ({ className, children, checked, ...props }, ref) => (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition-colors focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  ),
+);
+
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuRadioItem
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuRadioItemProps =
-  DropdownMenuPrimitive.DropdownMenuRadioItemProps;
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  DropdownMenuRadioItemProps
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition-colors focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
+type DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;
+type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>;
+
+const DropdownMenuRadioItem = React.forwardRef<DropdownMenuRadioItemElement, DropdownMenuRadioItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition-colors focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <DotFilledIcon className="size-4 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  ),
+);
+
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuLabel
  * -------------------------------------------------------------------------- */
 
-interface DropdownMenuLabelProps
-  extends DropdownMenuPrimitive.DropdownMenuLabelProps {
+type DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;
+
+interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
   inset?: boolean;
 }
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  DropdownMenuLabelProps
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
+
+const DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
+  ({ className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+      {...props}
+    />
+  ),
+);
+
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSeparator
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuSeparatorProps =
-  DropdownMenuPrimitive.DropdownMenuSeparatorProps;
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  DropdownMenuSeparatorProps
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
+type DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;
+type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
+
+const DropdownMenuSeparator = React.forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Separator ref={ref} className={cn("bg-muted -mx-1 my-1 h-px", className)} {...props} />
+  ),
+);
+
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 /* -----------------------------------------------------------------------------
@@ -249,16 +245,9 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
  * -------------------------------------------------------------------------- */
 
 type DropdownMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: DropdownMenuShortcutProps): React.JSX.Element {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
+
+function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): React.JSX.Element {
+  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------

package/src/em.tsx

@@ -5,16 +5,18 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Em
  * -------------------------------------------------------------------------- */
 
+type EmElement = HTMLElement;
+
 interface EmProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
-const Em = React.forwardRef<HTMLElement, EmProps>(
-  ({ asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : "em";
 
-    return <Comp ref={ref} {...props} />;
-  },
-);
+const Em = React.forwardRef<EmElement, EmProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot : "em";
+
+  return <Component ref={ref} {...props} />;
+});
+
 Em.displayName = "Em";
 
 /* -----------------------------------------------------------------------------

package/src/form.tsx

@@ -14,19 +14,7 @@ import { cn } from "./utils";
 import { Label } from "./label";
 
 /* -----------------------------------------------------------------------------
- * Context: FormItemContext
- * -------------------------------------------------------------------------- */
-
-interface FormItemContextValue {
-  id: string;
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-/* -----------------------------------------------------------------------------
- * Context: FormFieldContext
+ * Context: Form
  * -------------------------------------------------------------------------- */
 
 interface FormFieldContextValue<
@@ -36,9 +24,13 @@ interface FormFieldContextValue<
   name: TName;
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
+interface FormItemContextValue {
+  id: string;
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
 const useFormField = (): {
   invalid: boolean;
@@ -56,12 +48,12 @@ const useFormField = (): {
   const itemContext = React.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
+  if (!fieldContext || !itemContext) {
     throw new Error("useFormField should be used within <FormField>");
   }
 
+  const fieldState = getFieldState(fieldContext.name, formState);
+
   const { id } = itemContext;
 
   return {
@@ -89,6 +81,7 @@ type FormFieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = ControllerProps<TFieldValues, TName>;
+
 function FormField<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
@@ -104,118 +97,100 @@ function FormField<
  * Component: FormItem
  * -------------------------------------------------------------------------- */
 
+type FormItemElement = HTMLDivElement;
 type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
-const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
 
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
+const FormItem = React.forwardRef<FormItemElement, FormItemProps>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+
 FormItem.displayName = "FormItem";
 
 /* -----------------------------------------------------------------------------
  * Component: FormLabel
  * -------------------------------------------------------------------------- */
 
-type FormLabelProps = React.ComponentPropsWithoutRef<
-  typeof LabelPrimitive.Root
->;
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  FormLabelProps
->(({ className, ...props }, ref) => {
+type FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;
+type FormLabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+
+const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
 });
+
 FormLabel.displayName = "FormLabel";
 
 /* -----------------------------------------------------------------------------
  * Component: FormControl
  * -------------------------------------------------------------------------- */
 
+type FormControlElement = React.ElementRef<typeof Slot>;
 type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  FormControlProps
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+
+const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
       ref={ref}
       id={formItemId}
-      aria-describedby={
-        !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={Boolean(error)}
       {...props}
     />
   );
 });
+
 FormControl.displayName = "FormControl";
 
 /* -----------------------------------------------------------------------------
  * Component: FormDescription
  * -------------------------------------------------------------------------- */
 
+type FormDescriptionElement = HTMLParagraphElement;
 type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  FormDescriptionProps
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
 
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-[0.8rem]", className)}
-      {...props}
-    />
-  );
-});
+const FormDescription = React.forwardRef<FormDescriptionElement, FormDescriptionProps>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return (
+      <p ref={ref} id={formDescriptionId} className={cn("text-muted-foreground text-[0.8rem]", className)} {...props} />
+    );
+  },
+);
+
 FormDescription.displayName = "FormDescription";
 
 /* -----------------------------------------------------------------------------
  * Component: FormMessage
  * -------------------------------------------------------------------------- */
 
+type FormMessageElement = HTMLParagraphElement;
 type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
-const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
-  ({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error.message) : children;
 
-    if (!body) {
-      return null;
-    }
+const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p ref={ref} id={formMessageId} className={cn("text-destructive text-[0.8rem] font-medium", className)} {...props}>
+      {body}
+    </p>
+  );
+});
 
-    return (
-      <p
-        ref={ref}
-        id={formMessageId}
-        className={cn("text-destructive text-[0.8rem] font-medium", className)}
-        {...props}
-      >
-        {body}
-      </p>
-    );
-  },
-);
 FormMessage.displayName = "FormMessage";
 
 /* -----------------------------------------------------------------------------