@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/forms/components/forms/VireoFormFileListField/VireoFormFileListField.styled.js

@@ -0,0 +1,190 @@
+import { Box, Button, FormHelperText, IconButton, Typography, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_FORM_FILE_LIST_FIELD_NAME } from "./VireoFormFileListField.identity.js";
+export const VireoFormFileListFieldRoot = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "Root",
+    overridesResolver: ({ ownerState }, styles) => [
+        styles.root,
+        ownerState.empty && styles.empty,
+        ownerState.populated && styles.populated,
+        ownerState.dragActive && styles.dragActive,
+        ownerState.dragReject && styles.dragReject,
+        ownerState.rejected && styles.rejected,
+        ownerState.invalid && styles.invalid,
+        ownerState.disabled && styles.disabled,
+        ownerState.readOnly && styles.readOnly,
+        ownerState.required && styles.required,
+        ownerState.fullWidth && styles.fullWidth,
+        ownerState.reorderable && styles.reorderable,
+        ownerState.capacityReached && styles.capacityReached,
+        ownerState.reordering && styles.reordering,
+        ownerState.submitting && styles.submitting,
+        ownerState.validating && styles.validating,
+    ],
+})(({ theme, ownerState }) => ({
+    containerName: "vireo-file-list-field",
+    containerType: "inline-size",
+    display: "grid",
+    gap: theme.spacing(1.25),
+    minWidth: 0,
+    position: "relative",
+    width: ownerState.fullWidth ? "100%" : "auto",
+    ...(ownerState.disabled && { opacity: theme.palette.action.disabledOpacity }),
+}));
+export const VireoFormFileListFieldInput = styled("input", {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "Input",
+    overridesResolver: (_props, styles) => styles.input,
+})({
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: 1,
+    overflow: "hidden",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: 1,
+});
+export const VireoFormFileListFieldChooser = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "Chooser",
+    overridesResolver: (_props, styles) => styles.chooser,
+})(({ theme, ownerState }) => ({
+    alignItems: "center",
+    backgroundColor: ownerState.dragActive ? theme.palette.action.hover : theme.palette.background.paper,
+    border: `1px dashed ${ownerState.dragReject
+        ? theme.palette.error.main
+        : ownerState.dragActive
+            ? theme.palette.primary.main
+            : theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.spacing(1),
+    minWidth: 0,
+    padding: theme.spacing(1.5),
+    transition: theme.transitions.create(["background-color", "border-color"]),
+}));
+export const VireoFormFileListFieldSelectButton = styled(Button, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "SelectButton",
+    overridesResolver: (_props, styles) => styles.selectButton,
+})({ whiteSpace: "nowrap", "@container vireo-file-list-field (max-width: 29.999rem)": { width: "100%" } });
+export const VireoFormFileListFieldDropHint = styled(Typography, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "DropHint",
+    overridesResolver: (_props, styles) => styles.dropHint,
+})(({ theme, ownerState }) => ({
+    color: ownerState.dragReject ? theme.palette.error.main : theme.palette.text.secondary,
+    minWidth: 0,
+}));
+export const VireoFormFileListFieldCapacityText = styled(Typography, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "CapacityText",
+    overridesResolver: (_props, styles) => styles.capacityText,
+})(({ theme }) => ({ color: theme.palette.text.secondary }));
+export const VireoFormFileListFieldToolbar = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "Toolbar",
+    overridesResolver: (_props, styles) => styles.toolbar,
+})(({ theme }) => ({
+    alignItems: "center",
+    display: "flex",
+    gap: theme.spacing(1),
+    justifyContent: "space-between",
+    minWidth: 0,
+}));
+export const VireoFormFileListFieldFileCount = styled(Typography, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "FileCount",
+    overridesResolver: (_props, styles) => styles.fileCount,
+})(({ theme }) => ({ color: theme.palette.text.secondary }));
+export const VireoFormFileListFieldClearAllButton = styled(Button, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "ClearAllButton",
+    overridesResolver: (_props, styles) => styles.clearAllButton,
+})({ flexShrink: 0 });
+export const VireoFormFileListFieldList = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "List",
+    overridesResolver: (_props, styles) => styles.list,
+})(({ theme }) => ({ display: "grid", gap: theme.spacing(1), listStyle: "none", margin: 0, padding: 0 }));
+export const VireoFormFileListFieldFileRow = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "FileRow",
+    overridesResolver: (_props, styles) => styles.fileRow,
+})(({ theme, ownerState }) => ({
+    alignItems: "center",
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${ownerState.dragging ? theme.palette.primary.main : theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    display: "grid",
+    gap: theme.spacing(1),
+    gridTemplateColumns: ownerState.reorderable ? "auto minmax(0, 1fr) auto" : "minmax(0, 1fr) auto",
+    minWidth: 0,
+    padding: theme.spacing(1.25),
+    ...(ownerState.dragging && { opacity: 0.72 }),
+}));
+export const VireoFormFileListFieldReorderHandle = styled(IconButton, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "ReorderHandle",
+    overridesResolver: (_props, styles) => styles.reorderHandle,
+})({ cursor: "grab", flexShrink: 0, touchAction: "none", "&:active": { cursor: "grabbing" } });
+export const VireoFormFileListFieldMetadata = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "Metadata",
+    overridesResolver: (_props, styles) => styles.metadata,
+})(({ theme }) => ({ alignItems: "baseline", display: "flex", gap: theme.spacing(0.75), minWidth: 0 }));
+export const VireoFormFileListFieldFileName = styled(Typography, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "FileName",
+    overridesResolver: (_props, styles) => styles.fileName,
+})({ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" });
+export const VireoFormFileListFieldFileSize = styled(Typography, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "FileSize",
+    overridesResolver: (_props, styles) => styles.fileSize,
+})(({ theme }) => ({ color: theme.palette.text.secondary, flexShrink: 0, whiteSpace: "nowrap" }));
+export const VireoFormFileListFieldRemoveButton = styled(IconButton, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "RemoveButton",
+    overridesResolver: (_props, styles) => styles.removeButton,
+})({ flexShrink: 0 });
+export const VireoFormFileListFieldPreviewContainer = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "PreviewContainer",
+    overridesResolver: (_props, styles) => styles.previewContainer,
+})(({ theme }) => ({
+    borderTop: `1px solid ${theme.palette.divider}`,
+    gridColumn: "1 / -1",
+    minWidth: 0,
+    paddingTop: theme.spacing(1.25),
+}));
+export const VireoFormFileListFieldRejectionList = styled(Box, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "RejectionList",
+    overridesResolver: (_props, styles) => styles.rejectionList,
+})(({ theme }) => ({ display: "grid", gap: theme.spacing(0.5), listStyle: "none", margin: 0, padding: 0 }));
+export const VireoFormFileListFieldRejectionItem = styled(Typography, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "RejectionItem",
+    overridesResolver: (_props, styles) => styles.rejectionItem,
+})(({ theme }) => ({ color: theme.palette.error.main, overflowWrap: "anywhere" }));
+export const VireoFormFileListFieldHelperText = styled(FormHelperText, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "HelperText",
+    overridesResolver: (_props, styles) => styles.helperText,
+})({ margin: 0 });
+export const VireoFormFileListFieldLiveRegion = styled(Typography, {
+    name: VIREO_FORM_FILE_LIST_FIELD_NAME,
+    slot: "LiveRegion",
+    overridesResolver: (_props, styles) => styles.liveRegion,
+})({
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: 1,
+    overflow: "hidden",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: 1,
+});

package/dist/capabilities/forms/components/forms/VireoFormFileListField/VireoFormFileListField.types.d.ts

@@ -0,0 +1,264 @@
+import type { VireoFormErrorDisplay, VireoFormErrorFormatter } from "../../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+import type { VireoFilePreviewRenderer, VireoFormFileNameTruncation } from "../../../../../capabilities/forms/types/vireoFile.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { Box, BoxProps, Button, FormHelperText, IconButton, Typography } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoFormFileListFieldClasses, type VireoFormFileListFieldClassKey } from "./VireoFormFileListField.classes.js";
+import type { VIREO_FORM_FILE_LIST_FIELD_NAME, VireoFormFileListFieldSlotName } from "./VireoFormFileListField.identity.js";
+export type VireoFileListRejectionReason = "type" | "size" | "duplicate" | "maxFiles" | "totalSize";
+export type VireoFileListRejection = {
+    file: File;
+    reason: VireoFileListRejectionReason;
+};
+export type VireoFileListCapacityReason = "maxFiles" | "maxTotalSize";
+export type VireoFormFileListFieldOwnerState = {
+    capacityReached: boolean;
+    clearable: boolean;
+    disabled: boolean;
+    dragActive: boolean;
+    dragReject: boolean;
+    dropDisabled: boolean;
+    empty: boolean;
+    errorVisible: boolean;
+    fileCount: number;
+    fullWidth: boolean;
+    invalid: boolean;
+    maxFiles: number | undefined;
+    maxTotalSize: number | undefined;
+    populated: boolean;
+    readOnly: boolean;
+    rejected: boolean;
+    reordering: boolean;
+    reorderable: boolean;
+    required: boolean;
+    submitting: boolean;
+    totalSize: number;
+    touched: boolean;
+    validating: boolean;
+};
+export type VireoFormFileListFieldRowOwnerState = VireoFormFileListFieldOwnerState & {
+    count: number;
+    dragging: boolean;
+    file: File;
+    first: boolean;
+    index: number;
+    last: boolean;
+    previewed: boolean;
+};
+export type VireoFormFileListFieldRejectionOwnerState = VireoFormFileListFieldOwnerState & {
+    index: number;
+    rejection: VireoFileListRejection;
+};
+export interface VireoFormFileListFieldRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldInputSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldChooserSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldSelectButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldDropHintSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldCapacityTextSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldToolbarSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldFileCountSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldClearAllButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldListSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldFileRowSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldReorderHandleSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldMetadataSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldFileNameSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldFileSizeSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldRemoveButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldPreviewContainerSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldRejectionListSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldRejectionItemSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldHelperTextSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileListFieldLiveRegionSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoFormFileListFieldSlots = {
+    [TSlotName in VireoFormFileListFieldSlotName]: React.ElementType;
+};
+export type VireoFormFileListFieldSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoFormFileListFieldSlots, {
+    /** @default Box */
+    root: SlotProps<typeof Box, VireoFormFileListFieldRootSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default 'input' */
+    input: SlotProps<"input", VireoFormFileListFieldInputSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Box */
+    chooser: SlotProps<typeof Box, VireoFormFileListFieldChooserSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Button */
+    selectButton: SlotProps<typeof Button, VireoFormFileListFieldSelectButtonSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Typography */
+    dropHint: SlotProps<typeof Typography, VireoFormFileListFieldDropHintSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Typography */
+    capacityText: SlotProps<typeof Typography, VireoFormFileListFieldCapacityTextSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Box */
+    toolbar: SlotProps<typeof Box, VireoFormFileListFieldToolbarSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Typography */
+    fileCount: SlotProps<typeof Typography, VireoFormFileListFieldFileCountSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Button */
+    clearAllButton: SlotProps<typeof Button, VireoFormFileListFieldClearAllButtonSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Box */
+    list: SlotProps<typeof Box, VireoFormFileListFieldListSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Box */
+    fileRow: SlotProps<typeof Box, VireoFormFileListFieldFileRowSlotPropsOverrides, VireoFormFileListFieldRowOwnerState>;
+    /** @default IconButton */
+    reorderHandle: SlotProps<typeof IconButton, VireoFormFileListFieldReorderHandleSlotPropsOverrides, VireoFormFileListFieldRowOwnerState>;
+    /** @default Box */
+    metadata: SlotProps<typeof Box, VireoFormFileListFieldMetadataSlotPropsOverrides, VireoFormFileListFieldRowOwnerState>;
+    /** @default Typography */
+    fileName: SlotProps<typeof Typography, VireoFormFileListFieldFileNameSlotPropsOverrides, VireoFormFileListFieldRowOwnerState>;
+    /** @default Typography */
+    fileSize: SlotProps<typeof Typography, VireoFormFileListFieldFileSizeSlotPropsOverrides, VireoFormFileListFieldRowOwnerState>;
+    /** @default IconButton */
+    removeButton: SlotProps<typeof IconButton, VireoFormFileListFieldRemoveButtonSlotPropsOverrides, VireoFormFileListFieldRowOwnerState>;
+    /** @default Box */
+    previewContainer: SlotProps<typeof Box, VireoFormFileListFieldPreviewContainerSlotPropsOverrides, VireoFormFileListFieldRowOwnerState>;
+    /** @default Box */
+    rejectionList: SlotProps<typeof Box, VireoFormFileListFieldRejectionListSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Typography */
+    rejectionItem: SlotProps<typeof Typography, VireoFormFileListFieldRejectionItemSlotPropsOverrides, VireoFormFileListFieldRejectionOwnerState>;
+    /** @default FormHelperText */
+    helperText: SlotProps<typeof FormHelperText, VireoFormFileListFieldHelperTextSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+    /** @default Typography */
+    liveRegion: SlotProps<typeof Typography, VireoFormFileListFieldLiveRegionSlotPropsOverrides, VireoFormFileListFieldOwnerState>;
+}>;
+export type VireoFormFileListFieldOwnProps = VireoFormFileListFieldSlotsAndSlotProps & {
+    /** Native file-accept filter enforced for picker and drop selection. */
+    accept?: string;
+    /** Content of the selection action after files exist. @default 'Add more files' */
+    addMoreFilesLabel?: React.ReactNode;
+    /** Allows files with the same resolved identity. @default false */
+    allowDuplicates?: boolean;
+    /** Native camera or microphone capture hint. */
+    capture?: boolean | "user" | "environment";
+    /** Content shown when additions are unavailable because capacity is exhausted. */
+    capacityReachedText?: React.ReactNode | ((reason: VireoFileListCapacityReason, limit: number) => React.ReactNode);
+    /** Content of the selection action while the collection is empty. @default 'Choose files' */
+    chooseFilesLabel?: React.ReactNode;
+    /** Override or extend the utility classes applied to each slot and state. */
+    classes?: Partial<VireoFormFileListFieldClasses>;
+    /** Whether selected files can be removed. @default true */
+    clearable?: boolean;
+    /** Visible clear-all action content. @default 'Clear all' */
+    clearAllLabel?: React.ReactNode;
+    /** Accessible label for clear-all. @default 'Clear all selected files' */
+    clearAllFilesLabel?: string;
+    disabled?: boolean;
+    /** Disables external drag-and-drop selection while preserving the picker. @default false */
+    disableDrop?: boolean;
+    /** Content shown while acceptable files are dragged over the chooser. @default 'Drop files here' */
+    dropActiveText?: React.ReactNode;
+    /** Persistent guidance shown in the chooser. @default 'or drag and drop files here' */
+    dropHint?: React.ReactNode;
+    /** Adds an error presentation state without suppressing validation or rejection errors. */
+    error?: boolean;
+    /** Overrides the enclosing form's error-display policy for this field. */
+    errorDisplay?: VireoFormErrorDisplay;
+    /** Responsive filename-overflow strategy. @default 'middle' */
+    fileNameTruncation?: VireoFormFileNameTruncation;
+    /** Describes one file's position to assistive technology. */
+    filePositionText?: (file: File, index: number, count: number) => string;
+    /** Message shown when an otherwise accepted file exceeds `maxSize`. */
+    fileTooLargeText?: React.ReactNode | ((file: File, maxSize: number) => React.ReactNode);
+    /** Overrides the enclosing form's validation-error formatter for this field. */
+    formatError?: VireoFormErrorFormatter;
+    /** Formats the compact collection count. */
+    formatFileCount?: (count: number, maxFiles: number | undefined) => React.ReactNode;
+    /** Formats individual and total byte sizes. Uses decimal units by default. */
+    formatFileSize?: (bytes: number) => React.ReactNode;
+    /** Resolves duplicate identity. Defaults to name, size, lastModified, and type. */
+    getFileKey?: (file: File) => string;
+    /** Shown beneath local rejections and the list. Defaults to a reserved line; pass `null` to remove it. @default ' ' */
+    helperText?: React.ReactNode;
+    /** Hides the clear-all action. @default false */
+    hideClearAll?: boolean;
+    /** Hides per-file size metadata. @default false */
+    hideFileSize?: boolean;
+    /** Ref forwarded to the hidden native file input. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Maximum number of accepted files. */
+    maxFiles?: number;
+    /** Message shown for a candidate beyond `maxFiles`. */
+    maxFilesText?: React.ReactNode | ((file: File, maxFiles: number) => React.ReactNode);
+    /** Maximum accepted size of one file in bytes. */
+    maxSize?: number;
+    /** Maximum accepted aggregate size in bytes. */
+    maxTotalSize?: number;
+    /** Message shown when a candidate would exceed `maxTotalSize`. */
+    maxTotalSizeText?: React.ReactNode | ((file: File, maxTotalSize: number) => React.ReactNode);
+    /** Message shown when a candidate duplicates another selected file. */
+    duplicateFileText?: React.ReactNode | ((file: File) => React.ReactNode);
+    /** Observes files accepted from one picker or drop operation. */
+    onFilesAdded?: (addedFiles: readonly File[], nextFiles: readonly File[]) => void;
+    /** Observes files cleared together. */
+    onFilesCleared?: (files: readonly File[]) => void;
+    /** Observes all candidates rejected by one picker or drop operation. */
+    onFilesRejected?: (rejections: readonly VireoFileListRejection[]) => void;
+    /** Observes one removed file. */
+    onFileRemoved?: (file: File, index: number) => void;
+    /** Opt-in renderer placed on a dedicated row beneath each file's metadata. */
+    previewRenderer?: VireoFilePreviewRenderer;
+    /** Prevents picker, drop, removal, clear-all, and reordering while retaining normal presentation. */
+    readOnly?: boolean;
+    /** Accessible label for one reorder handle. */
+    reorderFileLabel?: (file: File, index: number, count: number) => string;
+    /** Announcement emitted after a successful reorder. */
+    reorderAnnouncement?: (file: File, previousIndex: number, nextIndex: number, count: number) => string;
+    /** Enables pointer and keyboard reordering. @default false */
+    reorderable?: boolean;
+    /** Accessible label for one remove action. */
+    removeFileLabel?: (file: File, index: number) => string;
+    /** Marks the collection as required for presentation and accessibility. */
+    required?: boolean;
+    /** Controls whether the root fills its containing width. @default true */
+    fullWidth?: boolean;
+    /** Message shown when a candidate does not match `accept`. */
+    unsupportedTypeText?: React.ReactNode | ((file: File) => React.ReactNode);
+};
+/** Props VireoFormFileListField inherits from its default root after excluding component-owned props. */
+export type VireoFormFileListFieldInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "onChange" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
+/** Props accepted by `field.FileListField`. */
+export type VireoFormFileListFieldProps = VireoFormFileListFieldOwnProps & VireoFormFileListFieldInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_FORM_FILE_LIST_FIELD_NAME]?: VireoThemeComponent<VireoFormFileListFieldProps, VireoFormFileListFieldClassKey, VireoFormFileListFieldOwnerState, Theme>;
+    }
+}

package/dist/capabilities/forms/components/forms/VireoFormFileListField/VireoFormFileListField.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/forms/components/forms/VireoFormFileListField/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoFormFileListField.js";
+export * from "./VireoFormFileListField.classes.js";
+export * from "./VireoFormFileListField.types.js";

package/dist/capabilities/forms/components/forms/VireoFormFileListField/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoFormFileListField.js";
+export * from "./VireoFormFileListField.classes.js";
+export * from "./VireoFormFileListField.types.js";

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoFormFreeSoloAutocompleteFieldSlotName, type VireoFormFreeSoloAutocompleteFieldStateName } from "./VireoFormFreeSoloAutocompleteField.identity.js";
+/** Utility classes available to VireoFormFreeSoloAutocompleteField. */
+export type VireoFormFreeSoloAutocompleteFieldClasses = Record<VireoFormFreeSoloAutocompleteFieldSlotName | VireoFormFreeSoloAutocompleteFieldStateName, string>;
+/** Valid keys for VireoFormFreeSoloAutocompleteField utility classes and theme style overrides. */
+export type VireoFormFreeSoloAutocompleteFieldClassKey = keyof VireoFormFreeSoloAutocompleteFieldClasses;
+/** Returns the generated utility class name for a VireoFormFreeSoloAutocompleteField slot or state. */
+export declare function getVireoFormFreeSoloAutocompleteFieldUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoFormFreeSoloAutocompleteField class key. */
+export declare const vireoFormFreeSoloAutocompleteFieldClasses: VireoFormFreeSoloAutocompleteFieldClasses;

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME, VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_SLOTS, VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_STATES, } from "./VireoFormFreeSoloAutocompleteField.identity.js";
+/** Returns the generated utility class name for a VireoFormFreeSoloAutocompleteField slot or state. */
+export function getVireoFormFreeSoloAutocompleteFieldUtilityClass(slot) {
+    return generateUtilityClass(VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoFormFreeSoloAutocompleteField class key. */
+export const vireoFormFreeSoloAutocompleteFieldClasses = generateUtilityClasses(VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME, [
+    ...VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_SLOTS,
+    ...VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_STATES,
+]);

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { VireoFormFreeSoloAutocompleteFieldProps } from "./VireoFormFreeSoloAutocompleteField.types.js";
+type Component = <TOption>(props: VireoFormFreeSoloAutocompleteFieldProps<TOption> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const VireoFormFreeSoloAutocompleteField: Component;
+export {};

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.identity.d.ts

@@ -0,0 +1,5 @@
+export declare const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME = "VireoFormFreeSoloAutocompleteField";
+export declare const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_SLOTS: readonly ["root", "textField", "inputLabel", "input", "htmlInput", "loadingIndicator", "clearButton", "clearIcon", "popupButton", "popupIcon", "formHelperText", "popper", "paper", "loadingText", "noOptionsText", "listbox", "option", "group", "groupLabel", "groupList"];
+export declare const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_STATES: readonly ["disabled", "readOnly", "required", "error", "focused", "dirty", "touched", "submitting", "validating", "open", "loading", "hasValue", "hasInputValue"];
+export type VireoFormFreeSoloAutocompleteFieldSlotName = (typeof VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_SLOTS)[number];
+export type VireoFormFreeSoloAutocompleteFieldStateName = (typeof VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_STATES)[number];

package/dist/capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.identity.js

@@ -0,0 +1,38 @@
+export const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_NAME = "VireoFormFreeSoloAutocompleteField";
+export const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_SLOTS = [
+    "root",
+    "textField",
+    "inputLabel",
+    "input",
+    "htmlInput",
+    "loadingIndicator",
+    "clearButton",
+    "clearIcon",
+    "popupButton",
+    "popupIcon",
+    "formHelperText",
+    "popper",
+    "paper",
+    "loadingText",
+    "noOptionsText",
+    "listbox",
+    "option",
+    "group",
+    "groupLabel",
+    "groupList",
+];
+export const VIREO_FORM_FREE_SOLO_AUTOCOMPLETE_FIELD_STATES = [
+    "disabled",
+    "readOnly",
+    "required",
+    "error",
+    "focused",
+    "dirty",
+    "touched",
+    "submitting",
+    "validating",
+    "open",
+    "loading",
+    "hasValue",
+    "hasInputValue",
+];