fix: fix linters and types

Author: iatopilskii

packages/ui/src/components/badge.tsx

@@ -17,24 +17,24 @@ enum BadgesHoverStates {
 }
 
 const badgeVariants = cva(
-  'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+  'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        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',
+        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',
         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: 'text-12 h-5 px-1 leading-none',
-        xs: 'text-11 px-1.5 py-0 font-light',
+        sm: 'h-5 px-1 text-12 leading-none',
+        xs: 'px-1.5 py-0 text-11 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': 'text-12 h-[18px] px-2'
+        '18': 'h-[18px] px-2 text-12'
       },
       borderRadius: {
         default: '',

packages/ui/src/components/card.tsx

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

packages/ui/src/components/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <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">
+      <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">
         <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

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

@@ -126,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <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" />
+    <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" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     <span className="text-14 text-foreground-8">{children}</span>

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

@@ -84,8 +84,8 @@ const Filters = ({
 
   return (
     <DropdownMenu key={filter.type} open={isOpen} onOpenChange={setIsOpen}>
-      <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">
+      <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">
           <span className="text-foreground-1">
             {filterOption.label}
             {!!filter.selectedValues.length && ': '}
@@ -107,7 +107,7 @@ const Filters = ({
               <span className="text-14 text-foreground-4">{filterOption.label}</span>
 
               <DropdownMenu>
-                <DropdownMenuTrigger className="bg-background-3 text-14 text-foreground-2 flex h-[18px] items-center gap-x-1 rounded pl-1.5 pr-1">
+                <DropdownMenuTrigger className="flex h-[18px] items-center gap-x-1 rounded bg-background-3 pl-1.5 pr-1 text-14 text-foreground-2">
                   {filterOption.conditions?.find(c => c.value === filter.condition)?.label}
                   <Icon className="chevron-down text-icons-1" name="chevron-down" size={10} />
                 </DropdownMenuTrigger>
@@ -127,17 +127,17 @@ const Filters = ({
             <DropdownMenu>
               <DropdownMenuTrigger className="group flex h-[18px] items-center px-1">
                 <Icon
-                  className="text-icons-1 group-hover:text-foreground-1 transition-colors duration-200"
+                  className="text-icons-1 transition-colors duration-200 group-hover:text-foreground-1"
                   name="more-dots-fill"
                   size={12}
                 />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start">
                 <DropdownMenuItem
-                  className="text-foreground-4 hover:text-foreground-danger data-[highlighted]:text-foreground-danger duration-200 data-[highlighted]:bg-transparent data-[highlighted]:outline-none"
+                  className="text-foreground-4 duration-200 hover:text-foreground-danger data-[highlighted]:bg-transparent data-[highlighted]:text-foreground-danger data-[highlighted]:outline-none"
                   onSelect={() => handleRemoveFilter?.(filter.type)}
                 >
-                  <button className="text-14 flex items-center gap-x-1.5">
+                  <button className="flex items-center gap-x-1.5 text-14">
                     <Icon name="trash" size={12} />
                     Delete filter
                   </button>
@@ -153,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 text-foreground-2 leading-none">No results</span>
+              <span className="text-1 leading-none text-foreground-2">No results</span>
             </div>
           )}
         </div>

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

@@ -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="hover:bg-background-3 cursor-grab rounded p-1 active:cursor-grabbing"
+            className="cursor-grab rounded p-1 hover:bg-background-3 active:cursor-grabbing"
             {...attributes}
             {...listeners}
           >
             <Icon className="text-icons-1" name="grid-dots" size={12} />
           </div>
 
           <DropdownMenu>
-            <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">
+            <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">
               {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="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">
+            <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">
               {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="text-foreground-4 hover:text-foreground-1 p-1 transition-colors duration-200 focus:bg-transparent"
+          className="p-1 text-foreground-4 transition-colors duration-200 hover:text-foreground-1 focus:bg-transparent"
           onClick={e => {
             e.preventDefault()
             onRemoveSort?.(index)
@@ -152,7 +152,7 @@ const Sorts = ({
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <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">
+      <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">
         <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="text-14 text-foreground-4 hover:text-foreground-1 flex w-full items-center gap-x-1.5 transition-colors duration-200">
+              <DropdownMenuTrigger className="flex w-full items-center gap-x-1.5 text-14 text-foreground-4 transition-colors duration-200 hover:text-foreground-1">
                 <Icon name="plus" size={12} />
                 Add sort
               </DropdownMenuTrigger>
               <DropdownMenuContent className="min-w-[224px] p-0" align="start">
-                <div className="border-borders-4 relative flex items-center justify-between border-b px-3 py-2.5">
+                <div className="relative flex items-center justify-between border-b border-borders-4 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="text-foreground-4 hover:text-foreground-1 flex transition-colors duration-200"
+                        className="flex text-foreground-4 transition-colors duration-200 hover:text-foreground-1"
                         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 text-foreground-2 leading-none">No results</span>
+                      <span className="text-1 leading-none text-foreground-2">No results</span>
                     </div>
                   )}
                 </div>
@@ -248,10 +248,10 @@ const Sorts = ({
           )}
 
           <DropdownMenuItem
-            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"
+            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"
             asChild
           >
-            <button className="text-14 flex items-center gap-x-1.5" onClick={handleResetSorts}>
+            <button className="flex items-center gap-x-1.5 text-14" onClick={handleResetSorts}>
               <Icon name="trash" size={12} />
               Delete sort
             </button>

packages/ui/src/components/form/checkbox.tsx

@@ -20,7 +20,7 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
+        className="peer size-4 shrink-0 rounded-sm border border-icons-1 shadow hover:border-icons-3 disabled:cursor-not-allowed disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>

packages/ui/src/components/form/input.tsx

@@ -8,11 +8,11 @@ export interface BaseInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
 
-const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled:cursor-not-allowed', {
+const inputVariants = cva('bg-transparent px-2.5 py-1 text-foreground-1 disabled:cursor-not-allowed', {
   variants: {
     variant: {
       default:
-        'placeholder:text-foreground-4 flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none',
+        'flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none',
       extended: 'grow border-none focus-visible:outline-none'
     },
     size: {
@@ -50,6 +50,8 @@ interface InputProps extends BaseInputProps {
   caption?: ReactNode
   error?: InputError
   optional?: boolean
+  className?: string
+  wrapperClassName?: string
 }
 
 /**
@@ -64,6 +66,8 @@ interface InputProps extends BaseInputProps {
  * @param {MessageTheme} [props.theme] - Visual theme of the input
  * @param {boolean} [props.disabled] - Whether the input is disabled
  * @param {boolean} [props.optional] - Indicates if the field is optional, displays "(Optional)" in the label
+ * @param {string} [props.className] - Optional additional class names for the input element
+ * @param {string} [props.wrapperClassName] - Optional additional class names for the wrapper element
  * @param {BaseInputProps} props.rest - All other props are passed to the underlying input element
  *
  * @example
@@ -77,17 +81,24 @@ interface InputProps extends BaseInputProps {
  * />
  */
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, caption, error, id, theme, disabled, optional, ...props }, ref) => {
-    const InputWrapper = error || caption || label ? ControlGroup : Fragment
+  ({ label, caption, error, id, theme, disabled, optional, className, wrapperClassName, ...props }, ref) => {
+    const InputWrapper = error || caption || label || wrapperClassName ? ControlGroup : Fragment
 
     return (
-      <InputWrapper>
+      <InputWrapper className={wrapperClassName}>
         {label && (
           <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
           </Label>
         )}
-        <BaseInput id={id} ref={ref} theme={error ? 'danger' : theme} disabled={disabled} {...props} />
+        <BaseInput
+          className={className}
+          id={id}
+          ref={ref}
+          theme={error ? 'danger' : theme}
+          disabled={disabled}
+          {...props}
+        />
         {error && (
           <Message className={cn(caption ? 'mt-1' : 'absolute top-full translate-y-1')} theme={error.theme}>
             {error.message}

packages/ui/src/components/form/label.tsx

@@ -54,7 +54,7 @@ interface LabelProps extends VariantProps<typeof labelVariants>, PropsWithChildr
 const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => {
   return (
     <LabelRoot htmlFor={htmlFor} variant={variant} color={color} className={className}>
-      {children} {optional && <span className="text-foreground-7 align-top">(optional)</span>}
+      {children} {optional && <span className="align-top text-foreground-7">(optional)</span>}
     </LabelRoot>
   )
 }

packages/ui/src/components/index.ts

@@ -32,6 +32,8 @@ export * from './breadcrumb'
 export * from './skeleton-list'
 export * from './dialog'
 export * from './path-breadcrumbs'
+export * from './card'
+export * from './input-otp'
 export * from './form'
 export * from './button-group'