Added: Drag and Reject effect on upload component

app/docs/components/button/button.mdx

@@ -1,6 +1,7 @@
 import { KeepButtonTypeCode, KeepButtonType } from './variant/KeepButtonType'
 import { KeepButtonColor, KeepButtonColorCode } from './variant/KeepButtonColor'
 import { KeepButtonSize, KeepButtonSizeCode } from './variant/KeepButtonSize'
+import { KeepButtonLink, KeepButtonLinkCode } from './variant/KeepButtonLink'
 import { KeepButtonShape, KeepButtonShapeCode } from './variant/KeepButtonShape'
 import { KeepButtonIcon, KeepButtonIconCode } from './variant/KeepButtonIcon'
 import { DefaultButton, DefaultButtonCode } from './variant/DefaultButton'
@@ -29,6 +30,14 @@ You can customize your buttons with different color schemes to match your design
   <KeepButtonColor />
 </CodeHighlightPreview>
 
+## Button with link
+
+You can add a link to a button component by passing asChild props.
+
+<CodeHighlightPreview code={KeepButtonLinkCode}>
+  <KeepButtonLink />
+</CodeHighlightPreview>
+
 ## Button Variant Type
 
 Choose from different button types depending on your use case. The available types include: `default` `softBg` `outline` and `link`.

app/docs/components/button/buttonApi.ts

@@ -41,4 +41,11 @@ export const buttonApiData = [
     propsDescription: 'Size variant of the button.',
     default: 'md',
   },
+  {
+    id: 7,
+    propsName: 'asChild',
+    propsType: ['true', 'false'],
+    propsDescription: 'Set button styles and functionality to her child component.',
+    default: 'false',
+  },
 ]

app/docs/components/button/variant/KeepButtonLink.tsx

@@ -0,0 +1,29 @@
+'use client'
+import Link from 'next/link'
+import { Button } from '../../../../src'
+
+const KeepButtonLink = () => {
+  return (
+    <div className="flex items-center justify-center gap-x-5 px-5 py-3">
+      <Button asChild>
+        <Link href="#">Link Button</Link>
+      </Button>
+    </div>
+  )
+}
+
+const KeepButtonLinkCode = {
+  'ButtonComponent.tsx': `
+import { Button } from 'keep-react'
+
+export const ButtonComponent = () => {
+  return (
+    <Button asChild>
+        <Link href="#">Link Button</Link>
+    </Button>
+  )
+}
+`,
+}
+
+export { KeepButtonLink, KeepButtonLinkCode }

app/docs/components/modal/variant/DefaultModal.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Modal,
   ModalAction,
+  ModalClose,
   ModalContent,
   ModalDescription,
   ModalFooter,
@@ -31,7 +32,9 @@ const DefaultModal = () => {
             </div>
           </ModalHeader>
           <ModalFooter>
-            <Button variant="outline">Cancel</Button>
+            <ModalClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </ModalClose>
             <Button>Confirm</Button>
           </ModalFooter>
         </ModalContent>

app/src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { ButtonHTMLAttributes, Ref, forwardRef } from 'react'
+import { Slot } from '@radix-ui/react-slot'
 import { cn } from '../../utils/cn'
 import { ButtonColorVariant, ButtonSizeVariant, buttonVariants } from './theme'
 
@@ -9,6 +10,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'link' | 'outline' | 'softBg' | 'default'
   shape?: 'circle' | 'icon'
   position?: 'start' | 'end' | 'center'
+  asChild?: boolean
   radius?: 'default' | 'full'
 }
 
@@ -22,18 +24,20 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       variant = 'default',
       radius = 'default',
       shape,
+      asChild = false,
       position,
       ...props
     },
     ref: Ref<HTMLButtonElement>,
   ) => {
+    const Comp = asChild ? Slot : 'button'
     return (
-      <button
+      <Comp
         {...props}
         ref={ref}
         className={cn(buttonVariants({ size, color, variant, shape, position, radius }), className)}>
         {children}
-      </button>
+      </Comp>
     )
   },
 )

app/src/components/Modal/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Portal, Trigger } from '@radix-ui/react-dialog'
+import { Close, Portal, Trigger } from '@radix-ui/react-dialog'
 import type { ModalProps } from './Modal'
 import { Modal } from './Modal'
 import { ModalContent } from './ModalContent'
@@ -11,9 +11,11 @@ import { ModalTitle } from './ModalTitle'
 
 const ModalAction = Trigger
 const ModalPortal = Portal
+const ModalClose = Close
 
 export {
   Modal,
+  ModalClose,
   ModalAction,
   ModalContent,
   ModalDescription,

app/src/components/Upload/Body.tsx

@@ -7,16 +7,17 @@ import { useUploadContext } from './UploadContext'
 const UploadBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ children, className, ...props }, ref: Ref<HTMLDivElement>) => {
     const { options, horizontal } = useUploadContext()
-    const { getRootProps, getInputProps } = useDropzone(options)
+    const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone(options)
     return (
       <div
         {...props}
         ref={ref}
         {...getRootProps()}
         className={cn(
-          horizontal
-            ? 'flex cursor-pointer items-center gap-4 rounded-xl border border-dashed bg-white px-3 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900'
-            : 'flex cursor-pointer flex-col items-center rounded-xl border border-dashed border-metal-50 bg-white p-3 text-center transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900',
+          'flex cursor-pointer items-center rounded-xl border border-dashed bg-white transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:bg-metal-900',
+          horizontal ? 'gap-4 px-3' : 'flex-col border-metal-50 p-3 text-center',
+          isDragActive && 'border-primary-500 dark:border-primary-400',
+          isDragReject && 'border-error-500 dark:border-error-500',
           className,
         )}>
         <input {...getInputProps()} />