@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/components/inputs/field/examples.mdx

@@ -0,0 +1,113 @@
+import Field from './index'
+import Input from '../input'
+import Textarea from '../textarea'
+import NumberInput from '../number-input'
+import { Mail } from 'lucide-react'
+
+# Field
+
+A label above the control, help text below it. The label targets the control and the description is read with it.
+
+<Field className="w-72 max-w-full">
+  <Field.Label>Email</Field.Label>
+  <Input icon={Mail} placeholder="you@example.com" />
+  <Field.Description>We only write about your account.</Field.Description>
+</Field>
+
+# Error
+
+`invalid` turns the label and the box destructive; `Field.Error` shows its message while it has one. Both come from your validation.
+
+<Field invalid className="w-72 max-w-full">
+  <Field.Label>Email</Field.Label>
+  <Input icon={Mail} defaultValue="ada@" />
+  <Field.Error>Enter a full address, like ada@example.com.</Field.Error>
+</Field>
+
+# Required
+
+`required` marks the control required and the label with an asterisk.
+
+<Field required name="company" className="w-72 max-w-full">
+  <Field.Label>Company</Field.Label>
+  <Input placeholder="Acme Inc." />
+</Field>
+
+# Native validation
+
+With `validationMode`, Base UI checks the control's own rules (`required`, `type="email"`) and the field turns destructive on a failure; an empty `Field.Error` shows the browser's message. Type something that isn't an address and leave the field.
+
+<Field required validationMode="onBlur" className="w-72 max-w-full">
+  <Field.Label>Work email</Field.Label>
+  <Input type="email" icon={Mail} placeholder="you@company.com" />
+  <Field.Error />
+</Field>
+
+# Disabled and read-only
+
+The field hands its state to the control: `disabled` dims everything, `readOnly` keeps the value selectable.
+
+<div className="flex flex-col gap-4 w-72 max-w-full">
+  <Field disabled>
+    <Field.Label>Workspace</Field.Label>
+    <Input defaultValue="Design" />
+    <Field.Description>Only owners can rename it.</Field.Description>
+  </Field>
+  <Field readOnly>
+    <Field.Label>Invoice number</Field.Label>
+    <Input defaultValue="INV-2026-0042" />
+  </Field>
+</div>
+
+# Any field control
+
+Textarea and NumberInput join the same way: the label, description and error wire to them.
+
+<div className="flex flex-col gap-4 w-72 max-w-full">
+  <Field>
+    <Field.Label>Message</Field.Label>
+    <Textarea placeholder="Write your message" minRows={2} />
+  </Field>
+  <Field invalid>
+    <Field.Label>Seats</Field.Label>
+    <NumberInput defaultValue={0} min={0} />
+    <Field.Error>Book at least one seat.</Field.Error>
+  </Field>
+</div>
+
+# Field.Control
+
+A control that isn't a field control gets the field's id, `aria-describedby` and `aria-invalid` through `Field.Control`, here a native select.
+
+<Field className="w-72 max-w-full">
+  <Field.Label>Country</Field.Label>
+  <Field.Control
+    render={
+      <select className="h-9 w-full bg-transparent px-1.5 text-body text-foreground">
+        <option>Slovakia</option>
+        <option>Czechia</option>
+        <option>Austria</option>
+      </select>
+    }
+  />
+  <Field.Description>Where the invoice is sent.</Field.Description>
+</Field>
+
+# Compact
+
+`size` pins the field and its control to the compact step.
+
+<Field size="compact" className="w-64 max-w-full">
+  <Field.Label>Filter</Field.Label>
+  <Input placeholder="Name contains…" />
+  <Field.Description>Matches any part of the name.</Field.Description>
+</Field>
+
+# Hidden label
+
+`visuallyHidden` keeps the label for assistive tech where the placeholder carries the meaning.
+
+<Field className="w-72 max-w-full">
+  <Field.Label visuallyHidden>Search</Field.Label>
+  <Input variant="bordered" placeholder="Search people" />
+</Field>

package/components/inputs/field/index.tsx

@@ -0,0 +1,267 @@
+/*
+ * Local addition (not part of Fluid Functionalism): a labelled form field on
+ * Base UI's Field, with no form library of its own. The label, description
+ * and error line up with the text inside the field box
+ * (`lib/field-variants.ts`), and the field's state reaches any control built
+ * on `useFieldBox` through `FieldStateContext` (`lib/field-classes.ts`), the
+ * way InputGroup.Field hands it to its control.
+ */
+
+import { Field as BaseField } from '@base-ui/react/field'
+import {
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+  useMemo,
+} from 'react'
+import { FIELD_TEXT_INSET, FieldStateContext, useFieldState } from '../../../lib/field-classes'
+import { type SizeVariant, useSize } from '../../../lib/size-context'
+import { slotRender } from '../../../lib/slot'
+import { cn } from '../../../lib/utils'
+import { SizeProvider } from '../../../primitives/sizes'
+import { Label } from '../input'
+
+/** When native validity is checked. */
+type FieldValidationMode = 'onSubmit' | 'onBlur' | 'onChange'
+
+interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** The field's parts: `Field.Label`, a control, `Field.Description`, `Field.Error`. */
+  children?: ReactNode
+  /** Marks the value invalid: the label and the control turn destructive and the control sets `aria-invalid`. Set it from your validation (a form library's field state). Defaults to `false`. */
+  invalid?: boolean
+  /** Disables the control and dims the field. Defaults to `false`. */
+  disabled?: boolean
+  /** Shows the value without letting it change (Input, NumberInput and FileDropzone read it). Defaults to `false`. */
+  readOnly?: boolean
+  /** Marks the control required and the label with an asterisk. Defaults to `false`. */
+  required?: boolean
+  /** Names the value when the form is submitted; wins over the control's own `name`. */
+  name?: string
+  /** Whether the value differs from its initial one, for a form library that tracks it (sets `data-dirty`). */
+  dirty?: boolean
+  /** Whether the control has been visited, for a form library that tracks it (sets `data-touched`). */
+  touched?: boolean
+  /** When Base UI checks the control's native validity (`required`, `pattern`, `type`): on form submit, on blur, or on every change. A failure turns the field destructive and an empty `Field.Error` shows the browser's message. Defaults to `"onSubmit"`. */
+  validationMode?: FieldValidationMode
+  /** Pins the field and its control to one step of the size ladder (36px default, 28px compact). Defaults to the surrounding SizeProvider. */
+  size?: SizeVariant
+  /** Classes for the root. */
+  className?: string
+}
+
+interface FieldLabelProps {
+  /** Label text. */
+  children: ReactNode
+  /** Keep the label for assistive tech but don't render it, for a field whose placeholder or context carries the meaning. Defaults to `false`. */
+  visuallyHidden?: boolean
+  /** Classes for the label. */
+  className?: string
+}
+
+function FieldLabel({ children, visuallyHidden, className }: FieldLabelProps) {
+  const field = useFieldState()
+
+  return (
+    <BaseField.Label
+      render={
+        <Label invalid={field?.invalid} className={cn(visuallyHidden && 'sr-only', className)}>
+          {children}
+          {field?.required && <span aria-hidden="true"> *</span>}
+        </Label>
+      }
+    />
+  )
+}
+
+interface FieldDescriptionProps {
+  /** Help text under the control: a format, a limit, what the value is for. */
+  children: ReactNode
+  /** Classes for the description. */
+  className?: string
+}
+
+function FieldDescription({ children, className }: FieldDescriptionProps) {
+  const size = useSize()
+
+  return (
+    <BaseField.Description
+      className={cn(
+        'text-muted-foreground weight-normal data-[disabled]:opacity-50',
+        size.variant === 'compact' ? 'text-caption-compact' : 'text-caption',
+        FIELD_TEXT_INSET[size.variant],
+        className,
+      )}
+    >
+      {children}
+    </BaseField.Description>
+  )
+}
+
+/** Which native validity state shows the message (`"valueMissing"`, `"typeMismatch"`, …). */
+type FieldErrorMatch = boolean | keyof ValidityState
+
+interface FieldErrorProps {
+  /** The message. While it has one, it shows; empty, it hides. */
+  children?: ReactNode
+  /** Overrides when it shows: `true` always, `false` never, or a native validity state such as `"valueMissing"`. Defaults to showing while it has a message. */
+  match?: FieldErrorMatch
+  /** Classes for the message. */
+  className?: string
+}
+
+function FieldError({ children, match, className }: FieldErrorProps) {
+  const size = useSize()
+  const hasMessage = children != null && children !== false && children !== ''
+
+  return (
+    <BaseField.Error
+      // Without a message and a match, Base UI shows the native validation message.
+      match={match ?? (hasMessage || undefined)}
+      className={cn(
+        'text-destructive weight-medium',
+        size.variant === 'compact' ? 'text-caption-compact' : 'text-caption',
+        FIELD_TEXT_INSET[size.variant],
+        'transition-opacity duration-fast data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-fast-exit',
+        className,
+      )}
+      // An explicit `children: undefined` would hide Base UI's own message.
+      {...(hasMessage ? { children } : {})}
+    />
+  )
+}
+
+interface FieldControlProps {
+  /** The element that becomes the control, e.g. a native `<select>` or a third-party input. */
+  render?: ReactElement
+  /** Compose onto the single child instead. Defaults to `false`. */
+  asChild?: boolean
+  /** The control, with `asChild`. */
+  children?: ReactNode
+}
+
+function FieldControl({ render, asChild, children }: FieldControlProps) {
+  return <BaseField.Control render={slotRender(render, asChild, children)} />
+}
+
+interface ProvideFieldStateProps {
+  invalid: boolean
+  disabled: boolean
+  readOnly: boolean
+  required: boolean
+  children?: ReactNode
+}
+
+function ProvideFieldState({ invalid, disabled, readOnly, required, children }: ProvideFieldStateProps) {
+  const state = useMemo(
+    () => ({ active: false, invalid, disabled, readOnly, required }),
+    [invalid, disabled, readOnly, required],
+  )
+  return <FieldStateContext.Provider value={state}>{children}</FieldStateContext.Provider>
+}
+
+type FieldComponent = ForwardRefExoticComponent<FieldProps & RefAttributes<HTMLDivElement>> & {
+  Label: typeof FieldLabel
+  Description: typeof FieldDescription
+  Error: typeof FieldError
+  Control: typeof FieldControl
+}
+
+/**
+ * A labelled form field: a label above the control, help text and an error
+ * message below it, all linked for assistive tech.
+ *
+ * Put an Input, Textarea, NumberInput, FileDropzone, Select or any other
+ * field control inside and it joins on its own: the label targets it, the
+ * description and error are read with it, and the field hands it its
+ * `invalid`, `disabled`, `readOnly` and `required` state, so the box turns
+ * destructive with the label. The label and messages sit inset to line up
+ * with the text in the box. The field holds no validation of its own:
+ * `invalid` and the error's message come from yours (a form library's field
+ * state, a server response), and `Field.Error` shows while it has a message.
+ * A native failure (`required`, `pattern`, `type="email"`) caught by Base UI's
+ * validation turns it destructive too, and an empty `Field.Error` then shows
+ * the browser's message.
+ * Behavior comes from Base UI's Field.
+ *
+ * `size` pins the field and its control to one step of the size ladder;
+ * without it they follow the surrounding SizeProvider, which is how to set a
+ * form's density when a control's own props keep the native `<input size>`
+ * attribute (a character width, not a height). `Field.Control` passes a
+ * native `size` through to the element untouched.
+ *
+ * InputGroup.Field is the preset for a group of text fields: a label and an
+ * error string, and the group's hover gliding from field to field. Reach for
+ * Field when a field stands alone, needs a description, or holds a control
+ * other than a text input.
+ *
+ * Statics:
+ * - `Field.Label` — the label, weight-stable and muted; destructive while
+ *   the field is invalid, with an asterisk while it is required:
+ *   `visuallyHidden`.
+ * - `Field.Description` — muted help text under the control.
+ * - `Field.Error` — the destructive message; it fades in while it has
+ *   children: `match` (`true`, `false`, or a native validity state).
+ * - `Field.Control` — wires a control that isn't a field control (a native
+ *   element, a third-party input) with the field's id, `aria-describedby`
+ *   and `aria-invalid`: `render={<select/>}` or `asChild`. Field controls
+ *   (Input, NumberInput, …) need no wrapper.
+ *
+ * @example {@include ./examples.mdx}
+ */
+const Field = forwardRef<HTMLDivElement, FieldProps>(
+  (
+    { invalid = false, disabled = false, readOnly = false, required = false, size, className, children, ...props },
+    ref,
+  ) => {
+    const field = (
+      // Base UI wires the plumbing: Field.Label's htmlFor targets the
+      // control, Description and Error ids land in its aria-describedby, and
+      // `invalid` drives aria-invalid / data-invalid.
+      <BaseField.Root
+        ref={ref}
+        invalid={invalid}
+        disabled={disabled}
+        className={cn('flex min-w-0 flex-col gap-1', className)}
+        // The render function sees Base UI's validity, so a native failure
+        // (`required`, `pattern`, a type mismatch) turns the label and the box
+        // destructive too, not only the `invalid` prop.
+        render={(rootProps, rootState) => (
+          <div {...rootProps}>
+            <ProvideFieldState
+              invalid={invalid || rootState.valid === false}
+              disabled={disabled}
+              readOnly={readOnly}
+              required={required}
+            >
+              {rootProps.children}
+            </ProvideFieldState>
+          </div>
+        )}
+        {...props}
+      >
+        {children}
+      </BaseField.Root>
+    )
+
+    return size ? <SizeProvider size={size}>{field}</SizeProvider> : field
+  },
+) as FieldComponent
+
+Field.displayName = 'Field'
+
+Object.assign(Field, { Label: FieldLabel, Description: FieldDescription, Error: FieldError, Control: FieldControl })
+
+export type {
+  FieldControlProps,
+  FieldDescriptionProps,
+  FieldErrorMatch,
+  FieldErrorProps,
+  FieldLabelProps,
+  FieldProps,
+  FieldValidationMode,
+}
+export { Field, FieldControl, FieldDescription, FieldError, FieldLabel }
+export default Field

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

@@ -0,0 +1,73 @@
+import FileDropzone from './index'
+import UploadDemo from './upload-demo'
+import Field from '../field'
+
+# 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>
+
+# 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

@@ -0,0 +1,201 @@
+/*
+ * 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