@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/forms/components/forms/VireoFormTemporalField/VireoFormTemporalField.js

@@ -0,0 +1,424 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useVireoFormContext } from "../../../../../capabilities/forms/contexts/VireoFormContext/VireoFormContext.js";
+import { useVireoFieldContext } from "../../../../../capabilities/forms/contexts/VireoFormHookContexts/VireoFormHookContexts.js";
+import { formatFirstVireoFormError, shouldDisplayVireoFormError } from "../../../../../capabilities/forms/utils/vireoFormErrors.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import { DatePicker, DateTimePicker, PickersTextField, TimePicker, } from "@mui/x-date-pickers";
+import { usePickerAdapter } from "@mui/x-date-pickers/hooks";
+import { useStore } from "@tanstack/react-form";
+import React from "react";
+import { formatTemporalValue, parseTemporalValue, temporalErrorMessage, validateTemporalCandidate, } from "../../../../../capabilities/forms/components/forms/VireoFormTemporalField/internal/temporalValue.js";
+import { getVireoFormTemporalFieldUtilityClass, } from "./VireoFormTemporalField.classes.js";
+import { VIREO_FORM_TEMPORAL_FIELD_NAME } from "./VireoFormTemporalField.identity.js";
+import { VireoFormTemporalFieldClearButton, VireoFormTemporalFieldClearIcon, VireoFormTemporalFieldFilledInput, VireoFormTemporalFieldFormHelperText, VireoFormTemporalFieldOpenPickerButton, VireoFormTemporalFieldOpenPickerIcon, VireoFormTemporalFieldOutlinedInput, VireoFormTemporalFieldRoot, VireoFormTemporalFieldStandardInput, } from "./VireoFormTemporalField.styled.js";
+const VIREO_TEMPORAL_ADAPTER_MARKER = Symbol.for("@vireocodedev/ui/VireoTemporalLocalizationProvider");
+const VIREO_TEMPORAL_ERROR_KEY = "__vireoTemporal";
+const temporalFormErrors = new WeakMap();
+function setTemporalFormError(form, fieldName, error) {
+    let state = temporalFormErrors.get(form);
+    if (!state) {
+        state = { errors: new Map() };
+        temporalFormErrors.set(form, state);
+    }
+    if (error)
+        state.errors.set(fieldName, error);
+    else
+        state.errors.delete(fieldName);
+    if (state.errors.size > 0) {
+        form.setErrorMap({ [VIREO_TEMPORAL_ERROR_KEY]: [...state.errors.values()] });
+        return;
+    }
+    form.setErrorMap({ [VIREO_TEMPORAL_ERROR_KEY]: undefined });
+    temporalFormErrors.delete(form);
+}
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: [
+            "root",
+            ownerState.dirty && "dirty",
+            ownerState.touched && "touched",
+            ownerState.invalid && "invalid",
+            ownerState.errorVisible && "errorVisible",
+            ownerState.validating && "validating",
+            ownerState.submitting && "submitting",
+            ownerState.disabled && "disabled",
+            ownerState.readOnly && "readOnly",
+            ownerState.hasValue && "hasValue",
+        ],
+        input: ["input"],
+        htmlInput: ["htmlInput"],
+        formHelperText: ["formHelperText"],
+        openPickerButton: ["openPickerButton"],
+        openPickerIcon: ["openPickerIcon"],
+        clearButton: ["clearButton"],
+        clearIcon: ["clearIcon"],
+    }, getVireoFormTemporalFieldUtilityClass, classes);
+}
+function pickerErrorToTemporalError(error) {
+    if (!error)
+        return null;
+    if (error === "minDate" || error === "minTime")
+        return "min";
+    if (error === "maxDate" || error === "maxTime")
+        return "max";
+    if (error === "minutesStep")
+        return "minuteStep";
+    return "invalid";
+}
+function resolveExternalSlotProps(slotProps, ownerState) {
+    return typeof slotProps === "function" ? slotProps(ownerState) : slotProps;
+}
+const TemporalPickerTextField = React.forwardRef(function TemporalPickerTextField({ vireoSlotProps, vireoSlots, vireoTextFieldComponent, ...textFieldProps }, forwardedRef) {
+    const Component = vireoTextFieldComponent ?? PickersTextField;
+    const inputSlotProps = vireoSlotProps?.input;
+    const htmlInputSlotProps = vireoSlotProps?.htmlInput;
+    return (_jsx(Component, { ...textFieldProps, ref: forwardedRef, slots: { ...textFieldProps.slots, ...vireoSlots }, slotProps: {
+            ...textFieldProps.slotProps,
+            ...vireoSlotProps,
+            input: {
+                ...textFieldProps.slotProps?.input,
+                ...inputSlotProps,
+            },
+            htmlInput: {
+                ...textFieldProps.slotProps?.htmlInput,
+                ...htmlInputSlotProps,
+            },
+        } }));
+});
+/**
+ * Binds localized MUI date and time pickers to canonical timezone-free `string | null` TanStack Form values.
+ *
+ * Consumers render this component through `field.TemporalField`; the raw runtime is intentionally capability-bound.
+ */
+export const VireoFormTemporalField = React.forwardRef(function VireoFormTemporalField(inProps, forwardedRef) {
+    const adapter = usePickerAdapter();
+    const hasVireoLocalizationProvider = Boolean(adapter[VIREO_TEMPORAL_ADAPTER_MARKER]);
+    if (!hasVireoLocalizationProvider) {
+        throw new Error('VireoFormTemporalField must be rendered within VireoTemporalLocalizationProvider. Import it from "../../../../../integrations/localization/public.js".');
+    }
+    const props = useThemeProps({ props: inProps, name: VIREO_FORM_TEMPORAL_FIELD_NAME });
+    const { ampm = false, className, classes: classesProp, clearable = true, clearLabel = "Clear temporal value", disabled = false, error = false, errorDisplay: errorDisplayProp, formatError: formatErrorProp, fullWidth = true, helperText = " ", inputRef, max, min, minuteStep = 1, mode, onBlur, onValueChange, openTo, pickerProps = {}, precision = "minute", readOnly = false, referenceValue, required = false, secondStep = 1, slotProps = {}, slots = {}, style, sx, variant = "outlined", ...other } = props;
+    const field = useVireoFieldContext();
+    const formContext = useVireoFormContext();
+    const fieldState = useStore(field.store, current => ({
+        dirty: current.meta.isDirty,
+        errors: current.meta.errors,
+        invalid: !current.meta.isValid,
+        touched: current.meta.isTouched,
+        validating: current.meta.isValidating,
+        value: current.value,
+    }));
+    const submitting = useStore(field.form.store, current => current.isSubmitting);
+    const [draftValue, setDraftValue] = React.useState(() => parseTemporalValue(mode, fieldState.value));
+    const [draftError, setDraftError] = React.useState(null);
+    const pickerOpenRef = React.useRef(false);
+    const rootElementRef = React.useRef(null);
+    const lastCommittedValueRef = React.useRef(fieldState.value);
+    const lastModeRef = React.useRef(mode);
+    const synchronizedRef = React.useRef(false);
+    const normalizedMinuteStep = Number.isInteger(minuteStep) && minuteStep > 0 ? minuteStep : 1;
+    const normalizedSecondStep = Number.isInteger(secondStep) && secondStep > 0 ? secondStep : 1;
+    const minValue = parseTemporalValue(mode, min);
+    const maxValue = parseTemporalValue(mode, max);
+    const referenceDate = parseTemporalValue(mode, referenceValue);
+    const validateCandidate = React.useCallback((candidate, pickerError) => {
+        const mappedPickerError = pickerErrorToTemporalError(pickerError ?? null);
+        const candidateError = mappedPickerError ??
+            validateTemporalCandidate(mode, candidate, {
+                min: minValue,
+                max: maxValue,
+                minuteStep: normalizedMinuteStep,
+                precision,
+                secondStep: normalizedSecondStep,
+            });
+        return candidateError
+            ? temporalErrorMessage(candidateError, mode, {
+                max,
+                min,
+                minuteStep: normalizedMinuteStep,
+                precision,
+                secondStep: normalizedSecondStep,
+            })
+            : null;
+    }, [max, maxValue, min, minValue, mode, normalizedMinuteStep, normalizedSecondStep, precision]);
+    const canonicalError = React.useMemo(() => {
+        if (fieldState.value === null)
+            return null;
+        const canonicalValue = parseTemporalValue(mode, fieldState.value);
+        return canonicalValue
+            ? validateCandidate(canonicalValue)
+            : temporalErrorMessage("invalid", mode, {
+                max,
+                min,
+                minuteStep: normalizedMinuteStep,
+                precision,
+                secondStep: normalizedSecondStep,
+            });
+    }, [fieldState.value, max, min, mode, normalizedMinuteStep, normalizedSecondStep, precision, validateCandidate]);
+    const temporalError = draftError ?? canonicalError;
+    React.useLayoutEffect(() => {
+        setTemporalFormError(field.form, field.name, temporalError);
+    }, [field, temporalError]);
+    const commitValue = React.useCallback((candidate, pickerError) => {
+        if (candidate === null) {
+            setDraftError(null);
+            lastCommittedValueRef.current = null;
+            field.handleChange(null);
+            onValueChange?.(null);
+            return true;
+        }
+        const nextError = validateCandidate(candidate, pickerError);
+        setDraftError(nextError);
+        if (nextError)
+            return false;
+        const canonicalValue = formatTemporalValue(mode, candidate);
+        lastCommittedValueRef.current = canonicalValue;
+        field.handleChange(canonicalValue);
+        onValueChange?.(canonicalValue);
+        return true;
+    }, [field, mode, onValueChange, validateCandidate]);
+    React.useEffect(() => {
+        if (synchronizedRef.current &&
+            fieldState.value === lastCommittedValueRef.current &&
+            mode === lastModeRef.current) {
+            return;
+        }
+        synchronizedRef.current = true;
+        lastCommittedValueRef.current = fieldState.value;
+        lastModeRef.current = mode;
+        const nextValue = parseTemporalValue(mode, fieldState.value);
+        setDraftValue(nextValue);
+        setDraftError(null);
+    }, [fieldState.value, mode]);
+    React.useEffect(() => {
+        const handleReset = (event) => {
+            if (rootElementRef.current?.closest("form") !== event.target)
+                return;
+            queueMicrotask(() => {
+                const resetValue = field.form.getFieldValue(field.name);
+                lastCommittedValueRef.current = resetValue;
+                setDraftValue(parseTemporalValue(mode, resetValue));
+                setDraftError(null);
+            });
+        };
+        document.addEventListener("reset", handleReset, true);
+        return () => document.removeEventListener("reset", handleReset, true);
+    }, [field, mode]);
+    React.useEffect(() => () => {
+        setTemporalFormError(field.form, field.name, null);
+    }, [field]);
+    const errorDisplay = errorDisplayProp ?? formContext.errorDisplay;
+    const invalid = fieldState.invalid || temporalError !== null;
+    const errorVisible = invalid &&
+        shouldDisplayVireoFormError(errorDisplay, {
+            submissionAttempts: formContext.submissionAttempts,
+            touched: fieldState.touched,
+        });
+    const formattedFormError = errorVisible
+        ? formatFirstVireoFormError(fieldState.errors, formatErrorProp ?? formContext.formatError)
+        : undefined;
+    const ownerState = {
+        dirty: fieldState.dirty,
+        disabled,
+        errorVisible,
+        hasValue: fieldState.value !== null,
+        invalid,
+        mode,
+        readOnly,
+        submitting,
+        touched: fieldState.touched,
+        validating: fieldState.validating,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const resolvedInputSlotProps = resolveSlotProps(slotProps.input, ownerState);
+    const { className: inputSlotClassName, ...inputSlotOther } = resolvedInputSlotProps;
+    const resolvedHtmlInputSlotProps = resolveSlotProps(slotProps.htmlInput, ownerState);
+    const { className: htmlInputSlotClassName, ref: htmlInputSlotRef, ...htmlInputSlotOther } = resolvedHtmlInputSlotProps;
+    const resolvedFormHelperTextSlotProps = resolveSlotProps(slotProps.formHelperText, ownerState);
+    const { className: formHelperTextSlotClassName, ...formHelperTextSlotOther } = resolvedFormHelperTextSlotProps;
+    const resolvedOpenPickerButtonSlotProps = resolveSlotProps(slotProps.openPickerButton, ownerState);
+    const { className: openPickerButtonSlotClassName, ...openPickerButtonSlotOther } = resolvedOpenPickerButtonSlotProps;
+    const resolvedOpenPickerIconSlotProps = resolveSlotProps(slotProps.openPickerIcon, ownerState);
+    const { className: openPickerIconSlotClassName, ...openPickerIconSlotOther } = resolvedOpenPickerIconSlotProps;
+    const resolvedClearButtonSlotProps = resolveSlotProps(slotProps.clearButton, ownerState);
+    const { className: clearButtonSlotClassName, ...clearButtonSlotOther } = resolvedClearButtonSlotProps;
+    const resolvedClearIconSlotProps = resolveSlotProps(slotProps.clearIcon, ownerState);
+    const { className: clearIconSlotClassName, ...clearIconSlotOther } = resolvedClearIconSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef, rootElementRef);
+    const nativeInputRef = useForkRef(inputRef, htmlInputSlotRef);
+    const { slotProps: advancedSlotProps = {}, slots: advancedSlots = {}, ...advancedPickerProps } = pickerProps;
+    const advancedTextFieldSlotProps = advancedSlotProps.textField;
+    const advancedFieldSlotProps = advancedSlotProps.field;
+    const advancedCalendarHeaderSlotProps = "calendarHeader" in advancedSlotProps ? advancedSlotProps.calendarHeader : undefined;
+    const advancedOpenPickerButtonSlotProps = advancedSlotProps.openPickerButton;
+    const advancedOpenPickerIconSlotProps = advancedSlotProps.openPickerIcon;
+    const advancedClearButtonSlotProps = advancedSlotProps.clearButton;
+    const advancedClearIconSlotProps = advancedSlotProps.clearIcon;
+    const effectiveError = error || errorVisible;
+    const effectiveHelperText = errorVisible ? (temporalError ?? formattedFormError) : helperText;
+    const inputComponent = slots.input ??
+        (variant === "filled"
+            ? VireoFormTemporalFieldFilledInput
+            : variant === "standard"
+                ? VireoFormTemporalFieldStandardInput
+                : VireoFormTemporalFieldOutlinedInput);
+    const handleChange = (nextValue, context) => {
+        setDraftValue(nextValue);
+        if (nextValue === null) {
+            commitValue(null);
+            return;
+        }
+        const nextError = validateCandidate(nextValue, context.validationError);
+        setDraftError(nextError);
+        if (!pickerOpenRef.current && !nextError)
+            commitValue(nextValue, context.validationError);
+    };
+    const handleAccept = (nextValue, context) => {
+        setDraftValue(nextValue);
+        commitValue(nextValue, context.validationError);
+    };
+    const createPickerSlotProps = () => ({
+        ...advancedSlotProps,
+        ...(mode !== "time" && {
+            calendarHeader: (pickerOwnerState) => ({
+                ...resolveExternalSlotProps(advancedCalendarHeaderSlotProps, pickerOwnerState),
+                ...(mode === "month" && { format: "MMMM" }),
+            }),
+        }),
+        field: (pickerOwnerState) => ({
+            ...resolveExternalSlotProps(advancedFieldSlotProps, pickerOwnerState),
+            clearable,
+        }),
+        clearButton: (pickerOwnerState) => ({
+            ...resolveExternalSlotProps(advancedClearButtonSlotProps, pickerOwnerState),
+            ...clearButtonSlotOther,
+            "aria-label": clearLabel,
+            ownerState,
+            className: joinClassNames(classes.clearButton, clearButtonSlotClassName),
+        }),
+        clearIcon: (pickerOwnerState) => ({
+            ...resolveExternalSlotProps(advancedClearIconSlotProps, pickerOwnerState),
+            ...clearIconSlotOther,
+            ownerState,
+            className: joinClassNames(classes.clearIcon, clearIconSlotClassName),
+        }),
+        openPickerButton: (pickerOwnerState) => ({
+            ...resolveExternalSlotProps(advancedOpenPickerButtonSlotProps, pickerOwnerState),
+            ...openPickerButtonSlotOther,
+            ownerState,
+            className: joinClassNames(classes.openPickerButton, openPickerButtonSlotClassName),
+        }),
+        openPickerIcon: (pickerOwnerState) => ({
+            ...resolveExternalSlotProps(advancedOpenPickerIconSlotProps, pickerOwnerState),
+            ...openPickerIconSlotOther,
+            ownerState,
+            className: joinClassNames(classes.openPickerIcon, openPickerIconSlotClassName),
+        }),
+        textField: (pickerOwnerState) => {
+            const advancedTextField = resolveExternalSlotProps(advancedTextFieldSlotProps, pickerOwnerState);
+            const advancedTextFieldSlots = advancedTextField?.slots ?? {};
+            const advancedTextFieldNestedSlotProps = advancedTextField?.slotProps ?? {};
+            return {
+                ...advancedTextField,
+                error: effectiveError,
+                fullWidth,
+                helperText: effectiveHelperText,
+                inputRef: nativeInputRef,
+                name: field.name,
+                onBlur: (event) => {
+                    advancedTextField?.onBlur?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    onBlur?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    field.handleBlur();
+                },
+                required,
+                variant,
+                vireoTextFieldComponent: advancedSlots.textField,
+                vireoSlots: {
+                    ...advancedTextFieldSlots,
+                    input: inputComponent,
+                    htmlInput: slots.htmlInput ?? advancedTextFieldSlots.htmlInput,
+                    formHelperText: slots.formHelperText ?? VireoFormTemporalFieldFormHelperText,
+                },
+                vireoSlotProps: {
+                    ...advancedTextFieldNestedSlotProps,
+                    input: {
+                        ...advancedTextFieldNestedSlotProps.input,
+                        ...inputSlotOther,
+                        "aria-label": inputSlotOther["aria-label"] ??
+                            htmlInputSlotOther["aria-label"],
+                        ownerState,
+                        className: joinClassNames(classes.input, inputSlotClassName),
+                    },
+                    htmlInput: {
+                        ...advancedTextFieldNestedSlotProps.htmlInput,
+                        ...htmlInputSlotOther,
+                        "aria-invalid": effectiveError || undefined,
+                        className: joinClassNames(classes.htmlInput, htmlInputSlotClassName),
+                    },
+                    formHelperText: {
+                        ...advancedTextFieldNestedSlotProps.formHelperText,
+                        ...formHelperTextSlotOther,
+                        ownerState,
+                        className: joinClassNames(classes.formHelperText, formHelperTextSlotClassName),
+                    },
+                },
+            };
+        },
+    });
+    const commonPickerProps = {
+        ...advancedPickerProps,
+        clearable,
+        disabled,
+        onAccept: handleAccept,
+        onChange: handleChange,
+        onClose: () => {
+            pickerOpenRef.current = false;
+        },
+        onOpen: () => {
+            pickerOpenRef.current = true;
+        },
+        readOnly,
+        referenceDate: referenceDate ?? undefined,
+        slotProps: createPickerSlotProps(),
+        slots: {
+            ...advancedSlots,
+            textField: TemporalPickerTextField,
+            clearButton: slots.clearButton ?? VireoFormTemporalFieldClearButton,
+            clearIcon: slots.clearIcon ?? VireoFormTemporalFieldClearIcon,
+            openPickerButton: slots.openPickerButton ?? VireoFormTemporalFieldOpenPickerButton,
+            openPickerIcon: slots.openPickerIcon ?? VireoFormTemporalFieldOpenPickerIcon,
+        },
+        timezone: "UTC",
+        value: draftValue,
+    };
+    let picker;
+    if (mode === "time") {
+        picker = (_jsx(TimePicker, { ...commonPickerProps, ampm: ampm, minTime: minValue ?? undefined, maxTime: maxValue ?? undefined, openTo: openTo ?? "hours", timeSteps: { minutes: normalizedMinuteStep, seconds: normalizedSecondStep }, views: precision === "second" ? ["hours", "minutes", "seconds"] : ["hours", "minutes"] }));
+    }
+    else if (mode === "date-time") {
+        picker = (_jsx(DateTimePicker, { ...commonPickerProps, ampm: ampm, minDateTime: minValue ?? undefined, maxDateTime: maxValue ?? undefined, openTo: openTo ?? "day", timeSteps: { minutes: normalizedMinuteStep, seconds: normalizedSecondStep }, views: precision === "second"
+                ? ["year", "month", "day", "hours", "minutes", "seconds"]
+                : ["year", "month", "day", "hours", "minutes"] }));
+    }
+    else {
+        const views = mode === "year"
+            ? ["year"]
+            : mode === "month"
+                ? ["month"]
+                : mode === "year-month"
+                    ? ["year", "month"]
+                    : ["year", "month", "day"];
+        picker = (_jsx(DatePicker, { ...commonPickerProps, minDate: minValue ?? undefined, maxDate: maxValue ?? undefined, openTo: openTo ?? (mode === "year" ? "year" : mode === "month" || mode === "year-month" ? "month" : "day"), views: views }));
+    }
+    return (_jsx(VireoFormTemporalFieldRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: picker }));
+});
+VireoFormTemporalField.displayName = VIREO_FORM_TEMPORAL_FIELD_NAME;

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

@@ -0,0 +1,15 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps, type FormHelperTextProps, type IconButtonProps, type SvgIconProps } from "@mui/material";
+import { type PickersFilledInputProps, type PickersInputProps, type PickersOutlinedInputProps } from "@mui/x-date-pickers";
+import { type VireoFormTemporalFieldOwnerState } from "./VireoFormTemporalField.types.js";
+type VireoFormTemporalFieldStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoFormTemporalFieldOwnerState>;
+export declare const VireoFormTemporalFieldRoot: VireoFormTemporalFieldStyledSlotComponent<BoxProps>;
+export declare const VireoFormTemporalFieldOutlinedInput: VireoFormTemporalFieldStyledSlotComponent<PickersOutlinedInputProps>;
+export declare const VireoFormTemporalFieldFilledInput: VireoFormTemporalFieldStyledSlotComponent<PickersFilledInputProps>;
+export declare const VireoFormTemporalFieldStandardInput: VireoFormTemporalFieldStyledSlotComponent<PickersInputProps>;
+export declare const VireoFormTemporalFieldFormHelperText: VireoFormTemporalFieldStyledSlotComponent<FormHelperTextProps>;
+export declare const VireoFormTemporalFieldOpenPickerButton: VireoFormTemporalFieldStyledSlotComponent<IconButtonProps>;
+export declare const VireoFormTemporalFieldOpenPickerIcon: VireoFormTemporalFieldStyledSlotComponent<SvgIconProps>;
+export declare const VireoFormTemporalFieldClearButton: VireoFormTemporalFieldStyledSlotComponent<IconButtonProps>;
+export declare const VireoFormTemporalFieldClearIcon: VireoFormTemporalFieldStyledSlotComponent<SvgIconProps>;
+export {};

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

@@ -0,0 +1,51 @@
+import CalendarToday from "@mui/icons-material/CalendarToday";
+import Close from "@mui/icons-material/Close";
+import { Box, FormHelperText, IconButton, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { PickersFilledInput, PickersInput, PickersOutlinedInput, } from "@mui/x-date-pickers";
+import { VIREO_FORM_TEMPORAL_FIELD_NAME } from "./VireoFormTemporalField.identity.js";
+export const VireoFormTemporalFieldRoot = styled(Box, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({});
+export const VireoFormTemporalFieldOutlinedInput = styled(PickersOutlinedInput, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "Input",
+    overridesResolver: (_props, styles) => styles.input,
+})({});
+export const VireoFormTemporalFieldFilledInput = styled(PickersFilledInput, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "Input",
+    overridesResolver: (_props, styles) => styles.input,
+})({});
+export const VireoFormTemporalFieldStandardInput = styled(PickersInput, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "Input",
+    overridesResolver: (_props, styles) => styles.input,
+})({});
+export const VireoFormTemporalFieldFormHelperText = styled(FormHelperText, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "FormHelperText",
+    overridesResolver: (_props, styles) => styles.formHelperText,
+})({});
+export const VireoFormTemporalFieldOpenPickerButton = styled(IconButton, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "OpenPickerButton",
+    overridesResolver: (_props, styles) => styles.openPickerButton,
+})({});
+export const VireoFormTemporalFieldOpenPickerIcon = styled(CalendarToday, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "OpenPickerIcon",
+    overridesResolver: (_props, styles) => styles.openPickerIcon,
+})({});
+export const VireoFormTemporalFieldClearButton = styled(IconButton, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "ClearButton",
+    overridesResolver: (_props, styles) => styles.clearButton,
+})({});
+export const VireoFormTemporalFieldClearIcon = styled(Close, {
+    name: VIREO_FORM_TEMPORAL_FIELD_NAME,
+    slot: "ClearIcon",
+    overridesResolver: (_props, styles) => styles.clearIcon,
+})({});

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

@@ -0,0 +1,171 @@
+import type { VireoFormErrorDisplay, VireoFormErrorFormatter } from "../../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { BoxProps, FormHelperText, IconButton, SvgIcon, TextFieldProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type { DatePickerProps, DateTimePickerProps, DateTimeValidationError, DateValidationError, TimePickerProps, TimeValidationError, PickersOutlinedInput } from "@mui/x-date-pickers";
+import type React from "react";
+import { type VireoFormTemporalFieldClasses, type VireoFormTemporalFieldClassKey } from "./VireoFormTemporalField.classes.js";
+import type { VIREO_FORM_TEMPORAL_FIELD_NAME, VireoFormTemporalFieldSlotName } from "./VireoFormTemporalField.identity.js";
+export type VireoFormTemporalFieldMode = "year" | "month" | "year-month" | "date" | "time" | "date-time";
+export type VireoFormTemporalFieldPrecision = "minute" | "second";
+export type VireoFormTemporalFieldValue = string | null;
+export type VireoFormTemporalFieldError = "invalid" | "min" | "max" | "minuteStep" | "secondStep";
+export type VireoFormTemporalFieldOwnerState = {
+    dirty: boolean;
+    disabled: boolean;
+    errorVisible: boolean;
+    hasValue: boolean;
+    invalid: boolean;
+    mode: VireoFormTemporalFieldMode;
+    readOnly: boolean;
+    submitting: boolean;
+    touched: boolean;
+    validating: boolean;
+};
+export interface VireoFormTemporalFieldRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormTemporalFieldInputSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormTemporalFieldHtmlInputSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormTemporalFieldFormHelperTextSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormTemporalFieldOpenPickerButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormTemporalFieldOpenPickerIconSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormTemporalFieldClearButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormTemporalFieldClearIconSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoFormTemporalFieldSlots = {
+    [TSlotName in VireoFormTemporalFieldSlotName]: React.ElementType;
+};
+export type VireoFormTemporalFieldSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoFormTemporalFieldSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoFormTemporalFieldRootSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+    /** @default PickersOutlinedInput; follows `variant` for standard and filled fields. */
+    input: SlotProps<typeof PickersOutlinedInput, VireoFormTemporalFieldInputSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+    /** @default 'input' */
+    htmlInput: SlotProps<"input", VireoFormTemporalFieldHtmlInputSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+    /** @default FormHelperText */
+    formHelperText: SlotProps<typeof FormHelperText, VireoFormTemporalFieldFormHelperTextSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+    /** @default IconButton */
+    openPickerButton: SlotProps<typeof IconButton, VireoFormTemporalFieldOpenPickerButtonSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+    /** @default CalendarIcon */
+    openPickerIcon: SlotProps<typeof SvgIcon, VireoFormTemporalFieldOpenPickerIconSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+    /** @default IconButton */
+    clearButton: SlotProps<typeof IconButton, VireoFormTemporalFieldClearButtonSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+    /** @default ClearIcon */
+    clearIcon: SlotProps<typeof SvgIcon, VireoFormTemporalFieldClearIconSlotPropsOverrides, VireoFormTemporalFieldOwnerState>;
+}>;
+type VireoOwnedPickerProp = "ampm" | "defaultValue" | "format" | "inputRef" | "maxDate" | "maxDateTime" | "maxTime" | "minDate" | "minDateTime" | "minTime" | "minutesStep" | "onAccept" | "onChange" | "onClose" | "onError" | "onOpen" | "openTo" | "readOnly" | "timeSteps" | "timezone" | "value" | "views";
+export type VireoFormTemporalFieldDatePickerProps = Omit<DatePickerProps, VireoOwnedPickerProp>;
+export type VireoFormTemporalFieldTimePickerProps = Omit<TimePickerProps, VireoOwnedPickerProp>;
+export type VireoFormTemporalFieldDateTimePickerProps = Omit<DateTimePickerProps, VireoOwnedPickerProp>;
+type VireoFormTemporalFieldCommonProps = VireoFormTemporalFieldSlotsAndSlotProps & {
+    classes?: Partial<VireoFormTemporalFieldClasses>;
+    disabled?: boolean;
+    error?: boolean;
+    errorDisplay?: VireoFormErrorDisplay;
+    formatError?: VireoFormErrorFormatter;
+    /** @default true */
+    fullWidth?: boolean;
+    /** Defaults to a reserved line; pass `null` to remove it. @default ' ' */
+    helperText?: React.ReactNode;
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Inclusive canonical lower bound matching the selected mode. */
+    min?: string;
+    /** Inclusive canonical upper bound matching the selected mode. */
+    max?: string;
+    /** Called when focus leaves MUI X's accessible segmented input group. */
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onValueChange?: (value: VireoFormTemporalFieldValue) => void;
+    /** Canonical value used only to choose initial picker focus when the bound value is null. */
+    referenceValue?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    /** @default true */
+    clearable?: boolean;
+    /** Accessible label for the clear action. @default 'Clear temporal value' */
+    clearLabel?: string;
+    variant?: TextFieldProps["variant"];
+};
+export type VireoFormTemporalFieldModeProps = {
+    mode: "year";
+    openTo?: "year";
+    pickerProps?: VireoFormTemporalFieldDatePickerProps;
+    ampm?: never;
+    precision?: never;
+    minuteStep?: never;
+    secondStep?: never;
+} | {
+    mode: "month";
+    openTo?: "month";
+    pickerProps?: VireoFormTemporalFieldDatePickerProps;
+    ampm?: never;
+    precision?: never;
+    minuteStep?: never;
+    secondStep?: never;
+} | {
+    mode: "year-month";
+    openTo?: "year" | "month";
+    pickerProps?: VireoFormTemporalFieldDatePickerProps;
+    ampm?: never;
+    precision?: never;
+    minuteStep?: never;
+    secondStep?: never;
+} | {
+    mode: "date";
+    openTo?: "year" | "month" | "day";
+    pickerProps?: VireoFormTemporalFieldDatePickerProps;
+    ampm?: never;
+    precision?: never;
+    minuteStep?: never;
+    secondStep?: never;
+} | {
+    mode: "time";
+    openTo?: "hours" | "minutes" | "seconds";
+    pickerProps?: VireoFormTemporalFieldTimePickerProps;
+    /** @default false */
+    ampm?: boolean;
+    /** @default 'minute' */
+    precision?: VireoFormTemporalFieldPrecision;
+    /** @default 1 */
+    minuteStep?: number;
+    /** @default 1 */
+    secondStep?: number;
+} | {
+    mode: "date-time";
+    openTo?: "year" | "month" | "day" | "hours" | "minutes" | "seconds";
+    pickerProps?: VireoFormTemporalFieldDateTimePickerProps;
+    /** @default false */
+    ampm?: boolean;
+    /** @default 'minute' */
+    precision?: VireoFormTemporalFieldPrecision;
+    /** @default 1 */
+    minuteStep?: number;
+    /** @default 1 */
+    secondStep?: number;
+};
+/** Props owned by the bound temporal form field. The field name and value remain owned by `form.Field`. */
+export type VireoFormTemporalFieldOwnProps = VireoFormTemporalFieldCommonProps & VireoFormTemporalFieldModeProps;
+/** Props VireoFormTemporalField inherits from its default root after excluding component-owned props. */
+export type VireoFormTemporalFieldInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "defaultValue" | "onChange" | "onError" | "value">;
+/** Props accepted by `field.TemporalField`. */
+export type VireoFormTemporalFieldProps = VireoFormTemporalFieldOwnProps & VireoFormTemporalFieldInheritedProps;
+export type VireoFormTemporalFieldPickerError = DateValidationError | TimeValidationError | DateTimeValidationError;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_FORM_TEMPORAL_FIELD_NAME]?: VireoThemeComponent<VireoFormTemporalFieldProps, VireoFormTemporalFieldClassKey, VireoFormTemporalFieldOwnerState, Theme>;
+    }
+}
+export {};

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

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