diff --git a/app/components/floating-toolbar.tsx b/app/components/floating-toolbar.tsx index 41b5be03d..5e0e82364 100644 --- a/app/components/floating-toolbar.tsx +++ b/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' diff --git a/app/components/progress-bar.tsx b/app/components/progress-bar.tsx index d493f7096..f99a6986a 100644 --- a/app/components/progress-bar.tsx +++ b/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" >
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx index e42b070f8..5db2e43b3 100644 --- a/app/components/ui/button.tsx +++ b/app/components/ui/button.tsx @@ -5,7 +5,7 @@ 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: { @@ -13,7 +13,7 @@ const buttonVariants = cva( 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, - VariantProps { - asChild?: boolean -} +export type ButtonVariant = VariantProps -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button' - return ( - - ) - }, -) -Button.displayName = 'Button' +const Button = ({ + className, + variant, + size, + asChild = false, + ...props +}: React.ComponentProps<'button'> & + ButtonVariant & { + asChild?: boolean + }) => { + const Comp = asChild ? Slot : 'button' + return ( + + ) +} export { Button, buttonVariants } diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx index 637a7fdd6..17a4b3793 100644 --- a/app/components/ui/checkbox.tsx +++ b/app/components/ui/checkbox.tsx @@ -10,19 +10,20 @@ export type CheckboxProps = Omit< type?: string } -const Checkbox = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +const Checkbox = ({ + className, + ...props +}: React.ComponentProps) => ( @@ -35,7 +36,6 @@ const Checkbox = React.forwardRef< -)) -Checkbox.displayName = CheckboxPrimitive.Root.displayName +) export { Checkbox } diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx index 3bb4fe3a3..2e7484e24 100644 --- a/app/components/ui/dropdown-menu.tsx +++ b/app/components/ui/dropdown-menu.tsx @@ -3,108 +3,148 @@ import * as React from 'react' import { cn } from '#app/utils/misc.tsx' -const DropdownMenu = DropdownMenuPrimitive.Root +function DropdownMenu( + props: React.ComponentProps, +) { + return +} -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger +function DropdownMenuPortal( + props: React.ComponentProps, +) { + return ( + + ) +} -const DropdownMenuGroup = DropdownMenuPrimitive.Group +function DropdownMenuTrigger( + props: React.ComponentProps, +) { + return ( + + ) +} -const DropdownMenuPortal = DropdownMenuPrimitive.Portal +function DropdownMenuGroup( + props: React.ComponentProps, +) { + return ( + + ) +} -const DropdownMenuSub = DropdownMenuPrimitive.Sub +function DropdownMenuSub( + props: React.ComponentProps, +) { + return +} -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +function DropdownMenuRadioGroup( + props: React.ComponentProps, +) { + return ( + + ) +} -const DropdownMenuSubTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean - } ->(({ className, inset, children, ...props }, ref) => ( +const DropdownMenuContent = ({ + className, + sideOffset = 4, + ...props +}: React.ComponentProps) => ( + + + +) + +const DropdownMenuSubTrigger = ({ + className, + inset, + children, + ...props +}: React.ComponentProps & { + inset?: boolean +}) => ( {children} - ▶️ + ▶️ -)) -DropdownMenuSubTrigger.displayName = - DropdownMenuPrimitive.SubTrigger.displayName - -const DropdownMenuSubContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +) + +const DropdownMenuSubContent = ({ + className, + ...props +}: React.ComponentProps) => ( -)) -DropdownMenuSubContent.displayName = - DropdownMenuPrimitive.SubContent.displayName - -const DropdownMenuContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( - - - -)) -DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName - -const DropdownMenuItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean - } ->(({ className, inset, ...props }, ref) => ( +) + +const DropdownMenuItem = ({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean +}) => ( -)) -DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName +) -const DropdownMenuCheckboxItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, checked, ...props }, ref) => ( +const DropdownMenuCheckboxItem = ({ + className, + children, + checked, + ...props +}: React.ComponentProps) => ( - + - + {children} -)) -DropdownMenuCheckboxItem.displayName = - DropdownMenuPrimitive.CheckboxItem.displayName - -const DropdownMenuRadioItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( +) + +const DropdownMenuRadioItem = ({ + className, + children, + ...props +}: React.ComponentProps) => ( - + - ⚪ + ⚪ {children} -)) -DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName - -const DropdownMenuLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean - } ->(({ className, inset, ...props }, ref) => ( +) + +const DropdownMenuLabel = ({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean +}) => ( -)) -DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName +) -const DropdownMenuSeparator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +const DropdownMenuSeparator = ({ + className, + ...props +}: React.ComponentProps) => ( -)) -DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName +) const DropdownMenuShortcut = ({ className, @@ -185,7 +223,6 @@ const DropdownMenuShortcut = ({ /> ) } -DropdownMenuShortcut.displayName = 'DropdownMenuShortcut' export { DropdownMenu, diff --git a/app/components/ui/icon.tsx b/app/components/ui/icon.tsx index 10b8c1d0d..21129f23e 100644 --- a/app/components/ui/icon.tsx +++ b/app/components/ui/icon.tsx @@ -7,12 +7,12 @@ export { href } export { IconName } const sizeClassName = { - font: 'w-[1em] h-[1em]', - xs: 'w-3 h-3', - sm: 'w-4 h-4', - md: 'w-5 h-5', - lg: 'w-6 h-6', - xl: 'w-7 h-7', + font: 'size-[1em]', + xs: 'size-3', + sm: 'size-4', + md: 'size-5', + lg: 'size-6', + xl: 'size-7', } as const type Size = keyof typeof sizeClassName diff --git a/app/components/ui/input-otp.tsx b/app/components/ui/input-otp.tsx index ff7a2d7b1..be999537b 100644 --- a/app/components/ui/input-otp.tsx +++ b/app/components/ui/input-otp.tsx @@ -3,34 +3,40 @@ import * as React from 'react' import { cn } from '#app/utils/misc.tsx' -const InputOTP = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, containerClassName, ...props }, ref) => ( +const InputOTP = ({ + className, + containerClassName, + ...props +}: React.ComponentProps) => ( -)) -InputOTP.displayName = 'InputOTP' +) -const InputOTPGroup = React.forwardRef< - React.ElementRef<'div'>, - React.ComponentPropsWithoutRef<'div'> ->(({ className, ...props }, ref) => ( -
-)) -InputOTPGroup.displayName = 'InputOTPGroup' +const InputOTPGroup = ({ + className, + ...props +}: React.ComponentProps<'div'>) => ( +
+) -const InputOTPSlot = React.forwardRef< - React.ElementRef<'div'>, - React.ComponentPropsWithoutRef<'div'> & { index: number } ->(({ index, className, ...props }, ref) => { +const InputOTPSlot = ({ + index, + className, + ...props +}: React.ComponentProps<'div'> & { + index: number +}) => { const inputOTPContext = React.useContext(OTPInputContext) const slot = inputOTPContext.slots[index] if (!slot) throw new Error('Invalid slot index') @@ -38,10 +44,10 @@ const InputOTPSlot = React.forwardRef< return (
-
+
)}
) -}) -InputOTPSlot.displayName = 'InputOTPSlot' +} -const InputOTPSeparator = React.forwardRef< - React.ElementRef<'div'>, - React.ComponentPropsWithoutRef<'div'> ->(({ ...props }, ref) => ( -
- - -
-)) -InputOTPSeparator.displayName = 'InputOTPSeparator' +const InputOTPSeparator = (props: React.ComponentProps<'div'>) => ( +
+) export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx index f4b2db38e..0396829d5 100644 --- a/app/components/ui/input.tsx +++ b/app/components/ui/input.tsx @@ -2,24 +2,22 @@ import * as React from 'react' import { cn } from '#app/utils/misc.tsx' -export interface InputProps - extends React.InputHTMLAttributes {} - -const Input = React.forwardRef( - ({ className, type, ...props }, ref) => { - return ( - - ) - }, -) -Input.displayName = 'Input' +const Input = ({ + className, + type, + ...props +}: React.ComponentProps<'input'>) => { + return ( + + ) +} export { Input } diff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx index ec453ee26..1669cf84f 100644 --- a/app/components/ui/label.tsx +++ b/app/components/ui/label.tsx @@ -1,24 +1,22 @@ import * as LabelPrimitive from '@radix-ui/react-label' -import { cva, type VariantProps } from 'class-variance-authority' +import { cva } from 'class-variance-authority' import * as React from 'react' import { cn } from '#app/utils/misc.tsx' const labelVariants = cva( - 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', + 'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70', ) -const Label = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & - VariantProps ->(({ className, ...props }, ref) => ( +const Label = ({ + className, + ...props +}: React.ComponentProps) => ( -)) -Label.displayName = LabelPrimitive.Root.displayName +) export { Label } diff --git a/app/components/ui/status-button.tsx b/app/components/ui/status-button.tsx index f39a7ffd6..17f8f5624 100644 --- a/app/components/ui/status-button.tsx +++ b/app/components/ui/status-button.tsx @@ -1,7 +1,6 @@ -import * as React from 'react' import { useSpinDelay } from 'spin-delay' import { cn } from '#app/utils/misc.tsx' -import { Button, type ButtonProps } from './button.tsx' +import { Button, type ButtonVariant } from './button.tsx' import { Icon } from './icon.tsx' import { Tooltip, @@ -10,14 +9,19 @@ import { TooltipTrigger, } from './tooltip.tsx' -export const StatusButton = React.forwardRef< - HTMLButtonElement, - ButtonProps & { +export const StatusButton = ({ + message, + status, + className, + children, + spinDelay, + ...props +}: React.ComponentProps<'button'> & + ButtonVariant & { status: 'pending' | 'success' | 'error' | 'idle' message?: string | null spinDelay?: Parameters[1] - } ->(({ message, status, className, children, spinDelay, ...props }, ref) => { + }) => { const delayedPending = useSpinDelay(status === 'pending', { delay: 400, minDuration: 300, @@ -27,7 +31,7 @@ export const StatusButton = React.forwardRef< pending: delayedPending ? (
@@ -35,7 +39,7 @@ export const StatusButton = React.forwardRef< success: (
@@ -43,7 +47,7 @@ export const StatusButton = React.forwardRef< error: (
+ ) -}) +} StatusButton.displayName = 'Button' diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx index 2e8ea5e05..0acaa96c1 100644 --- a/app/components/ui/textarea.tsx +++ b/app/components/ui/textarea.tsx @@ -2,23 +2,19 @@ import * as React from 'react' import { cn } from '#app/utils/misc.tsx' -export interface TextareaProps - extends React.TextareaHTMLAttributes {} - -const Textarea = React.forwardRef( - ({ className, ...props }, ref) => { - return ( -