upgrade to tailwind v4 and some minor tweaks (#968)

* upgrade to tailwind v4 and some minor tweaks

* added optional size prop and made variant prop optional of status button

* set the config to "" as tailwind config no longer exist in tailwind v4 and fixed the colors

Author: AdityaKirad

app/components/floating-toolbar.tsx

@@ -1,2 +1,2 @@
 export const floatingToolbarClassName =
-	'absolute bottom-3 left-3 right-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-sm md:gap-4 md:pl-7 justify-end'
+	'absolute bottom-3 inset-x-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-xs md:gap-4 md:pl-7 justify-end'

app/components/progress-bar.tsx

@@ -32,12 +32,12 @@ function EpicProgress() {
 			role="progressbar"
 			aria-hidden={delayedPending ? undefined : true}
 			aria-valuetext={delayedPending ? 'Loading' : undefined}
-			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse"
+			className="fixed inset-x-0 top-0 z-50 h-[0.20rem] animate-pulse"
 		>
 			<div
 				ref={ref}
 				className={cn(
-					'h-full w-0 bg-foreground duration-500 ease-in-out',
+					'bg-foreground h-full w-0 duration-500 ease-in-out',
 					transition.state === 'idle' &&
 						(animationComplete
 							? 'transition-none'
@@ -51,7 +51,7 @@ function EpicProgress() {
 					<Icon
 						name="update"
 						size="md"
-						className="m-1 animate-spin text-foreground"
+						className="text-foreground m-1 animate-spin"
 						aria-hidden
 					/>
 				</div>

app/components/ui/button.tsx

@@ -5,15 +5,15 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
+	'ring-ring ring-offset-background inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-2 outline-hidden transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
 				destructive:
 					'bg-destructive text-destructive-foreground hover:bg-destructive/80',
 				outline:
-					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+					'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
 				secondary:
 					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground',
@@ -25,7 +25,7 @@ const buttonVariants = cva(
 				sm: 'h-9 rounded-md px-3',
 				lg: 'h-11 rounded-md px-8',
 				pill: 'px-12 py-3 leading-3',
-				icon: 'h-10 w-10',
+				icon: 'size-10',
 			},
 		},
 		defaultVariants: {
@@ -35,24 +35,26 @@ const buttonVariants = cva(
 	},
 )
 
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	asChild?: boolean
-}
+export type ButtonVariant = VariantProps<typeof buttonVariants>
 
-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'
+const Button = ({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
+	ButtonVariant & {
+		asChild?: boolean
+	}) => {
+	const Comp = asChild ? Slot : 'button'
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
 
 export { Button, buttonVariants }

app/components/ui/checkbox.tsx

@@ -10,19 +10,20 @@ export type CheckboxProps = Omit<
 	type?: string
 }
 
-const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Checkbox = ({
+	className,
+	...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) => (
 	<CheckboxPrimitive.Root
-		ref={ref}
+		data-slot="checkbox"
 		className={cn(
-			'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+			'peer border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground size-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
 			className,
 		)}
 		{...props}
 	>
 		<CheckboxPrimitive.Indicator
+			data-slot="checkbox-indicator"
 			className={cn('flex items-center justify-center text-current')}
 		>
 			<svg viewBox="0 0 8 8">
@@ -35,7 +36,6 @@ const Checkbox = React.forwardRef<
 			</svg>
 		</CheckboxPrimitive.Indicator>
 	</CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+)
 
 export { Checkbox }