@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/forms/components/forms/VireoFormFileField/VireoFormFileField.styled.d.ts

@@ -0,0 +1,17 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps, type ButtonProps, type FormHelperTextProps, type IconButtonProps, type TypographyProps } from "@mui/material";
+import type React from "react";
+import { type VireoFormFileFieldOwnerState } from "./VireoFormFileField.types.js";
+type Slot<TProps extends object> = StyledSlotComponent<TProps, VireoFormFileFieldOwnerState>;
+export declare const VireoFormFileFieldRoot: Slot<BoxProps>;
+export declare const VireoFormFileFieldSelection: Slot<BoxProps>;
+export declare const VireoFormFileFieldInput: Slot<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export declare const VireoFormFileFieldSelectButton: Slot<ButtonProps>;
+export declare const VireoFormFileFieldMetadata: Slot<BoxProps>;
+export declare const VireoFormFileFieldFileName: Slot<TypographyProps>;
+export declare const VireoFormFileFieldFileSize: Slot<TypographyProps>;
+export declare const VireoFormFileFieldClearButton: Slot<IconButtonProps>;
+export declare const VireoFormFileFieldDropOverlay: Slot<BoxProps>;
+export declare const VireoFormFileFieldPreviewContainer: Slot<BoxProps>;
+export declare const VireoFormFileFieldHelperText: Slot<FormHelperTextProps>;
+export {};

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

@@ -0,0 +1,121 @@
+import { Box, Button, FormHelperText, IconButton, Typography, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_FORM_FILE_FIELD_NAME } from "./VireoFormFileField.identity.js";
+export const VireoFormFileFieldRoot = styled(Box, {
+    name: VIREO_FORM_FILE_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,
+    ],
+})(({ theme, ownerState }) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${ownerState.rejected || ownerState.invalid
+        ? theme.palette.error.main
+        : ownerState.dragActive
+            ? theme.palette.primary.main
+            : theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    containerName: "vireo-file-field",
+    containerType: "inline-size",
+    minWidth: 0,
+    padding: theme.spacing(1.5),
+    position: "relative",
+    transition: theme.transitions.create(["background-color", "border-color"]),
+    ...(ownerState.dragActive && { backgroundColor: theme.palette.action.hover }),
+    ...(ownerState.dragReject && { borderColor: theme.palette.error.main }),
+    ...(ownerState.disabled && { opacity: theme.palette.action.disabledOpacity }),
+}));
+export const VireoFormFileFieldSelection = styled(Box, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "Selection",
+    overridesResolver: (_props, styles) => styles.selection,
+})(({ theme }) => ({
+    alignItems: "center",
+    display: "grid",
+    gap: theme.spacing(1),
+    gridTemplateColumns: "auto minmax(0, 1fr) auto",
+    minWidth: 0,
+    "@container vireo-file-field (max-width: 29.999rem)": { gridTemplateColumns: "minmax(0, 1fr) auto" },
+}));
+export const VireoFormFileFieldInput = styled("input", {
+    name: VIREO_FORM_FILE_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 VireoFormFileFieldSelectButton = styled(Button, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "SelectButton",
+    overridesResolver: (_props, styles) => styles.selectButton,
+})({
+    whiteSpace: "nowrap",
+    "@container vireo-file-field (max-width: 29.999rem)": { gridColumn: "1 / -1", width: "100%" },
+});
+export const VireoFormFileFieldMetadata = styled(Box, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "Metadata",
+    overridesResolver: (_props, styles) => styles.metadata,
+})(({ theme }) => ({ alignItems: "baseline", display: "flex", gap: theme.spacing(0.75), minWidth: 0 }));
+export const VireoFormFileFieldFileName = styled(Typography, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "FileName",
+    overridesResolver: (_props, styles) => styles.fileName,
+})({ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" });
+export const VireoFormFileFieldFileSize = styled(Typography, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "FileSize",
+    overridesResolver: (_props, styles) => styles.fileSize,
+})(({ theme }) => ({ color: theme.palette.text.secondary, flexShrink: 0, whiteSpace: "nowrap" }));
+export const VireoFormFileFieldClearButton = styled(IconButton, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "ClearButton",
+    overridesResolver: (_props, styles) => styles.clearButton,
+})({ flexShrink: 0 });
+export const VireoFormFileFieldDropOverlay = styled(Box, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "DropOverlay",
+    overridesResolver: (_props, styles) => styles.dropOverlay,
+})(({ theme, ownerState }) => ({
+    alignItems: "center",
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: "inherit",
+    color: ownerState.dragReject ? theme.palette.error.main : theme.palette.primary.main,
+    display: "flex",
+    fontWeight: theme.typography.fontWeightMedium,
+    inset: 0,
+    justifyContent: "center",
+    padding: theme.spacing(2),
+    pointerEvents: "none",
+    position: "absolute",
+    textAlign: "center",
+    zIndex: 1,
+}));
+export const VireoFormFileFieldPreviewContainer = styled(Box, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "PreviewContainer",
+    overridesResolver: (_props, styles) => styles.previewContainer,
+})(({ theme }) => ({
+    borderTop: `1px solid ${theme.palette.divider}`,
+    marginTop: theme.spacing(1.5),
+    paddingTop: theme.spacing(1.5),
+}));
+export const VireoFormFileFieldHelperText = styled(FormHelperText, {
+    name: VIREO_FORM_FILE_FIELD_NAME,
+    slot: "HelperText",
+    overridesResolver: (_props, styles) => styles.helperText,
+})(({ theme }) => ({ margin: theme.spacing(1, 0, 0) }));

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

@@ -0,0 +1,150 @@
+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 VireoFormFileFieldClasses, type VireoFormFileFieldClassKey } from "./VireoFormFileField.classes.js";
+import type { VIREO_FORM_FILE_FIELD_NAME, VireoFormFileFieldSlotName } from "./VireoFormFileField.identity.js";
+export type { VireoFilePreviewRenderer, VireoFilePreviewRendererProps, VireoFormFileNameTruncation, } from "../../../../../capabilities/forms/types/vireoFile.types.js";
+export type VireoFileRejectionReason = "type" | "size";
+export type VireoFileRejection = {
+    file: File;
+    reason: VireoFileRejectionReason;
+};
+export type VireoFormFileFieldOwnerState = {
+    disabled: boolean;
+    dragActive: boolean;
+    dragReject: boolean;
+    empty: boolean;
+    errorVisible: boolean;
+    invalid: boolean;
+    populated: boolean;
+    readOnly: boolean;
+    rejected: boolean;
+    submitting: boolean;
+    touched: boolean;
+    validating: boolean;
+};
+export interface VireoFormFileFieldRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldSelectionSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldInputSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldSelectButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldMetadataSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldFileNameSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldFileSizeSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldClearButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldDropOverlaySlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldPreviewContainerSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormFileFieldHelperTextSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoFormFileFieldSlots = {
+    [TSlotName in VireoFormFileFieldSlotName]: React.ElementType;
+};
+export type VireoFormFileFieldSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoFormFileFieldSlots, {
+    /** @default Box */
+    root: SlotProps<typeof Box, VireoFormFileFieldRootSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default Box */
+    selection: SlotProps<typeof Box, VireoFormFileFieldSelectionSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default 'input' */
+    input: SlotProps<"input", VireoFormFileFieldInputSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default Button */
+    selectButton: SlotProps<typeof Button, VireoFormFileFieldSelectButtonSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default Box */
+    metadata: SlotProps<typeof Box, VireoFormFileFieldMetadataSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default Typography */
+    fileName: SlotProps<typeof Typography, VireoFormFileFieldFileNameSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default Typography */
+    fileSize: SlotProps<typeof Typography, VireoFormFileFieldFileSizeSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default IconButton */
+    clearButton: SlotProps<typeof IconButton, VireoFormFileFieldClearButtonSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default Box */
+    dropOverlay: SlotProps<typeof Box, VireoFormFileFieldDropOverlaySlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default Box */
+    previewContainer: SlotProps<typeof Box, VireoFormFileFieldPreviewContainerSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+    /** @default FormHelperText */
+    helperText: SlotProps<typeof FormHelperText, VireoFormFileFieldHelperTextSlotPropsOverrides, VireoFormFileFieldOwnerState>;
+}>;
+export type VireoFormFileFieldOwnProps = VireoFormFileFieldSlotsAndSlotProps & {
+    /** Native file-accept filter. Exact MIME types, MIME wildcards, and extensions are enforced for picker and drop selection. */
+    accept?: string;
+    /** Native camera or microphone capture hint. */
+    capture?: boolean | "user" | "environment";
+    /** Content of the selection action while the value is empty. @default 'Choose file' */
+    chooseFileLabel?: React.ReactNode;
+    /** Override or extend the utility classes applied to each slot and state. */
+    classes?: Partial<VireoFormFileFieldClasses>;
+    /** Whether a selected file can be cleared. @default true */
+    clearable?: boolean;
+    /** Accessible label for the clear action. @default 'Clear selected file' */
+    clearFileLabel?: string;
+    disabled?: boolean;
+    /** Disables drag-and-drop selection while preserving the picker action. @default false */
+    disableDrop?: boolean;
+    /** Content shown over the field while an acceptable file is dragged across it. @default 'Drop file here' */
+    dropActiveText?: React.ReactNode;
+    /** Metadata text shown while the bound value is null. @default 'No file selected' */
+    emptyText?: 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;
+    /** 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 selected file's byte size. Uses decimal units by default. */
+    formatFileSize?: (bytes: number) => React.ReactNode;
+    /** Shown when neither a local rejection nor a visible form error takes precedence. Defaults to a reserved line; pass `null` to remove it. @default ' ' */
+    helperText?: React.ReactNode;
+    /** Hides selected-file size metadata. @default false */
+    hideFileSize?: boolean;
+    /** Ref forwarded to the hidden native file input. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Maximum accepted file size in bytes. */
+    maxSize?: number;
+    /** Observes a locally rejected file after type or size checks. */
+    onFileRejected?: (rejection: VireoFileRejection) => void;
+    /** Opt-in renderer placed on a dedicated row beneath selected-file metadata. */
+    previewRenderer?: VireoFilePreviewRenderer;
+    /** Prevents picker, drop, and clear changes while retaining normal presentation. */
+    readOnly?: boolean;
+    /** Content of the selection action while a value exists. @default 'Replace file' */
+    replaceFileLabel?: React.ReactNode;
+    /** Adds native required semantics; validation remains owned by TanStack Form or the supplied schema. */
+    required?: boolean;
+    /** Message shown when a file does not match `accept`. @default 'This file type is not accepted.' */
+    unsupportedTypeText?: React.ReactNode | ((file: File) => React.ReactNode);
+};
+/** Props VireoFormFileField inherits from its default root after excluding component-owned props. */
+export type VireoFormFileFieldInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "onChange" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
+/** Props accepted by `field.FileField`. */
+export type VireoFormFileFieldProps = VireoFormFileFieldOwnProps & VireoFormFileFieldInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_FORM_FILE_FIELD_NAME]?: VireoThemeComponent<VireoFormFileFieldProps, VireoFormFileFieldClassKey, VireoFormFileFieldOwnerState, Theme>;
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { type VireoFormFileListFieldSlotName } from "./VireoFormFileListField.identity.js";
+export type VireoFormFileListFieldStateClass = "empty" | "populated" | "dragActive" | "dragReject" | "rejected" | "invalid" | "disabled" | "readOnly" | "required" | "fullWidth" | "reorderable" | "capacityReached" | "reordering" | "submitting" | "validating";
+/** Utility classes available to VireoFormFileListField. */
+export type VireoFormFileListFieldClasses = Record<VireoFormFileListFieldSlotName | VireoFormFileListFieldStateClass, string>;
+/** Valid keys for VireoFormFileListField utility classes and theme style overrides. */
+export type VireoFormFileListFieldClassKey = keyof VireoFormFileListFieldClasses;
+/** Returns the generated utility class name for a VireoFormFileListField slot or state. */
+export declare function getVireoFormFileListFieldUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoFormFileListField class key. */
+export declare const vireoFormFileListFieldClasses: VireoFormFileListFieldClasses;

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

@@ -0,0 +1,25 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_FORM_FILE_LIST_FIELD_NAME, VIREO_FORM_FILE_LIST_FIELD_SLOTS, } from "./VireoFormFileListField.identity.js";
+/** Returns the generated utility class name for a VireoFormFileListField slot or state. */
+export function getVireoFormFileListFieldUtilityClass(slot) {
+    return generateUtilityClass(VIREO_FORM_FILE_LIST_FIELD_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoFormFileListField class key. */
+export const vireoFormFileListFieldClasses = generateUtilityClasses(VIREO_FORM_FILE_LIST_FIELD_NAME, [
+    ...VIREO_FORM_FILE_LIST_FIELD_SLOTS,
+    "empty",
+    "populated",
+    "dragActive",
+    "dragReject",
+    "rejected",
+    "invalid",
+    "disabled",
+    "readOnly",
+    "required",
+    "fullWidth",
+    "reorderable",
+    "capacityReached",
+    "reordering",
+    "submitting",
+    "validating",
+]);

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { VireoFormFileListFieldProps } from "./VireoFormFileListField.types.js";
+/** Binds an ordered browser `File[]` collection to `form.Field` through `field.FileListField`. */
+export declare const VireoFormFileListField: React.ForwardRefExoticComponent<Omit<VireoFormFileListFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoFormFileListField integration point. */
+export declare const VIREO_FORM_FILE_LIST_FIELD_NAME = "VireoFormFileListField";
+/** Canonical public slots exposed by VireoFormFileListField, in rendered DOM order. */
+export declare const VIREO_FORM_FILE_LIST_FIELD_SLOTS: readonly ["root", "input", "chooser", "selectButton", "dropHint", "capacityText", "toolbar", "fileCount", "clearAllButton", "list", "fileRow", "reorderHandle", "metadata", "fileName", "fileSize", "removeButton", "previewContainer", "rejectionList", "rejectionItem", "helperText", "liveRegion"];
+/** Public slot names exposed by VireoFormFileListField. */
+export type VireoFormFileListFieldSlotName = (typeof VIREO_FORM_FILE_LIST_FIELD_SLOTS)[number];

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

@@ -0,0 +1,26 @@
+/** Stable component name shared by every VireoFormFileListField integration point. */
+export const VIREO_FORM_FILE_LIST_FIELD_NAME = "VireoFormFileListField";
+/** Canonical public slots exposed by VireoFormFileListField, in rendered DOM order. */
+export const VIREO_FORM_FILE_LIST_FIELD_SLOTS = [
+    "root",
+    "input",
+    "chooser",
+    "selectButton",
+    "dropHint",
+    "capacityText",
+    "toolbar",
+    "fileCount",
+    "clearAllButton",
+    "list",
+    "fileRow",
+    "reorderHandle",
+    "metadata",
+    "fileName",
+    "fileSize",
+    "removeButton",
+    "previewContainer",
+    "rejectionList",
+    "rejectionItem",
+    "helperText",
+    "liveRegion",
+];