File Upload

'use client'

import { Button, FileUpload } from '@saas-ui/react'
import { HiUpload } from 'react-icons/hi'

export const FileUploadBasic = () => {
  return (
    <FileUpload.Root>
      <FileUpload.Trigger asChild>
        <Button variant="outline" size="sm">
          <HiUpload /> Upload file
        </Button>
      </FileUpload.Trigger>
      <FileUpload.List />
    </FileUpload.Root>
  )
}

'use client'

import { Button, FileUpload } from '@saas-ui/react'
import { HiUpload } from 'react-icons/hi'

export const FileUploadDirectory = () => {
  return (
    <FileUpload.Root directory>
      <FileUpload.Trigger asChild>
        <Button variant="outline" size="sm">
          <HiUpload /> Upload file
        </Button>
      </FileUpload.Trigger>
      <FileUpload.List />
    </FileUpload.Root>
  )
}

'use client'

import { Button, FileUpload } from '@saas-ui/react'
import { HiCamera } from 'react-icons/hi'

export const FileUploadMediaCapture = () => {
  return (
    <FileUpload.Root capture="environment">
      <FileUpload.Trigger asChild>
        <Button variant="outline" size="sm">
          <HiCamera /> Open Camera
        </Button>
      </FileUpload.Trigger>
      <FileUpload.List />
    </FileUpload.Root>
  )
}

'use client'

import { Button, FileUpload } from '@saas-ui/react'
import { HiUpload } from 'react-icons/hi'

export const FileUploadMultiple = () => {
  return (
    <FileUpload.Root maxFiles={5}>
      <FileUpload.Trigger asChild>
        <Button variant="outline" size="sm">
          <HiUpload /> Upload file
        </Button>
      </FileUpload.Trigger>
      <FileUpload.List showSize clearable />
    </FileUpload.Root>
  )
}

'use client'

import { Heading, Text } from '@saas-ui/react'
import { FileUpload } from '@saas-ui/react'

export const FileUploadWithDropzone = () => {
  return (
    <FileUpload.Root maxW="xl" alignItems="stretch" maxFiles={10}>
      <FileUpload.Dropzone>
        <Heading size="md">Drag and drop here to upload</Heading>
        <Text color="fg.muted">.png, .jpg up to 5MB</Text>
      </FileUpload.Dropzone>
      <FileUpload.List />
    </FileUpload.Root>
  )
}

'use client'

import { FileUpload } from '@saas-ui/react'

export const FileUploadWithInput = () => {
  return (
    <FileUpload.Root gap="1" maxWidth="300px">
      <FileUpload.Label>Upload file</FileUpload.Label>
      <FileUpload.Input />
    </FileUpload.Root>
  )
}

'use client'

import { CloseButton, FileUpload, InputGroup } from '@saas-ui/react'
import { LuFileUp } from 'react-icons/lu'

export const FileUploadWithInputClear = () => {
  return (
    <FileUpload.Root gap="1" maxWidth="300px">
      <FileUpload.Label>Upload file</FileUpload.Label>
      <InputGroup
        w="full"
        startElement={<LuFileUp />}
        endElement={
          <FileUpload.ClearTrigger asChild>
            <CloseButton
              me="-1"
              size="xs"
              variant="plain"
              focusVisibleRing="inside"
              focusRingWidth="2px"
              pointerEvents="auto"
              color="fg.subtle"
            />
          </FileUpload.ClearTrigger>
        }
      >
        <FileUpload.Input />
      </InputGroup>
    </FileUpload.Root>
  )
}

'use client'

import { Button, FileUpload } from '@saas-ui/react'
import { HiUpload } from 'react-icons/hi'

export const FileUploadAcceptedFiles = () => {
  return (
    <FileUpload.Root accept={['image/png']}>
      <FileUpload.Trigger asChild>
        <Button variant="outline" size="sm">
          <HiUpload /> Upload file
        </Button>
      </FileUpload.Trigger>
      <FileUpload.List />
    </FileUpload.Root>
  )
}