fix: merge two button components into one (#60)

src/components/button.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { IconLoader2 } from '@tabler/icons-react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none 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-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-interface ButtonPropsBase
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
-
-type ButtonProps = ButtonPropsBase &
-  (
-    | { asChild: true }
-    | {
-        asChild?: false
-        loading?: boolean
-        leftSection?: React.JSX.Element
-        rightSection?: React.JSX.Element
-      }
-  )
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, children, ...props }, ref) => {
-    const { asChild, ...rest } = props
-    if (asChild) {
-      return (
-        <Slot
-          className={cn(buttonVariants({ variant, size, className }))}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </Slot>
-      )
-    }
-
-    const {
-      loading = false,
-      leftSection,
-      rightSection,
-      disabled,
-      ...otherProps
-    } = props
-
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        disabled={loading || disabled}
-        ref={ref}
-        {...otherProps}
-      >
-        {((leftSection && loading) ||
-          (!leftSection && !rightSection && loading)) && (
-          <IconLoader2 className='mr-2 h-4 w-4 animate-spin' />
-        )}
-        {!loading && leftSection && <div className='mr-2'>{leftSection}</div>}
-        {children}
-        {!loading && rightSection && <div className='ml-2'>{rightSection}</div>}
-        {rightSection && loading && (
-          <IconLoader2 className='ml-2 h-4 w-4 animate-spin' />
-        )}
-      </button>
-    )
-  }
-)
-Button.displayName = 'Button'
-
-// eslint-disable-next-line react-refresh/only-export-components
-export { Button, buttonVariants }

src/components/layout/top-nav.tsx

@@ -1,13 +1,13 @@
 import { Link } from '@tanstack/react-router'
 import { IconMenu } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/button'
 
 interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
   links: {
@@ -22,7 +22,7 @@ export function TopNav({ className, links, ...props }: TopNavProps) {
   return (
     <>
       <div className='md:hidden'>
-        <DropdownMenu>
+        <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
             <Button size='icon' variant='outline'>
               <IconMenu />

src/components/password-input.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { IconEye, IconEyeOff } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
-import { Button } from './button'
+import { Button } from './ui/button'
 
 type PasswordInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,

src/components/profile-dropdown.tsx

@@ -1,4 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,11 +10,10 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/button'
 
 export function ProfileDropdown() {
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
           <Avatar className='h-8 w-8'>

src/components/theme-switch.tsx

@@ -2,13 +2,13 @@ import { useEffect } from 'react'
 import { IconCheck, IconMoon, IconSun } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
 import { useTheme } from '@/context/theme-context'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/button'
 
 export function ThemeSwitch() {
   const { theme, setTheme } = useTheme()
@@ -22,7 +22,7 @@ export function ThemeSwitch() {
   }, [theme])
 
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button variant='ghost' size='icon' className='scale-95 rounded-full'>
           <IconSun className='size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />

src/features/apps/index.tsx

@@ -4,6 +4,7 @@ import {
   IconSortAscendingLetters,
   IconSortDescendingLetters,
 } from '@tabler/icons-react'
+import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import {
   Select,
@@ -13,7 +14,6 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Separator } from '@/components/ui/separator'
-import { Button } from '@/components/button'
 import { Header } from '@/components/layout/header'
 import { Main } from '@/components/layout/main'
 import { ProfileDropdown } from '@/components/profile-dropdown'

src/features/auth/forgot-password/components/forgot-password-form.tsx

@@ -3,6 +3,7 @@ import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
   Form,
   FormControl,
@@ -12,7 +13,6 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { Button } from '@/components/button'
 
 type ForgotFormProps = HTMLAttributes<HTMLDivElement>
 
@@ -59,7 +59,7 @@ export function ForgotForm({ className, ...props }: ForgotFormProps) {
                 </FormItem>
               )}
             />
-            <Button className='mt-2' loading={isLoading}>
+            <Button className='mt-2' disabled={isLoading}>
               Continue
             </Button>
           </div>

src/features/auth/otp/components/otp-form.tsx

@@ -5,6 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useNavigate } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
 import { toast } from '@/hooks/use-toast'
+import { Button } from '@/components/ui/button'
 import {
   Form,
   FormControl,
@@ -14,7 +15,6 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Separator } from '@/components/ui/separator'
-import { Button } from '@/components/button'
 import { PinInput, PinInputField } from '@/components/pin-input'
 
 type OtpFormProps = HTMLAttributes<HTMLDivElement>
@@ -84,7 +84,7 @@ export function OtpForm({ className, ...props }: OtpFormProps) {
                 </FormItem>
               )}
             />
-            <Button className='mt-2' disabled={disabledBtn} loading={isLoading}>
+            <Button className='mt-2' disabled={disabledBtn || isLoading}>
               Verify
             </Button>
           </div>

src/features/auth/sign-in/components/user-auth-form.tsx

@@ -5,6 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Link } from '@tanstack/react-router'
 import { IconBrandFacebook, IconBrandGithub } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
   Form,
   FormControl,
@@ -14,7 +15,6 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { Button } from '@/components/button'
 import { PasswordInput } from '@/components/password-input'
 
 type UserAuthFormProps = HTMLAttributes<HTMLDivElement>
@@ -94,7 +94,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 </FormItem>
               )}
             />
-            <Button className='mt-2' loading={isLoading}>
+            <Button className='mt-2' disabled={isLoading}>
               Login
             </Button>
 
@@ -114,19 +114,17 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 variant='outline'
                 className='w-full'
                 type='button'
-                loading={isLoading}
-                leftSection={<IconBrandGithub className='h-4 w-4' />}
+                disabled={isLoading}
               >
-                GitHub
+                <IconBrandGithub className='h-4 w-4' /> GitHub
               </Button>
               <Button
                 variant='outline'
                 className='w-full'
                 type='button'
-                loading={isLoading}
-                leftSection={<IconBrandFacebook className='h-4 w-4' />}
+                disabled={isLoading}
               >
-                Facebook
+                <IconBrandFacebook className='h-4 w-4' /> Facebook
               </Button>
             </div>
           </div>

src/features/auth/sign-up/components/sign-up-form.tsx

@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { IconBrandFacebook, IconBrandGithub } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
   Form,
   FormControl,
@@ -13,7 +14,6 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { Button } from '@/components/button'
 import { PasswordInput } from '@/components/password-input'
 
 type SignUpFormProps = HTMLAttributes<HTMLDivElement>
@@ -105,7 +105,7 @@ export function SignUpForm({ className, ...props }: SignUpFormProps) {
                 </FormItem>
               )}
             />
-            <Button className='mt-2' loading={isLoading}>
+            <Button className='mt-2' disabled={isLoading}>
               Create Account
             </Button>
 
@@ -125,19 +125,17 @@ export function SignUpForm({ className, ...props }: SignUpFormProps) {
                 variant='outline'
                 className='w-full'
                 type='button'
-                loading={isLoading}
-                leftSection={<IconBrandGithub className='h-4 w-4' />}
+                disabled={isLoading}
               >
-                GitHub
+                <IconBrandGithub className='h-4 w-4' /> GitHub
               </Button>
               <Button
                 variant='outline'
                 className='w-full'
                 type='button'
-                loading={isLoading}
-                leftSection={<IconBrandFacebook className='h-4 w-4' />}
+                disabled={isLoading}
               >
-                Facebook
+                <IconBrandFacebook className='h-4 w-4' /> Facebook
               </Button>
             </div>
           </div>

src/features/chats/index.tsx

@@ -16,9 +16,9 @@ import {
 } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
-import { Button } from '@/components/button'
 import { Header } from '@/components/layout/header'
 import { Main } from '@/components/layout/main'
 import { ProfileDropdown } from '@/components/profile-dropdown'
@@ -291,11 +291,8 @@ export default function Chats() {
                     <IconSend size={20} />
                   </Button>
                 </div>
-                <Button
-                  className='h-full sm:hidden'
-                  rightSection={<IconSend size={18} />}
-                >
-                  Send
+                <Button className='h-full sm:hidden'>
+                  <IconSend size={18} /> Send
                 </Button>
               </form>
             </div>

src/features/dashboard/index.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
@@ -6,7 +7,6 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Button } from '@/components/button'
 import { Header } from '@/components/layout/header'
 import { Main } from '@/components/layout/main'
 import { TopNav } from '@/components/layout/top-nav'

src/features/errors/forbidden.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useRouter } from '@tanstack/react-router'
-import { Button } from '@/components/button'
+import { Button } from '@/components/ui/button'
 
 export default function ForbiddenError() {
   const navigate = useNavigate()

src/features/errors/general-error.tsx

@@ -1,6 +1,6 @@
 import { useNavigate, useRouter } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
-import { Button } from '@/components/button'
+import { Button } from '@/components/ui/button'
 
 interface GeneralErrorProps extends React.HTMLAttributes<HTMLDivElement> {
   minimal?: boolean

src/features/errors/maintenance-error.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/button'
+import { Button } from '@/components/ui/button'
 
 export default function MaintenanceError() {
   return (

src/features/errors/not-found-error.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useRouter } from '@tanstack/react-router'
-import { Button } from '@/components/button'
+import { Button } from '@/components/ui/button'
 
 export default function NotFoundError() {
   const navigate = useNavigate()

src/features/errors/unauthorized-error.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useRouter } from '@tanstack/react-router'
-import { Button } from '@/components/button'
+import { Button } from '@/components/ui/button'
 
 export default function UnauthorisedError() {
   const navigate = useNavigate()

src/features/settings/account/account-form.tsx

@@ -5,6 +5,7 @@ import { CalendarIcon, CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { cn } from '@/lib/utils'
 import { toast } from '@/hooks/use-toast'
+import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import {
   Command,
@@ -29,7 +30,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { Button } from '@/components/button'
 
 const languages = [
   { label: 'English', value: 'en' },

src/features/settings/appearance/appearance-form.tsx

@@ -4,6 +4,7 @@ import { ChevronDownIcon } from '@radix-ui/react-icons'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { cn } from '@/lib/utils'
 import { toast } from '@/hooks/use-toast'
+import { Button, buttonVariants } from '@/components/ui/button'
 import {
   Form,
   FormControl,
@@ -14,7 +15,6 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { Button, buttonVariants } from '@/components/button'
 
 const appearanceFormSchema = z.object({
   theme: z.enum(['light', 'dark'], {

src/features/settings/components/sidebar-nav.tsx

@@ -2,6 +2,7 @@ import { useState, type JSX } from 'react'
 import { useLocation, useNavigate } from '@tanstack/react-router'
 import { Link } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Select,
@@ -10,7 +11,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { buttonVariants } from '@/components/button'
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
   items: {

src/features/settings/display/display-form.tsx

@@ -2,6 +2,7 @@ import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from '@/hooks/use-toast'
+import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
   Form,
@@ -12,7 +13,6 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form'
-import { Button } from '@/components/button'
 
 const items = [
   {

src/features/settings/notifications/notifications-form.tsx

@@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Link } from '@tanstack/react-router'
 import { toast } from '@/hooks/use-toast'
+import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
   Form,
@@ -15,7 +16,6 @@ import {
 } from '@/components/ui/form'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Switch } from '@/components/ui/switch'
-import { Button } from '@/components/button'
 
 const notificationsFormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {

src/features/settings/profile/profile-form.tsx

@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Link } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
 import { toast } from '@/hooks/use-toast'
+import { Button } from '@/components/ui/button'
 import {
   Form,
   FormControl,
@@ -22,7 +23,6 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
-import { Button } from '@/components/button'
 
 const profileFormSchema = z.object({
   username: z

src/features/tasks/components/data-table-column-header.tsx

@@ -6,6 +6,7 @@ import {
 } from '@radix-ui/react-icons'
 import { Column } from '@tanstack/react-table'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,7 +14,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/button'
 
 interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {

src/features/tasks/components/data-table-faceted-filter.tsx

@@ -3,6 +3,7 @@ import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons'
 import { Column } from '@tanstack/react-table'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -18,7 +19,6 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
-import { Button } from '@/components/button'
 
 interface DataTableFacetedFilterProps<TData, TValue> {
   column?: Column<TData, TValue>

src/features/tasks/components/data-table-pagination.tsx

@@ -5,6 +5,7 @@ import {
   DoubleArrowRightIcon,
 } from '@radix-ui/react-icons'
 import { Table } from '@tanstack/react-table'
+import { Button } from '@/components/ui/button'
 import {
   Select,
   SelectContent,
@@ -12,7 +13,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Button } from '@/components/button'
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>

src/features/tasks/components/data-table-row-actions.tsx

@@ -1,6 +1,7 @@
 import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { Row } from '@tanstack/react-table'
 import { IconTrash } from '@tabler/icons-react'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +15,6 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/button'
 import { useTasksContext } from '../context/tasks-context'
 import { labels } from '../data/data'
 import { taskSchema } from '../data/schema'

src/features/tasks/components/data-table-toolbar.tsx

@@ -1,7 +1,7 @@
 import { Cross2Icon } from '@radix-ui/react-icons'
 import { Table } from '@tanstack/react-table'
+import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Button } from '@/components/button'
 import { DataTableViewOptions } from '../components/data-table-view-options'
 import { priorities, statuses } from '../data/data'
 import { DataTableFacetedFilter } from './data-table-faceted-filter'

src/features/tasks/components/data-table-view-options.tsx

@@ -1,6 +1,7 @@
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
 import { MixerHorizontalIcon } from '@radix-ui/react-icons'
 import { Table } from '@tanstack/react-table'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -8,7 +9,6 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/button'
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>

src/features/users/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { IconMailPlus, IconUserPlus } from '@tabler/icons-react'
 import useDialogState from '@/hooks/use-dialog-state'
-import { Button } from '@/components/button'
+import { Button } from '@/components/ui/button'
 import { Header } from '@/components/layout/header'
 import { Main } from '@/components/layout/main'
 import { ProfileDropdown } from '@/components/profile-dropdown'