chore: remove forwardRef from components (#58)

packages/ui-button/src/index.tsx

@@ -1,7 +1,6 @@
-import { forwardRef } from "react"
 import type { ArgsFunction } from "@halvaradop/ts-utility-types"
 import { cva, type VariantProps } from "class-variance-authority"
-import { merge, Slot, SlotProps } from "@halvaradop/ui-core"
+import { merge, Slot, type SlotProps } from "@halvaradop/ui-core"
 
 export type ButtonProps<T extends ArgsFunction> = SlotProps<"button"> & VariantProps<T>
 
@@ -41,13 +40,13 @@ export const buttonVariants = cva("flex items-center justify-center font-semibol
  * The Button component is a versatile and customizable button element.
  * It supports various variants, sizes, and additional props to enhance its appearance and functionality.
  */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps<typeof buttonVariants>>(({ className, variant, size, fullWidth, fullRounded, asChild, children, ...props }, ref) => {
+export const Button = ({ className, variant, size, fullWidth, fullRounded, asChild, children, ref, ...props }: ButtonProps<typeof buttonVariants>) => {
     const SlotComponent = asChild ? Slot : "button"
     return (
         <SlotComponent className={merge(buttonVariants({ className, variant, size, fullWidth, fullRounded }))} ref={ref} role="button" {...props}>
             {children}
         </SlotComponent>
     )
-})
+}
 
 Button.displayName = "Button"

packages/ui-core/src/slot.ts

@@ -11,9 +11,17 @@ export const Slot = ({ children, ...props }: { children: React.ReactNode }) => {
     return null
 }
 
-export type SlotWithAsChild<
+/**
+ * @internal
+ */
+type SlotWithAsChild<
     Component extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<unknown>,
-> = ({ asChild?: false } & ComponentProps<Component>) | { asChild: true; children: ReactNode }
+    Element extends HTMLElement,
+> =
+    | ({ asChild?: false } & ComponentProps<Component>)
+    | { asChild: true; children: ReactNode; ref: React.Ref<Element> | undefined }
 
-export type SlotProps<Component extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<unknown>> =
-    SlotWithAsChild<Component> & { className?: string }
+export type SlotProps<
+    Component extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<unknown>,
+    Element extends HTMLElement = never,
+> = SlotWithAsChild<Component, Element> & { className?: string }

packages/ui-dialog/src/index.tsx

@@ -1,8 +1,9 @@
-import { ComponentProps, forwardRef } from "react"
-import { cva } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import type { ArgsFunction } from "@halvaradop/ts-utility-types"
+import { cva, type VariantProps } from "class-variance-authority"
 import { merge } from "@halvaradop/ui-core"
 
-export type DialogProps = ComponentProps<"dialog">
+export type DialogProps<T extends ArgsFunction> = ComponentProps<"dialog"> & VariantProps<T>
 
 export const innerDialogVariants = cva("flex items-center justify-center", {
     variants: {
@@ -26,10 +27,10 @@ export const innerDialogVariants = cva("flex items-center justify-center", {
 
 const classNameDialog = "w-full min-h-screen max-w-none max-h-none items-center justify-center relative inset-0 bg-transparent backdrop:bg-slate-500/50 open:flex"
 
-export const Modal = forwardRef<HTMLDialogElement, DialogProps>(({ className, children, ...props }, ref) => {
+export const Modal = ({ className, children, ref, ...props }: DialogProps<typeof innerDialogVariants>) => {
     return (
         <dialog className={merge(classNameDialog, className)} ref={ref} {...props}>
             {children}
         </dialog>
     )
-})
+}

packages/ui-form/src/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, forwardRef } from "react"
+import type { ComponentProps } from "react"
 import type { ArgsFunction } from "@halvaradop/ts-utility-types"
 import { cva, type VariantProps } from "class-variance-authority"
 import { merge } from "@halvaradop/ui-core"
@@ -26,10 +26,10 @@ export const formVariants = cva("mx-auto flex items-center flex-col relative", {
     },
 })
 
-export const Form = forwardRef<HTMLFormElement, FormProps<typeof formVariants>>(({ className, variant, size, children, ...props }, ref) => {
+export const Form = ({ className, variant, size, children, ref, ...props }: FormProps<typeof formVariants>) => {
     return (
         <form className={merge(formVariants({ className, variant, size }))} ref={ref} {...props}>
             {children}
         </form>
     )
-})
+}

packages/ui-input/src/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ComponentProps } from "react"
+import type { ComponentProps } from "react"
 import type { ArgsFunction } from "@halvaradop/ts-utility-types"
 import { cva, type VariantProps } from "class-variance-authority"
 import { merge } from "@halvaradop/ui-core"
@@ -36,6 +36,6 @@ export const inputVariants = cva("text-slate-600 border focus-within:outline-non
     },
 })
 
-export const Input = forwardRef<HTMLInputElement, InputProps<typeof inputVariants>>(({ className, variant, size, fullWidth, fullRounded, type, ...props }, ref) => {
+export const Input = ({ className, variant, size, fullWidth, fullRounded, type, ref, ...props }: InputProps<typeof inputVariants>) => {
     return <input className={merge(inputVariants({ className, variant, size, fullWidth, fullRounded }))} type={type} ref={ref} {...props} />
-})
+}

packages/ui-label/src/index.tsx

@@ -1,6 +1,6 @@
 import type { ArgsFunction } from "@halvaradop/ts-utility-types"
 import { cva, type VariantProps } from "class-variance-authority"
-import { merge, Slot, SlotProps, SlotWithAsChild } from "@halvaradop/ui-core"
+import { merge, Slot, type SlotProps } from "@halvaradop/ui-core"
 
 export type LabelProps<T extends ArgsFunction> = SlotProps<"label"> & VariantProps<T>
 
@@ -23,10 +23,10 @@ export const labelVariants = cva("font-medium relative leading-none", {
     },
 })
 
-export const Label = ({ className, variant, size, children, asChild, ...props }: LabelProps<typeof labelVariants>) => {
+export const Label = ({ className, variant, size, children, asChild, ref, ...props }: LabelProps<typeof labelVariants>) => {
     const SlotComponent = asChild ? Slot : "label"
     return (
-        <SlotComponent className={merge(labelVariants({ className, variant, size }))} {...props}>
+        <SlotComponent className={merge(labelVariants({ className, variant, size }))} ref={ref} {...props}>
             {children}
         </SlotComponent>
     )