refactor: standardize import paths and improve component styles acros…

…s UI components

packages/ui/src/components/badge.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 
+import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from '../utils/cn'
-
 enum BadgesHoverStates {
   ENABLED = 'enabled',
   DISABLED_DEFAULT = 'disabled-default',
@@ -18,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/ui/src/components/calendar.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import { DayPicker, type DateRange } from 'react-day-picker'
 
 import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import { cn } from '@utils/cn'
 
-import { cn } from '../utils/cn'
 import { buttonVariants } from './button'
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>

packages/ui/src/components/dialog.tsx

@@ -2,8 +2,7 @@ import * as React from 'react'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { Cross2Icon } from '@radix-ui/react-icons'
-
-import { cn } from '../utils/cn'
+import { cn } from '@utils/cn'
 
 const Dialog = DialogPrimitive.Root
 
@@ -43,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/ui/src/components/dropdown-menu.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons'
+import { cn } from '@utils/cn'
 
-import { cn } from '../utils/cn'
 import { Icon } from './icon'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
@@ -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/ui/src/components/filters/filters-bar/filters.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 
-import { cn } from '../../../utils/cn'
+import { cn } from '@utils/cn'
+
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../dropdown-menu'
 import { Icon } from '../../icon'
 import type { CheckboxFilterOption, FilterAction, FilterOption, FilterSearchQueries, FilterValue } from '../types'
@@ -83,8 +84,8 @@ const Filters = ({
 
   return (
     <DropdownMenu key={filter.type} open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger className="flex h-8 items-center gap-x-3 whitespace-nowrap rounded bg-background-3 pl-2.5 pr-2 transition-colors duration-200 hover:bg-background-8">
-        <div className="flex items-center gap-x-1.5 text-13">
+      <DropdownMenuTrigger className="bg-background-3 hover:bg-background-8 flex h-8 items-center gap-x-3 whitespace-nowrap rounded pl-2.5 pr-2 transition-colors duration-200">
+        <div className="text-13 flex items-center gap-x-1.5">
           <span className="text-foreground-1">
             {filterOption.label}
             {!!filter.selectedValues.length && ': '}
@@ -106,7 +107,7 @@ const Filters = ({
               <span className="text-14 text-foreground-4">{filterOption.label}</span>
 
               <DropdownMenu>
-                <DropdownMenuTrigger className="flex h-[18px] items-center gap-x-1 rounded bg-background-3 pl-1.5 pr-1 text-14 text-foreground-2">
+                <DropdownMenuTrigger className="bg-background-3 text-14 text-foreground-2 flex h-[18px] items-center gap-x-1 rounded pl-1.5 pr-1">
                   {filterOption.conditions?.find(c => c.value === filter.condition)?.label}
                   <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
                 </DropdownMenuTrigger>
@@ -126,17 +127,17 @@ const Filters = ({
             <DropdownMenu>
               <DropdownMenuTrigger className="group flex h-[18px] items-center px-1">
                 <Icon
-                  className="text-icons-1 transition-colors duration-200 group-hover:text-foreground-1"
+                  className="text-icons-1 group-hover:text-foreground-1 transition-colors duration-200"
                   name="more-dots-fill"
                   size={12}
                 />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start">
                 <DropdownMenuItem
-                  className="text-foreground-4 duration-200 hover:text-foreground-danger data-[highlighted]:bg-transparent data-[highlighted]:text-foreground-danger data-[highlighted]:outline-none"
+                  className="text-foreground-4 hover:text-foreground-danger data-[highlighted]:text-foreground-danger duration-200 data-[highlighted]:bg-transparent data-[highlighted]:outline-none"
                   onSelect={() => handleRemoveFilter?.(filter.type)}
                 >
-                  <button className="flex items-center gap-x-1.5 text-14">
+                  <button className="text-14 flex items-center gap-x-1.5">
                     <Icon name="trash" size={12} />
                     Delete filter
                   </button>
@@ -152,7 +153,7 @@ const Filters = ({
 
           {filterOption.type === 'checkbox' && getFilteredOptions(filterOption, filter, searchQueries).length === 0 && (
             <div className="flex items-center justify-center p-4">
-              <span className="text-1 leading-none text-foreground-2">No results</span>
+              <span className="text-1 text-foreground-2 leading-none">No results</span>
             </div>
           )}
         </div>

packages/ui/src/components/filters/filters-bar/sorts.tsx

@@ -6,9 +6,9 @@ import { Input } from '@components/input'
 import { closestCenter, DndContext } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import useDragAndDrop from '@hooks/use-drag-and-drop'
 import { cn } from '@utils/cn'
 
-import useDragAndDrop from '../../../hooks/use-drag-and-drop'
 import type { FilterAction, FilterSearchQueries, SortDirection, SortOption, SortValue } from '../types'
 import { UseFiltersReturn } from '../use-filters'
 import { getSortTriggerLabel } from '../utils'
@@ -47,15 +47,15 @@ const SortableItem = ({
       <div className="flex items-center justify-between gap-x-2">
         <div className="flex items-center gap-x-2">
           <div
-            className="cursor-grab rounded p-1 hover:bg-background-3 active:cursor-grabbing"
+            className="hover:bg-background-3 cursor-grab rounded p-1 active:cursor-grabbing"
             {...attributes}
             {...listeners}
           >
             <Icon className="text-icons-1" name="grid-dots" size={12} />
           </div>
 
           <DropdownMenu>
-            <DropdownMenuTrigger className="flex h-6 items-center gap-x-1.5 rounded border border-borders-1 pl-2.5 pr-1.5 text-14 text-foreground-8">
+            <DropdownMenuTrigger className="border-borders-1 text-14 text-foreground-8 flex h-6 items-center gap-x-1.5 rounded border pl-2.5 pr-1.5">
               {sortOptions.find(opt => opt.value === sort.type)?.label}
               <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
             </DropdownMenuTrigger>
@@ -72,7 +72,7 @@ const SortableItem = ({
           </DropdownMenu>
 
           <DropdownMenu>
-            <DropdownMenuTrigger className="flex h-6 items-center gap-x-1.5 rounded border border-borders-1 pl-2.5 pr-1.5 text-14 text-foreground-8">
+            <DropdownMenuTrigger className="border-borders-1 text-14 text-foreground-8 flex h-6 items-center gap-x-1.5 rounded border pl-2.5 pr-1.5">
               {sortDirections.find(dir => dir.value === sort.direction)?.label}
               <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
             </DropdownMenuTrigger>
@@ -90,7 +90,7 @@ const SortableItem = ({
         </div>
 
         <button
-          className="p-1 text-foreground-4 transition-colors duration-200 hover:text-foreground-1 focus:bg-transparent"
+          className="text-foreground-4 hover:text-foreground-1 p-1 transition-colors duration-200 focus:bg-transparent"
           onClick={e => {
             e.preventDefault()
             onRemoveSort?.(index)
@@ -152,7 +152,7 @@ const Sorts = ({
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger className="flex h-8 items-center gap-x-3 whitespace-nowrap rounded bg-background-3 px-2.5 transition-colors duration-200 hover:bg-background-8">
+      <DropdownMenuTrigger className="bg-background-3 hover:bg-background-8 flex h-8 items-center gap-x-3 whitespace-nowrap rounded px-2.5 transition-colors duration-200">
         <div className="flex items-center gap-x-1">
           <Icon
             className={cn('text-icons-1', getSortTriggerLabel(activeSorts, sortOptions).isDescending && 'rotate-180')}
@@ -190,12 +190,12 @@ const Sorts = ({
         <div className="mt-3 flex flex-col gap-y-2.5">
           {sortOptions.some(option => !activeSorts.some(sort => sort.type === option.value)) && (
             <DropdownMenu>
-              <DropdownMenuTrigger className="flex w-full items-center gap-x-1.5 text-14 text-foreground-4 transition-colors duration-200 hover:text-foreground-1">
+              <DropdownMenuTrigger className="text-14 text-foreground-4 hover:text-foreground-1 flex w-full items-center gap-x-1.5 transition-colors duration-200">
                 <Icon name="plus" size={12} />
                 Add sort
               </DropdownMenuTrigger>
               <DropdownMenuContent className="min-w-[224px] p-0" align="start">
-                <div className="relative flex items-center justify-between border-b border-borders-4 px-3 py-2.5">
+                <div className="border-borders-4 relative flex items-center justify-between border-b px-3 py-2.5">
                   <DropdownMenuItem className="hover:bg-transparent focus:bg-transparent" asChild>
                     <Input
                       type="text"
@@ -210,7 +210,7 @@ const Sorts = ({
                   {searchQueries.menu['sort'] && (
                     <DropdownMenuItem className="absolute right-3 hover:bg-transparent focus:bg-transparent" asChild>
                       <button
-                        className="flex text-foreground-4 transition-colors duration-200 hover:text-foreground-1"
+                        className="text-foreground-4 hover:text-foreground-1 flex transition-colors duration-200"
                         onClick={e => {
                           e.preventDefault()
                           handleSearchChange('sort', '', 'menu')
@@ -239,7 +239,7 @@ const Sorts = ({
 
                   {filteredBySearchSortOptions.length === 0 && (
                     <div className="flex items-center justify-center p-4">
-                      <span className="text-1 leading-none text-foreground-2">No results</span>
+                      <span className="text-1 text-foreground-2 leading-none">No results</span>
                     </div>
                   )}
                 </div>
@@ -248,10 +248,10 @@ const Sorts = ({
           )}
 
           <DropdownMenuItem
-            className="p-0 text-foreground-4 transition-colors duration-200 focus:bg-transparent focus:text-foreground-danger focus:outline-none data-[highlighted]:bg-transparent data-[highlighted]:text-foreground-danger"
+            className="text-foreground-4 focus:text-foreground-danger data-[highlighted]:text-foreground-danger p-0 transition-colors duration-200 focus:bg-transparent focus:outline-none data-[highlighted]:bg-transparent"
             asChild
           >
-            <button className="flex items-center gap-x-1.5 text-14" onClick={handleResetSorts}>
+            <button className="text-14 flex items-center gap-x-1.5" onClick={handleResetSorts}>
               <Icon name="trash" size={12} />
               Delete sort
             </button>

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

@@ -1,10 +1,9 @@
 import { ComponentPropsWithoutRef, ElementRef, forwardRef, useContext } from 'react'
 
 import { DashIcon } from '@radix-ui/react-icons'
+import { cn } from '@utils/cn'
 import { OTPInput, OTPInputContext } from 'input-otp'
 
-import { cn } from '../utils/cn'
-
 const InputOTP = forwardRef<ElementRef<typeof OTPInput>, ComponentPropsWithoutRef<typeof OTPInput>>(
   ({ className, containerClassName, ...props }, ref) => (
     <OTPInput
@@ -49,7 +48,7 @@ const InputOTPSlot = forwardRef<HTMLDivElement, InputOTPSlotProps>(({ index, cla
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground-1 h-4 w-px duration-1000" />
+          <div className="animate-caret-blink bg-background-5 h-4 w-px duration-1000" />
         </div>
       )}
     </div>

packages/ui/src/components/input.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
 
+import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from '../utils/cn'
 import { ControlGroup } from './control-group'
 import { ErrorMessageTheme, FormErrorMessage } from './form-error-message'
 import { Label } from './label'

packages/ui/src/components/pagination.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
-import { cn } from '../utils/cn'
+import { cn } from '@utils/cn'
+
 import { buttonVariants, type ButtonProps } from './button'
 import { Icon } from './icon'
 

packages/ui/src/components/spacer.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 
+import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from '../utils/cn'
-
 const spacerVariants = cva('mt-4 block', {
   variants: {
     size: {

packages/ui/src/views/auth/otp-page.tsx

@@ -28,6 +28,7 @@ interface OTPPageProps {
   isLoading?: boolean
   handleFormSubmit?: (data: OtpPageData) => void
   error?: string
+  email?: string
 }
 
 export interface OtpPageData {
@@ -42,10 +43,15 @@ const otpPasswordSchema = z.object({
     .regex(/^\d+$/, { message: 'Code must contain only numbers' })
 })
 
-export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: OTPPageProps) {
+// TODO: remove default email when we have a way to get it from the url or context
+export function OTPPage({
+  handleResend,
+  isLoading,
+  handleFormSubmit,
+  error,
+  email = '[email protected]'
+}: OTPPageProps) {
   const [serverError, setServerError] = useState<string | null>(null)
-  // TODO: get email from url or from context
-  const email = '[email protected]'
 
   const {
     handleSubmit,
@@ -121,7 +127,6 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit, error }: OT
               {(errors.otp || serverError) && (
                 <Text
                   className="text-foreground-danger absolute top-full w-full translate-y-2 leading-none tracking-tight"
-                  weight="light"
                   align="center"
                   size={1}
                   as="p"

packages/ui/src/views/auth/signup-page.tsx

@@ -147,7 +147,7 @@ export function SignUpPage({ isLoading, handleSignUp, error }: SignUpPageProps)
             />
             {serverError && (
               <>
-                <Text className="text-foreground-danger mt-1 leading-none tracking-tight" weight="light" size={0}>
+                <Text className="text-foreground-danger mt-1 leading-none tracking-tight" size={0}>
                   {serverError}
                 </Text>
               </>

packages/ui/src/views/layouts/Floating1ColumnLayout.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../utils/cn'
+import { cn } from '@utils/cn'
 
 type HighlightTheme = 'blue' | 'green' | 'error'