@dinofront/design_system 1.2.2 → 1.3.0

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { BaseProps } from '../../types';
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+import { UploadRejection } from '../Upload';
+export type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
     src?: string;
@@ -10,6 +11,30 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, BaseProps
     status?: AvatarStatus;
     shape?: 'circle' | 'square';
     fallback?: ReactNode;
+    /** Renders an edit affordance in the bottom-right corner, scaled to `size`, that opens a file picker. */
+    editable?: boolean;
+    /**
+     * Called with the picked file. `Avatar` shows an immediate local preview
+     * (an object URL it creates and revokes itself on replacement/unmount)
+     * that takes precedence over `src` until `src` itself changes to a new
+     * value, at which point the new `src` wins and the local preview is
+     * dropped.
+     */
+    onImageChange?: (file: File) => void;
+    /**
+     * Forwarded to the internal picker. Same matching rules as
+     * `UploadProps.accept`, but always enforced here (unlike `Upload`, where
+     * enforcement is gated behind `validateFiles`).
+     */
+    accept?: string;
+    /**
+     * Forwarded to the internal picker. Same matching rules as
+     * `UploadProps.maxSizeMB`, but always enforced here (unlike `Upload`,
+     * where enforcement is gated behind `validateFiles`).
+     */
+    maxSizeMB?: number;
+    /** Called when the picked file fails `accept`/`maxSizeMB` validation. */
+    onReject?: (rejection: UploadRejection) => void;
 }
 export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
     size?: AvatarSize;

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -8,4 +8,8 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     /** Renders the mixed/"some selected" visual state (`aria-checked="mixed"`). */
     indeterminate?: boolean;
     error?: boolean;
+    /** Message rendered below the control in the danger style; also implies `error`. Replaces `description` when set. */
+    errorText?: ReactNode;
+    /** Renders a red asterisk next to `label` and sets `aria-required` on the input, in addition to the native `required` attribute. */
+    required?: boolean;
 }

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -7,13 +7,25 @@ export interface DateRange {
 }
 export interface DatePickerProps extends BaseProps {
     value?: Date | null;
-    onChange?: (date: Date) => void;
+    onChange?: (date: Date | null) => void;
+    /** Renders a clear affordance in the trigger (in place of the calendar icon) when a value is selected. Fires `onChange(null)` (or `onChangeRange({ start: null, end: null })` in range mode). */
+    clearable?: boolean;
     /** Enable range-selection mode. */
     range?: boolean;
     rangeValue?: DateRange;
     onChangeRange?: (range: DateRange) => void;
     size?: DatePickerSize;
+    /** BCP-47 locale tag. Derives month names, weekday abbreviations, and the first day of the week. */
+    locale?: string;
+    /** Trigger display format. Supports `dd`/`MM`/`yyyy` tokens plus a literal
+     *  separator. Defaults to the pre-existing `'dd.MM.yyyy'`. Applied to both
+     *  endpoints in range mode. */
+    format?: string;
     label?: ReactNode;
+    /** Renders a red asterisk next to the label and sets `aria-required` on the trigger. */
+    required?: boolean;
+    /** Neutral message rendered below the control, replaced by `errorText` when present. */
+    helperText?: ReactNode;
     placeholder?: string;
     /** Fill the parent's width (like Input/Select) instead of the intrinsic
      *  min-width. Use inside form grids so dates line up with other fields. */
@@ -26,6 +38,8 @@ export interface DatePickerProps extends BaseProps {
     maxDate?: Date;
     /** Individual days that can't be picked. Matched by calendar day; time-of-day is ignored. */
     excludeDates?: Date[];
+    /** Arbitrary per-day predicate, evaluated alongside `minDate`/`maxDate`/`excludeDates`. Days it rejects render disabled. */
+    filterDate?: (date: Date) => boolean;
     /** Switch the trigger to the danger border/ring styles. */
     error?: boolean;
     /** Message rendered below the control; also switches the trigger to the danger styles. */

package/dist/components/Divider/index.d.ts

@@ -1,2 +1,2 @@
 export { Divider } from './Divider';
-export type { DividerColor, DividerOrientation, DividerProps, DividerVariant } from './Divider.types';
+export type { DividerColor, DividerOrientation, DividerProps, DividerVariant, } from './Divider.types';

package/dist/components/DropdownMenu/DropdownMenu.types.d.ts

@@ -11,8 +11,13 @@ export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement>, BaseP
     /** Controlled open state. Pass alongside `onOpenChange` to fully control the menu. */
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Anchor the panel to an element the consumer owns instead of `<DropdownTrigger>`'s child. */
-    anchorRef?: RefObject<HTMLElement | null>;
+    /** Anchor the panel to an element the consumer owns instead of `<DropdownTrigger>`'s child.
+     *  Accepts either a ref object or the element itself, so consumers holding the anchor as
+     *  plain `useState<HTMLElement | null>` state don't have to fabricate a `{ current: el }`
+     *  wrapper every render. If the resolved anchor element is `null` (e.g. it hasn't mounted
+     *  yet, or was unmounted while the menu is open), the panel positions against the trigger
+     *  instead of staying un-positioned. */
+    anchorRef?: RefObject<HTMLElement | null> | HTMLElement | null;
 }
 export interface DropdownTriggerProps {
     /** A single element cloned with the click handler and `aria-haspopup`/`aria-expanded` that open the menu. */

package/dist/components/FormContainer/FormContainer.types.d.ts

@@ -14,5 +14,7 @@ export interface FormContainerProps extends Omit<FormHTMLAttributes<HTMLFormElem
     shouldUnregister?: boolean;
     shouldFocusError?: boolean;
     formId?: string;
-    onSubmit?: (data: FieldValues, formState: FormState<FieldValues>) => void;
+    onSubmit?: (data: FieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void;
+    /** When this changes, re-validates every field currently holding an error — use to refresh translated validation messages after rebuilding `validationSchema` for a new locale. */
+    revalidateKey?: string | number;
 }

package/dist/components/MultiSelect/MultiSelect.types.d.ts

@@ -3,9 +3,16 @@ import { BaseProps, OptionValue } from '../../types';
 export type MultiSelectSize = 'sm' | 'md' | 'lg';
 export interface MultiSelectOption {
     value: OptionValue;
-    label: string;
+    label: ReactNode;
+    /** Text used for search matching when `label` isn't a plain string. Options where neither this nor a string `label` is available are excluded from `searchable` matching. */
+    searchText?: string;
     /** Optional second line under the label in the dropdown. */
     description?: string;
+    /** Group heading this option belongs under. Options sharing a group MUST be
+     *  contiguous in the (filtered) list — the heading is emitted whenever this
+     *  value changes between consecutive visible options, so a non-contiguous
+     *  group renders its heading more than once. */
+    group?: string;
     /** Optional avatar image — shown on the chip and the dropdown row. */
     avatarSrc?: string;
     /** Non-selectable option (shown dimmed in the list). */
@@ -49,6 +56,7 @@ export interface MultiSelectProps extends BaseProps {
     id?: string;
     className?: string;
     wrapperClassName?: string;
-    isLoading?: boolean;
+    /** Shows a spinner in the trailing edge of the chip row and blocks opening the dropdown. Does not set the native `disabled` attribute. */
+    loading?: boolean;
     language?: string;
 }

package/dist/components/Radio/Radio.types.d.ts

@@ -17,8 +17,18 @@ export interface RadioGroupProps extends BaseProps {
     disabled?: boolean;
     size?: RadioSize;
     orientation?: 'horizontal' | 'vertical';
+    /** Renders a red asterisk next to `label` and sets `aria-required` on the group. */
+    required?: boolean;
+    /** Cascades to every child `Radio`, OR'd with each `Radio`'s own `error` — unlike `disabled`/`size`, a child cannot opt out with `error={false}`. Implied by `errorText`. */
+    error?: boolean;
+    /** Message rendered below the group in the danger style; implies `error`. Replaces `helperText` when set. */
+    errorText?: ReactNode;
+    /** Neutral message rendered below the group, replaced by `errorText` when present. */
+    helperText?: ReactNode;
     children: ReactNode;
     className?: string;
+    /** Applied to the outermost wrapper, for layout purposes (e.g. grid positioning) — use `className` to target the radiogroup container itself. */
+    wrapperClassName?: string;
 }
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'name' | 'onChange' | 'value'>, BaseProps {
     value: RadioValue;

package/dist/components/Select/Select.types.d.ts

@@ -4,6 +4,17 @@ export type SelectSize = 'lg' | 'md' | 'sm';
 export interface SelectOption {
     value: OptionValue;
     label: ReactNode;
+    /** Leading icon. When at least one option in the array has one, rendered in
+     *  a fixed-width column so labels align across all options in that array
+     *  regardless of which ones have one; icon-less arrays reserve no extra
+     *  space. Also shown on the closed trigger for the selected option. Sized
+     *  to 16px automatically. Does not participate in `searchable` text
+     *  matching. */
+    icon?: ReactNode;
+    /** Trailing icon, right-aligned in the row. List-only — not mirrored on the
+     *  trigger. Sized to 16px automatically. Does not participate in
+     *  `searchable` text matching. */
+    rightIcon?: ReactNode;
     disabled?: boolean;
     /** Group heading this option belongs under. Options sharing a group MUST be
      *  contiguous in the `options` array — the heading is emitted whenever this

package/dist/components/StepIndicator/StepIndicator.types.d.ts

@@ -1,11 +1,11 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { BaseProps } from '../../types';
+import { BaseProps, OptionValue } from '../../types';
 export type StepIndicatorStatus = 'upcoming' | 'active' | 'completed' | 'rejected';
 export type StepIndicatorMarker = 'number' | 'dot' | 'icon';
 export type StepIndicatorOrientation = 'horizontal' | 'vertical';
 export type StepIndicatorSize = 'lg' | 'sm';
 export interface StepIndicatorItem {
-    value: string | number;
+    value: OptionValue;
     label: ReactNode;
     description?: ReactNode;
     status?: StepIndicatorStatus;
@@ -15,9 +15,9 @@ export interface StepIndicatorItem {
 export interface StepIndicatorProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'>, BaseProps {
     steps: StepIndicatorItem[];
     /** Marks the matching step `aria-current="step"`. */
-    activeValue?: string | number;
+    activeValue?: OptionValue;
     /** Wraps each marker in a `<button>` when set. Omit to render a non-interactive indicator. */
-    onStepSelect?: (value: string | number) => void;
+    onStepSelect?: (value: OptionValue) => void;
     marker?: StepIndicatorMarker;
     orientation?: StepIndicatorOrientation;
     size?: StepIndicatorSize;

package/dist/components/TableV2/TableV2.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement, Ref } from 'react';
+import { TableV2Props } from './TableV2.types';
+type TableV2Component = (<TData, TValue = unknown>(props: TableV2Props<TData, TValue> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement) & {
+    displayName?: string;
+};
+export declare const TableV2: TableV2Component;
+export {};

package/dist/components/TableV2/TableV2.types.d.ts

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react';
+import { Column, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnResizeMode, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
+import { BaseProps } from '../../types';
+export type TableV2Density = 'comfortable' | 'compact';
+export type TableV2Align = 'left' | 'center' | 'right';
+export type TableV2FilterVariant = 'text' | 'select' | 'date' | 'custom';
+export interface TableV2FilterOption {
+    label: ReactNode;
+    value: string;
+}
+/**
+ * Augments TanStack Table's per-column `meta` with the fields TableV2 reads
+ * to render header alignment and the per-column filter row. Declared here
+ * (not per-consumer) so every TableV2 column definition gets it for free.
+ */
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData, TValue> {
+        align?: TableV2Align;
+        filterVariant?: TableV2FilterVariant;
+        /** Options for `filterVariant: 'select'`. */
+        filterOptions?: TableV2FilterOption[];
+        /** Custom filter input for `filterVariant: 'custom'`. Receives the column and renders its own control. */
+        filterComponent?: (column: Column<TData, TValue>) => ReactNode;
+    }
+}
+export interface TableV2RowAction<TData> {
+    label: ReactNode;
+    icon?: ReactNode;
+    onSelect: (row: TData) => void;
+    destructive?: boolean;
+    disabled?: (row: TData) => boolean;
+}
+export interface TableV2Props<TData, TValue = unknown> extends BaseProps {
+    data: TData[];
+    columns: ColumnDef<TData, TValue>[];
+    loading?: boolean;
+    /** Renders an inline error state in place of the table body. Clears once falsy again. */
+    error?: ReactNode;
+    emptyMessage?: ReactNode;
+    /** Stable row identity, e.g. for row selection keys. Defaults to row index. */
+    getRowId?: (row: TData, index: number) => string;
+    enableSorting?: boolean;
+    enableMultiSort?: boolean;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    manualSorting?: boolean;
+    /** Renders the per-column filter row. Requires `meta.filterVariant` on the columns that should be filterable. */
+    enableFiltering?: boolean;
+    columnFilters?: ColumnFiltersState;
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    manualFiltering?: boolean;
+    enableGlobalFilter?: boolean;
+    globalFilter?: string;
+    onGlobalFilterChange?: OnChangeFn<string>;
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    enableMultiRowSelection?: boolean;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    enableColumnVisibility?: boolean;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    enableColumnOrdering?: boolean;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
+    enablePinning?: boolean;
+    columnPinning?: ColumnPinningState;
+    onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: ColumnResizeMode;
+    enablePagination?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    pagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    manualPagination?: boolean;
+    pageCount?: number;
+    rowCount?: number;
+    enableVirtualization?: boolean;
+    estimatedRowHeight?: number;
+    /**
+     * Scroll viewport height. Applied to the outer scroll container whenever
+     * `enableVirtualization` or `stickyHeader` is on, since both need a
+     * bounded, scrollable ancestor to have any visible effect.
+     * @default 480
+     */
+    maxBodyHeight?: number | string;
+    onRowClick?: (row: TData) => void;
+    /** Replaces the default toolbar entirely. Pass `false` to render no toolbar. */
+    toolbar?: ReactNode | false;
+    /** Extra actions rendered at the end of the default toolbar, alongside export/column-visibility. Ignored when `toolbar` is set. */
+    toolbarActions?: ReactNode;
+    searchPlaceholder?: string;
+    onRefresh?: () => void;
+    onExport?: () => void;
+    density?: TableV2Density;
+    stickyHeader?: boolean;
+    wrapperClassName?: string;
+    className?: string;
+}

package/dist/components/TableV2/TableV2.utils.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { Column, ColumnDef } from '@tanstack/react-table';
+import { TableV2Align, TableV2Density, TableV2RowAction } from './TableV2.types';
+export declare const densityStyles: Record<TableV2Density, string>;
+export declare const alignStyles: Record<TableV2Align, string>;
+/** Prepended to `columns` when `enableRowSelection` is on and no `'select'` column exists already. */
+export declare function createSelectionColumn<TData>(): ColumnDef<TData, unknown>;
+/** A trailing `'actions'` column rendering a kebab menu built from `getActions(row)`. */
+export declare function createRowActionsColumn<TData>(getActions: (row: TData) => TableV2RowAction<TData>[], options?: {
+    header?: string;
+    size?: number;
+}): ColumnDef<TData, unknown>;
+/** Sticky inline styles for a pinned column/header cell — offsets by the running width of columns pinned ahead of it. */
+export declare function getPinnedStyles<TData, TValue>(column: Column<TData, TValue>): CSSProperties;

package/dist/components/TableV2/TableV2ColumnVisibility.d.ts

@@ -0,0 +1,6 @@
+import { Table } from '@tanstack/react-table';
+export interface TableV2ColumnVisibilityMenuProps<TData> {
+    table: Table<TData>;
+}
+/** Dropdown letting users toggle which columns are visible. Skips columns marked `enableHiding: false`. */
+export declare function TableV2ColumnVisibilityMenu<TData>({ table, }: TableV2ColumnVisibilityMenuProps<TData>): import("react").JSX.Element;

package/dist/components/TableV2/TableV2Filter.d.ts

@@ -0,0 +1,10 @@
+import { Column } from '@tanstack/react-table';
+export interface TableV2ColumnFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+}
+/**
+ * Renders the header filter-row input for a single column, driven by
+ * `column.columnDef.meta.filterVariant`. Columns without a `filterVariant`
+ * render nothing, leaving their filter cell empty.
+ */
+export declare function TableV2ColumnFilter<TData, TValue>({ column, }: TableV2ColumnFilterProps<TData, TValue>): import("react").JSX.Element | null;

package/dist/components/TableV2/TableV2Pagination.d.ts

@@ -0,0 +1,7 @@
+import { Table } from '@tanstack/react-table';
+export interface TableV2PaginationProps<TData> {
+    table: Table<TData>;
+    pageSizeOptions?: number[];
+}
+/** Footer bar: page-size select, row-range summary, and page controls. Works for both client and manual (server) pagination. */
+export declare function TableV2Pagination<TData>({ table, pageSizeOptions, }: TableV2PaginationProps<TData>): import("react").JSX.Element;

package/dist/components/TableV2/TableV2RowActions.d.ts

@@ -0,0 +1,7 @@
+import { TableV2RowAction } from './TableV2.types';
+export interface TableV2RowActionsMenuProps<TData> {
+    row: TData;
+    actions: TableV2RowAction<TData>[];
+}
+/** Kebab-menu action list for a single row. Used by `createRowActionsColumn`. */
+export declare function TableV2RowActionsMenu<TData>({ row, actions }: TableV2RowActionsMenuProps<TData>): import("react").JSX.Element | null;

package/dist/components/TableV2/TableV2Skeleton.d.ts

@@ -0,0 +1,6 @@
+export interface TableV2SkeletonProps {
+    columnCount: number;
+    rowCount?: number;
+}
+/** Skeleton `<tr>` rows rendered in place of the body while `loading` is true. Never a spinner. */
+export declare function TableV2Skeleton({ columnCount, rowCount }: TableV2SkeletonProps): import("react").JSX.Element;

package/dist/components/TableV2/TableV2Toolbar.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { Table } from '@tanstack/react-table';
+export interface TableV2ToolbarProps<TData> {
+    table: Table<TData>;
+    enableGlobalFilter?: boolean;
+    enableColumnVisibility?: boolean;
+    searchPlaceholder?: string;
+    onRefresh?: () => void;
+    onExport?: () => void;
+    actions?: ReactNode;
+}
+/** Default toolbar: global search, refresh, export, column visibility, and a custom actions slot. Replace entirely via the `toolbar` prop on `<TableV2>`. */
+export declare function TableV2Toolbar<TData>({ table, enableGlobalFilter, enableColumnVisibility, searchPlaceholder, onRefresh, onExport, actions, }: TableV2ToolbarProps<TData>): import("react").JSX.Element;

package/dist/components/TableV2/index.d.ts

@@ -0,0 +1,9 @@
+export { TableV2 } from './TableV2';
+export { createSelectionColumn, createRowActionsColumn, getPinnedStyles } from './TableV2.utils';
+export { TableV2RowActionsMenu } from './TableV2RowActions';
+export { TableV2ColumnFilter } from './TableV2Filter';
+export { TableV2ColumnVisibilityMenu } from './TableV2ColumnVisibility';
+export { TableV2Toolbar } from './TableV2Toolbar';
+export { TableV2Pagination } from './TableV2Pagination';
+export { TableV2Skeleton } from './TableV2Skeleton';
+export type { TableV2Align, TableV2Density, TableV2FilterOption, TableV2FilterVariant, TableV2Props, TableV2RowAction, } from './TableV2.types';

package/dist/components/TableV2/useTableV2ColumnDnd.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+import { closestCenter, useSensors, DragEndEvent, Modifier } from '@dnd-kit/core';
+import { useSortable } from '@dnd-kit/sortable';
+export interface UseColumnOrderDndOptions {
+    columnOrder: string[];
+    onColumnOrderChange: (order: string[]) => void;
+}
+export interface UseColumnOrderDndResult {
+    sensors: ReturnType<typeof useSensors>;
+    collisionDetection: typeof closestCenter;
+    modifiers: Modifier[];
+    handleDragEnd: (event: DragEndEvent) => void;
+}
+/** Wires a `<DndContext>` for reordering column headers by drag-and-drop. */
+export declare function useColumnOrderDnd({ columnOrder, onColumnOrderChange, }: UseColumnOrderDndOptions): UseColumnOrderDndResult;
+export interface UseDraggableColumnResult {
+    setNodeRef: (node: HTMLElement | null) => void;
+    attributes: ReturnType<typeof useSortable>['attributes'];
+    listeners: ReturnType<typeof useSortable>['listeners'];
+    style: CSSProperties;
+    isDragging: boolean;
+}
+/** Per-header-cell drag handle, for use inside a `<SortableContext>`. */
+export declare function useDraggableColumn(columnId: string): UseDraggableColumnResult;

package/dist/components/Upload/Upload.d.ts

@@ -1,3 +1,8 @@
-import { UploadItemProps, UploadProps } from './Upload.types';
+import { FileValidationOptions, UploadItemProps, UploadProps, UploadRejectionReason } from './Upload.types';
+/**
+ * Also used by `Avatar`'s `editable` picker — changing these semantics
+ * changes both components.
+ */
+export declare function validateSingleFile(file: File, { accept, maxSizeMB }: FileValidationOptions): UploadRejectionReason | null;
 export declare const Upload: import('react').ForwardRefExoticComponent<UploadProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const UploadItem: import('react').ForwardRefExoticComponent<UploadItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Upload/Upload.types.d.ts

@@ -1,11 +1,17 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { BaseProps } from '../../types';
-export type UploadMode = 'dropzone' | 'button' | 'icon';
+export type UploadMode = 'dropzone' | 'button' | 'icon' | 'view';
 export type UploadRejectionReason = 'size' | 'type' | 'maxFiles' | 'duplicate';
 export interface UploadRejection {
     file: File;
     reason: UploadRejectionReason;
 }
+export interface FileValidationOptions {
+    /** Forwarded to `matchesAccept` — same semantics as `UploadProps.accept`. */
+    accept?: string;
+    /** Same semantics as `UploadProps.maxSizeMB`. */
+    maxSizeMB?: number;
+}
 export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop' | 'onDragEnter' | 'onDragOver' | 'onDragLeave' | 'onKeyDown' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-invalid'>, BaseProps {
     /** Forwarded to the hidden native `<input type="file">`, e.g. `"image/png,image/jpeg"`. */
     accept?: string;
@@ -27,7 +33,11 @@ export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCli
     currentFiles?: File[];
     /** Files that failed validation, with the reason. Only called when `validateFiles` is set. */
     onReject?: (rejections: UploadRejection[]) => void;
-    /** `'dropzone'` (default) is the drag-and-drop area. `'button'` renders a secondary Button trigger. `'icon'` renders a compact icon-only trigger. */
+    /** Renders `currentFiles` as `UploadItem`s below the trigger/dropzone. `Upload` stays stateless — `currentFiles` remains the source of truth. */
+    showFileList?: boolean;
+    /** Called when a self-rendered file-list item's remove button is clicked. Only reachable when `showFileList` is set and `mode` isn't `'view'`. */
+    onRemoveFile?: (file: File, index: number) => void;
+    /** `'dropzone'` (default) is the drag-and-drop area. `'button'` renders a secondary Button trigger. `'icon'` renders a compact icon-only trigger. `'view'` renders only the label and (with `showFileList`) the file list — no picker, no drag target, no remove affordance. */
     mode?: UploadMode;
     /** Label for the `'button'`-mode trigger. Ignored in other modes. */
     triggerLabel?: ReactNode;
@@ -54,4 +64,6 @@ export interface UploadItemProps extends HTMLAttributes<HTMLDivElement>, BasePro
     onRemove?: () => void;
     /** Image thumbnail URL, rendered in place of the file-type icon. The consumer owns the URL's lifetime (e.g. call `URL.revokeObjectURL` on unmount). Falls back to the file icon on load failure. */
     previewSrc?: string;
+    /** Makes the item's name a button, for viewing/downloading the file. */
+    onOpen?: () => void;
 }

package/dist/components/Upload/index.d.ts

@@ -1,2 +1,2 @@
-export { Upload, UploadItem } from './Upload';
-export type { UploadItemProps, UploadItemStatus, UploadMode, UploadProps, UploadRejection, UploadRejectionReason, } from './Upload.types';
+export { Upload, UploadItem, validateSingleFile } from './Upload';
+export type { FileValidationOptions, UploadItemProps, UploadItemStatus, UploadMode, UploadProps, UploadRejection, UploadRejectionReason, } from './Upload.types';

package/dist/hooks/index.d.ts

@@ -7,3 +7,4 @@ export { useIsMobile } from './useIsMobile';
 export { useFormContext } from './useFormContext';
 export { useFormProps } from './useFormProps';
 export type { FormContextValue } from '../lib/FormContext';
+export { useFieldArray } from 'react-hook-form';