File uploader API

const Root = ({ className, ...props }: UploaderRootSlotProps) => (
  <div className={cx("sfu", className)} {...props} />
);

const Dropzone = ({ className, ...props }: DropzoneSlotProps) => (
  <div className={cx("sfu__zone", className)} {...props} />
);

const Input = (props: UploaderInputSlotProps) => <input className="sfu__input" {...props} />;

const Icon = ({ dragging }: UploaderIconSlotProps) => (
  <span className="sfu__icon" data-dragging={dragging || undefined}>
    <Glyph size={24}>
      <path d="M12 16V4" />
      <path d="m7 9 5-5 5 5" />
      <path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
    </Glyph>
  </span>
);

const Empty = ({ title, hint, dragging }: UploaderEmptySlotProps) => (
  <span className="sfu__copy">
    <span className="sfu__title">{title}</span>
    {!dragging && <span className="sfu__hint">{hint}</span>}
  </span>
);

const Trigger = ({ onClick, disabled, children }: UploaderTriggerSlotProps) => (
  <button
    type="button"
    className="sfu__browse"
    disabled={disabled}
    onClick={(event) => {
      /** The zone itself opens the dialog; without this it would open twice. */
      event.stopPropagation();
      onClick();
    }}
  >
    {children}
  </button>
);

const List = ({ className, ...props }: UploaderListSlotProps) => (
  <ul className={cx("sfu__list", className)} {...props} />
);

const Item = ({ className, ...props }: UploaderItemSlotProps) => (
  <li className={cx("sfu__item", className)} {...props} />
);

const Thumbnail = ({ src, isImage, alt }: ThumbnailSlotProps) => {
  const [broken, setBroken] = useState(false);
  return (
  <span className="sfu__thumb">
    {isImage && src && !broken ? (
      <img className="sfu__thumb-img" src={src} alt={alt} onError={() => setBroken(true)} />
    ) : (
      <Glyph>
        <path d="M14 3v4a1 1 0 0 0 1 1h4" />
        <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z" />
      </Glyph>
    )}
  </span>
  );
};

const ItemMeta = ({ item, size, status }: ItemMetaSlotProps) => (
  <span className="sfu__meta">
    <span className="sfu__name" title={item.name}>
      {item.name}
    </span>
    <span className="sfu__sub">
      {item.status === "error" ? (
        <span className="sfu__error">{item.error}</span>
      ) : (
        <>
          {size && <span>{size}</span>}
          {size && status ? <span aria-hidden="true">·</span> : null}
          {status}
        </>
      )}
    </span>
  </span>
);

const Progress = ({ value, active, ...aria }: UploaderProgressSlotProps) => (
  <span
    className="sfu__progress"
    role="progressbar"
    aria-valuenow={Math.round(value)}
    aria-valuemin={0}
    aria-valuemax={100}
    data-active={active || undefined}
    {...aria}
  >
    <span className="sfu__progress-bar" style={{ inlineSize: `${Math.max(0, Math.min(100, value))}%` }} />
  </span>
);

const Action = ({ action, onClick, disabled, ...aria }: UploaderActionSlotProps) => (
  <button
    type="button"
    className="sfu__action"
    data-action={action}
    disabled={disabled}
    onClick={(event) => {
      /** Actions sit inside the clickable zone in tile mode. */
      event.stopPropagation();
      onClick();
    }}
    {...aria}
  >
    <Glyph size={16}>
      {action === "remove" && (
        <>
          <path d="M18 6 6 18" />
          <path d="m6 6 12 12" />
        </>
      )}
      {action === "retry" && (
        <>
          <path d="M21 12a9 9 0 1 1-3-6.7" />
          <path d="M21 4v5h-5" />
        </>
      )}
      {action === "cancel" && (
        <>
          <rect x="6" y="6" width="12" height="12" rx="1" />
        </>
      )}
    </Glyph>
  </button>
);

const Rejections = ({ rejections, onDismiss, dismissLabel }: RejectionsSlotProps) => (
  <div className="sfu__rejections" role="status" aria-live="polite">
    <ul>
      {rejections.map((rejection, index) => (
        <li key={`${rejection.file.name}-${index}`}>{rejection.message}</li>
      ))}
    </ul>
    <button type="button" className="sfu__action" onClick={onDismiss} aria-label={dismissLabel}>
      <Glyph size={16}>
        <path d="M18 6 6 18" />
        <path d="m6 6 12 12" />
      </Glyph>
    </button>
  </div>
);