fix: eslint

packages/canary/src/components/accordion.tsx

@@ -84,7 +84,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>

packages/canary/src/components/badge.tsx

@@ -17,24 +17,24 @@ enum BadgesHoverStates {
 }
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
         outline: 'text-foreground'
       },
       size: {
         default: 'px-2.5 py-0.5 text-xs font-semibold',
         lg: 'px-3 py-1 text-xs font-normal',
-        sm: 'h-5 px-1 text-12 leading-none',
-        xs: 'px-1.5 py-0 text-11 font-light',
+        sm: 'text-12 h-5 px-1 leading-none',
+        xs: 'text-11 px-1.5 py-0 font-light',
         // TODO: Consider switching size variants to numeric values
         // Numeric size variants (like '18') provide clearer context about actual dimensions
         // compared to abstract sizes (xs, sm, lg).
-        '18': 'h-[18px] px-2 text-12'
+        '18': 'text-12 h-[18px] px-2'
       },
       borderRadius: {
         default: '',

packages/canary/src/components/button.tsx

@@ -6,15 +6,15 @@ import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-[4px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-[4px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+        outline: 'border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8 border',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
         ghost: 'text-foreground-8 hover:bg-background-4 hover:text-foreground-1',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',

packages/canary/src/components/card.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow', {
+const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', {
   variants: {
     variant: {
       default: '',

packages/canary/src/components/command.tsx

@@ -28,7 +28,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
           {children}
         </Command>
       </DialogContent>

packages/canary/src/components/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

packages/canary/src/components/drawer.tsx

@@ -36,7 +36,7 @@ const DrawerContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>

packages/canary/src/components/dropdown-menu.tsx

@@ -126,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex size-4 items-center justify-center rounded-sm border border-borders-9 group-data-[state=checked]:border-icons-2">
-      <DropdownMenuPrimitive.ItemIndicator className="flex size-full items-center justify-center bg-icons-2">
-        <Icon className="h-[7px] text-icons-5" name="checkbox" />
+    <span className="border-borders-9 group-data-[state=checked]:border-icons-2 absolute left-2 flex size-4 items-center justify-center rounded-sm border">
+      <DropdownMenuPrimitive.ItemIndicator className="bg-icons-2 flex size-full items-center justify-center">
+        <Icon className="text-icons-5 h-[7px]" name="checkbox" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     <span className="text-14 text-foreground-8">{children}</span>

packages/canary/src/components/effects/spotlights-box.tsx

@@ -88,7 +88,7 @@ function Root({ highlightTop = '', highlightBottom = '', logo, logoSize = 84, ch
 
   return (
     <div
-      className="group relative h-[220px] w-full cursor-pointer overflow-hidden rounded-lg border border-primary/5 duration-150 ease-in-out"
+      className="border-primary/5 group relative h-[220px] w-full cursor-pointer overflow-hidden rounded-lg border duration-150 ease-in-out"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -98,7 +98,7 @@ function Root({ highlightTop = '', highlightBottom = '', logo, logoSize = 84, ch
         height="100%"
         className="absolute inset-0 size-full rounded-lg brightness-110 duration-150 ease-in-out group-hover:brightness-125"
       />
-      <div className="absolute inset-px rounded-lg bg-background/40" />
+      <div className="bg-background/40 absolute inset-px rounded-lg" />
       <div className="absolute inset-0 flex items-center justify-center">
         {logo && <Icon name={logo} size={logoSize} />}
       </div>

packages/canary/src/components/input-otp.tsx

@@ -51,7 +51,7 @@ const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
         {char}
         {hasFakeCaret && (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-            <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+            <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
           </div>
         )}
       </div>

packages/canary/src/components/list-actions.tsx

@@ -32,8 +32,8 @@ function Right({ children }: { children: React.ReactNode }) {
 function Dropdown({ title, items, onChange, selectedValue }: DropdownProps) {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="flex cursor-pointer items-center gap-1.5 text-tertiary-background duration-100 ease-in-out hover:text-primary">
-        {selectedValue && <span className="size-[4px] rounded-full bg-primary"></span>}
+      <DropdownMenuTrigger className="text-tertiary-background hover:text-primary flex cursor-pointer items-center gap-1.5 duration-100 ease-in-out">
+        {selectedValue && <span className="bg-primary size-[4px] rounded-full"></span>}
         <Text
           size={2}
           className={cn('text-primary/80', {

packages/canary/src/components/navbar-project-chooser.tsx

@@ -32,7 +32,7 @@ function Root({ logo }: ProjectProps) {
         showOnFocus
       />
       <Dialog open={isSearchDialogOpen} onOpenChange={closeSearchDialog}>
-        <DialogContent className="h-[600px] max-w-[800px] border-border bg-primary-background">
+        <DialogContent className="border-border bg-primary-background h-[600px] max-w-[800px]">
           <DialogHeader>
             <DialogTitle>Search</DialogTitle>
             <DialogDescription>

packages/canary/src/components/navbar-user.tsx

@@ -39,17 +39,17 @@ const UserBlock = ({ username, role, url, isButton = false, className }: UserBlo
       )}
     >
       {isButton && (
-        <div className="absolute -inset-2 rounded duration-100 ease-in-out group-hover:bg-background-4 group-data-[state=open]:bg-background-4" />
+        <div className="group-hover:bg-background-4 group-data-[state=open]:bg-background-4 absolute -inset-2 rounded duration-100 ease-in-out" />
       )}
       <div className="col-start-1 row-span-2">
         <Avatar className="overflow-hidden rounded-md" size="8">
           {url && <AvatarImage src={url} alt="user" />}
           <AvatarFallback>{getInitials(username)}</AvatarFallback>
         </Avatar>
       </div>
-      <p className="col-start-2 row-start-1 text-13 font-medium leading-none text-foreground-1">{username}</p>
+      <p className="text-13 text-foreground-1 col-start-2 row-start-1 font-medium leading-none">{username}</p>
       {!!role && (
-        <p className="col-start-2 row-start-2 mt-0.5 text-13 font-normal leading-none text-foreground-4">{role}</p>
+        <p className="text-13 text-foreground-4 col-start-2 row-start-2 mt-0.5 font-normal leading-none">{role}</p>
       )}
     </Tag>
   )
@@ -70,7 +70,7 @@ const Root: React.FC<{
       </DropdownMenuTrigger>
       {menuItems && (
         <DropdownMenuContent
-          className="ml-3 w-[230px] bg-background-1"
+          className="bg-background-1 ml-3 w-[230px]"
           align="start"
           sideOffset={-40}
           alignOffset={187}

packages/canary/src/components/navbar/index.tsx

@@ -124,9 +124,9 @@ function Item({ icon, text, description, active, submenuItem, className }: ItemP
         />
         <div className="z-10 col-start-1 row-span-full mt-px flex items-center">
           {icon ? (
-            <div className="sub-menu-icon-bg relative flex size-8 place-content-center place-items-center rounded border border-borders-1 bg-background-2">
+            <div className="sub-menu-icon-bg border-borders-1 bg-background-2 relative flex size-8 place-content-center place-items-center rounded border">
               <Icon
-                className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground-3"
+                className="text-foreground-3 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
                 name="sub-menu-ellipse"
                 size={18}
               />
@@ -148,7 +148,7 @@ function Item({ icon, text, description, active, submenuItem, className }: ItemP
             {text}
           </Text>
           {!!description && (
-            <Text className="z-10 w-full truncate leading-4 text-foreground-4 duration-0 ease-in-out" size={1} truncate>
+            <Text className="text-foreground-4 z-10 w-full truncate leading-4 duration-0 ease-in-out" size={1} truncate>
               {description}
             </Text>
           )}
@@ -193,7 +193,7 @@ function Item({ icon, text, description, active, submenuItem, className }: ItemP
 
 function Footer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sticky bottom-0 z-20 grid h-[72px] items-center border-t border-borders-5 px-4">{children}</div>
+    <div className="border-borders-5 sticky bottom-0 z-20 grid h-[72px] items-center border-t px-4">{children}</div>
   )
 }
 

packages/canary/src/components/navigation-menu.tsx

@@ -35,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50'
+  'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50'
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -102,7 +102,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ))
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName

packages/canary/src/components/node-group.tsx

@@ -37,7 +37,7 @@ function Icon({
         )}
       >
         {simpleNodeIcon ? (
-          <div className="size-[4px] rounded-[1px] bg-primary shadow-sm shadow-primary/10" />
+          <div className="bg-primary shadow-primary/10 size-[4px] rounded-[1px] shadow-sm" />
         ) : (
           <>{children}</>
         )}

packages/canary/src/components/progress.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 const progressVariants = cva('', {
   variants: {
     variant: {
-      default: 'relative w-full overflow-hidden bg-primary/20',
+      default: 'bg-primary/20 relative w-full overflow-hidden',
       divergence: 'relative w-full overflow-hidden bg-transparent'
     },
     size: {

packages/canary/src/components/radio-group.tsx

@@ -26,7 +26,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="size-3.5 fill-primary" />
+        <CheckIcon className="fill-primary size-3.5" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

packages/canary/src/components/resizable.tsx

@@ -27,7 +27,7 @@ const ResizableHandle = ({
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
         <DragHandleDots2Icon className="size-2.5" />
       </div>
     )}

packages/canary/src/components/resource-box.tsx

@@ -2,7 +2,7 @@ import { Icon, type IconProps } from './icon'
 
 function Root({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-[233px] flex-col gap-5 rounded-md border bg-muted/25 px-5 py-3 pb-5 pr-4">{children}</div>
+    <div className="bg-muted/25 flex h-[233px] flex-col gap-5 rounded-md border px-5 py-3 pb-5 pr-4">{children}</div>
   )
 }
 

packages/canary/src/components/scroll-area.tsx

@@ -32,7 +32,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-background-9" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-background-9 relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

packages/canary/src/components/search-box.tsx

@@ -112,10 +112,10 @@ const Root = forwardRef<HTMLInputElement, SearchBoxProps>(
     return (
       <div className={cn('relative', width === 'full' ? 'w-full' : 'w-96', className)}>
         {hasSearchIcon && (
-          <Icon name="search" size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-icons-1" />
+          <Icon name="search" size={12} className="text-icons-1 absolute left-2.5 top-1/2 -translate-y-1/2" />
         )}
         {hasShortcut && !!shortcutLetter && (
-          <div className="absolute right-1.5 top-1/2 flex h-5 -translate-y-1/2 cursor-pointer items-center gap-0.5 rounded-sm border bg-background-3 px-1 text-foreground-2 duration-100 ease-in-out">
+          <div className="bg-background-3 text-foreground-2 absolute right-1.5 top-1/2 flex h-5 -translate-y-1/2 cursor-pointer items-center gap-0.5 rounded-sm border px-1 duration-100 ease-in-out">
             <Icon name="apple-shortcut" size={12} />
             <Text size={0} className="text-inherit">
               {shortcutLetter}

packages/canary/src/components/sheet.tsx

@@ -46,16 +46,16 @@ const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Ove
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b',
         bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
         left: 'inset-y-0 left-0 h-full w-3/4 !animate-none border-r sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
+          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
       }
     },
     defaultVariants: {