171 bug allow passing refs to inputbutton components (#172)

* Refactor UI components to use ComponentPropsWithRef for improved type safety
* Updated dependencies and removed duplicate instance of Tslint since it's already provided in the Next.js config

packages/ui/package.json

@@ -43,10 +43,10 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@radix-ui/react-icons": "^1.3.2",
-    "@tanstack/react-query": "5.66.3",
+    "@tanstack/react-query": "5.66.7",
     "@tanstack/react-table": "^8.21.2",
-    "@types/react": "19.0.9",
-    "@types/react-dom": "19.0.3",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
     "eslint": "^9.20.1",
@@ -55,9 +55,9 @@
     "prettier": "^3.5.1",
     "react-day-picker": "^8.10.1",
     "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.4.0",
-    "sonner": "^1.7.4",
-    "tailwindcss": "4.0.6",
+    "react-i18next": "^15.4.1",
+    "sonner": "^2.0.0",
+    "tailwindcss": "4.0.7",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.7.3",
     "zod": "^3.24.2"

packages/ui/src/shadcn/alert.tsx

@@ -26,7 +26,7 @@ const alertVariants = cva(
 );
 
 const Alert: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+  React.ComponentPropsWithRef<'div'> & VariantProps<typeof alertVariants>
 > = ({ className, variant, ...props }) => (
   <div
     role="alert"
@@ -36,7 +36,7 @@ const Alert: React.FC<
 );
 Alert.displayName = 'Alert';
 
-const AlertTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+const AlertTitle: React.FC<React.ComponentPropsWithRef<'h5'>> = ({
   className,
   ...props
 }) => (
@@ -48,7 +48,7 @@ const AlertTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
 AlertTitle.displayName = 'AlertTitle';
 
 const AlertDescription: React.FC<
-  React.HTMLAttributes<HTMLParagraphElement>
+  React.ComponentPropsWithRef<'div'>
 > = ({ className, ...props }) => (
   <div
     className={cn('text-sm font-normal [&_p]:leading-relaxed', className)}

packages/ui/src/shadcn/button.tsx

@@ -37,7 +37,7 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ComponentPropsWithRef<'button'>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }

packages/ui/src/shadcn/form.tsx

@@ -68,7 +68,7 @@ const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue,
 );
 
-const FormItem: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+const FormItem: React.FC<React.ComponentPropsWithRef<'div'>> = ({
   className,
   ...props
 }) => {
@@ -118,7 +118,7 @@ const FormControl: React.FC<React.ComponentPropsWithoutRef<typeof Slot>> = ({
 };
 FormControl.displayName = 'FormControl';
 
-const FormDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+const FormDescription: React.FC<React.ComponentPropsWithRef<'p'>> = ({
   className,
   ...props
 }) => {
@@ -134,7 +134,7 @@ const FormDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
 };
 FormDescription.displayName = 'FormDescription';
 
-const FormMessage: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+const FormMessage: React.FC<React.ComponentPropsWithRef<'p'>> = ({
   className,
   children,
   ...props

packages/ui/src/shadcn/input.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { cn } from '../lib/utils';
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = React.ComponentPropsWithRef<'input'>;
 
 const Input: React.FC<InputProps> = ({
   className,

packages/ui/src/shadcn/textarea.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { cn } from '../lib/utils';
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type TextareaProps = React.ComponentPropsWithRef<'textarea'>;
 
 const Textarea: React.FC<TextareaProps> = ({ className, ...props }) => {
   return (