@cosxai/ui 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/components/DateInput.tsx

@@ -0,0 +1,366 @@
+import * as Popover from '@radix-ui/react-popover';
+import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
+import { DayPicker, type ChevronProps } from 'react-day-picker';
+import { zhCN } from 'react-day-picker/locale';
+
+import { cn } from '../lib/cn';
+import { Field, useField } from './Field';
+import { controlFrame, controlInner } from './forms-control';
+import { SegmentedControl } from './SegmentedControl';
+import { formatDate, fromDate, fromIso, langOf, parseDate, toDate, toIso, type PartialDate } from './inputs-date';
+
+type Common = {
+  label?: ReactNode;
+  hint?: ReactNode;
+  /** An error of the caller's own (required, out of range). */
+  error?: ReactNode;
+  disabled?: boolean | undefined;
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  id?: string | undefined;
+  name?: string | undefined;
+  className?: string | undefined;
+  /** Shown when the text cannot be read. */
+  formatHint?: ReactNode;
+};
+
+export type DateInputProps = Common & {
+  /** ISO date, YYYY-MM-DD; null when empty. */
+  value?: string | null | undefined;
+  defaultValue?: string | null | undefined;
+  /** ISO date, or null when cleared. Unreadable text is not a change. */
+  onChange?: ((value: string | null) => void) | undefined;
+  /** Accessible name of the calendar button. @default "Choose a date" */
+  calendarLabel?: string | undefined;
+  /** Earliest / latest choosable (ISO). */
+  min?: string | undefined;
+  max?: string | undefined;
+  placeholder?: string | undefined;
+  /** Start with the calendar open. */
+  defaultOpen?: boolean | undefined;
+};
+
+const calendarClasses = {
+  root: 'font-sans text-fg',
+  months: 'relative',
+  month: 'flex flex-col gap-2',
+  month_caption: 'flex h-8 items-center px-1 text-ui font-medium',
+  caption_label: '',
+  nav: 'absolute top-0 right-0 flex gap-1',
+  button_previous:
+    'inline-grid size-8 cursor-pointer place-items-center rounded-md text-fg outline-none hover:bg-hover focus-visible:shadow-(--focus-ring) disabled:opacity-40',
+  button_next:
+    'inline-grid size-8 cursor-pointer place-items-center rounded-md text-fg outline-none hover:bg-hover focus-visible:shadow-(--focus-ring) disabled:opacity-40',
+  month_grid: 'border-collapse',
+  weekdays: '',
+  weekday: 'h-8 w-9 text-meta font-medium text-fg-secondary',
+  week: '',
+  day: 'p-0 text-center',
+  day_button:
+    'm-px inline-grid size-[34px] cursor-pointer place-items-center rounded-md text-[13px] tabular-nums text-fg outline-none hover:bg-hover focus-visible:shadow-(--focus-ring)',
+  selected: '[&>button]:bg-ink [&>button]:font-semibold [&>button]:text-linen [&>button]:hover:bg-ink-raised ink:[&>button]:bg-yellow-accent ink:[&>button]:text-ink ink:[&>button]:hover:bg-yellow-accent-hover',
+  today: '[&>button]:underline [&>button]:decoration-yellow-accent [&>button]:decoration-2 [&>button]:underline-offset-4',
+  outside: '[&>button]:text-fg-secondary [&>button]:opacity-50',
+  disabled: '[&>button]:cursor-not-allowed [&>button]:opacity-30',
+  hidden: 'invisible',
+  chevron: '',
+};
+
+function Chevron({ orientation }: ChevronProps) {
+  return orientation === 'left' ? <ChevronLeft size={15} aria-hidden /> : <ChevronRight size={15} aria-hidden />;
+}
+
+/** A Field is built only from the component's own label / hint / error —
+ * props that do not flip while typing — so the control never remounts when
+ * the format note comes and goes. Without one, the note sits below. */
+function ownField(common: Common) {
+  return common.label !== undefined || common.hint !== undefined || common.error !== undefined;
+}
+
+function describedBy(common: Common, field: ReturnType<typeof useField>, unreadable: boolean, noteId: string) {
+  const ids = [field?.describedBy, unreadable && !ownField(common) ? noteId : undefined].filter(Boolean);
+  return ids.length ? ids.join(' ') : undefined;
+}
+
+function wrap(common: Common, invalidNote: ReactNode | null, control: ReactNode, noteId: string) {
+  const { label, hint, error } = common;
+  if (ownField(common)) {
+    return (
+      <Field label={label} hint={hint} error={error ?? invalidNote ?? undefined} disabled={common.disabled} id={common.id}>
+        {control}
+      </Field>
+    );
+  }
+  return (
+    <>
+      {control}
+      {invalidNote !== null && (
+        <span id={noteId} className="mt-1.5 block text-meta leading-normal text-error-text ink:text-error">
+          {invalidNote}
+        </span>
+      )}
+    </>
+  );
+}
+
+/**
+ * DateInput — type a date or pick one. Reads 12/03/2019 (day first),
+ * 2019-03-12, 12 Mar 2019 and 2019年3月12日; shows it back as 12 Mar 2019.
+ * The calendar sits on paper; the chosen day on the brand colour, today
+ * underlined in the accent.
+ */
+export function DateInput(props: DateInputProps) {
+  const { value, defaultValue = null, onChange, calendarLabel = 'Choose a date', min, max, placeholder = 'e.g. 12 Mar 2019', defaultOpen = false, formatHint = 'Use a date like 12 Mar 2019 or 2019-03-12.', name } =
+    props;
+  const [own, setOwn] = useState<string | null>(defaultValue);
+  const iso = value === undefined ? own : value;
+  const parsed = fromIso(iso);
+  const frame = useRef<HTMLDivElement | null>(null);
+  const [lang, setLang] = useState<'en' | 'zh'>('en');
+  useEffect(() => setLang(langOf(frame.current)), []);
+  const [text, setText] = useState(parsed ? formatDate(parsed, lang) : '');
+  const [unreadable, setUnreadable] = useState(false);
+  const noteId = useId();
+  const [open, setOpen] = useState(defaultOpen);
+
+  // Follow value changes from outside.
+  useEffect(() => {
+    setText(parsed ? formatDate(parsed, lang) : '');
+    setUnreadable(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [iso, lang]);
+
+  const commit = (next: string | null) => {
+    if (value === undefined) setOwn(next);
+    onChange?.(next);
+  };
+  const readText = () => {
+    if (!text.trim()) {
+      setUnreadable(false);
+      if (iso !== null) commit(null);
+      return;
+    }
+    const p = parseDate(text);
+    if (!p) {
+      setUnreadable(true);
+      return;
+    }
+    setUnreadable(false);
+    const next = toIso(p);
+    setText(formatDate(p, lang));
+    if (next !== iso) commit(next);
+  };
+
+  const bounds = [min && fromIso(min) ? { before: toDate(fromIso(min)!) } : null, max && fromIso(max) ? { after: toDate(fromIso(max)!) } : null].filter(
+    (m): m is { before: Date } | { after: Date } => m !== null,
+  );
+
+  const control = (
+    <Inner {...props} frame={frame} invalid={unreadable}>
+      {(field) => (
+        <>
+          <input
+            id={props.id ?? field?.id}
+            value={text}
+            placeholder={placeholder}
+            disabled={props.disabled || field?.disabled}
+            aria-invalid={unreadable || Boolean(props.error) || field?.invalid || undefined}
+            aria-describedby={describedBy(props, field, unreadable, noteId)}
+            onChange={(e) => {
+              setText(e.target.value);
+              if (unreadable) setUnreadable(false);
+            }}
+            onBlur={readText}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') readText();
+              if (e.key === 'ArrowDown' && e.altKey) {
+                e.preventDefault();
+                setOpen(true);
+              }
+            }}
+            className={controlInner}
+          />
+          {name && <input type="hidden" name={name} value={iso ?? ''} />}
+          <Popover.Root open={open} onOpenChange={setOpen}>
+            <Popover.Trigger asChild disabled={props.disabled || field?.disabled}>
+              <button
+                type="button"
+                aria-label={calendarLabel}
+                className="-mr-1 inline-grid size-7 shrink-0 cursor-pointer place-items-center rounded-sm text-fg-secondary outline-none hover:bg-hover hover:text-fg focus-visible:shadow-(--focus-ring) disabled:cursor-not-allowed"
+              >
+                <CalendarDays size={15} aria-hidden />
+              </button>
+            </Popover.Trigger>
+            <Popover.Portal>
+              <Popover.Content
+                align="end"
+                sideOffset={6}
+                collisionPadding={12}
+                aria-label={calendarLabel}
+                // Focus lands on the chosen day (or today), not the first nav button.
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                className="rise z-60 rounded-lg border border-rule bg-page p-3 [--motion-reveal:200ms]"
+              >
+                <DayPicker
+                  autoFocus
+                  {...(lang === 'zh' ? { locale: zhCN } : {})}
+                  mode="single"
+                  weekStartsOn={1}
+                  {...(parsed?.day ? { selected: toDate(parsed), defaultMonth: toDate(parsed) } : {})}
+                  onSelect={(d) => {
+                    if (!d) return;
+                    commit(toIso(fromDate(d)));
+                    setOpen(false);
+                  }}
+                  disabled={bounds}
+                  classNames={calendarClasses}
+                  components={{ Chevron }}
+                />
+              </Popover.Content>
+            </Popover.Portal>
+          </Popover.Root>
+        </>
+      )}
+    </Inner>
+  );
+  return wrap(props, unreadable ? formatHint : null, control, noteId);
+}
+
+function Inner({
+  size,
+  disabled,
+  error,
+  className,
+  frame,
+  invalid,
+  children,
+}: Common & { frame: React.RefObject<HTMLDivElement | null>; invalid: boolean; children: (field: ReturnType<typeof useField>) => ReactNode }) {
+  const field = useField();
+  const bad = invalid || Boolean(error) || Boolean(field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+  return (
+    <div ref={frame} className={cn(controlFrame({ size, invalid: bad, disabled: off }), className)}>
+      {children(field)}
+    </div>
+  );
+}
+
+export type DatePrecision = 'day' | 'month' | 'year';
+
+export type FuzzyDateInputProps = Common & {
+  /** YYYY-MM-DD, YYYY-MM or YYYY — or, when it could not be read, the text as typed. */
+  value?: string | null | undefined;
+  defaultValue?: string | null | undefined;
+  /**
+   * The date as ISO (partial allowed), `valid: false` with the raw text when
+   * it cannot be read — which still saves: the caller decides.
+   */
+  onChange?: ((value: string | null, meta: { valid: boolean }) => void) | undefined;
+  /** Precision labels. @default { day: 'Day', month: 'Month', year: 'Year', precision: 'Precision' } */
+  labels?: { day: string; month: string; year: string; precision?: string | undefined } | undefined;
+};
+
+const precisionOf = (p: PartialDate): DatePrecision => (p.day !== undefined ? 'day' : p.month !== undefined ? 'month' : 'year');
+const EXAMPLE: Record<DatePrecision, string> = { day: '2019-03-12', month: '2019-03', year: '2019' };
+
+/**
+ * FuzzyDateInput — a date people only partly remember (first entry to the
+ * UK: 2019-03). One field that reads 12/03/2019, 2019-03-12, 12 Mar 2019,
+ * Mar 2019 or 2019, and a Day · Month · Year switch that shows how much is
+ * known — choosing a coarser one drops the rest. If the text cannot be read
+ * it says the expected format — and still lets the form save.
+ */
+export function FuzzyDateInput(props: FuzzyDateInputProps) {
+  const { value, defaultValue = null, onChange, labels: labelsIn, formatHint = 'Year required; day and month if known, e.g. 2019-03 or 12 Mar 2019.', size, name } = props;
+  const labels = { day: 'Day', month: 'Month', year: 'Year', precision: 'Precision', ...labelsIn };
+  const current = value === undefined ? defaultValue : value;
+  const [text, setText] = useState(current ?? '');
+  const [unreadable, setUnreadable] = useState(false);
+  const [wanted, setWanted] = useState<DatePrecision | null>(null);
+  const noteId = useId();
+  const input = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (value === undefined) return;
+    if (value === null || fromIso(value)) setText(value ?? '');
+  }, [value]);
+
+  const parsed = parseDate(text, { partial: true });
+  const precision = wanted ?? (parsed ? precisionOf(parsed) : 'month');
+
+  const commit = (raw: string) => {
+    const t = raw.trim();
+    if (!t) {
+      setUnreadable(false);
+      setText('');
+      onChange?.(null, { valid: true });
+      return;
+    }
+    const p = parseDate(t, { partial: true });
+    setUnreadable(!p);
+    if (p) {
+      setText(toIso(p));
+      setWanted(null);
+    }
+    onChange?.(p ? toIso(p) : t, { valid: Boolean(p) });
+  };
+
+  const choose = (next: DatePrecision) => {
+    const rank = { year: 0, month: 1, day: 2 };
+    if (parsed && rank[next] < rank[precisionOf(parsed)]) {
+      const cut: PartialDate = next === 'year' ? { year: parsed.year } : { year: parsed.year, month: parsed.month };
+      setText(toIso(cut));
+      setWanted(null);
+      onChange?.(toIso(cut), { valid: true });
+      return;
+    }
+    // Finer than what is known: say what to add, and let them type it.
+    setWanted(next);
+    input.current?.focus();
+  };
+
+  const control = (
+    <FuzzyField>
+      {(field) => (
+        <div className={cn('flex items-center gap-2', props.className)}>
+          <span className={cn(controlFrame({ size, invalid: unreadable || Boolean(props.error) || Boolean(field?.invalid), disabled: Boolean(props.disabled || field?.disabled) }), 'min-w-0 flex-1')}>
+            <input
+              ref={input}
+              id={props.id ?? field?.id}
+              value={text}
+              placeholder={`e.g. ${EXAMPLE[precision]}`}
+              autoComplete="off"
+              disabled={props.disabled || field?.disabled}
+              aria-invalid={unreadable || undefined}
+              aria-describedby={describedBy(props, field, unreadable, noteId)}
+              onChange={(e) => setText(e.target.value)}
+              onBlur={(e) => commit(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') commit(e.currentTarget.value);
+              }}
+              className={cn(controlInner, 'tabular-nums')}
+            />
+          </span>
+          <SegmentedControl
+            aria-label={labels.precision}
+            value={precision}
+            onChange={(v) => choose(v as DatePrecision)}
+            segments={[
+              { value: 'day', label: labels.day },
+              { value: 'month', label: labels.month },
+              { value: 'year', label: labels.year },
+            ]}
+            className="shrink-0"
+            {...(size === 'sm' ? { size: 'sm' as const } : {})}
+          />
+          {name && <input type="hidden" name={name} value={parsed ? toIso(parsed) : text} />}
+        </div>
+      )}
+    </FuzzyField>
+  );
+  return wrap(props, unreadable ? formatHint : null, control, noteId);
+}
+
+function FuzzyField({ children }: { children: (field: ReturnType<typeof useField>) => ReactNode }) {
+  return <>{children(useField())}</>;
+}

package/src/components/Dialog.tsx

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
-import type { ComponentProps, ReactNode } from 'react';
+import { useRef, type ComponentProps, type ReactNode } from 'react';
 
 import { cn } from '../lib/cn';
 import { IconButton } from './IconButton';
@@ -12,7 +12,15 @@ export const DialogTrigger = DialogPrimitive.Trigger;
 /** Closes the dialog (asChild onto the Cancel button). */
 export const DialogClose = DialogPrimitive.Close;
 
-const WIDTH = { sm: 'sm:max-w-[400px]', md: 'sm:max-w-[520px]', lg: 'sm:max-w-[640px]' } as const;
+// sm/md/lg are the site's 400 / 520 / 640; xl (a wizard) and split (a
+// document beside its detail) are the Metaroom spec's 800 and 1120.
+const WIDTH = {
+  sm: 'sm:max-w-[400px]',
+  md: 'sm:max-w-[520px]',
+  lg: 'sm:max-w-[640px]',
+  xl: 'sm:max-w-[800px]',
+  split: 'sm:max-w-[1120px]',
+} as const;
 
 const MOBILE = {
   // Confirmations stay centred.
@@ -32,7 +40,7 @@ export type DialogContentProps = Omit<ComponentProps<typeof DialogPrimitive.Cont
   description?: ReactNode;
   /** Actions, bottom right: secondary left, primary right. A destructive primary is Button variant="danger". */
   footer?: ReactNode;
-  /** sm 400 (confirm) · md 520 (form, up to five fields) · lg 640. @default "md" */
+  /** sm 400 (confirm) · md 520 (form, up to five fields) · lg 640 · xl 800 (wizard) · split 1120 (two panes). @default "md" */
   size?: keyof typeof WIDTH | undefined;
   /** How it shows on phones: center (confirmations) · page (long forms) · sheet (light choices). @default "center" */
   mobile?: keyof typeof MOBILE | undefined;
@@ -60,8 +68,13 @@ export function DialogContent({
   className,
   children,
   onOpenAutoFocus,
+  onCloseAutoFocus,
   ...rest
 }: DialogContentProps) {
+  // Whatever had focus when it opened gets it back on close — a
+  // DialogTrigger or a button that set `open` (Radix only restores its own
+  // Trigger).
+  const opener = useRef<Element | null>(null);
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-scrim" />
@@ -73,11 +86,22 @@ export function DialogContent({
            close button: no ring before the person has done anything. Tab
            then reaches the controls; focus stays trapped. */
         onOpenAutoFocus={(e) => {
+          // Focus has not moved yet: this is what opened it.
+          opener.current = document.activeElement;
           onOpenAutoFocus?.(e);
           if (e.defaultPrevented) return;
           e.preventDefault();
           (e.currentTarget as HTMLElement | null)?.focus();
         }}
+        onCloseAutoFocus={(e) => {
+          onCloseAutoFocus?.(e);
+          if (e.defaultPrevented) return;
+          const el = opener.current;
+          if (el instanceof HTMLElement && el.isConnected && el !== document.body) {
+            e.preventDefault();
+            el.focus();
+          }
+        }}
         className={cn(
           'fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-48px)] w-[calc(100%-48px)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden',
           'rounded-lg border border-rule bg-page font-sans text-fg outline-none',

package/src/components/Dropzone.tsx

@@ -0,0 +1,187 @@
+import { FileX, Upload } from 'lucide-react';
+import { useRef, useState, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { checkFiles, DEFAULT_MAX_SIZE, formatBytes, fromInput, hasFiles, readDataTransfer, type DroppedFile, type FileRules, type Rejected } from './status-files';
+import { useWindowDrop } from './WindowDrop';
+
+export type DropzoneLabels = {
+  idle?: string;
+  limit?: (maxSize: number) => string;
+  dragging?: string;
+  release?: (target: string) => string;
+  choose?: string;
+  chooseFolder?: string;
+  compact?: string;
+  refused?: (r: Rejected) => string;
+};
+
+export type DropzoneProps = Omit<ComponentProps<'div'>, 'onDrop' | 'children'> &
+  FileRules & {
+    /** Allow several files. @default true */
+    multiple?: boolean | undefined;
+    /** Offer "Choose a folder" too. */
+    directory?: boolean | undefined;
+    /** Folder name shown on hover: "Release to upload to <target>". */
+    target?: string | undefined;
+    /** One line, for list views. */
+    compact?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /** Files that passed the checks, with folder paths. */
+    onFiles: (files: DroppedFile[]) => void;
+    /** Files refused, with the reason. */
+    onReject?: ((items: Rejected[]) => void) | undefined;
+    labels?: DropzoneLabels | undefined;
+    /** Extra actions beside Choose files. */
+    actions?: ReactNode;
+  };
+
+export function refusedText(r: Rejected, maxSize = DEFAULT_MAX_SIZE): string {
+  if (r.reason === 'type') {
+    const ext = r.file.name.includes('.') ? r.file.name.slice(r.file.name.lastIndexOf('.')) : r.file.name;
+    return `${ext} files aren’t supported`;
+  }
+  if (r.reason === 'size') return `Files over ${formatBytes(maxSize)} aren’t supported`;
+  return 'Folders nested this deep aren’t supported';
+}
+
+/**
+ * Dropzone — drop files or folders here, or choose them (a real button:
+ * drag and drop is never the only way). Idle: a dashed edge; while files
+ * are dragged into the window: lit; over the zone: the yellow field naming
+ * the folder; refused: says why, not just red.
+ */
+export function Dropzone({
+  accept,
+  maxSize = DEFAULT_MAX_SIZE,
+  maxDepth,
+  multiple = true,
+  directory = false,
+  target,
+  compact = false,
+  disabled = false,
+  onFiles,
+  onReject,
+  labels,
+  actions,
+  className,
+  ...rest
+}: DropzoneProps) {
+  const { dragging, setHoverTarget } = useWindowDrop();
+  const [over, setOver] = useState(false);
+  const [refused, setRefused] = useState<Rejected | null>(null);
+  const files = useRef<HTMLInputElement | null>(null);
+  const folder = useRef<HTMLInputElement | null>(null);
+  const depth = useRef(0);
+
+  const take = (items: DroppedFile[]) => {
+    const { accepted, rejected } = checkFiles(items, { accept, maxSize, maxDepth });
+    const kept = multiple ? accepted : accepted.slice(0, 1);
+    setRefused(kept.length === 0 && rejected[0] ? rejected[0] : null);
+    if (kept.length) onFiles(kept);
+    if (rejected.length) onReject?.(rejected);
+  };
+
+  const release = labels?.release ?? ((t: string) => `Release to upload to ${t}`);
+  const state = disabled ? 'disabled' : over ? 'over' : refused ? 'refused' : dragging ? 'dragging' : 'idle';
+
+  return (
+    <div
+      data-state={state}
+      onDragEnter={(e) => {
+        if (disabled || !hasFiles(e.dataTransfer)) return;
+        depth.current += 1;
+        setOver(true);
+        setRefused(null);
+        if (target) setHoverTarget(target);
+      }}
+      onDragOver={(e) => {
+        if (disabled || !hasFiles(e.dataTransfer)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }}
+      onDragLeave={(e) => {
+        if (!hasFiles(e.dataTransfer)) return;
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) {
+          setOver(false);
+          setHoverTarget(null);
+        }
+      }}
+      onDrop={(e) => {
+        if (disabled || !hasFiles(e.dataTransfer)) return;
+        e.preventDefault();
+        e.stopPropagation(); // the window layer must not also take it
+        depth.current = 0;
+        setOver(false);
+        setHoverTarget(null);
+        void readDataTransfer(e.dataTransfer).then(take);
+      }}
+      className={cn(
+        'flex rounded-lg border font-sans transition-[background-color,border-color] duration-[120ms] ease-standard',
+        compact ? 'items-center justify-between gap-3 px-4 py-2.5' : 'flex-col items-center justify-center gap-2 px-6 py-8 text-center',
+        state === 'idle' && 'border-dashed border-rule bg-transparent',
+        state === 'dragging' && 'border-dashed border-fg bg-yellow-wash-20 ink:bg-sunk',
+        state === 'over' && 'border-solid border-ink bg-brand-field text-ink',
+        state === 'refused' && 'border-dashed border-error bg-error-wash text-error-text ink:bg-error/20 ink:text-fg',
+        state === 'disabled' && 'border-dashed border-rule opacity-40',
+        className,
+      )}
+      {...rest}
+    >
+      <div className={cn('flex items-center', compact ? 'gap-2' : 'flex-col gap-2')}>
+        <Icon icon={state === 'refused' ? FileX : Upload} size={compact ? 16 : 20} />
+        <span aria-live="polite" className={cn('font-medium', compact ? 'text-small' : 'text-ui')}>
+          {state === 'over' && target
+            ? release(target)
+            : state === 'refused' && refused
+              ? (labels?.refused ?? ((r: Rejected) => refusedText(r, maxSize)))(refused)
+              : state === 'dragging' || state === 'over'
+                ? (labels?.dragging ?? 'Drop here')
+                : compact
+                  ? (labels?.compact ?? 'Drop files or choose')
+                  : (labels?.idle ?? (directory ? 'Drop files or folders' : 'Drop files'))}
+        </span>
+        {!compact && state === 'idle' && <span className="text-meta text-fg-secondary">{(labels?.limit ?? ((n: number) => `Up to ${formatBytes(n)} each`))(maxSize)}</span>}
+      </div>
+      <div className={cn('flex items-center gap-2', !compact && 'mt-2')}>
+        <Button size="sm" variant={compact ? 'secondary' : 'primary'} disabled={disabled} onClick={() => files.current?.click()}>
+          {labels?.choose ?? 'Choose files'}
+        </Button>
+        {directory && (
+          <Button size="sm" variant="ghost" disabled={disabled} onClick={() => folder.current?.click()}>
+            {labels?.chooseFolder ?? 'Choose a folder'}
+          </Button>
+        )}
+        {actions}
+      </div>
+      <input
+        ref={files}
+        type="file"
+        hidden
+        tabIndex={-1}
+        multiple={multiple}
+        accept={accept}
+        onChange={(e) => {
+          take(fromInput(e.target.files));
+          e.target.value = '';
+        }}
+      />
+      {directory && (
+        <input
+          ref={folder}
+          type="file"
+          hidden
+          tabIndex={-1}
+          {...({ webkitdirectory: '' } as object)}
+          onChange={(e) => {
+            take(fromInput(e.target.files));
+            e.target.value = '';
+          }}
+        />
+      )}
+    </div>
+  );
+}