@unergy-dev/gandalf 0.0.0-stage → 0.3.0

package/dist/components/gandalf/kit/combobox/Combobox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,342 @@
+import { cn } from "../../../../lib/utils.js";
+import GBadge_default from "../../base/badge/GBadge.js";
+import GButton_default from "../../base/button/GButton.js";
+import GCombobox_default from "../../base/combobox/GCombobox.js";
+import GComboboxAnchor_default from "../../base/combobox/GComboboxAnchor.js";
+import GComboboxInput_default from "../../base/combobox/GComboboxInput.js";
+import GComboboxTrigger_default from "../../base/combobox/GComboboxTrigger.js";
+import { gandalfMenuCheckItemVariants } from "../../base/menu/index.js";
+import GComboboxList_default from "../../base/combobox/GComboboxList.js";
+import GComboboxViewport_default from "../../base/combobox/GComboboxViewport.js";
+import GComboboxItem_default from "../../base/combobox/GComboboxItem.js";
+import GComboboxItemIndicator_default from "../../base/combobox/GComboboxItemIndicator.js";
+import GComboboxEmpty_default from "../../base/combobox/GComboboxEmpty.js";
+import GComboboxGroup_default from "../../base/combobox/GComboboxGroup.js";
+import { gandalfFieldPlaceholderClass, gandalfFieldTriggerClass, gandalfFieldVariants } from "../../base/input/index.js";
+import { flatten, matches, toGroups } from "./options.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, onScopeDispose, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
+import { Check, ChevronsUpDown, LoaderCircle, X } from "lucide-vue-next";
+// src/components/gandalf/kit/combobox/Combobox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 2,
+	class: "min-w-0 truncate"
+};
+var _hoisted_2 = { class: "[&_[data-slot=command-input-wrapper]]:border-bni-border-loud [&_[data-slot=command-input-wrapper]]:bg-bni-background [&_[data-slot=command-input-wrapper]]:hover:bg-bni-input [&_[data-slot=command-input-wrapper]]:focus-within:border-base-foreground-quiet [&_[data-slot=command-input-wrapper]]:focus-within:bg-bni-input [&_[data-slot=command-input-wrapper]]:focus-within:ring-base-foreground-quiet [&_[data-slot=command-input-wrapper]>svg]:text-base-foreground p-3 pb-0 [&_[data-slot=command-input-wrapper]]:h-10 [&_[data-slot=command-input-wrapper]]:rounded-lg [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:focus-within:ring-1 [&_[data-slot=command-input-wrapper]]:focus-within:ring-inset [&_[data-slot=command-input-wrapper]>svg]:opacity-100" };
+var _hoisted_3 = {
+	key: 0,
+	class: "flex items-center justify-center py-6"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "flex min-w-0 flex-col"
+};
+var _hoisted_5 = { class: "truncate" };
+var _hoisted_6 = { class: "text-muted-foreground truncate text-xs" };
+var _hoisted_7 = {
+	key: 2,
+	class: "truncate"
+};
+var _hoisted_8 = {
+	key: 2,
+	class: "border-t p-1"
+};
+var Combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Combobox",
+	props: /*@__PURE__*/ mergeModels({
+		options: {},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: { default: "Select an option..." },
+		searchPlaceholder: { default: "Search..." },
+		emptyMessage: { default: "No results found." },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: { default: "Clear selection" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		name: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		shouldFilter: {
+			type: Boolean,
+			default: true
+		},
+		filter: {
+			type: Function,
+			default: void 0
+		},
+		searchDebounce: { default: 0 },
+		maxDisplay: { default: 3 },
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		contentClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		listClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	}, {
+		"modelValue": { default: void 0 },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {},
+		"search": { default: "" },
+		"searchModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select", "search"], [
+		"update:modelValue",
+		"update:open",
+		"update:search"
+	]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const modelValue = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
+		const search = useModel(__props, "search");
+		const groups = computed(() => toGroups(props.options));
+		const all = computed(() => flatten(props.options));
+		/** The selection as an array, whether `multiple` or not, so one code path handles both. */
+		const values = computed(() => {
+			const value = modelValue.value;
+			if (value === void 0 || value === null) return [];
+			return Array.isArray(value) ? value : [value];
+		});
+		const selected = computed(() => all.value.filter((option) => values.value.includes(option.value)));
+		const shown = computed(() => selected.value.slice(0, props.maxDisplay));
+		const overflow = computed(() => Math.max(0, selected.value.length - props.maxDisplay));
+		const showClear = computed(() => props.clearable && !props.disabled && selected.value.length > 0);
+		const match = computed(() => props.filter ?? matches);
+		const visible = computed(() => props.shouldFilter ? all.value.filter((option) => match.value(option, search.value)) : all.value);
+		/**
+		* Filtering happens here and only here: what does not match is not rendered, and Reka is told to
+		* `ignore-filter`.
+		*
+		* The alternative — letting Reka score each item — cannot express this filter, because a caller's
+		* `filter` needs the whole option and Reka's scorer only sees the item's text. `GComboboxEmpty`
+		* still works: under `ignore-filter` it renders when no items registered at all, which is exactly
+		* when this list comes back empty.
+		*/
+		const rendered = computed(() => {
+			const keep = new Set(visible.value);
+			return groups.value.map((group) => ({
+				label: group.label,
+				options: group.options.filter((o) => keep.has(o))
+			})).filter((group) => group.options.length > 0);
+		});
+		/**
+		* The debounce is hand-rolled rather than `useDebounceFn` because closing the popover has to
+		* cancel a pending call: a term the user can no longer see must not reach the server after the
+		* list is gone. `useDebounceFn` returns no handle to cancel with.
+		*/
+		let searchTimer;
+		let lastEmitted = "";
+		function emitSearch(term) {
+			lastEmitted = term;
+			emit("search", term);
+		}
+		function handleSearch(term) {
+			search.value = term;
+			clearTimeout(searchTimer);
+			if (props.searchDebounce <= 0) {
+				emitSearch(term);
+				return;
+			}
+			searchTimer = setTimeout(() => emitSearch(term), props.searchDebounce);
+		}
+		onScopeDispose(() => clearTimeout(searchTimer));
+		/** A term left behind would filter the list before the user has typed anything next time. */
+		function handleOpenChange(next) {
+			open.value = next;
+			if (next) return;
+			clearTimeout(searchTimer);
+			search.value = "";
+			if (lastEmitted !== "") emitSearch("");
+		}
+		function clear() {
+			modelValue.value = props.multiple ? [] : void 0;
+		}
+		/**
+		* Reka owns the value: it toggles for `multiple`, replaces otherwise, and closes the popover on a
+		* single pick. This only announces which row changed — deriving that from a `watch` on
+		* `modelValue` would also fire on mount and on every programmatic set, announcing a selection
+		* nobody made.
+		*/
+		function handleSelect(option) {
+			if (option.disabled) return;
+			emit("select", option);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(GCombobox_default), {
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				open: open.value,
+				multiple: __props.multiple,
+				disabled: __props.disabled,
+				name: __props.name,
+				required: __props.required,
+				"ignore-filter": "",
+				"reset-search-term-on-select": !__props.multiple,
+				"onUpdate:open": handleOpenChange
+			}, {
+				default: withCtx(({ open: isOpen }) => [createVNode(unref(GComboboxAnchor_default), { class: "relative w-full" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {
+						open: isOpen,
+						selected: selected.value,
+						disabled: __props.disabled,
+						clear
+					}, () => [createVNode(unref(GComboboxTrigger_default), {
+						"as-child": "",
+						disabled: __props.disabled,
+						tabindex: "0"
+					}, {
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(unref(cn)(unref(gandalfFieldVariants)(), unref(gandalfFieldTriggerClass), "h-auto min-h-10 py-1.5", props.class))
+						}, [createElementVNode("span", { class: normalizeClass(unref(cn)("flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start", showClear.value && "pe-7")) }, [selected.value.length === 0 ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: normalizeClass(unref(cn)(unref(gandalfFieldPlaceholderClass), "truncate"))
+						}, toDisplayString(__props.placeholder), 3)) : __props.multiple ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(shown.value, (option) => {
+							return openBlock(), createBlock(unref(GBadge_default), {
+								key: option.value,
+								variant: "outlined",
+								color: option.color,
+								size: "xs"
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+								_: 2
+							}, 1032, ["color"]);
+						}), 128)), overflow.value > 0 ? (openBlock(), createBlock(unref(GBadge_default), {
+							key: 0,
+							variant: "outlined",
+							size: "xs"
+						}, {
+							default: withCtx(() => [createTextVNode("+" + toDisplayString(overflow.value), 1)]),
+							_: 1
+						})) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(selected.value[0]?.label), 1))], 2), createVNode(unref(ChevronsUpDown), { class: "size-4 shrink-0 opacity-50" })], 2)]),
+						_: 1
+					}, 8, ["disabled"])]), showClear.value ? (openBlock(), createBlock(unref(GButton_default), {
+						key: 0,
+						type: "button",
+						variant: "ghost-primary",
+						size: "xs",
+						class: "absolute inset-y-0 inset-e-8 my-auto size-6",
+						"aria-label": __props.clearLabel,
+						onClick: withModifiers(clear, ["stop"])
+					}, {
+						default: withCtx(() => [createVNode(unref(X), { class: "size-4 opacity-50" })]),
+						_: 1
+					}, 8, ["aria-label"])) : createCommentVNode("", true)]),
+					_: 2
+				}, 1024), createVNode(unref(GComboboxList_default), { class: normalizeClass(unref(cn)("w-(--reka-combobox-trigger-width) p-0", __props.contentClass)) }, {
+					default: withCtx(() => [
+						createElementVNode("div", _hoisted_2, [createVNode(unref(GComboboxInput_default), {
+							"model-value": search.value,
+							placeholder: __props.searchPlaceholder,
+							class: "text-base-foreground placeholder:text-base-foreground-extra-quiet h-9 py-0 text-base",
+							"onUpdate:modelValue": handleSearch
+						}, null, 8, ["model-value", "placeholder"])]),
+						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(unref(LoaderCircle), { class: "size-4 animate-spin opacity-50" })])])) : (openBlock(), createBlock(unref(GComboboxViewport_default), {
+							key: 1,
+							class: normalizeClass(unref(cn)("p-3", __props.listClass))
+						}, {
+							default: withCtx(() => [createVNode(unref(GComboboxEmpty_default), { class: "text-muted-foreground py-6 text-center text-sm" }, {
+								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(__props.emptyMessage), 1)])]),
+								_: 3
+							}), (openBlock(true), createElementBlock(Fragment, null, renderList(rendered.value, (group, groupIndex) => {
+								return openBlock(), createBlock(unref(GComboboxGroup_default), {
+									key: group.label ?? groupIndex,
+									heading: group.label,
+									class: "p-0"
+								}, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.options, (option) => {
+										return openBlock(), createBlock(unref(GComboboxItem_default), {
+											key: option.value,
+											value: option.value,
+											disabled: option.disabled,
+											class: normalizeClass(unref(cn)("cursor-pointer", __props.multiple && unref(gandalfMenuCheckItemVariants)())),
+											onSelect: ($event) => handleSelect(option)
+										}, {
+											default: withCtx(() => [renderSlot(_ctx.$slots, "option", {
+												option,
+												selected: values.value.includes(option.value)
+											}, () => [option.color ? (openBlock(), createElementBlock("span", {
+												key: 0,
+												class: "size-2 shrink-0 rounded-full",
+												style: normalizeStyle({ backgroundColor: option.color })
+											}, null, 4)) : createCommentVNode("", true), option.description ? (openBlock(), createElementBlock("span", _hoisted_4, [createElementVNode("span", _hoisted_5, toDisplayString(option.label), 1), createElementVNode("span", _hoisted_6, toDisplayString(option.description), 1)])) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(option.label), 1))]), !__props.multiple ? (openBlock(), createBlock(unref(GComboboxItemIndicator_default), { key: 0 }, {
+												default: withCtx(() => [createVNode(unref(Check), { class: "size-4" })]),
+												_: 1
+											})) : createCommentVNode("", true)]),
+											_: 2
+										}, 1032, [
+											"value",
+											"disabled",
+											"class",
+											"onSelect"
+										]);
+									}), 128))]),
+									_: 2
+								}, 1032, ["heading"]);
+							}), 128))]),
+							_: 3
+						}, 8, ["class"])),
+						_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer", {
+							selected: selected.value,
+							visible: visible.value,
+							clear
+						})])) : createCommentVNode("", true)
+					]),
+					_: 3
+				}, 8, ["class"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"open",
+				"multiple",
+				"disabled",
+				"name",
+				"required",
+				"reset-search-term-on-select"
+			]);
+		};
+	}
+});
+export { Combobox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/gandalf/kit/combobox/fold.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Folds a string into the form searches should compare against: lower case, no accents.
+ *
+ * Spanish is the reason this exists. `Bogotá`, `Medellín` and `Muñoz` are typed `bogota`,
+ * `medellin` and `munoz` far more often than not, and a matcher that compares the raw strings
+ * finds none of them — the list looks empty for a term the user can see on screen.
+ *
+ * Decomposing to NFD splits an accented character into its base letter plus a combining mark,
+ * so dropping the marks leaves the base letter behind. `ñ` folds to `n` for the same reason:
+ * it is what people type when searching, even though it is a distinct letter of the alphabet.
+ */
+export declare function fold(value: string): string;

package/dist/components/gandalf/kit/combobox/fold.js

@@ -0,0 +1,16 @@
+// src/components/gandalf/kit/combobox/fold.ts
+/**
+* Folds a string into the form searches should compare against: lower case, no accents.
+*
+* Spanish is the reason this exists. `Bogotá`, `Medellín` and `Muñoz` are typed `bogota`,
+* `medellin` and `munoz` far more often than not, and a matcher that compares the raw strings
+* finds none of them — the list looks empty for a term the user can see on screen.
+*
+* Decomposing to NFD splits an accented character into its base letter plus a combining mark,
+* so dropping the marks leaves the base letter behind. `ñ` folds to `n` for the same reason:
+* it is what people type when searching, even though it is a distinct letter of the alphabet.
+*/
+function fold(value) {
+	return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase("es-CO");
+}
+export { fold };

package/dist/components/gandalf/kit/combobox/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GKitCombobox } from './Combobox.vue';
+export { fold } from './fold';
+export { flatten, isGroup, matches, terms, toGroups } from './options';
+export type { ComboboxFilter, ComboboxModelValue, ComboboxOption, ComboboxOptionGroup, ComboboxOptions, ComboboxValue, } from './types';

package/dist/components/gandalf/kit/combobox/options.d.ts

@@ -0,0 +1,27 @@
+import { ComboboxOption, ComboboxOptionGroup, ComboboxOptions } from './types';
+/**
+ * Whether an entry is a group rather than an option.
+ *
+ * Groups are told apart by carrying `options`, so an option may not have a property by that name.
+ * The alternative — a `kind` discriminator — would have to be written on every option by hand,
+ * which is a tax on the common case to make the rare one tidier.
+ */
+export declare function isGroup(entry: ComboboxOption | ComboboxOptionGroup): entry is ComboboxOptionGroup;
+/**
+ * Reads either shape as groups, so the rest of the component only handles one.
+ *
+ * A flat list becomes a single unlabelled group. The first entry decides how the whole array is
+ * read: a mixed array is a caller mistake, and guessing per entry would hide it.
+ */
+export declare function toGroups(options: ComboboxOptions): ComboboxOptionGroup[];
+/** Every option, in order, with the grouping discarded. */
+export declare function flatten(options: ComboboxOptions): ComboboxOption[];
+/** The strings an option can be found by: what is shown, plus anything it was tagged with. */
+export declare function terms(option: ComboboxOption): string[];
+/**
+ * The default matcher: does this option answer this search?
+ *
+ * Folded on both sides, so `bogota` finds `Bogotá`. An empty search matches everything, which is
+ * what makes the list appear in full before anyone types.
+ */
+export declare function matches(option: ComboboxOption, search: string): boolean;

package/dist/components/gandalf/kit/combobox/options.js

@@ -0,0 +1,47 @@
+import { fold } from "./fold.js";
+// src/components/gandalf/kit/combobox/options.ts
+/**
+* Whether an entry is a group rather than an option.
+*
+* Groups are told apart by carrying `options`, so an option may not have a property by that name.
+* The alternative — a `kind` discriminator — would have to be written on every option by hand,
+* which is a tax on the common case to make the rare one tidier.
+*/
+function isGroup(entry) {
+	return entry !== null && typeof entry === "object" && "options" in entry;
+}
+/**
+* Reads either shape as groups, so the rest of the component only handles one.
+*
+* A flat list becomes a single unlabelled group. The first entry decides how the whole array is
+* read: a mixed array is a caller mistake, and guessing per entry would hide it.
+*/
+function toGroups(options) {
+	const first = options[0];
+	if (first === void 0) return [];
+	return isGroup(first) ? options : [{ options }];
+}
+/** Every option, in order, with the grouping discarded. */
+function flatten(options) {
+	return toGroups(options).flatMap((group) => group.options);
+}
+/** The strings an option can be found by: what is shown, plus anything it was tagged with. */
+function terms(option) {
+	return [
+		option.label,
+		option.description,
+		...option.keywords ?? []
+	].filter((term) => typeof term === "string" && term.length > 0);
+}
+/**
+* The default matcher: does this option answer this search?
+*
+* Folded on both sides, so `bogota` finds `Bogotá`. An empty search matches everything, which is
+* what makes the list appear in full before anyone types.
+*/
+function matches(option, search) {
+	const needle = fold(search.trim());
+	if (needle === "") return true;
+	return terms(option).some((term) => fold(term).includes(needle));
+}
+export { flatten, isGroup, matches, terms, toGroups };

package/dist/components/gandalf/kit/combobox/types.d.ts

@@ -0,0 +1,31 @@
+import { Option } from '../../base/types';
+/**
+ * An option, plus the two fields only a searchable list needs.
+ *
+ * Built on the shared `Option` rather than a generic `T`: `value` stays `string | number`, which
+ * is what Reka accepts as an item value and what every other Gandalf component already speaks.
+ * A generic value type would push a `by` comparator onto every caller to buy a case the platform
+ * does not have.
+ */
+export type ComboboxOption = Option & {
+    /** Second line under the label. Searched along with it. */
+    description?: string;
+    /** Extra terms that match this option without being shown — synonyms, codes, an old name. */
+    keywords?: string[];
+};
+/** A labelled run of options, rendered under a heading. */
+export type ComboboxOptionGroup = {
+    label?: string;
+    options: ComboboxOption[];
+};
+/**
+ * Either a flat list or a grouped one. Do not mix the two in a single array — the first entry
+ * decides how the whole array is read.
+ */
+export type ComboboxOptions = ComboboxOption[] | ComboboxOptionGroup[];
+/** The value of a single option. */
+export type ComboboxValue = Option['value'];
+/** What `v-model` carries: one value, or an array of them when `multiple` is set. */
+export type ComboboxModelValue = ComboboxValue | ComboboxValue[] | undefined;
+/** Keeps an option out of the list. Return `true` to keep it. */
+export type ComboboxFilter = (option: ComboboxOption, search: string) => boolean;

package/dist/components/gandalf/kit/date-picker/DatePicker.js

@@ -0,0 +1,4 @@
+import DatePicker_vue_vue_type_script_setup_true_lang_default from "./DatePicker.vue_vue_type_script_setup_true_lang.js";
+// src/components/gandalf/kit/date-picker/DatePicker.vue
+var DatePicker_default = DatePicker_vue_vue_type_script_setup_true_lang_default;
+export { DatePicker_default as default };

package/dist/components/gandalf/kit/date-picker/DatePicker.vue.d.ts

@@ -0,0 +1,114 @@
+import { HTMLAttributes } from 'vue';
+import { DatePickerDate, DatePickerMatcher, DatePickerModelValue, DatePickerPreset, DatePickerSelection, DatePickerType } from './types';
+type __VLS_Props = {
+    /** Whether the picker selects one day or a range. Decides the shape of everything else. */
+    type?: DatePickerType;
+    /** Shown on the trigger while nothing is selected. */
+    placeholder?: string;
+    /** Blocks the trigger and the calendar. */
+    disabled?: boolean;
+    /** Adds a clear control to the trigger once something is selected. */
+    clearable?: boolean;
+    /** Accessible label for the clear control. */
+    clearLabel?: string;
+    /** Shortcuts beside the calendar. The row knows which one is active. */
+    presets?: DatePickerPreset[];
+    /** Earliest date that can be picked. Everything before it is greyed out. */
+    min?: DatePickerDate;
+    /** Latest date that can be picked. Everything after it is greyed out. */
+    max?: DatePickerDate;
+    /** Keeps individual days out of reach — weekends, holidays. Return `true` to disable. */
+    isDateDisabled?: DatePickerMatcher;
+    /** Locale for the calendar's strings and the trigger label. */
+    locale?: string;
+    /** How the trigger prints the selection. Passed straight to `Intl.DateTimeFormat`. */
+    format?: Intl.DateTimeFormatOptions;
+    /** Whether a finished selection closes the popover. A half-picked range never closes it. */
+    closeOnSelect?: boolean;
+    /** Submits with a surrounding form, as a hidden input holding the ISO day. */
+    name?: string;
+    /** Field name for the end of a range. */
+    endName?: string;
+    /** Turns a picked day into the submitted string. */
+    serialize?: (value: Date) => string;
+    /** Put on the trigger, for a `<GLabel for>`. */
+    id?: string;
+    /** Which trigger edge the popover lines up with. */
+    align?: 'start' | 'center' | 'end';
+    /** Trigger height, as Figma's Input Field: `default` is md (40px), `sm` is 32px. */
+    size?: 'sm' | 'default';
+    /** Merged onto the trigger. */
+    class?: HTMLAttributes['class'];
+    /** Merged onto the popover content. */
+    contentClass?: HTMLAttributes['class'];
+};
+declare function close(): void;
+declare function clear(): void;
+type __VLS_ModelProps = {
+    modelValue?: DatePickerModelValue;
+    'open'?: boolean;
+    /**
+     * The month on screen — the calendar primitive's `placeholder`, renamed because `placeholder` is
+     * already the trigger's empty text everywhere else in Gandalf. Two props with one name, one a
+     * string and one a date, is a coin flip every caller loses once.
+     */
+    'month'?: DatePickerDate | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: {
+    value: DatePickerModelValue;
+    label: string;
+    empty: boolean;
+    open: boolean;
+    disabled: boolean;
+    clear: typeof clear;
+}, __VLS_66: {
+    value: DatePickerModelValue;
+    clear: typeof clear;
+    close: typeof close;
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_15) => any;
+} & {
+    footer?: (props: typeof __VLS_66) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: DatePickerModelValue) => any;
+    "update:open": (value: boolean) => any;
+    change: (value: DatePickerSelection) => any;
+    "update:month": (value: DatePickerDate | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DatePickerModelValue) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onChange?: ((value: DatePickerSelection) => any) | undefined;
+    "onUpdate:month"?: ((value: DatePickerDate | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    type: DatePickerType;
+    size: "default" | "sm";
+    placeholder: string;
+    class: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+    id: string;
+    max: DatePickerDate;
+    min: DatePickerDate;
+    name: string;
+    format: Intl.DateTimeFormatOptions;
+    locale: string;
+    isDateDisabled: DatePickerMatcher;
+    align: "end" | "start" | "center";
+    contentClass: string | false | Record<string, any> | import('vue').ClassValue[] | null;
+    clearable: boolean;
+    clearLabel: string;
+    presets: DatePickerPreset[];
+    closeOnSelect: boolean;
+    endName: string;
+    serialize: (value: Date) => string;
+}, {}, {}, {}, 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;
+    };
+};