@codefast/ui 0.0.50 → 0.0.52

package/src/react/dropdown-menu.tsx

@@ -2,100 +2,78 @@
 
 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 '../lib/utils';
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenu
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuProps = React.ComponentProps<
-  typeof DropdownMenuPrimitive.Root
->;
+type DropdownMenuProps = React.ComponentProps<typeof DropdownMenuPrimitive.Root>;
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuTrigger
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Trigger
->;
+type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuGroup
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Group
->;
+type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSub
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuSubProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Sub
->;
+type DropdownMenuSubProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.RadioGroup
->;
+type DropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuSubTriggerElement = React.ElementRef<
-  typeof DropdownMenuPrimitive.SubTrigger
->;
+type DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;
 
-interface DropdownMenuSubTriggerProps
-  extends React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.SubTrigger
-  > {
+interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
   inset?: boolean;
 }
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  DropdownMenuSubTriggerElement,
-  DropdownMenuSubTriggerProps
->(({ children, className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'focus:bg-accent data-[state=open]:bg-accent flex cursor-pointer 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>
-));
+const DropdownMenuSubTrigger = React.forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
+  ({ children, className, inset, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'focus:bg-accent data-[state=open]:bg-accent flex cursor-pointer 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;
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuSubContent
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuSubContentProps =
-  DropdownMenuPrimitive.DropdownMenuSubContentProps;
+type DropdownMenuSubContentProps = DropdownMenuPrimitive.DropdownMenuSubContentProps;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -113,36 +91,30 @@ const DropdownMenuSubContent = React.forwardRef<
   </DropdownMenuPrimitive.Portal>
 ));
 
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: DropdownMenuContent
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuContentElement = React.ElementRef<
-  typeof DropdownMenuPrimitive.Content
->;
-type DropdownMenuContentProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Content
->;
-
-const DropdownMenuContent = React.forwardRef<
-  DropdownMenuContentElement,
-  DropdownMenuContentProps
->(({ className, sideOffset = 6, ...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 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 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-32 rounded-md border p-1 shadow-md',
-        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 = 6, ...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 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 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-32 rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  ),
+);
 
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
@@ -150,29 +122,25 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
  * Component: DropdownMenuItem
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuItemElement = React.ElementRef<
-  typeof DropdownMenuPrimitive.Item
->;
+type DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;
 
-interface DropdownMenuItemProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
   inset?: boolean;
 }
 
-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-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition 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-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
@@ -180,69 +148,58 @@ DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
  * Component: DropdownMenuCheckboxItem
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuCheckboxItemElement = React.ElementRef<
-  typeof DropdownMenuPrimitive.CheckboxItem
->;
-type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.CheckboxItem
->;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  DropdownMenuCheckboxItemElement,
-  DropdownMenuCheckboxItemProps
->(({ children, className, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition 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>
-));
+type DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;
+type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
 
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
+  ({ children, className, checked, ...props }, ref) => (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition 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 DropdownMenuRadioItemElement = React.ElementRef<
-  typeof DropdownMenuPrimitive.RadioItem
->;
-type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.RadioItem
->;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  DropdownMenuRadioItemElement,
-  DropdownMenuRadioItemProps
->(({ children, className, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition 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>(
+  ({ children, className, ...props }, ref) => (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition 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;
 
@@ -250,29 +207,21 @@ DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
  * Component: DropdownMenuLabel
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuLabelElement = React.ElementRef<
-  typeof DropdownMenuPrimitive.Label
->;
+type DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;
 
-interface DropdownMenuLabelProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
   inset?: boolean;
 }
 
-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}
-  />
-));
+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;
 
@@ -280,23 +229,14 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
  * Component: DropdownMenuSeparator
  * -------------------------------------------------------------------------- */
 
-type DropdownMenuSeparatorElement = React.ElementRef<
-  typeof DropdownMenuPrimitive.Separator
->;
-type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Separator
->;
+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}
-  />
-));
+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;
 
@@ -306,16 +246,8 @@ 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/react/em.tsx

@@ -11,13 +11,11 @@ interface EmProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Em = React.forwardRef<EmElement, EmProps>(
-  ({ asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : 'em';
+const Em = React.forwardRef<EmElement, EmProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot : 'em';
 
-    return <Component ref={ref} {...props} />;
-  },
-);
+  return <Component ref={ref} {...props} />;
+});
 
 Em.displayName = 'Em';
 

package/src/react/form.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
@@ -16,6 +15,7 @@ import {
 } from 'react-hook-form';
 import { cn } from '../lib/utils';
 import { Label } from './label';
+import type * as LabelPrimitive from '@radix-ui/react-label';
 
 /* -----------------------------------------------------------------------------
  * Context: Form
@@ -32,9 +32,7 @@ interface FormItemContextValue {
   id: string;
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(
-  null,
-);
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
 
 const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
@@ -106,17 +104,15 @@ function FormField<
 type FormItemElement = HTMLDivElement;
 type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
 
-const FormItem = React.forwardRef<FormItemElement, FormItemProps>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
+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>
-    );
-  },
-);
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
 
 FormItem.displayName = 'FormItem';
 
@@ -125,24 +121,13 @@ FormItem.displayName = 'FormItem';
  * -------------------------------------------------------------------------- */
 
 type FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;
-type FormLabelProps = React.ComponentPropsWithoutRef<
-  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}
-      />
-    );
-  },
-);
+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} />;
+});
 
 FormLabel.displayName = 'FormLabel';
 
@@ -153,24 +138,19 @@ FormLabel.displayName = 'FormLabel';
 type FormControlElement = React.ElementRef<typeof Slot>;
 type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
 
-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-invalid={Boolean(error)}
-        {...props}
-      />
-    );
-  },
-);
+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-invalid={Boolean(error)}
+      {...props}
+    />
+  );
+});
 
 FormControl.displayName = 'FormControl';
 
@@ -181,21 +161,13 @@ FormControl.displayName = 'FormControl';
 type FormDescriptionElement = HTMLParagraphElement;
 type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 
-const FormDescription = React.forwardRef<
-  FormDescriptionElement,
-  FormDescriptionProps
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
+const FormDescription = React.forwardRef<FormDescriptionElement, FormDescriptionProps>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
 
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn('text-muted-foreground text-xs', className)}
-      {...props}
-    />
-  );
-});
+    return <p ref={ref} id={formDescriptionId} className={cn('text-muted-foreground text-xs', className)} {...props} />;
+  },
+);
 
 FormDescription.displayName = 'FormDescription';
 
@@ -206,27 +178,20 @@ FormDescription.displayName = 'FormDescription';
 type FormMessageElement = HTMLParagraphElement;
 type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
 
-const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(
-  ({ children, className, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error?.message ? String(error.message) : children;
-
-    if (!body) {
-      return null;
-    }
-
-    return (
-      <p
-        ref={ref}
-        id={formMessageId}
-        className={cn('text-destructive text-xs font-medium', className)}
-        {...props}
-      >
-        {body}
-      </p>
-    );
-  },
-);
+const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ children, className, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error?.message ? String(error.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p ref={ref} id={formMessageId} className={cn('text-destructive text-xs font-medium', className)} {...props}>
+      {body}
+    </p>
+  );
+});
 
 FormMessage.displayName = 'FormMessage';
 

package/src/react/heading.tsx

@@ -12,13 +12,11 @@ interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   asChild?: boolean;
 }
 
-const Heading = React.forwardRef<HeadingElement, HeadingProps>(
-  ({ asChild, as: Tag = 'h1', ...props }, ref) => {
-    const Component = asChild ? Slot : Tag;
+const Heading = React.forwardRef<HeadingElement, HeadingProps>(({ asChild, as: Tag = 'h1', ...props }, ref) => {
+  const Component = asChild ? Slot : Tag;
 
-    return <Component ref={ref} {...props} />;
-  },
-);
+  return <Component ref={ref} {...props} />;
+});
 
 Heading.displayName = 'Heading';