@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/datepicker/DatepickerClear.vue.d.ts

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    open: boolean;
+    mode: import("../calendar/use-calendar.ts").CalendarSelectionMode;
+    view: import("../calendar/use-calendar.ts").CalendarView;
+    month: number;
+    year: number;
+    monthLabel: string;
+    yearLabel: string;
+    selected: Date[];
+    selecting: boolean;
+    empty: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/datepicker/DatepickerClear.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useDatepickerContext } from "./DatepickerRoot.vue_vue_type_script_setup_true_lang.js";
+import { computed, createBlock, createCommentVNode, createTextVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/datepicker/DatepickerClear.vue?vue&type=script&setup=true&lang.ts
+var DatepickerClear_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DatepickerClear",
+	inheritAttrs: false,
+	__name: "DatepickerClear",
+	props: { as: { default: "button" } },
+	setup(__props) {
+		const props = __props;
+		const { clearProps, state } = useDatepickerContext();
+		const merged = usePartProps(clearProps);
+		const shown = computed(() => !state.value.empty && !state.value.disabled && !state.value.readOnly);
+		return (_ctx, _cache) => {
+			return shown.value ? (openBlock(), createBlock(unref(Part), mergeProps({
+				key: 0,
+				as: props.as
+			}, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))), () => [_cache[0] || (_cache[0] = createTextVNode("×", -1))])]),
+				_: 3
+			}, 16, ["as"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { DatepickerClear_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/datepicker/DatepickerRoot.js

@@ -0,0 +1,5 @@
+import DatepickerRoot_vue_vue_type_script_setup_true_lang_default, { provideDatepickerContext, useDatepickerContext } from "./DatepickerRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/datepicker/DatepickerRoot.vue
+var DatepickerRoot_default = DatepickerRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DatepickerRoot_default as default, provideDatepickerContext, useDatepickerContext };

package/dist/components/datepicker/DatepickerRoot.vue.d.ts

@@ -0,0 +1,191 @@
+import { type DateInput, type DatePresetKey, type WeekDay } from '@vunset/utils';
+import { type CalendarModelModifiers, type CalendarModelValue, type CalendarPresetsInput, type CalendarSelectionMode, type CalendarValue, type CalendarValueInput } from '../calendar/use-calendar';
+import type { Align, Side } from '../../shared/use-positioning';
+import type { ComputedRef } from 'vue';
+import type { CalendarState } from '../calendar/use-calendar';
+export interface DatepickerState extends CalendarState {
+    /**
+     * Whether the popup is open.
+     * @attribute `data-open` while open
+     */
+    open: boolean;
+}
+export interface DatepickerContext {
+    state: ComputedRef<DatepickerState>;
+    triggerProps: ComputedRef<Record<string, unknown>>;
+    clearProps: ComputedRef<Record<string, unknown>>;
+    /** The value as text, empty while nothing is picked. */
+    text: ComputedRef<string>;
+    hooks: ComputedRef<Record<string, string>>;
+}
+export declare const provideDatepickerContext: (value: DatepickerContext) => DatepickerContext, useDatepickerContext: () => DatepickerContext;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The selection, bound with `v-model`: a date, a `[start, end]` range, or a list of dates. */
+    modelValue?: CalendarValueInput;
+    /** `v-model.iso` emits `YYYY-MM-DD` strings; `.safe` steps today back while UTC is still on yesterday. */
+    modelModifiers?: CalendarModelModifiers;
+    /** The selection at first, when no `v-model` owns it. */
+    defaultValue?: CalendarValueInput;
+    /** Picks one day, a range from one day to another, or any number of days. */
+    mode?: CalendarSelectionMode;
+    /** Which month opens when nothing is selected to open on. */
+    defaultMonth?: DateInput;
+    /** The earliest day that can be picked. */
+    min?: DateInput;
+    /** The latest day that can be picked. */
+    max?: DateInput;
+    /** Nothing after today can be picked; the earlier of the two with `max`. */
+    maxToday?: boolean;
+    /** Individual days to rule out. */
+    disabledDates?: DateInput[];
+    /** Rules out days a list cannot express — every weekend, every holiday. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** The day each week starts on. `0` is Sunday. Defaults to the locale's. */
+    firstDayOfWeek?: WeekDay;
+    /** Always draw six rows, so the popup keeps its height month to month. */
+    fixedWeeks?: boolean;
+    /** Names the months and weekdays, and writes the value. @default 'en-US' for the value */
+    locale?: Intl.LocalesArgument;
+    /** The presets `CalendarPresets` offers: `base` (the six rolling ranges), `all` (adds this year and the quarters), or a list of keys, custom ones and groups. */
+    presets?: CalendarPresetsInput;
+    /** A preset whose days are the starting value, used while the value is empty. A bound `v-model` receives them. */
+    preset?: DatePresetKey | (string & {});
+    /** Whether the rolling presets end today rather than yesterday. */
+    includeToday?: boolean;
+    /** Whether the popup is open, bound with `v-model:open`. */
+    open?: boolean;
+    /** Whether a complete pick closes the popup. Defaults to on, except for `multiple`. */
+    closeOnSelect?: boolean;
+    /** Which side of the trigger the popup prefers. */
+    side?: Side;
+    /** How the popup lines up along that side. */
+    align?: Align;
+    /** The gap between the trigger and the popup, in pixels. */
+    sideOffset?: number;
+    /** Ignores interaction. Inside a `FieldRoot`, follows the field. */
+    disabled?: boolean;
+    /** Shows the value but opens nothing. Inside a `FieldRoot`, follows the field. */
+    readOnly?: boolean;
+    /** A day must be picked. Announced and styled, not enforced. Inside a `FieldRoot`, follows the field. */
+    required?: boolean;
+    /** Marks the value invalid, for styling through `data-invalid`. Inside a `FieldRoot`, follows the field. */
+    invalid?: boolean;
+    /** Submits each picked day as `YYYY-MM-DD` under this name. Inside a `FieldRoot`, the field's name. */
+    name?: string;
+    /** The id of a `<form>` to submit with, when the datepicker sits outside it. */
+    form?: string;
+    /** Element or component to render. */
+    as?: string | object;
+}, {
+    value: import("vue").WritableComputedRef<CalendarValue, CalendarValue>;
+    open: import("vue").WritableComputedRef<boolean, boolean>;
+    state: ComputedRef<DatepickerState>;
+    clear: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CalendarModelValue | undefined) => any;
+    "update:open": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The selection, bound with `v-model`: a date, a `[start, end]` range, or a list of dates. */
+    modelValue?: CalendarValueInput;
+    /** `v-model.iso` emits `YYYY-MM-DD` strings; `.safe` steps today back while UTC is still on yesterday. */
+    modelModifiers?: CalendarModelModifiers;
+    /** The selection at first, when no `v-model` owns it. */
+    defaultValue?: CalendarValueInput;
+    /** Picks one day, a range from one day to another, or any number of days. */
+    mode?: CalendarSelectionMode;
+    /** Which month opens when nothing is selected to open on. */
+    defaultMonth?: DateInput;
+    /** The earliest day that can be picked. */
+    min?: DateInput;
+    /** The latest day that can be picked. */
+    max?: DateInput;
+    /** Nothing after today can be picked; the earlier of the two with `max`. */
+    maxToday?: boolean;
+    /** Individual days to rule out. */
+    disabledDates?: DateInput[];
+    /** Rules out days a list cannot express — every weekend, every holiday. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** The day each week starts on. `0` is Sunday. Defaults to the locale's. */
+    firstDayOfWeek?: WeekDay;
+    /** Always draw six rows, so the popup keeps its height month to month. */
+    fixedWeeks?: boolean;
+    /** Names the months and weekdays, and writes the value. @default 'en-US' for the value */
+    locale?: Intl.LocalesArgument;
+    /** The presets `CalendarPresets` offers: `base` (the six rolling ranges), `all` (adds this year and the quarters), or a list of keys, custom ones and groups. */
+    presets?: CalendarPresetsInput;
+    /** A preset whose days are the starting value, used while the value is empty. A bound `v-model` receives them. */
+    preset?: DatePresetKey | (string & {});
+    /** Whether the rolling presets end today rather than yesterday. */
+    includeToday?: boolean;
+    /** Whether the popup is open, bound with `v-model:open`. */
+    open?: boolean;
+    /** Whether a complete pick closes the popup. Defaults to on, except for `multiple`. */
+    closeOnSelect?: boolean;
+    /** Which side of the trigger the popup prefers. */
+    side?: Side;
+    /** How the popup lines up along that side. */
+    align?: Align;
+    /** The gap between the trigger and the popup, in pixels. */
+    sideOffset?: number;
+    /** Ignores interaction. Inside a `FieldRoot`, follows the field. */
+    disabled?: boolean;
+    /** Shows the value but opens nothing. Inside a `FieldRoot`, follows the field. */
+    readOnly?: boolean;
+    /** A day must be picked. Announced and styled, not enforced. Inside a `FieldRoot`, follows the field. */
+    required?: boolean;
+    /** Marks the value invalid, for styling through `data-invalid`. Inside a `FieldRoot`, follows the field. */
+    invalid?: boolean;
+    /** Submits each picked day as `YYYY-MM-DD` under this name. Inside a `FieldRoot`, the field's name. */
+    name?: string;
+    /** The id of a `<form>` to submit with, when the datepicker sits outside it. */
+    form?: string;
+    /** Element or component to render. */
+    as?: string | object;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CalendarModelValue | undefined) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+    required: boolean;
+    invalid: boolean;
+    mode: CalendarSelectionMode;
+    side: Side;
+    as: string | object;
+    disabled: boolean;
+    open: boolean;
+    align: Align;
+    readOnly: boolean;
+    sideOffset: number;
+    closeOnSelect: boolean;
+    maxToday: boolean;
+    firstDayOfWeek: WeekDay;
+    fixedWeeks: boolean;
+    includeToday: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        /**
+         * Whether the popup is open.
+         * @attribute `data-open` while open
+         */
+        open: boolean;
+        mode: CalendarSelectionMode;
+        view: import("../..").CalendarView;
+        month: number;
+        year: number;
+        monthLabel: string;
+        yearLabel: string;
+        selected: Date[];
+        selecting: boolean;
+        empty: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        required: boolean;
+        invalid: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/datepicker/DatepickerRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,258 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { createContext } from "../../shared/context.js";
+import { useOptionalFieldContext } from "../../shared/use-field.js";
+import { applyModelModifiers } from "../../shared/model-modifiers.js";
+import { provideSurface } from "../../shared/surface.js";
+import { usePopover } from "../popover/use-popover.js";
+import { provideCalendarContext, serializeCalendarValue, useCalendar } from "../calendar/use-calendar.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderList, renderSlot, unref, useAttrs, useId, watch, withCtx } from "vue";
+import { formatDate, formatDateRange } from "@vunset/utils";
+//#region src/components/datepicker/DatepickerRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"name",
+	"value",
+	"form"
+];
+var { provideContext: provideDatepickerContext, useContext: useDatepickerContext } = createContext("Datepicker");
+var DatepickerRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DatepickerRoot",
+	inheritAttrs: false,
+	__name: "DatepickerRoot",
+	props: {
+		modelValue: {},
+		modelModifiers: {},
+		defaultValue: {},
+		mode: { default: "single" },
+		defaultMonth: {},
+		min: {},
+		max: {},
+		maxToday: {
+			type: Boolean,
+			default: false
+		},
+		disabledDates: {},
+		isDateDisabled: {},
+		firstDayOfWeek: { default: void 0 },
+		fixedWeeks: {
+			type: Boolean,
+			default: true
+		},
+		locale: {},
+		presets: {},
+		preset: {},
+		includeToday: {
+			type: Boolean,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: void 0
+		},
+		side: { default: "bottom" },
+		align: { default: "start" },
+		sideOffset: { default: 8 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		form: {},
+		as: { default: "div" }
+	},
+	emits: ["update:modelValue", "update:open"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const field = useOptionalFieldContext();
+		const generatedId = useId();
+		const closeOnSelect = () => props.closeOnSelect ?? props.mode !== "multiple";
+		const popover = usePopover({
+			open: () => props.open,
+			side: () => props.side,
+			align: () => props.align,
+			sideOffset: () => props.sideOffset,
+			onChange: (open) => emit("update:open", open)
+		});
+		const calendar = useCalendar({
+			mode: () => props.mode,
+			value: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			defaultMonth: () => props.defaultMonth,
+			min: () => props.min,
+			max: () => props.max,
+			maxToday: () => props.maxToday,
+			disabledDates: () => props.disabledDates,
+			isDateDisabled: props.isDateDisabled,
+			firstDayOfWeek: () => props.firstDayOfWeek,
+			fixedWeeks: () => props.fixedWeeks,
+			locale: () => props.locale,
+			presets: () => props.presets,
+			preset: () => props.preset,
+			includeToday: () => props.includeToday,
+			disabled: () => props.disabled,
+			readOnly: () => props.readOnly,
+			required: () => props.required,
+			invalid: () => props.invalid,
+			name: () => props.name,
+			form: () => props.form,
+			autofocusDay: true,
+			onChange(value) {
+				const serialized = serializeCalendarValue(value, props.modelModifiers);
+				emit("update:modelValue", applyModelModifiers(serialized, props.modelModifiers));
+				if (closeOnSelect() && isComplete(value)) popover.open.value = false;
+			}
+		});
+		provideCalendarContext(calendar);
+		function isComplete(value) {
+			return value !== null && !(Array.isArray(value) && value.length === 0);
+		}
+		watch(popover.open, (open) => {
+			if (!open) calendar.completeRange();
+		});
+		const locked = () => calendar.state.value.disabled || calendar.state.value.readOnly;
+		const state = computed(() => ({
+			...calendar.state.value,
+			open: popover.open.value
+		}));
+		const hooks = computed(() => dataAttrs(state.value, {
+			month: () => null,
+			year: () => null,
+			monthLabel: () => null,
+			yearLabel: () => null,
+			selected: () => null,
+			readOnly: (on) => on ? { "data-readonly": "" } : null,
+			open: (on) => on ? { "data-open": "" } : null
+		}));
+		const text = computed(() => {
+			const dates = calendar.state.value.selected;
+			const locale = props.locale;
+			if (!dates.length) return "";
+			if (props.mode === "range") {
+				const [from, to] = [...dates].sort((a, b) => a.getTime() - b.getTime());
+				return to ? formatDateRange(from, to, { locale }) : `${formatDate(from, { locale })} –`;
+			}
+			if (dates.length > 2) return `${dates.length} days`;
+			return dates.map((date) => formatDate(date, { locale })).join(", ");
+		});
+		const triggerEl = ref(null);
+		const popupEl = ref(null);
+		function onFocusout(event) {
+			const next = event.relatedTarget;
+			if (next instanceof Node && (triggerEl.value?.contains(next) || popupEl.value?.contains(next))) return;
+			field?.setFocused(false);
+			field?.setTouched(true);
+		}
+		const triggerId = computed(() => field?.controlId.value ?? generatedId);
+		const triggerProps = computed(() => {
+			const base = popover.triggerProps.value;
+			const baseRef = base.ref;
+			const labelledBy = field?.labelledBy.value;
+			return {
+				...base,
+				...hooks.value,
+				"data-part": "trigger",
+				id: triggerId.value,
+				disabled: calendar.state.value.disabled || void 0,
+				"aria-labelledby": labelledBy ? `${labelledBy} ${triggerId.value}` : void 0,
+				"aria-describedby": field?.describedBy.value,
+				"aria-required": calendar.state.value.required || void 0,
+				"aria-invalid": calendar.state.value.invalid || void 0,
+				ref(el) {
+					baseRef(el);
+					triggerEl.value = el ?? null;
+					field?.setControl(triggerEl.value);
+				},
+				onClick() {
+					if (locked()) return;
+					triggerEl.value?.focus();
+					popover.open.value = !popover.open.value;
+				},
+				onFocusin: () => field?.setFocused(true),
+				onFocusout
+			};
+		});
+		const popupProps = computed(() => {
+			const base = popover.popupProps.value;
+			const baseRef = base.ref;
+			return {
+				...base,
+				"aria-labelledby": base["aria-labelledby"] ?? field?.labelledBy.value,
+				ref(el) {
+					baseRef(el);
+					popupEl.value = el ?? null;
+				},
+				onFocusin: () => field?.setFocused(true),
+				onFocusout
+			};
+		});
+		provideSurface({
+			present: popover.present,
+			state: popover.state,
+			popupProps,
+			positionerProps: popover.positionerProps,
+			arrowProps: popover.arrowProps
+		});
+		provideDatepickerContext({
+			state,
+			triggerProps,
+			clearProps: computed(() => ({
+				...hooks.value,
+				"data-part": "clear",
+				type: "button",
+				"aria-label": "Clear",
+				onClick() {
+					if (locked()) return;
+					calendar.clear();
+					triggerEl.value?.focus();
+				}
+			})),
+			text,
+			hooks
+		});
+		__expose({
+			value: calendar.value,
+			open: popover.open,
+			state,
+			clear: calendar.clear
+		});
+		const attrs = useAttrs();
+		const rootProps = computed(() => mergeProps$1({
+			...hooks.value,
+			"data-part": "datepicker"
+		}, attrs));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, rootProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(state.value))), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(calendar).hiddenInputs.value, (hidden) => {
+					return openBlock(), createElementBlock("input", {
+						key: hidden.value,
+						type: "hidden",
+						name: hidden.name,
+						value: hidden.value,
+						form: hidden.form
+					}, null, 8, _hoisted_1);
+				}), 128))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { DatepickerRoot_vue_vue_type_script_setup_true_lang_default as default, provideDatepickerContext, useDatepickerContext };

package/dist/components/datepicker/DatepickerTrigger.js

@@ -0,0 +1,5 @@
+import DatepickerTrigger_vue_vue_type_script_setup_true_lang_default from "./DatepickerTrigger.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/datepicker/DatepickerTrigger.vue
+var DatepickerTrigger_default = DatepickerTrigger_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DatepickerTrigger_default as default };

package/dist/components/datepicker/DatepickerTrigger.vue.d.ts

@@ -0,0 +1,34 @@
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    open: boolean;
+    mode: import("../calendar/use-calendar.ts").CalendarSelectionMode;
+    view: import("../calendar/use-calendar.ts").CalendarView;
+    month: number;
+    year: number;
+    monthLabel: string;
+    yearLabel: string;
+    selected: Date[];
+    selecting: boolean;
+    empty: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/datepicker/DatepickerTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useDatepickerContext } from "./DatepickerRoot.vue_vue_type_script_setup_true_lang.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/datepicker/DatepickerTrigger.vue?vue&type=script&setup=true&lang.ts
+var DatepickerTrigger_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DatepickerTrigger",
+	inheritAttrs: false,
+	__name: "DatepickerTrigger",
+	props: { as: { default: "button" } },
+	setup(__props) {
+		const props = __props;
+		const { triggerProps, state } = useDatepickerContext();
+		const merged = usePartProps(triggerProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { DatepickerTrigger_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/datepicker/DatepickerValue.js

@@ -0,0 +1,5 @@
+import DatepickerValue_vue_vue_type_script_setup_true_lang_default from "./DatepickerValue.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/datepicker/DatepickerValue.vue
+var DatepickerValue_default = DatepickerValue_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DatepickerValue_default as default };

package/dist/components/datepicker/DatepickerValue.vue.d.ts

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    /** Shown while nothing is picked. */
+    placeholder?: string;
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * The value, to write another way.
+     * @slotOnly The element carries `data-placeholder` while nothing is picked.
+     */
+    default(props: {
+        /** Every picked day, in order. */
+        dates: Date[];
+        /** The value as the part writes it; empty while nothing is picked. */
+        text: string;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/datepicker/DatepickerValue.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useDatepickerContext } from "./DatepickerRoot.vue_vue_type_script_setup_true_lang.js";
+import { computed, createBlock, createTextVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/datepicker/DatepickerValue.vue?vue&type=script&setup=true&lang.ts
+var DatepickerValue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DatepickerValue",
+	inheritAttrs: false,
+	__name: "DatepickerValue",
+	props: {
+		placeholder: {},
+		as: { default: "span" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { state, text, hooks } = useDatepickerContext();
+		const empty = computed(() => state.value.selected.length === 0);
+		const merged = usePartProps(() => ({
+			...hooks.value,
+			"data-part": "value",
+			"data-placeholder": empty.value ? "" : void 0
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					dates: unref(state).selected,
+					text: unref(text)
+				}, () => [createTextVNode(toDisplayString(empty.value ? props.placeholder : unref(text)), 1)])]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { DatepickerValue_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/deferred/Deferred.js

@@ -0,0 +1,5 @@
+import Deferred_vue_vue_type_script_setup_true_lang_default from "./Deferred.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/deferred/Deferred.vue
+var Deferred_default = Deferred_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Deferred_default as default };