From 1a4fa4d433eaa20b9ed26d46bcf6ecd4f399eed2 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Fri, 8 Nov 2024 21:38:39 +0330
Subject: [PATCH 01/11] button

---
 packages/ui/src/button.tsx | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 6f5c3c695..2bfffd7ca 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -38,21 +38,26 @@ const buttonVariants = cva(
 interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
+  ref: React.Ref<HTMLButtonElement>;
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
+function Button({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props}
+    />
+  );
+}
 
 export { Button, buttonVariants };

From 084c61dbb501b8dc4d67777dd4eddcbbbf3814e0 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 9 Nov 2024 15:58:12 +0330
Subject: [PATCH 02/11] dropdown

---
 packages/ui/src/dropdown-menu.tsx | 306 ++++++++++++++++--------------
 1 file changed, 164 insertions(+), 142 deletions(-)

diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index ecca776cc..68f399e52 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -17,169 +17,191 @@ const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto size-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+function DropdownMenuSubTrigger({
+  ref,
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
 
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
+function DropdownMenuSubContent({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
       ref={ref}
-      sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
     />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+  );
+}
 
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+function DropdownMenuContent({
+  ref,
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[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;
+function DropdownMenuItem({
+  ref,
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[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;
+function DropdownMenuCheckboxItem({
+  ref,
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.DropdownMenuCheckboxItem
+>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[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>
+  );
+}
+
+function DropdownMenuRadioItem({
+  ref,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[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>
+  );
+}
 
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ 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;
+function DropdownMenuLabel({
+  ref,
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+function DropdownMenuSeparator({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      ref={ref}
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  );
+}
 
-const DropdownMenuShortcut = ({
+function DropdownMenuShortcut({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+}
 
 export {
   DropdownMenu,

From bc2c52cb749fbdb6fd8366a4659c40bad55c50f8 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 9 Nov 2024 16:09:24 +0330
Subject: [PATCH 03/11] form

---
 packages/ui/src/form.tsx | 85 +++++++++++++++++++---------------------
 1 file changed, 40 insertions(+), 45 deletions(-)

diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index ac0c191ab..e4518a74f 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -14,7 +14,6 @@ import { Slot } from "@radix-ui/react-slot";
 import {
   useForm as __useForm,
   Controller,
-  FormProvider,
   useFormContext,
 } from "react-hook-form";
 
@@ -22,7 +21,7 @@ import { cn } from "@acme/ui";
 
 import { Label } from "./label";
 
-const useForm = <
+function useForm<
   TOut extends FieldValues,
   TDef extends ZodTypeDef,
   TIn extends FieldValues,
@@ -30,16 +29,14 @@ const useForm = <
   props: Omit<UseFormProps<TIn>, "resolver"> & {
     schema: ZodType<TOut, TDef, TIn>;
   },
-) => {
+) {
   const form = __useForm<TIn, unknown, TOut>({
     ...props,
     resolver: zodResolver(props.schema, undefined),
   });
 
   return form;
-};
-
-const Form = FormProvider;
+}
 
 interface FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
@@ -52,20 +49,18 @@ const FormFieldContext = React.createContext<FormFieldContextValue | null>(
   null,
 );
 
-const FormField = <
+function FormField<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
+>({ ...props }: ControllerProps<TFieldValues, TName>) {
   return (
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
   );
-};
+}
 
-const useFormField = () => {
+function useFormField() {
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
@@ -85,7 +80,7 @@ const useFormField = () => {
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
   };
-};
+}
 
 interface FormItemContextValue {
   id: string;
@@ -95,10 +90,11 @@ const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue,
 );
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+function FormItem({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { ref: React.Ref<HTMLDivElement> }) {
   const id = React.useId();
 
   return (
@@ -106,13 +102,13 @@ const FormItem = React.forwardRef<
       <div ref={ref} className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
   );
-});
-FormItem.displayName = "FormItem";
+}
 
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+function FormLabel({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
   const { error, formItemId } = useFormField();
 
   return (
@@ -123,13 +119,9 @@ const FormLabel = React.forwardRef<
       {...props}
     />
   );
-});
-FormLabel.displayName = "FormLabel";
+}
 
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
+function FormControl({ ref, ...props }: React.ComponentProps<typeof Slot>) {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
 
@@ -146,13 +138,15 @@ const FormControl = React.forwardRef<
       {...props}
     />
   );
-});
-FormControl.displayName = "FormControl";
+}
 
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
+function FormDescription({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+  ref: React.Ref<HTMLParagraphElement>;
+}) {
   const { formDescriptionId } = useFormField();
 
   return (
@@ -163,13 +157,16 @@ const FormDescription = React.forwardRef<
       {...props}
     />
   );
-});
-FormDescription.displayName = "FormDescription";
+}
 
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
+function FormMessage({
+  ref,
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement> & {
+  ref: React.Ref<HTMLParagraphElement>;
+}) {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error.message) : children;
 
@@ -187,13 +184,11 @@ const FormMessage = React.forwardRef<
       {body}
     </p>
   );
-});
-FormMessage.displayName = "FormMessage";
+}
 
 export {
   useForm,
   useFormField,
-  Form,
   FormItem,
   FormLabel,
   FormControl,
@@ -202,4 +197,4 @@ export {
   FormField,
 };
 
-export { useFieldArray } from "react-hook-form";
+export { FormProvider as Form, useFieldArray } from "react-hook-form";

From edbc6735f10bd46a844623ef3ea31457920d1b55 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 9 Nov 2024 16:11:38 +0330
Subject: [PATCH 04/11] input

---
 packages/ui/src/input.tsx | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index a213c918e..5839dfd27 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -4,21 +4,23 @@ import { cn } from "@acme/ui";
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
+function Input({
+  ref,
+  className,
+  type,
+  ...props
+}: InputProps & { ref: React.Ref<HTMLInputElement> }) {
+  return (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
 export { Input };

From 891e1d4e05593832e69ac903a40bba7f5704d3ce Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 9 Nov 2024 16:14:01 +0330
Subject: [PATCH 05/11] label

---
 packages/ui/src/label.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index 4e0825d6b..0d2666f91 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -9,17 +9,19 @@ const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+function Label({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>) {
+  return (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(labelVariants(), className)}
+      {...props}
+    />
+  );
+}
 
 export { Label };

From 7f616d421862feaceb5275db195c84155a7fb2fb Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 9 Nov 2024 16:14:33 +0330
Subject: [PATCH 06/11] toast

---
 packages/ui/src/toast.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/toast.tsx b/packages/ui/src/toast.tsx
index 2958b9ae2..5b2a2f8dd 100644
--- a/packages/ui/src/toast.tsx
+++ b/packages/ui/src/toast.tsx
@@ -5,7 +5,7 @@ import { Toaster as Sonner, toast } from "sonner";
 
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
-const Toaster = ({ ...props }: ToasterProps) => {
+function Toaster({ ...props }: ToasterProps) {
   const { theme = "system" } = useTheme();
 
   return (
@@ -26,6 +26,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
       {...props}
     />
   );
-};
+}
 
 export { Toaster, toast };

From bcd32137570172647130148d667b0851804e6c47 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 9 Nov 2024 16:16:01 +0330
Subject: [PATCH 07/11] make refs optional

---
 packages/ui/src/button.tsx | 2 +-
 packages/ui/src/form.tsx   | 6 +++---
 packages/ui/src/input.tsx  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 2bfffd7ca..977da8e13 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -38,7 +38,7 @@ const buttonVariants = cva(
 interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  ref: React.Ref<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
   asChild?: boolean;
 }
 
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index e4518a74f..52e4b2388 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -94,7 +94,7 @@ function FormItem({
   ref,
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement> & { ref: React.Ref<HTMLDivElement> }) {
+}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
   const id = React.useId();
 
   return (
@@ -145,7 +145,7 @@ function FormDescription({
   className,
   ...props
 }: React.HTMLAttributes<HTMLParagraphElement> & {
-  ref: React.Ref<HTMLParagraphElement>;
+  ref?: React.Ref<HTMLParagraphElement>;
 }) {
   const { formDescriptionId } = useFormField();
 
@@ -165,7 +165,7 @@ function FormMessage({
   children,
   ...props
 }: React.HTMLAttributes<HTMLParagraphElement> & {
-  ref: React.Ref<HTMLParagraphElement>;
+  ref?: React.Ref<HTMLParagraphElement>;
 }) {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error.message) : children;
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index 5839dfd27..31e55b999 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -9,7 +9,7 @@ function Input({
   className,
   type,
   ...props
-}: InputProps & { ref: React.Ref<HTMLInputElement> }) {
+}: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
   return (
     <input
       ref={ref}

From 15441457e85a4cfeeceb9dfb4df8f93ef20b07a6 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:42:28 +0330
Subject: [PATCH 08/11] clean up a type

---
 packages/ui/src/input.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index 31e55b999..26bd6f8c4 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -2,14 +2,11 @@ import * as React from "react";
 
 import { cn } from "@acme/ui";
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  ref?: React.Ref<HTMLInputElement>;
+};
 
-function Input({
-  ref,
-  className,
-  type,
-  ...props
-}: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
+function Input({ ref, className, type, ...props }: InputProps) {
   return (
     <input
       ref={ref}

From 28ca02ba5d4baa0163758ff6c0d1b158a2fbdd30 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:03:41 +0330
Subject: [PATCH 09/11] lots of cleaning up

---
 packages/ui/src/button.tsx        |  6 +---
 packages/ui/src/dropdown-menu.tsx | 55 +++++++++++-----------------
 packages/ui/src/form.tsx          | 59 +++++++++----------------------
 packages/ui/src/input.tsx         | 10 ++----
 packages/ui/src/label.tsx         | 21 ++++-------
 packages/ui/src/theme.tsx         |  1 -
 packages/ui/src/toast.tsx         |  3 +-
 7 files changed, 47 insertions(+), 108 deletions(-)

diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 977da8e13..3550a3b93 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -1,5 +1,4 @@
 import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
@@ -36,14 +35,12 @@ const buttonVariants = cva(
 );
 
 interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ComponentProps<"button">,
     VariantProps<typeof buttonVariants> {
-  ref?: React.Ref<HTMLButtonElement>;
   asChild?: boolean;
 }
 
 function Button({
-  ref,
   className,
   variant,
   size,
@@ -54,7 +51,6 @@ function Button({
   return (
     <Comp
       className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
       {...props}
     />
   );
diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index 68f399e52..0e5bbf0ba 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -1,6 +1,14 @@
-"use client";
-
-import * as React from "react";
+import type {
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuLabelProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuSubContentProps,
+  DropdownMenuSubTriggerProps,
+} from "@radix-ui/react-dropdown-menu";
+import type { ComponentProps } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
   CheckIcon,
@@ -18,17 +26,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 function DropdownMenuSubTrigger({
-  ref,
   className,
   inset,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+}: DropdownMenuSubTriggerProps & {
   inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
-      ref={ref}
       className={cn(
         "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
         inset && "pl-8",
@@ -43,13 +49,11 @@ function DropdownMenuSubTrigger({
 }
 
 function DropdownMenuSubContent({
-  ref,
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+}: DropdownMenuSubContentProps) {
   return (
     <DropdownMenuPrimitive.SubContent
-      ref={ref}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
@@ -60,15 +64,13 @@ function DropdownMenuSubContent({
 }
 
 function DropdownMenuContent({
-  ref,
   className,
   sideOffset = 4,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}: DropdownMenuContentProps) {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
-        ref={ref}
         sideOffset={sideOffset}
         className={cn(
           "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
@@ -82,16 +84,14 @@ function DropdownMenuContent({
 }
 
 function DropdownMenuItem({
-  ref,
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+}: DropdownMenuItemProps & {
   inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Item
-      ref={ref}
       className={cn(
         "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         inset && "pl-8",
@@ -103,22 +103,16 @@ function DropdownMenuItem({
 }
 
 function DropdownMenuCheckboxItem({
-  ref,
   className,
   children,
-  checked,
   ...props
-}: React.ComponentProps<
-  typeof DropdownMenuPrimitive.DropdownMenuCheckboxItem
->) {
+}: DropdownMenuCheckboxItemProps) {
   return (
     <DropdownMenuPrimitive.CheckboxItem
-      ref={ref}
       className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className,
       )}
-      checked={checked}
       {...props}
     >
       <span className="absolute left-2 flex size-3.5 items-center justify-center">
@@ -132,14 +126,12 @@ function DropdownMenuCheckboxItem({
 }
 
 function DropdownMenuRadioItem({
-  ref,
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: DropdownMenuRadioItemProps) {
   return (
     <DropdownMenuPrimitive.RadioItem
-      ref={ref}
       className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className,
@@ -157,16 +149,14 @@ function DropdownMenuRadioItem({
 }
 
 function DropdownMenuLabel({
-  ref,
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+}: DropdownMenuLabelProps & {
   inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
-      ref={ref}
       className={cn(
         "px-2 py-1.5 text-sm font-semibold",
         inset && "pl-8",
@@ -178,23 +168,18 @@ function DropdownMenuLabel({
 }
 
 function DropdownMenuSeparator({
-  ref,
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+}: DropdownMenuSeparatorProps) {
   return (
     <DropdownMenuPrimitive.Separator
-      ref={ref}
       className={cn("-mx-1 my-1 h-px bg-muted", className)}
       {...props}
     />
   );
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) {
+function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) {
   return (
     <span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index 52e4b2388..aa958d670 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -1,6 +1,8 @@
 "use client";
 
-import type * as LabelPrimitive from "@radix-ui/react-label";
+import type { LabelProps } from "@radix-ui/react-label";
+import type { SlotProps } from "@radix-ui/react-slot";
+import type { ComponentProps } from "react";
 import type {
   ControllerProps,
   FieldPath,
@@ -8,7 +10,7 @@ import type {
   UseFormProps,
 } from "react-hook-form";
 import type { ZodType, ZodTypeDef } from "zod";
-import * as React from "react";
+import { createContext, use, useId } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Slot } from "@radix-ui/react-slot";
 import {
@@ -45,9 +47,7 @@ interface FormFieldContextValue<
   name: TName;
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(
-  null,
-);
+const FormFieldContext = createContext<FormFieldContextValue | null>(null);
 
 function FormField<
   TFieldValues extends FieldValues = FieldValues,
@@ -61,15 +61,15 @@ function FormField<
 }
 
 function useFormField() {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
 
+  const fieldContext = use(FormFieldContext);
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
   }
   const fieldState = getFieldState(fieldContext.name, formState);
 
+  const itemContext = use(FormItemContext);
   const { id } = itemContext;
 
   return {
@@ -86,48 +86,38 @@ interface FormItemContextValue {
   id: string;
 }
 
-const FormItemContext = React.createContext<FormItemContextValue>(
+const FormItemContext = createContext<FormItemContextValue>(
   {} as FormItemContextValue,
 );
 
-function FormItem({
-  ref,
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
-  const id = React.useId();
+function FormItem({ className, ...props }: ComponentProps<"div">) {
+  const id = useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
   );
 }
 
-function FormLabel({
-  ref,
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function FormLabel({ className, ...props }: LabelProps) {
   const { error, formItemId } = useFormField();
 
   return (
     <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
+      className={cn(error && "text-destructive", className)}
       {...props}
     />
   );
 }
 
-function FormControl({ ref, ...props }: React.ComponentProps<typeof Slot>) {
+function FormControl({ ...props }: SlotProps) {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
 
   return (
     <Slot
-      ref={ref}
       id={formItemId}
       aria-describedby={
         !error
@@ -140,18 +130,11 @@ function FormControl({ ref, ...props }: React.ComponentProps<typeof Slot>) {
   );
 }
 
-function FormDescription({
-  ref,
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement> & {
-  ref?: React.Ref<HTMLParagraphElement>;
-}) {
+function FormDescription({ className, ...props }: ComponentProps<"p">) {
   const { formDescriptionId } = useFormField();
 
   return (
     <p
-      ref={ref}
       id={formDescriptionId}
       className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
@@ -159,24 +142,16 @@ function FormDescription({
   );
 }
 
-function FormMessage({
-  ref,
-  className,
-  children,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement> & {
-  ref?: React.Ref<HTMLParagraphElement>;
-}) {
+function FormMessage({ className, children, ...props }: ComponentProps<"p">) {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error.message) : children;
 
   if (!body) {
-    return null;
+    return;
   }
 
   return (
     <p
-      ref={ref}
       id={formMessageId}
       className={cn("text-[0.8rem] font-medium text-destructive", className)}
       {...props}
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index 26bd6f8c4..da00f0c2c 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -1,16 +1,10 @@
-import * as React from "react";
+import type { ComponentProps } from "react";
 
 import { cn } from "@acme/ui";
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  ref?: React.Ref<HTMLInputElement>;
-};
-
-function Input({ ref, className, type, ...props }: InputProps) {
+function Input({ className, ...props }: ComponentProps<"input">) {
   return (
     <input
-      ref={ref}
-      type={type}
       className={cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className,
diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index 0d2666f91..80b7d216d 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -1,24 +1,15 @@
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import type { LabelProps } from "@radix-ui/react-label";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva } from "class-variance-authority";
 
 import { cn } from "@acme/ui";
 
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-function Label({
-  ref,
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root> &
-  VariantProps<typeof labelVariants>) {
+function Label({ className, ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
-      ref={ref}
-      className={cn(labelVariants(), className)}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
       {...props}
     />
   );
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
index 763130dbd..7e11fe759 100644
--- a/packages/ui/src/theme.tsx
+++ b/packages/ui/src/theme.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import * as React from "react";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { ThemeProvider, useTheme } from "next-themes";
 
diff --git a/packages/ui/src/toast.tsx b/packages/ui/src/toast.tsx
index 5b2a2f8dd..7c49bbdf2 100644
--- a/packages/ui/src/toast.tsx
+++ b/packages/ui/src/toast.tsx
@@ -1,10 +1,9 @@
 "use client";
 
+import type { ToasterProps } from "sonner";
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, toast } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
 function Toaster({ ...props }: ToasterProps) {
   const { theme = "system" } = useTheme();
 

From 31f5fb4b34d13c43e644a2c23e9201720533b648 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:04:32 +0330
Subject: [PATCH 10/11] cleanup

---
 packages/ui/src/button.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 3550a3b93..787548dfc 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -1,4 +1,5 @@
 import type { VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
@@ -35,7 +36,7 @@ const buttonVariants = cva(
 );
 
 interface ButtonProps
-  extends React.ComponentProps<"button">,
+  extends ComponentProps<"button">,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }

From 21bc5bd23ef39e54b9d8db4d2625f6f189608bf9 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 16 Nov 2024 18:32:39 +0330
Subject: [PATCH 11/11] revert using radix's built in prop types

they don't include ref as prop yet
---
 packages/ui/src/dropdown-menu.tsx | 26 ++++++++------------------
 packages/ui/src/form.tsx          |  6 ++----
 packages/ui/src/label.tsx         |  7 +++++--
 3 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index 0e5bbf0ba..0b6e349c2 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -1,13 +1,3 @@
-import type {
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuContentProps,
-  DropdownMenuItemProps,
-  DropdownMenuLabelProps,
-  DropdownMenuRadioItemProps,
-  DropdownMenuSeparatorProps,
-  DropdownMenuSubContentProps,
-  DropdownMenuSubTriggerProps,
-} from "@radix-ui/react-dropdown-menu";
 import type { ComponentProps } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
@@ -30,7 +20,7 @@ function DropdownMenuSubTrigger({
   inset,
   children,
   ...props
-}: DropdownMenuSubTriggerProps & {
+}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
   inset?: boolean;
 }) {
   return (
@@ -51,7 +41,7 @@ function DropdownMenuSubTrigger({
 function DropdownMenuSubContent({
   className,
   ...props
-}: DropdownMenuSubContentProps) {
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
   return (
     <DropdownMenuPrimitive.SubContent
       className={cn(
@@ -67,7 +57,7 @@ function DropdownMenuContent({
   className,
   sideOffset = 4,
   ...props
-}: DropdownMenuContentProps) {
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
@@ -87,7 +77,7 @@ function DropdownMenuItem({
   className,
   inset,
   ...props
-}: DropdownMenuItemProps & {
+}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
   inset?: boolean;
 }) {
   return (
@@ -106,7 +96,7 @@ function DropdownMenuCheckboxItem({
   className,
   children,
   ...props
-}: DropdownMenuCheckboxItemProps) {
+}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       className={cn(
@@ -129,7 +119,7 @@ function DropdownMenuRadioItem({
   className,
   children,
   ...props
-}: DropdownMenuRadioItemProps) {
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
   return (
     <DropdownMenuPrimitive.RadioItem
       className={cn(
@@ -152,7 +142,7 @@ function DropdownMenuLabel({
   className,
   inset,
   ...props
-}: DropdownMenuLabelProps & {
+}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
   inset?: boolean;
 }) {
   return (
@@ -170,7 +160,7 @@ function DropdownMenuLabel({
 function DropdownMenuSeparator({
   className,
   ...props
-}: DropdownMenuSeparatorProps) {
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
       className={cn("-mx-1 my-1 h-px bg-muted", className)}
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index aa958d670..43ca1f52f 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import type { LabelProps } from "@radix-ui/react-label";
-import type { SlotProps } from "@radix-ui/react-slot";
 import type { ComponentProps } from "react";
 import type {
   ControllerProps,
@@ -100,7 +98,7 @@ function FormItem({ className, ...props }: ComponentProps<"div">) {
   );
 }
 
-function FormLabel({ className, ...props }: LabelProps) {
+function FormLabel({ className, ...props }: ComponentProps<typeof Label>) {
   const { error, formItemId } = useFormField();
 
   return (
@@ -112,7 +110,7 @@ function FormLabel({ className, ...props }: LabelProps) {
   );
 }
 
-function FormControl({ ...props }: SlotProps) {
+function FormControl({ ...props }: ComponentProps<typeof Slot>) {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
 
diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index 80b7d216d..5ba2c5324 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -1,9 +1,12 @@
-import type { LabelProps } from "@radix-ui/react-label";
+import type { ComponentProps } from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 
 import { cn } from "@acme/ui";
 
-function Label({ className, ...props }: LabelProps) {
+function Label({
+  className,
+  ...props
+}: ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       className={cn(