@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/components/inputs/file-dropzone/examples.mdx

@@ -1,83 +0,0 @@
-import FileDropzone from './index'
-import UploadDemo from './upload-demo'
-import Field from '../field'
-
-# Basics
-
-## Dropzone
-
-Drag files over the zone, or click it (or press Enter on it) to pick them. While files are in the air the line says whether all, some or none of them will be taken; files that pass go to the list, the rest to the error.
-
-<UploadDemo multiple accept=".pdf,image/*" maxSize={5000000} description="PDF or images, up to 5 MB each, three at most" />
-
-## Single file
-
-Without `multiple` the zone takes one file: drag several and it says the rest will be skipped; drag only files of another type and it refuses the drop.
-
-<div className="w-96 max-w-full">
-  <FileDropzone accept="image/*" description="PNG or JPG" />
-</div>
-
-## Compact
-
-The compact step tightens the padding and steps the text down.
-
-<div className="w-80 max-w-full">
-  <FileDropzone size="compact" label="Drop a CSV or click to browse" accept=".csv" />
-</div>
-
-## Style and attributes
-
-Props a `<label>` takes (`style`, `title`, `data-*`, `aria-*`, handlers) reach the zone's root. Here an inline `maxWidth` and a tooltip.
-
-<div className="w-96 max-w-full">
-  <FileDropzone style={{ maxWidth: 280 }} title="Drop your avatar here" label="Drop an avatar" accept="image/*" />
-</div>
-
-## Translated
-
-Every line is a prop.
-
-<div className="w-96 max-w-full">
-  <FileDropzone
-    multiple
-    label="Presuňte súbory sem alebo kliknite"
-    activeLabel="Pustite a pridajte"
-    partialLabel="Niektoré súbory sa vynechajú"
-    rejectLabel="Tieto súbory nemožno pridať"
-    description="PDF, najviac 10 MB"
-    accept=".pdf"
-  />
-</div>
-
-# States
-
-Invalid takes the field's destructive ring; disabled dims the zone; read-only takes no files.
-
-<div className="flex flex-col gap-3 w-96 max-w-full">
-  <Field invalid>
-    <Field.Label>Contract</Field.Label>
-    <FileDropzone accept=".pdf" />
-    <Field.Error>Attach the signed contract.</Field.Error>
-  </Field>
-  <FileDropzone disabled label="Uploads are paused" />
-  <FileDropzone readOnly label="No file attached" />
-</div>
-
-# File rows
-
-A row shows one file: its glyph or thumbnail, the name, the size or a status line, and a remove button. `status` sets the glyph, and `progress` fills the bar while uploading.
-
-<div className="flex flex-col w-96 max-w-full">
-  <FileDropzone.Row name="Quarterly report.pdf" fileSize={2480000} type="application/pdf" status="done" onRemove={() => {}} />
-  <FileDropzone.Row name="Site photo.jpg" fileSize={5320000} type="image/jpeg" status="uploading" progress={64} onRemove={() => {}} />
-  <FileDropzone.Row name="Budget.xlsx" fileSize={84000} status="error" error="Upload failed. Try again." onRemove={() => {}} />
-  <FileDropzone.Row name="Contract draft.docx" fileSize={1200000} description="Uploaded yesterday" />
-</div>
-
-## Compact rows
-
-<div className="flex flex-col w-80 max-w-full">
-  <FileDropzone.Row size="compact" name="Invoice 0042.pdf" fileSize={182000} locale="sk-SK" onRemove={() => {}} />
-  <FileDropzone.Row size="compact" name="Receipt.png" fileSize={940000} type="image/png" status="uploading" onRemove={() => {}} />
-</div>

package/components/inputs/file-dropzone/file-row.tsx

@@ -1,201 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): one file in a list of
- * picked or uploaded files, shown by FileDropzone's page as `FileDropzone.Row`.
- */
-
-import { AnimatePresence, motion } from 'motion/react'
-import type { ReactNode } from 'react'
-import { FIELD_ACTION_RADIUS } from '../../../lib/field-variants'
-import { type IconComponent, useIcon } from '../../../lib/icon-context'
-import { useReduceMotion } from '../../../lib/reduced-motion'
-import { useShape } from '../../../lib/shape-context'
-import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { spring } from '../../../lib/springs'
-import { cn } from '../../../lib/utils'
-import Button from '../../button'
-import Progress, { Spinner } from '../../progress'
-import { formatFileSize } from './variants'
-
-/** Where a file is in its upload: `idle` (picked), `uploading`, `done` or `error`. */
-type FileRowStatus = 'idle' | 'uploading' | 'done' | 'error'
-
-interface FileRowProps {
-  /** The picked file: its name, size and type fill the row. */
-  file?: File
-  /** File name, for a file you only know by its metadata (one already uploaded). Wins over `file`. */
-  name?: string
-  /** File size in bytes. Wins over `file`. */
-  fileSize?: number
-  /** MIME type; an image shows the image glyph. Wins over `file`. */
-  type?: string
-  /** Image URL shown in place of the glyph, e.g. an object URL of the file or the server's preview. */
-  thumbnail?: string
-  /** Glyph in place of the file or image one. */
-  icon?: IconComponent
-  /** Where the file is in its upload; sets the status glyph and the progress bar. Defaults to `"idle"`. */
-  status?: FileRowStatus
-  /** Upload progress from 0 to 100, shown as a bar while `status` is `"uploading"` (see Progress). Omitted, the bar sweeps. */
-  progress?: number
-  /** Accessible name of the upload's bar. Defaults to `"Uploading"`. */
-  uploadingLabel?: string
-  /** The line under the name in place of the size, e.g. "Uploaded 2 min ago". */
-  description?: ReactNode
-  /** An error message in place of the size line; the row reads as failed. */
-  error?: ReactNode
-  /** Shows a remove button and is called when it is pressed. */
-  onRemove?: () => void
-  /** Accessible name of the remove button. Defaults to `"Remove file"`. */
-  removeLabel?: string
-  /** More controls before the remove button, e.g. a download link or a menu. */
-  actions?: ReactNode
-  /** Locale for the size (`1,5 MB` in `"sk-SK"`). Defaults to the browser's. */
-  locale?: Intl.LocalesArgument
-  /** Dims the row and its actions. Defaults to `false`. */
-  disabled?: boolean
-  /** Pins the row to one step of the size ladder. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Classes for the row. */
-  className?: string
-}
-
-// Literal tables: UnoCSS only generates the classes it can read whole.
-const THUMB = { default: 'size-8', compact: 'size-7' }
-const ROW_PAD = { default: 'py-1.5', compact: 'py-1' }
-
-// Literal table: the spinner at the ladder's glyph size.
-const SPINNER = { default: 'size-4', compact: 'size-3.5' }
-
-function StatusGlyph({ status, size }: { status: FileRowStatus; size: SizeVariant }) {
-  const Done = useIcon('circle-check')
-  const Failed = useIcon('circle-alert')
-  const reduced = useReduceMotion()
-  const icon = useSize(size).icon
-
-  return (
-    // Decorative: the bar carries the progress, the meta line the error.
-    <span aria-hidden="true" className="inline-grid shrink-0 place-items-center">
-      <AnimatePresence initial={false} mode="popLayout">
-        {status !== 'idle' && (
-          <motion.span
-            key={status}
-            className={cn(
-              'col-start-1 row-start-1 flex',
-              status === 'done' && 'text-status-success',
-              status === 'error' && 'text-destructive',
-              status === 'uploading' && 'text-muted-foreground',
-            )}
-            // Under reduced motion the glyphs only fade.
-            initial={{ opacity: 0, scale: reduced ? 1 : 0.6 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: reduced ? 1 : 0.8, transition: spring.fast.exit }}
-            transition={spring.fast}
-          >
-            {status === 'done' && <Done size={icon} strokeWidth={2} />}
-            {status === 'error' && <Failed size={icon} strokeWidth={2} />}
-            {status === 'uploading' && <Spinner className={SPINNER[size]} />}
-          </motion.span>
-        )}
-      </AnimatePresence>
-    </span>
-  )
-}
-
-/** One file in a list: its glyph or thumbnail, name, size or status, and a remove button. */
-function FileRow({
-  file,
-  name: nameProp,
-  fileSize: fileSizeProp,
-  type: typeProp,
-  thumbnail,
-  icon,
-  status = 'idle',
-  progress,
-  description,
-  error,
-  onRemove,
-  removeLabel = 'Remove file',
-  uploadingLabel = 'Uploading',
-  actions,
-  locale,
-  disabled = false,
-  size: sizeProp,
-  className,
-}: FileRowProps) {
-  const size = useSize(sizeProp)
-  const shape = useShape()
-  const compact = size.variant === 'compact'
-  const FileIcon = useIcon('file')
-  const ImageIcon = useIcon('image')
-  const Remove = useIcon('x')
-
-  const name = nameProp ?? file?.name ?? ''
-  const bytes = fileSizeProp ?? file?.size
-  const type = typeProp ?? file?.type ?? ''
-  const Glyph = icon ?? (type.startsWith('image/') ? ImageIcon : FileIcon)
-  const shown = error ? 'error' : status
-  const sizeText = bytes != null ? formatFileSize(bytes, locale) : undefined
-  const meta =
-    error ??
-    description ??
-    (status === 'uploading' && progress != null ? `${sizeText ?? ''} · ${Math.round(progress)}%` : sizeText)
-
-  return (
-    <div
-      data-status={shown}
-      data-disabled={disabled || undefined}
-      className={cn(
-        'flex min-w-0 items-center transition-opacity duration-fast',
-        size.gap,
-        size.itemPx,
-        ROW_PAD[size.variant],
-        shape.item,
-        disabled && 'pointer-events-none opacity-50',
-        className,
-      )}
-    >
-      <span
-        className={cn(
-          'flex shrink-0 items-center justify-center overflow-hidden bg-muted text-muted-foreground',
-          THUMB[size.variant],
-          FIELD_ACTION_RADIUS[shape.variant],
-        )}
-      >
-        {thumbnail ? (
-          <img src={thumbnail} alt="" className="size-full object-cover" />
-        ) : (
-          <Glyph size={size.icon} strokeWidth={1.5} />
-        )}
-      </span>
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        <span className={cn('truncate text-foreground weight-normal', size.text)} title={name}>
-          {name}
-        </span>
-        {meta != null && meta !== '' && (
-          <span
-            className={cn(
-              'truncate',
-              compact ? 'text-caption-compact' : 'text-caption',
-              error ? 'text-destructive weight-medium' : 'text-muted-foreground weight-normal',
-            )}
-          >
-            {meta}
-          </span>
-        )}
-        {shown === 'uploading' && <Progress value={progress ?? null} aria-label={uploadingLabel} className="mt-1" />}
-      </div>
-
-      <StatusGlyph status={shown} size={size.variant} />
-      {actions}
-      {onRemove && (
-        <Button variant="ghost" size="icon-compact" aria-label={removeLabel} disabled={disabled} onClick={onRemove}>
-          <Remove strokeWidth={1.5} />
-        </Button>
-      )}
-    </div>
-  )
-}
-
-export type { FileRowProps, FileRowStatus }
-export { FileRow }
-export default FileRow

package/components/inputs/file-dropzone/index.tsx

@@ -1,316 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a drag-and-drop zone that
- * hands picked files over and keeps none (no upload logic), and the row a
- * picked or uploaded file shows in (`file-row.tsx`). The zone is a label
- * around a visually hidden file input, joined to Base UI's Field like Input.
- */
-
-import { Field } from '@base-ui/react/field'
-import { motion } from 'motion/react'
-import {
-  type ChangeEvent,
-  type CSSProperties,
-  type DragEvent,
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type LabelHTMLAttributes,
-  type ReactNode,
-  type RefAttributes,
-  useRef,
-  useState,
-} from 'react'
-import { useFieldState } from '../../../lib/field-classes'
-import { type IconComponent, useIcon } from '../../../lib/icon-context'
-import { useReduceMotion } from '../../../lib/reduced-motion'
-import { useShape } from '../../../lib/shape-context'
-import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { spring } from '../../../lib/springs'
-import { cn } from '../../../lib/utils'
-import { FileRow } from './file-row'
-import { type DragVerdict, dragVerdict, type FileRejection, sortFiles } from './variants'
-
-interface FileDropzoneProps
-  extends Omit<
-    LabelHTMLAttributes<HTMLLabelElement>,
-    'children' | 'className' | 'style' | 'id' | 'onChange' | 'htmlFor' | 'form'
-  > {
-  /** Called with the files that pass `accept`, `maxSize` and the count, after a pick or a drop. */
-  onFilesChange?: (files: File[]) => void
-  /** Called with the files turned away and why (`type`, `size`, `count`), after a pick or a drop. */
-  onFilesRejected?: (rejections: FileRejection[]) => void
-  /** File types the zone takes, as the file input reads them: `.pdf,image/*`. Defaults to any. */
-  accept?: string
-  /** Takes several files at once. Defaults to `false`. */
-  multiple?: boolean
-  /** Most files one pick or drop may add; the rest are rejected as `count`. Pass what is left when you keep a list. */
-  maxFiles?: number
-  /** Largest file in bytes; bigger ones are rejected as `size`. */
-  maxSize?: number
-  /** The main line. Defaults to `"Drop a file here or click to browse"` (`"files"` with `multiple`). */
-  label?: ReactNode
-  /** The line under it: the types and sizes the zone takes, e.g. "PDF or PNG, up to 10 MB". */
-  description?: ReactNode
-  /** The main line while files the zone takes are dragged over it. Defaults to `"Drop to add"`. */
-  activeLabel?: ReactNode
-  /** The main line while some of the dragged files will be taken and the rest turned away (a wrong type, past `maxFiles`). Defaults to `"Some files will be skipped"`. */
-  partialLabel?: ReactNode
-  /** The main line while none of the dragged files can be taken; the drop is refused. Defaults to `"These files can't be added"`. */
-  rejectLabel?: ReactNode
-  /** Glyph above the labels. Defaults to the `upload` icon. */
-  icon?: IconComponent
-  /** Content in place of the glyph and labels. */
-  children?: ReactNode
-  /** Id of the file input, for a `Label`'s `htmlFor`. Inside a Field it is wired for you. */
-  id?: string
-  /** Tells assistive tech a file is required (`aria-required`). The zone keeps no files, so native validation never blocks a submit: check your own list. Defaults to the surrounding Field's `required`. */
-  required?: boolean
-  /** Turns the zone destructive. Defaults to the surrounding Field's `invalid`. */
-  invalid?: boolean
-  /** Dims the zone and turns files away. Defaults to the surrounding Field's `disabled`. */
-  disabled?: boolean
-  /** Shows the zone without taking files: no browse, no drop, no hover. Defaults to the surrounding Field's `readOnly`. */
-  readOnly?: boolean
-  /** Pins the zone to one step of the size ladder: compact tightens the padding and steps the text down. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Classes for the zone. */
-  className?: string
-  /** Inline styles for the zone (its `<label>` root). The other attributes of a `<label>` (`title`, `data-*`, `aria-*`, `onClick`) reach it too, and drag handlers run before the zone's own. */
-  style?: CSSProperties
-}
-
-type DragState = 'idle' | DragVerdict
-
-// Literal tables: UnoCSS only generates the classes it can read whole.
-const PAD = { default: 'px-6 py-8', compact: 'px-4 py-5' }
-
-type FileDropzoneComponent = ForwardRefExoticComponent<FileDropzoneProps & RefAttributes<HTMLInputElement>> & {
-  Row: typeof FileRow
-}
-
-/**
- * A zone to drop files on, or click to pick them.
- *
- * Drag files over it and it lights up; the line changes to say whether it
- * will take them, reading their types while they are still in the air: all
- * of them, some (the rest will be skipped), or none, when it turns
- * destructive and refuses the drop. Dropped or picked files are sorted
- * against `accept`, `maxSize` and `maxFiles`: the ones that pass go to
- * `onFilesChange`, the rest to `onFilesRejected` with a reason. The zone
- * keeps none (its input is cleared after every pick, so nothing submits with
- * a native form and `required` is only announced), so the list, the upload
- * and its errors stay yours. Show each
- * file in a `FileDropzone.Row`. Every line is a prop, for translation. The
- * zone is a label around a hidden file input, so a click or Enter opens the
- * picker, and inside a Field it is labelled and takes the field's state. The
- * ref reaches the input: `ref.current.click()` reopens the picker, e.g. to
- * replace a file.
- *
- * Statics:
- * - `FileDropzone.Row` (also `FileRow`) — one file: its glyph or
- *   `thumbnail`, name, size, and a remove button with `onRemove`: `file` (or
- *   `name` / `fileSize` / `type`), `status` (`idle`, `uploading`, `done`,
- *   `error`), `progress` (0–100), `error`, `description`, `actions`,
- *   `removeLabel`, `locale`.
- *
- * Also exported from this item: `formatFileSize(bytes, locale)`, `sortFiles`
- * and `acceptsFile`, plain functions a server can call too.
- *
- * @example {@include ./examples.mdx}
- */
-const FileDropzone = forwardRef<HTMLInputElement, FileDropzoneProps>(
-  (
-    {
-      onFilesChange,
-      onFilesRejected,
-      accept,
-      multiple = false,
-      maxFiles,
-      maxSize,
-      label,
-      description,
-      activeLabel = 'Drop to add',
-      partialLabel = 'Some files will be skipped',
-      rejectLabel = "These files can't be added",
-      icon,
-      children,
-      id,
-      required,
-      invalid,
-      disabled,
-      readOnly,
-      size: sizeProp,
-      className,
-      style,
-      onDragEnter: dragEnter,
-      onDragOver: dragOver,
-      onDragLeave: dragLeave,
-      onDrop: dropped,
-      ...rest
-    },
-    ref,
-  ) => {
-    const field = useFieldState()
-    const size = useSize(sizeProp)
-    const shape = useShape()
-    const reduced = useReduceMotion()
-    const Upload = useIcon('upload')
-    const Glyph = icon ?? Upload
-    const compact = size.variant === 'compact'
-
-    const isInvalid = invalid ?? field?.invalid ?? false
-    const isDisabled = disabled ?? field?.disabled ?? false
-    const isReadOnly = readOnly ?? field?.readOnly ?? false
-    const closed = isDisabled || isReadOnly
-
-    const [drag, setDrag] = useState<DragState>('idle')
-    // dragenter / dragleave fire for every child crossed; count them so the
-    // zone only goes idle when the pointer really leaves.
-    const depth = useRef(0)
-
-    const hand = (files: File[]) => {
-      if (!files.length) return
-      const { accepted, rejected } = sortFiles(files, { accept, maxSize, maxFiles, multiple })
-      if (accepted.length) onFilesChange?.(accepted)
-      if (rejected.length) onFilesRejected?.(rejected)
-    }
-
-    const onDragEnter = (e: DragEvent<HTMLLabelElement>) => {
-      dragEnter?.(e)
-      if (closed || !e.dataTransfer.types.includes('Files')) return
-      e.preventDefault()
-      depth.current++
-      const types = [...e.dataTransfer.items].filter(item => item.kind === 'file').map(item => item.type)
-      // Only a drag where nothing can pass is refused; a mixed one drops, and sortFiles splits it.
-      setDrag(dragVerdict(types, accept, multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1))
-    }
-
-    const onDragOver = (e: DragEvent<HTMLLabelElement>) => {
-      dragOver?.(e)
-      if (closed || drag === 'idle') return
-      e.preventDefault()
-      e.dataTransfer.dropEffect = drag === 'reject' ? 'none' : 'copy'
-    }
-
-    const onDragLeave = (e: DragEvent<HTMLLabelElement>) => {
-      dragLeave?.(e)
-      if (drag === 'idle') return
-      depth.current = Math.max(depth.current - 1, 0)
-      if (depth.current === 0) setDrag('idle')
-    }
-
-    const onDrop = (e: DragEvent<HTMLLabelElement>) => {
-      dropped?.(e)
-      if (closed) return
-      e.preventDefault()
-      depth.current = 0
-      setDrag('idle')
-      hand([...e.dataTransfer.files])
-    }
-
-    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-      hand([...(e.target.files ?? [])])
-      // Clear it, so picking the same file again still reports it.
-      e.target.value = ''
-    }
-
-    const line =
-      drag === 'accept'
-        ? activeLabel
-        : drag === 'partial'
-          ? partialLabel
-          : drag === 'reject'
-            ? rejectLabel
-            : (label ?? (multiple ? 'Drop files here or click to browse' : 'Drop a file here or click to browse'))
-
-    return (
-      // biome-ignore lint/a11y/noLabelWithoutControl: the file input inside is the control (Field.Control renders it).
-      <label
-        {...rest}
-        style={style}
-        onDragEnter={onDragEnter}
-        onDragOver={onDragOver}
-        onDragLeave={onDragLeave}
-        onDrop={onDrop}
-        data-dragging={drag === 'idle' ? undefined : drag}
-        data-invalid={isInvalid || undefined}
-        data-disabled={isDisabled || undefined}
-        data-readonly={isReadOnly || undefined}
-        className={cn(
-          'group/zone relative flex cursor-pointer flex-col items-center justify-center text-center',
-          'border border-dashed border-border transition-[background-color,border-color,opacity] duration-fast',
-          'hover:bg-muted/50 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-focus-ring',
-          'data-[dragging=accept]:border-solid data-[dragging=accept]:!border-border data-[dragging=accept]:!bg-muted',
-          'data-[dragging=partial]:border-solid data-[dragging=partial]:!border-border data-[dragging=partial]:!bg-muted',
-          'data-[invalid]:border-destructive/50 data-[invalid]:hover:bg-destructive-light/60',
-          'data-[dragging=reject]:border-solid data-[dragging=reject]:border-destructive/50 data-[dragging=reject]:!bg-destructive-light/60',
-          'data-[readonly]:cursor-default data-[readonly]:hover:bg-transparent',
-          'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-          size.gap,
-          PAD[size.variant],
-          shape.container,
-          className,
-        )}
-      >
-        {/* Field.Control: on its own a plain file input, inside a Field it
-            joins the field's label, description and error. */}
-        <Field.Control
-          ref={ref}
-          id={id}
-          disabled={closed}
-          // Not native `required`: the input is cleared after every pick, so it would always be missing.
-          aria-required={(required ?? field?.required) || undefined}
-          aria-invalid={isInvalid || undefined}
-          render={<input type="file" accept={accept} multiple={multiple} onChange={onChange} className="sr-only" />}
-        />
-        {children ?? (
-          <>
-            <motion.span
-              className={cn(
-                'flex text-muted-foreground transition-[color] duration-fast group-hover/zone:text-foreground group-data-[dragging]/zone:text-foreground',
-                drag === 'reject' && 'text-destructive group-data-[dragging]/zone:text-destructive',
-              )}
-              initial={false}
-              // The glyph rises to meet the files; with reduced motion it only darkens.
-              animate={{ y: (drag === 'accept' || drag === 'partial') && !reduced ? -2 : 0 }}
-              transition={spring.fast}
-            >
-              <Glyph
-                size={size.icon}
-                strokeWidth={1.5}
-                className="transition-[stroke-width] duration-fast group-hover/zone:stroke-[2] group-data-[dragging]/zone:stroke-[2]"
-              />
-            </motion.span>
-            <span className="flex flex-col">
-              <span
-                className={cn('weight-normal', size.text, drag === 'reject' ? 'text-destructive' : 'text-foreground')}
-              >
-                {line}
-              </span>
-              {description != null && (
-                <span
-                  className={cn(
-                    'text-muted-foreground weight-normal',
-                    compact ? 'text-caption-compact' : 'text-caption',
-                  )}
-                >
-                  {description}
-                </span>
-              )}
-            </span>
-          </>
-        )}
-      </label>
-    )
-  },
-) as FileDropzoneComponent
-
-FileDropzone.displayName = 'FileDropzone'
-
-Object.assign(FileDropzone, { Row: FileRow })
-
-export type { FileRowProps, FileRowStatus } from './file-row'
-export type { DragVerdict, FileRejection, FileRejectionReason } from './variants'
-export { acceptsFile, dragVerdict, formatFileSize, sortFiles } from './variants'
-export type { FileDropzoneProps }
-export { FileDropzone, FileRow }
-export default FileDropzone

package/components/inputs/file-dropzone/upload-demo.tsx

@@ -1,67 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the docs stage of the
- * FileDropzone page. It keeps the picked files, plays a pretend upload for
- * each and shows the rejections in a Field's error, so the example stays
- * hook-free. The zone itself keeps no files.
- */
-
-import { useEffect, useState } from 'react'
-import Field from '../field'
-import FileDropzone, { type FileDropzoneProps, type FileRejection } from './index'
-
-interface Upload {
-  file: File
-  progress: number
-}
-
-const REASONS = { type: "isn't a PDF or an image", size: 'is over 5 MB', count: "doesn't fit: three files at most" }
-
-export default function UploadDemo(props: FileDropzoneProps) {
-  const [uploads, setUploads] = useState<Upload[]>([])
-  const [rejected, setRejected] = useState<FileRejection[]>([])
-
-  // A pretend upload: every file gains a little each tick until it is done.
-  const busy = uploads.some(upload => upload.progress < 100)
-  useEffect(() => {
-    if (!busy) return
-    const timer = setInterval(
-      () => setUploads(list => list.map(upload => ({ ...upload, progress: Math.min(upload.progress + 12, 100) }))),
-      300,
-    )
-    return () => clearInterval(timer)
-  }, [busy])
-
-  const left = 3 - uploads.length
-
-  return (
-    <Field invalid={rejected.length > 0} className="w-96 max-w-full gap-2">
-      <Field.Label>Attachments</Field.Label>
-      <FileDropzone
-        {...props}
-        maxFiles={left}
-        disabled={left <= 0}
-        onFilesChange={files => {
-          setRejected([])
-          setUploads(list => [...list, ...files.map(file => ({ file, progress: 0 }))])
-        }}
-        onFilesRejected={setRejected}
-      />
-      <Field.Error>
-        {rejected.length > 0 && rejected.map(({ file, reason }) => `${file.name} ${REASONS[reason]}.`).join(' ')}
-      </Field.Error>
-      {uploads.length > 0 && (
-        <div className="flex flex-col">
-          {uploads.map(upload => (
-            <FileDropzone.Row
-              key={`${upload.file.name}-${upload.file.lastModified}`}
-              file={upload.file}
-              status={upload.progress < 100 ? 'uploading' : 'done'}
-              progress={upload.progress}
-              onRemove={() => setUploads(list => list.filter(item => item !== upload))}
-            />
-          ))}
-        </div>
-      )}
-    </Field>
-  )
-}