@skdx/react 0.27.0 → 0.29.0

package/dist/file-upload/FileUploadTrigger.d.cts

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FileUploadTriggerProps } from './types.cjs';
 /**
- * Button that opens the native file picker when clicked. Mirrors the
- * enclosing `FileUpload`'s `disabled` state (native `disabled` plus
- * `data-disabled`).
+ * Button that opens the native file picker when clicked, rendered as a sibling of `FileUploadDropzone` rather than nested inside it.
  *
  * @example
  * ```tsx
  * <FileUploadTrigger>Choose files</FileUploadTrigger>
  * ```
  */
-export declare const FileUploadTrigger: React.ForwardRefExoticComponent<Omit<FileUploadTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FileUploadTrigger: {
+    ({ ref: forwardedRef, ...props }: FileUploadTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/file-upload/FileUploadTrigger.d.ts

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FileUploadTriggerProps } from './types.js';
 /**
- * Button that opens the native file picker when clicked. Mirrors the
- * enclosing `FileUpload`'s `disabled` state (native `disabled` plus
- * `data-disabled`).
+ * Button that opens the native file picker when clicked, rendered as a sibling of `FileUploadDropzone` rather than nested inside it.
  *
  * @example
  * ```tsx
  * <FileUploadTrigger>Choose files</FileUploadTrigger>
  * ```
  */
-export declare const FileUploadTrigger: React.ForwardRefExoticComponent<Omit<FileUploadTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FileUploadTrigger: {
+    ({ ref: forwardedRef, ...props }: FileUploadTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/file-upload/focus.d.cts

@@ -0,0 +1,7 @@
+/**
+ * Focuses the delete button that will still be there once `button`'s row is
+ * removed: the next one, else the previous one, else the dropzone or trigger.
+ *
+ * @param button - The `FileUploadItemDelete` that is about to remove its row.
+ */
+export declare function moveFocusBeforeRemoval(button: Element): void;

package/dist/file-upload/focus.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Focuses the delete button that will still be there once `button`'s row is
+ * removed: the next one, else the previous one, else the dropzone or trigger.
+ *
+ * @param button - The `FileUploadItemDelete` that is about to remove its row.
+ */
+export declare function moveFocusBeforeRemoval(button: Element): void;

package/dist/file-upload/index.d.cts

@@ -1,7 +1,2 @@
 export { FileUpload } from './FileUpload.cjs';
-export { FileUploadDropzone } from './FileUploadDropzone.cjs';
-export { type FileUploadDropzoneProps, type FileUploadFileStatus, type FileUploadInputProps, type FileUploadItemDeleteProps, type FileUploadItemProps, type FileUploadProps, type FileUploadRejection, type FileUploadTriggerProps, } from './types.cjs';
-export { FileUploadInput } from './FileUploadInput.cjs';
-export { FileUploadItem } from './FileUploadItem.cjs';
-export { FileUploadItemDelete } from './FileUploadItemDelete.cjs';
-export { FileUploadTrigger } from './FileUploadTrigger.cjs';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadHandle, FileUploadProps, FileUploadRejection, } from './types.cjs';

package/dist/file-upload/index.d.ts

@@ -1,7 +1,2 @@
 export { FileUpload } from './FileUpload.js';
-export { FileUploadDropzone } from './FileUploadDropzone.js';
-export { type FileUploadDropzoneProps, type FileUploadFileStatus, type FileUploadInputProps, type FileUploadItemDeleteProps, type FileUploadItemProps, type FileUploadProps, type FileUploadRejection, type FileUploadTriggerProps, } from './types.js';
-export { FileUploadInput } from './FileUploadInput.js';
-export { FileUploadItem } from './FileUploadItem.js';
-export { FileUploadItemDelete } from './FileUploadItemDelete.js';
-export { FileUploadTrigger } from './FileUploadTrigger.js';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadHandle, FileUploadProps, FileUploadRejection, } from './types.js';

package/dist/file-upload/primitives.d.cts

@@ -0,0 +1,40 @@
+/**
+ * Advanced primitives for `FileUpload` — the parts the recipe composes.
+ *
+ * Reach for these for full manual composition — a layout the derived anatomy
+ * cannot express.
+ *
+ * @example
+ * ```tsx
+ * import { FileUpload, FileUploadDropzone, FileUploadInput, FileUploadItem, FileUploadItemDelete, FileUploadItemGroup, FileUploadItemName, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger } from '@skdx/react/primitives/file-upload';
+ *
+ * <FileUpload accept="image/*" multiple onValueChange={setFiles}>
+ *   <FileUploadLabel>Attachments</FileUploadLabel>
+ *   <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ *   <FileUploadTrigger>browse</FileUploadTrigger>
+ *   <FileUploadInput />
+ *   <FileUploadItemGroup>
+ *     {files.map((file) => (
+ *       <FileUploadItem key={file.name} file={file}>
+ *         <FileUploadItemName />
+ *         <FileUploadItemSizeText />
+ *         <FileUploadItemDelete />
+ *       </FileUploadItem>
+ *     ))}
+ *   </FileUploadItemGroup>
+ * </FileUpload>
+ * ```
+ */
+export { FileUpload } from './FileUpload.cjs';
+export { FileUploadLabel } from './FileUploadLabel.cjs';
+export { FileUploadDropzone } from './FileUploadDropzone.cjs';
+export { FileUploadTrigger } from './FileUploadTrigger.cjs';
+export { FileUploadInput } from './FileUploadInput.cjs';
+export { FileUploadItemGroup } from './FileUploadItemGroup.cjs';
+export { FileUploadItem } from './FileUploadItem.cjs';
+export { FileUploadItemPreview } from './FileUploadItemPreview.cjs';
+export { FileUploadItemName } from './FileUploadItemName.cjs';
+export { FileUploadItemSizeText } from './FileUploadItemSizeText.cjs';
+export { FileUploadItemDelete } from './FileUploadItemDelete.cjs';
+export { FileUploadClear } from './FileUploadClear.cjs';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadHandle, FileUploadRejection, FileUploadProps, FileUploadLabelProps, FileUploadDropzoneProps, FileUploadTriggerProps, FileUploadInputProps, FileUploadItemGroupProps, FileUploadItemProps, FileUploadItemPreviewProps, FileUploadItemNameProps, FileUploadItemSizeTextProps, FileUploadItemDeleteProps, FileUploadClearProps, } from './types.cjs';

package/dist/file-upload/primitives.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Advanced primitives for `FileUpload` — the parts the recipe composes.
+ *
+ * Reach for these for full manual composition — a layout the derived anatomy
+ * cannot express.
+ *
+ * @example
+ * ```tsx
+ * import { FileUpload, FileUploadDropzone, FileUploadInput, FileUploadItem, FileUploadItemDelete, FileUploadItemGroup, FileUploadItemName, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger } from '@skdx/react/primitives/file-upload';
+ *
+ * <FileUpload accept="image/*" multiple onValueChange={setFiles}>
+ *   <FileUploadLabel>Attachments</FileUploadLabel>
+ *   <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ *   <FileUploadTrigger>browse</FileUploadTrigger>
+ *   <FileUploadInput />
+ *   <FileUploadItemGroup>
+ *     {files.map((file) => (
+ *       <FileUploadItem key={file.name} file={file}>
+ *         <FileUploadItemName />
+ *         <FileUploadItemSizeText />
+ *         <FileUploadItemDelete />
+ *       </FileUploadItem>
+ *     ))}
+ *   </FileUploadItemGroup>
+ * </FileUpload>
+ * ```
+ */
+export { FileUpload } from './FileUpload.js';
+export { FileUploadLabel } from './FileUploadLabel.js';
+export { FileUploadDropzone } from './FileUploadDropzone.js';
+export { FileUploadTrigger } from './FileUploadTrigger.js';
+export { FileUploadInput } from './FileUploadInput.js';
+export { FileUploadItemGroup } from './FileUploadItemGroup.js';
+export { FileUploadItem } from './FileUploadItem.js';
+export { FileUploadItemPreview } from './FileUploadItemPreview.js';
+export { FileUploadItemName } from './FileUploadItemName.js';
+export { FileUploadItemSizeText } from './FileUploadItemSizeText.js';
+export { FileUploadItemDelete } from './FileUploadItemDelete.js';
+export { FileUploadClear } from './FileUploadClear.js';
+export type { FileUploadCapture, FileUploadFileStatus, FileUploadHandle, FileUploadRejection, FileUploadProps, FileUploadLabelProps, FileUploadDropzoneProps, FileUploadTriggerProps, FileUploadInputProps, FileUploadItemGroupProps, FileUploadItemProps, FileUploadItemPreviewProps, FileUploadItemNameProps, FileUploadItemSizeTextProps, FileUploadItemDeleteProps, FileUploadClearProps, } from './types.js';

package/dist/file-upload/types.d.cts

@@ -1,145 +1,162 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/**
- * Per-file upload status. The component performs no transport of its own, so
- * this is pushed onto {@link FileUploadItem} by whoever owns the upload.
- */
+/** Per-file upload status; pushed onto FileUploadItem by the transport owner. */
 export type FileUploadFileStatus = 'idle' | 'uploading' | 'complete' | 'error';
-/**
- * Why one file was refused. Built-in codes are `file-invalid-type` (fails
- * `accept`), `file-too-large` / `file-too-small` (fails `maxFileSize` /
- * `minFileSize`), and `too-many-files` (would exceed `maxFiles`); a
- * {@link FileUploadProps.validate} callback contributes its own codes
- * alongside them.
- */
+/** Why one file was refused: file-invalid-type, file-too-large, file-too-small, or custom codes. */
 export interface FileUploadRejection {
-    /** The file that was refused. It is never added to the file list. */
+    /** The file object that was refused. */
     file: File;
-    /** Every reason it was refused, built-in codes first. Never empty. */
+    /** Every reason this file was refused. */
     errors: string[];
 }
-/** @internal The checks {@link FileUploadProps.validate} and the size/type props feed. */
+/** Device camera: 'user' for front, 'environment' for rear. */
+export type FileUploadCapture = 'user' | 'environment';
+/** @internal Validation options. */
 export interface FileUploadValidateOptions {
-    accept?: string;
-    maxFileSize?: number;
-    minFileSize?: number;
-    validate?: (file: File) => string[] | null | undefined;
+    accept?: string | undefined;
+    maxFileSize?: number | undefined;
+    minFileSize?: number | undefined;
+    validator?: ((file: File) => string[] | null | undefined) | undefined;
 }
-/** Shape returned by the exported `useFileUploadContext` hook; distributed from {@link FileUpload} to its parts via context. */
+/** Context value distributed from FileUpload to its parts. */
 export interface FileUploadContextValue {
     inputRef: React.RefObject<HTMLInputElement | null>;
     files: File[];
     disabled: boolean;
-    accept?: string;
+    accept?: string | undefined;
     multiple: boolean;
     addFiles: (files: FileList | File[]) => void;
-    removeFile: (index: number) => void;
+    removeFile: (file: File) => void;
+    clearFiles: () => void;
     openPicker: () => void;
+    readOnly: boolean;
+    directory: boolean;
+    capture?: FileUploadCapture | undefined;
+    removeLabel: (fileName: string) => string;
+    labelId: string;
+    labelPresent: boolean;
+    /** @internal */
+    setLabelPresent: (present: boolean) => void;
+    descriptionId: string;
+    required: boolean;
+    invalid: boolean;
 }
-/** Props for the {@link FileUpload} root. */
-export interface FileUploadProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
-    /**
-     * The selected files, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own file list internally.
-     */
-    value?: File[];
-    /**
-     * Initially selected files, for uncontrolled usage.
-     * @default []
-     */
-    defaultValue?: File[];
-    /**
-     * Fires with the new file list whenever files are added or removed, controlled or not.
-     * @default undefined — no-op if omitted.
-     */
-    onValueChange?: (files: File[]) => void;
-    /**
-     * Comma-separated file-type filter (extensions like `.png` or MIME
-     * patterns like `image/*`), applied to both the native picker dialog and
-     * drag-and-drop — the browser only filters the former on its own.
-     * @default undefined — every file type is accepted.
-     */
-    accept?: string;
-    /**
-     * Allow selecting/dropping more than one file. When `false`, a new
-     * selection replaces the existing file instead of appending.
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Disables the dropzone, trigger, and file input, and blocks adding or
-     * removing files.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Most files the list may hold; files past the cap are rejected with
-     * `too-many-files` rather than added. Ignored while `multiple` is `false`,
-     * which caps the list at one file anyway.
-     * @default undefined — unlimited.
-     */
-    maxFiles?: number;
-    /**
-     * Largest accepted file size in bytes; a bigger file is rejected with
-     * `file-too-large`.
-     * @default undefined — no upper bound.
-     */
-    maxFileSize?: number;
-    /**
-     * Smallest accepted file size in bytes; a smaller file is rejected with
-     * `file-too-small`.
-     * @default undefined — no lower bound.
-     */
-    minFileSize?: number;
-    /**
-     * Extra per-file check, run after the built-in ones. Return error codes to
-     * reject the file, or `null`/`undefined`/`[]` to accept it.
-     * @default undefined — only the built-in checks apply.
-     */
-    validate?: (file: File) => string[] | null | undefined;
+/** Root ref handle: HTMLDivElement with constraint-validation and addFiles. */
+export interface FileUploadHandle extends HTMLDivElement {
+    /** Whether current selection satisfies constraints, fires invalid if not. */
+    checkValidity(): boolean;
+    /** Like checkValidity, but shows browser's validation message. */
+    reportValidity(): boolean;
+    /** Set external error like setCustomValidity; works whether required or not. */
+    setCustomValidity(message: string): void;
     /**
-     * Fires once per refused file, before the accepted files are committed.
-     * Rejections are transient — nothing is stored, so render them yourself (or
-     * let a wrapping `Field` own the persistent field-level message).
-     * @default undefined — refused files are dropped silently.
+     * Feed files through the picker/drop pipeline: accept, size, maxFiles, validation.
+     * @example upload.current?.addFiles(event.clipboardData.files)
      */
-    onFileReject?: (rejection: FileUploadRejection) => void;
+    addFiles(files: FileList | File[]): void;
+}
+/** Root props; manually-composed parts or children override defaults. */
+export interface FileUploadProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /** Custom anatomy parts; omitted uses showList/showPreview/renderFile. @default undefined */
+    children?: React.ReactNode | undefined;
+    /** Selected files for controlled usage; pair with onValueChange. @default undefined */
+    value?: File[] | undefined;
+    /** Initially selected files for uncontrolled usage. @default [] */
+    defaultValue?: File[] | undefined;
+    /** Fires when files are added or removed. @default undefined */
+    onValueChange?: ((files: File[]) => void) | undefined;
+    /** Comma-separated file-type filter for picker and drag-drop. @default undefined */
+    accept?: string | undefined;
+    /** Allow multiple files; false replaces instead of appending. @default false */
+    multiple?: boolean | undefined;
+    /** Disables dropzone, trigger, and file input. @default false */
+    disabled?: boolean | undefined;
+    /** Max files; excess rejected with too-many-files. @default undefined */
+    maxFiles?: number | undefined;
+    /** Largest file size in bytes; excess rejected. @default undefined */
+    maxFileSize?: number | undefined;
+    /** Smallest file size in bytes; smaller rejected. @default undefined */
+    minFileSize?: number | undefined;
+    /** Extra per-file validation; return error codes to reject. @default undefined */
+    validator?: ((file: File) => string[] | null | undefined) | undefined;
+    /** Fires once per refused file before commit. @default undefined */
+    onFileReject?: ((rejection: FileUploadRejection) => void) | undefined;
+    /** Formats delete button accessible names from file names. @default (fileName) => `Remove ${fileName}` */
+    removeLabel?: ((fileName: string) => string) | undefined;
+    /** Form field name for file input; omitted submits nothing. @default undefined */
+    name?: string | undefined;
+    /** Form id this upload submits into; needs name. @default undefined */
+    form?: string | undefined;
+    /** Marks field required; valueMissing while no files. @default false */
+    required?: boolean | undefined;
+    /** Custom message for valueMissing when required is empty. @default browser wording */
+    requiredMessage?: string | undefined;
+    /** Show selection but block changes; dropzone keeps tab stop. @default false */
+    readOnly?: boolean | undefined;
+    /** Mark invalid from outside; ORed with own required invalidity. @default false */
+    invalid?: boolean | undefined;
+    /** Let picker select whole directory via webkitdirectory. @default false */
+    directory?: boolean | undefined;
+    /** Open device camera instead of file browser; mobile only. @default undefined */
+    capture?: FileUploadCapture | undefined;
+    /** Prevents browser navigation on drop outside dropzone. @default true */
+    preventDocumentDrop?: boolean | undefined;
+    /** Whether to render the derived `FileUploadItemGroup` listing selected files. @default true */
+    showList?: boolean | undefined;
+    /** Show thumbnail before file name in each row. @default false */
+    showPreview?: boolean | undefined;
+    /** Per-file upload state keyed by File; returns status and progress. @default undefined */
+    fileStatus?: ((file: File) => {
+        status?: FileUploadFileStatus | undefined;
+        progress?: number | undefined;
+    } | undefined) | undefined;
+    /** Custom render for file row (replaces name/size/delete). @default undefined */
+    renderFile?: ((file: File) => React.ReactNode) | undefined;
 }
-/** Props for {@link FileUploadDropzone}, the drag-and-drop / click-to-browse target. */
+/** Label element that names the dropzone. */
+export interface FileUploadLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Drag-and-drop / click-to-browse target. */
 export interface FileUploadDropzoneProps extends PrimitivePropsWithRef<'div'> {
+    /** Suppress click-to-open; drag-drop and keyboard work. @default false */
+    disableClick?: boolean | undefined;
 }
-/** Props for {@link FileUploadTrigger}, a button that opens the native file picker. */
+/** Button that opens the native file picker. */
 export interface FileUploadTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
-/**
- * Props for {@link FileUploadInput}, the visually-hidden native `<input type="file">`.
- *
- * `onChange` is *not* omitted, unlike the component-owned `type`/`value`: the
- * input composes the consumer's handler with its own (consumer first), so both
- * run on a selection. Prefer the root's `onValueChange` for the committed file
- * list — this one sees the raw `change` event, before validation and rejection.
- */
+/** Visually-hidden native input; onChange not omitted, compose handlers. */
 export interface FileUploadInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> {
 }
-/** Props for {@link FileUploadItem}, a single selected file's row. */
+/** Context value Item publishes to its nested parts. */
+export interface FileUploadItemContextValue {
+    file: File;
+}
+/** Single selected file's row; file used by delete button. */
 export interface FileUploadItemProps extends PrimitivePropsWithRef<'div'> {
-    /** Index of this file in the `FileUpload`'s current file list. */
-    index: number;
-    /**
-     * This file's upload status, owned by whoever runs the transport — the
-     * component never sets it itself. Reflected as `data-status`.
-     * @default 'idle'
-     */
-    status?: FileUploadFileStatus;
-    /**
-     * This file's upload progress, 0-100, owned by whoever runs the transport.
-     * Reflected as `data-progress`.
-     * @default undefined — no progress reported, `data-progress` is omitted.
-     */
-    progress?: number;
+    /** File this row shows; delete button removes by identity. */
+    file: File;
+    /** Upload status, owned by transport; reflected as data-state. @default 'idle' */
+    status?: FileUploadFileStatus | undefined;
+    /** Upload progress 0-100, owned by transport; reflected as data-progress. @default undefined */
+    progress?: number | undefined;
 }
-/** Props for {@link FileUploadItemDelete}, a button that removes one selected file. */
+/** Button that removes one selected file. */
 export interface FileUploadItemDeleteProps extends PrimitivePropsWithRef<'button'> {
-    /** Index of the file to remove from the `FileUpload`'s current file list. */
-    index: number;
+    /** File to remove by identity; defaults to enclosing Item's file. @default the enclosing Item's file */
+    file?: File | undefined;
+}
+/** List wrapper the rows sit in. */
+export interface FileUploadItemGroupProps extends PrimitivePropsWithRef<'div'> {
+}
+/** File name as readable text. */
+export interface FileUploadItemNameProps extends PrimitivePropsWithRef<'span'> {
+}
+/** File size as readable text. */
+export interface FileUploadItemSizeTextProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Slot for thumbnail or file-type icon. */
+export interface FileUploadItemPreviewProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Button that empties the whole list. */
+export interface FileUploadClearProps extends PrimitivePropsWithRef<'button'> {
 }