ropav 0.2.0 → 0.3.0

package/dist/components/date-field/date-field-root.js

@@ -0,0 +1,175 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { provideFieldIdsContext } from "../../composables/use-field-ids.js";
+import { provideFieldErrorContext } from "../field-error/field-error.context.js";
+import { provideDateFieldControlContext, provideDateInputGroupOwnerContext } from "../date-input-group/date-input-group.context.js";
+import { useDateField } from "../../composables/use-date-field.js";
+import { useDateFieldState } from "../../composables/use-date-field-state.js";
+import date_input_group_hidden_input_default from "../date-input-group/date-input-group-hidden-input.js";
+import { computed, createComponent, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, shallowRef, template, unref } from "vue";
+import { dateFieldVariants } from "@ropav/styles";
+import { createCalendar } from "@internationalized/date";
+//#region src/components/date-field/date-field-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=date-field>");
+var date_field_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "date-field-root",
+	props: {
+		class: {},
+		id: {},
+		value: {},
+		defaultValue: {},
+		placeholderValue: {},
+		minValue: {},
+		maxValue: {},
+		isDateUnavailable: {},
+		granularity: {},
+		maxGranularity: {},
+		hourCycle: {},
+		hideTimeZone: {
+			type: Boolean,
+			default: void 0
+		},
+		shouldForceLeadingZeros: {
+			type: Boolean,
+			default: void 0
+		},
+		fullWidth: {
+			type: Boolean,
+			default: void 0
+		},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: void 0
+		},
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
+		isInvalid: {
+			type: Boolean,
+			default: void 0
+		},
+		validate: {},
+		validationBehavior: {},
+		name: {},
+		form: {},
+		autoComplete: {},
+		autoFocus: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {},
+		locale: {},
+		createCalendar: {}
+	},
+	emits: [
+		"change",
+		"update:value",
+		"focusChange"
+	],
+	__multiRoot: true,
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const element = shallowRef(null);
+		const inputElement = shallowRef(null);
+		const state = useDateFieldState({
+			createCalendar: (identifier) => (props.createCalendar ?? createCalendar)(identifier),
+			defaultValue: () => props.defaultValue,
+			granularity: () => props.granularity,
+			hideTimeZone: () => props.hideTimeZone,
+			hourCycle: () => props.hourCycle,
+			isDateUnavailable: props.isDateUnavailable,
+			isDisabled: () => props.isDisabled,
+			isInvalid: () => props.isInvalid,
+			isReadOnly: () => props.isReadOnly,
+			isRequired: () => props.isRequired,
+			locale: () => props.locale,
+			maxGranularity: () => props.maxGranularity,
+			maxValue: () => props.maxValue,
+			minValue: () => props.minValue,
+			name: () => props.name,
+			onChange: (value) => {
+				emit("change", value);
+				emit("update:value", value);
+			},
+			placeholderValue: () => props.placeholderValue,
+			shouldForceLeadingZeros: () => props.shouldForceLeadingZeros,
+			validate: props.validate,
+			validationBehavior: () => props.validationBehavior,
+			value: () => props.value
+		});
+		const field = useDateField({
+			ariaDescribedBy: () => props.ariaDescribedby,
+			ariaLabel: () => props.ariaLabel,
+			ariaLabelledBy: () => props.ariaLabelledby,
+			autoFocus: () => props.autoFocus,
+			element,
+			form: () => props.form,
+			id: () => props.id,
+			inputElement,
+			isDisabled: () => props.isDisabled,
+			isRequired: () => props.isRequired,
+			name: () => props.name,
+			onFocusChange: (isFocused) => emit("focusChange", isFocused),
+			state
+		});
+		provideFieldIdsContext(field.fieldIds);
+		const control = {
+			field,
+			setElement: (next) => {
+				element.value = next;
+			},
+			setInputElement: (next) => {
+				inputElement.value = next;
+			},
+			state
+		};
+		provideDateFieldControlContext({ resolve: () => control });
+		provideDateInputGroupOwnerContext({
+			attrs: computed(() => ({ "aria-disabled": state.isDisabled.value || void 0 })),
+			handlers: {
+				...field.handlers,
+				onFocusin: field.onFocusin,
+				onFocusout: field.onFocusout,
+				onKeydown: field.onKeydown
+			},
+			isDisabled: state.isDisabled,
+			isInvalid: field.isInvalid,
+			setElement: () => {}
+		});
+		provideFieldErrorContext({ validation: state.displayValidation });
+		const styles = computed(() => dateFieldVariants({
+			class: props.class,
+			fullWidth: props.fullWidth
+		}));
+		const n1 = t0();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			const _state = unref(state);
+			setClass(n1, styles.value);
+			setAttr(n1, "data-disabled", _dataAttr(_state.isDisabled.value));
+			setAttr(n1, "data-invalid", _dataAttr(unref(field).isInvalid.value));
+			setAttr(n1, "data-readonly", _dataAttr(_state.isReadOnly.value));
+			setAttr(n1, "data-required", _dataAttr(_state.isRequired.value));
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isDisabled: () => unref(state).isDisabled.value,
+			isInvalid: () => unref(field).isInvalid.value,
+			isReadOnly: () => unref(state).isReadOnly.value,
+			isRequired: () => unref(state).isRequired.value
+		});
+		return [n1, createComponent(date_input_group_hidden_input_default, {
+			autocomplete: () => props.autoComplete,
+			name: () => props.name
+		})];
+	}
+});
+//#endregion
+export { date_field_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/date-field/date-field-root.vue.d.vue.ts

@@ -0,0 +1,26 @@
+import type { DateFieldRootProps, DateFieldRootSlotProps } from "./date-field.types";
+import type { DateValue } from "@internationalized/date";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<DateFieldRootProps & {
+        onChange?: ((value: DateValue | null) => any) | undefined;
+        onFocusChange?: ((isFocused: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: DateValue | null) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: DateFieldRootSlotProps) => unknown;
+    };
+    emit: ((evt: "change", value: DateValue | null) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "update:value", value: DateValue | null) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/date-field/date-field.types.d.ts

@@ -0,0 +1,69 @@
+import type { ValidationBehavior } from "../../composables/use-form-validation-state";
+import type { Granularity, MaxGranularity } from "../../utils/date-format";
+import type { Calendar, CalendarIdentifier, DateValue } from "@internationalized/date";
+export interface DateFieldRootProps {
+    class?: string;
+    /** Id for the group around the segments, which is what a label points at. */
+    id?: string;
+    /** The date the field shows. Set this and the caller owns the value. */
+    value?: DateValue | null;
+    /** The date the field starts with while it owns its own value. */
+    defaultValue?: DateValue | null;
+    /**
+     * A date whose shape the placeholder follows, which is how a field can ask for a time before
+     * anything is typed. Defaults to today.
+     */
+    placeholderValue?: DateValue | null;
+    minValue?: DateValue | null;
+    maxValue?: DateValue | null;
+    /**
+     * Rules a date out even though it is inside the range.
+     *
+     * A prop rather than an emit: the field calls it while validating, and an emit has no answer to
+     * give back.
+     */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /** The smallest part of a date the field shows. Taken from the value when unset. */
+    granularity?: Granularity;
+    /** The largest part of a date the field shows. @default "year" */
+    maxGranularity?: MaxGranularity;
+    /** Whether to show a 12 or 24 hour clock. Taken from the locale when unset. */
+    hourCycle?: 12 | 24;
+    /** Whether the time zone abbreviation is hidden. */
+    hideTimeZone?: boolean;
+    /** Whether numbers are always padded to two digits. Taken from the locale when unset. */
+    shouldForceLeadingZeros?: boolean;
+    /** Whether the field stretches to fill its container. */
+    fullWidth?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    /** Whether the field reads as invalid regardless of what it holds. */
+    isInvalid?: boolean;
+    /** Extra rule the value has to satisfy, beyond the range. */
+    validate?: (value: DateValue | null) => string | string[] | true | null | undefined;
+    /** Whether errors go through the browser or through ARIA alone. @default "native" */
+    validationBehavior?: ValidationBehavior;
+    /** Name the value is submitted under. */
+    name?: string;
+    /** Id of the form the value belongs to, when it is not an ancestor. */
+    form?: string;
+    /** What the browser may offer to autofill. */
+    autoComplete?: string;
+    /** Whether the first segment takes focus as the field appears. */
+    autoFocus?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    /** Overrides the locale in force, for a field that must not follow its surroundings. */
+    locale?: string;
+    /** Builds the calendar system for an identifier. Injectable so a build can ship fewer of them. */
+    createCalendar?: (identifier: CalendarIdentifier) => Calendar;
+}
+/** State the root hands to its slot, matching React's render props. */
+export interface DateFieldRootSlotProps {
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isReadOnly: boolean;
+    isRequired: boolean;
+}

package/dist/components/date-field/index.d.ts

@@ -0,0 +1,246 @@
+import { DateInputGroupInput, DateInputGroupInputContainer, DateInputGroupPrefix, DateInputGroupRoot, DateInputGroupSegment, DateInputGroupSuffix } from "../date-input-group";
+import DateFieldRoot from "./date-field-root.vue";
+export declare const DateField: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: (props: import("./date-field.types").DateFieldRootSlotProps) => unknown;
+    };
+    emit: ((evt: "change", value: import("@internationalized/date").DateValue | null) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "update:value", value: import("@internationalized/date").DateValue | null) => void);
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        id?: string;
+        value?: import("@internationalized/date").DateValue | null;
+        defaultValue?: import("@internationalized/date").DateValue | null;
+        placeholderValue?: import("@internationalized/date").DateValue | null;
+        minValue?: import("@internationalized/date").DateValue | null;
+        maxValue?: import("@internationalized/date").DateValue | null;
+        isDateUnavailable?: (date: import("@internationalized/date").DateValue) => boolean;
+        granularity?: import("../..").Granularity;
+        maxGranularity?: import("../..").MaxGranularity;
+        hourCycle?: 12 | 24;
+        hideTimeZone?: boolean;
+        shouldForceLeadingZeros?: boolean;
+        fullWidth?: boolean;
+        isDisabled?: boolean;
+        isReadOnly?: boolean;
+        isRequired?: boolean;
+        isInvalid?: boolean;
+        validate?: (value: import("@internationalized/date").DateValue | null) => string | string[] | true | null | undefined;
+        validationBehavior?: import("../..").ValidationBehavior;
+        name?: string;
+        form?: string;
+        autoComplete?: string;
+        autoFocus?: boolean;
+        ariaLabel?: string;
+        ariaLabelledby?: string;
+        ariaDescribedby?: string;
+        locale?: string;
+        createCalendar?: (identifier: import("@internationalized/date").CalendarIdentifier) => import("@internationalized/date").Calendar;
+        onChange?: ((value: import("@internationalized/date").DateValue | null) => any) | undefined;
+        onFocusChange?: ((isFocused: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: import("@internationalized/date").DateValue | null) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: import("./date-field.types").DateFieldRootSlotProps) => unknown;
+    };
+    emit: ((evt: "change", value: import("@internationalized/date").DateValue | null) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "update:value", value: import("@internationalized/date").DateValue | null) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Group: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import(".").DateFieldGroupSlotProps) => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            variant?: import("@ropav/styles").DateInputGroupVariants["variant"];
+            fullWidth?: boolean;
+            isDisabled?: boolean;
+            isInvalid?: boolean;
+            isReadOnly?: boolean;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import(".").DateFieldGroupSlotProps) => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Input: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import(".").DateFieldInputSlotProps) => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            slot?: "start" | "end";
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import(".").DateFieldInputSlotProps) => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    InputContainer: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Prefix: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./date-field.types").DateFieldRootSlotProps) => unknown;
+        };
+        emit: ((evt: "change", value: import("@internationalized/date").DateValue | null) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "update:value", value: import("@internationalized/date").DateValue | null) => void);
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            id?: string;
+            value?: import("@internationalized/date").DateValue | null;
+            defaultValue?: import("@internationalized/date").DateValue | null;
+            placeholderValue?: import("@internationalized/date").DateValue | null;
+            minValue?: import("@internationalized/date").DateValue | null;
+            maxValue?: import("@internationalized/date").DateValue | null;
+            isDateUnavailable?: (date: import("@internationalized/date").DateValue) => boolean;
+            granularity?: import("../..").Granularity;
+            maxGranularity?: import("../..").MaxGranularity;
+            hourCycle?: 12 | 24;
+            hideTimeZone?: boolean;
+            shouldForceLeadingZeros?: boolean;
+            fullWidth?: boolean;
+            isDisabled?: boolean;
+            isReadOnly?: boolean;
+            isRequired?: boolean;
+            isInvalid?: boolean;
+            validate?: (value: import("@internationalized/date").DateValue | null) => string | string[] | true | null | undefined;
+            validationBehavior?: import("../..").ValidationBehavior;
+            name?: string;
+            form?: string;
+            autoComplete?: string;
+            autoFocus?: boolean;
+            ariaLabel?: string;
+            ariaLabelledby?: string;
+            ariaDescribedby?: string;
+            locale?: string;
+            createCalendar?: (identifier: import("@internationalized/date").CalendarIdentifier) => import("@internationalized/date").Calendar;
+            onChange?: ((value: import("@internationalized/date").DateValue | null) => any) | undefined;
+            onFocusChange?: ((isFocused: boolean) => any) | undefined;
+            "onUpdate:value"?: ((value: import("@internationalized/date").DateValue | null) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./date-field.types").DateFieldRootSlotProps) => unknown;
+        };
+        emit: ((evt: "change", value: import("@internationalized/date").DateValue | null) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "update:value", value: import("@internationalized/date").DateValue | null) => void);
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Segment: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            segment: import("../..").DateSegment;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Suffix: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: {}) => any;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { DateInputGroupInput as DateFieldInput, DateInputGroupInputContainer as DateFieldInputContainer, DateInputGroupPrefix as DateFieldPrefix, DateInputGroupRoot as DateFieldGroup, DateInputGroupSegment as DateFieldSegment, DateInputGroupSuffix as DateFieldSuffix, };
+export { DateFieldRoot };
+export type { DateFieldRootProps, DateFieldRootProps as DateFieldProps, DateFieldRootSlotProps, } from "./date-field.types";
+export type { DateInputGroupInputContainerProps as DateFieldInputContainerProps, DateInputGroupInputProps as DateFieldInputProps, DateInputGroupInputSlotProps as DateFieldInputSlotProps, DateInputGroupPrefixProps as DateFieldPrefixProps, DateInputGroupRootProps as DateFieldGroupProps, DateInputGroupRootSlotProps as DateFieldGroupSlotProps, DateInputGroupSegmentProps as DateFieldSegmentProps, DateInputGroupSuffixProps as DateFieldSuffixProps, } from "../date-input-group";
+export { dateFieldVariants, dateInputGroupVariants } from "@ropav/styles";
+export type { DateFieldVariants, DateInputGroupVariants } from "@ropav/styles";

package/dist/components/date-field/index.js

@@ -0,0 +1,20 @@
+import date_input_group_input_container_default from "../date-input-group/date-input-group-input-container.js";
+import date_input_group_input_default from "../date-input-group/date-input-group-input.js";
+import date_input_group_prefix_default from "../date-input-group/date-input-group-prefix.js";
+import date_input_group_root_default from "../date-input-group/date-input-group-root.js";
+import date_input_group_segment_default from "../date-input-group/date-input-group-segment.js";
+import date_input_group_suffix_default from "../date-input-group/date-input-group-suffix.js";
+import date_field_root_default from "./date-field-root.js";
+import { dateFieldVariants, dateInputGroupVariants } from "@ropav/styles";
+//#region src/components/date-field/index.ts
+var DateField = Object.assign(date_field_root_default, {
+	Group: date_input_group_root_default,
+	Input: date_input_group_input_default,
+	InputContainer: date_input_group_input_container_default,
+	Prefix: date_input_group_prefix_default,
+	Root: date_field_root_default,
+	Segment: date_input_group_segment_default,
+	Suffix: date_input_group_suffix_default
+});
+//#endregion
+export { DateField, date_input_group_root_default as DateFieldGroup, date_input_group_input_default as DateFieldInput, date_input_group_input_container_default as DateFieldInputContainer, date_input_group_prefix_default as DateFieldPrefix, date_field_root_default as DateFieldRoot, date_input_group_segment_default as DateFieldSegment, date_input_group_suffix_default as DateFieldSuffix, dateFieldVariants, dateInputGroupVariants };

package/dist/components/date-input-group/date-input-group-hidden-input.js

@@ -0,0 +1,88 @@
+import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
+import { useDateFieldControlContext } from "./date-input-group.context.js";
+import { child, computed, defineVaporComponent, on, renderEffect, setProp, setStyle, setValue, template, unref } from "vue";
+import { parseDate, parseDateTime, toCalendarDate, toCalendarDateTime, toLocalTimeZone } from "@internationalized/date";
+//#region src/components/date-input-group/date-input-group-hidden-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div aria-hidden=true data-a11y-ignore=aria-hidden-focus><input form tabindex=-1>", 1);
+/**
+* A native date input, out of sight, so the browser can autofill the field.
+*
+* Ported from `react-aria-components`' `HiddenDateInput`. Nothing else here is a control the
+* browser recognises as a date, so without this a password manager or an autofill suggestion has
+* nothing to fill in. Its `form` is deliberately empty, so what it holds is never submitted — the
+* field's own hidden input is what a form reads.
+*/
+var date_input_group_hidden_input_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "date-input-group-hidden-input",
+	props: {
+		autocomplete: {},
+		name: {}
+	},
+	setup(__props) {
+		const { state } = useDateFieldControlContext().resolve();
+		const props = __props;
+		/** Fixed rather than absolute, so the input cannot add scroll to the page. */
+		const style = {
+			...visuallyHiddenStyle,
+			left: 0,
+			position: "fixed",
+			top: 0
+		};
+		const step = computed(() => {
+			if (state.granularity.value === "second") return 1;
+			if (state.granularity.value === "hour") return 3600;
+			return 60;
+		});
+		const type = computed(() => state.granularity.value === "day" ? "date" : "datetime-local");
+		const value = computed(() => {
+			const current = state.value.value;
+			if (!current) return "";
+			if (state.granularity.value === "day") return toCalendarDate(current).toString();
+			return toCalendarDateTime("timeZone" in current ? toLocalTimeZone(current) : current).toString();
+		});
+		/** Which time segments the value carries, so only those are written back. */
+		const TIME_SEGMENTS = [
+			"hour",
+			"minute",
+			"second"
+		];
+		const DATE_SEGMENTS = [
+			"day",
+			"month",
+			"year"
+		];
+		const GRANULARITY_DEPTH = {
+			hour: 1,
+			minute: 2,
+			second: 3
+		};
+		const onChange = (event) => {
+			const text = event.target.value;
+			if (!text) return;
+			const granularity = state.granularity.value;
+			const times = TIME_SEGMENTS.slice(0, granularity === "day" ? 0 : GRANULARITY_DEPTH[granularity]);
+			try {
+				const parsed = granularity === "day" ? parseDate(text) : parseDateTime(text);
+				for (const segment of DATE_SEGMENTS) if (segment in parsed) state.setSegment(segment, parsed[segment]);
+				for (const segment of times) if (segment in parsed) state.setSegment(segment, parsed[segment]);
+				state.setValue(parsed);
+			} catch {}
+		};
+		const n1 = t0();
+		const n0 = child(n1);
+		on(n0, "change", onChange);
+		renderEffect(() => {
+			const _props = props;
+			setStyle(n1, style);
+			setProp(n0, "autocomplete", _props.autocomplete);
+			setProp(n0, "disabled", unref(state).isDisabled.value || void 0);
+			setProp(n0, "name", _props.name);
+			setProp(n0, "step", step.value);
+			setProp(n0, "type", type.value);
+			setValue(n0, value.value);
+		});
+		return n1;
+	}
+});
+//#endregion
+export { date_input_group_hidden_input_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/date-input-group/date-input-group-hidden-input.vue.d.vue.ts

@@ -0,0 +1,22 @@
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        /** What kind of value the browser may offer to fill in. */
+        autocomplete?: string;
+        name?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/date-input-group/date-input-group-input-container.js

@@ -0,0 +1,20 @@
+import { useDateInputGroupContext } from "./date-input-group.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+//#region src/components/date-input-group/date-input-group-input-container.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=date-input-group-input-container>", 1);
+var date_input_group_input_container_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "date-input-group-input-container",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const group = useDateInputGroupContext();
+		const styles = computed(() => group?.slots.value.inputContainer({ class: props.class }) ?? props.class);
+		const n1 = t0();
+		renderEffect(() => setClass(n1, styles.value));
+		setInsertionState(n1);
+		createSlot();
+		return n1;
+	}
+});
+//#endregion
+export { date_input_group_input_container_vue_vue_type_script_setup_true_vapor_true_lang_default as default };