@coopdigital/react 1.30.1 → 1.31.0

package/dist/components/Author/Author.d.ts

@@ -36,5 +36,7 @@ declare const Author: {
     name: string;
   };
 };
+declare const AuthorImage: ({ alt, src, ...props }: AuthorImageProps) => JSX.Element;
+declare const AuthorMeta: ({ date, datePrefix, name, ...props }: AuthorMetaProps) => JSX.Element;
 //#endregion
-export { Author, Author as default };
+export { Author, Author as default, AuthorImage, AuthorMeta };

package/dist/components/Author/Author.js

@@ -42,4 +42,4 @@ Author.Image = AuthorImage;
 Author.Meta = AuthorMeta;
 Author.slot = { name: "Author" };
 //#endregion
-export { Author, Author as default };
+export { Author, Author as default, AuthorImage, AuthorMeta };

package/dist/components/Author/index.d.ts

@@ -1,2 +1,2 @@
-import { Author, AuthorImageProps, AuthorMetaProps, AuthorProps } from "./Author.js";
-export { Author, Author as default, AuthorImageProps, AuthorMetaProps, AuthorProps };
+import { Author, AuthorImage, AuthorImageProps, AuthorMeta, AuthorMetaProps, AuthorProps } from "./Author.js";
+export { Author, Author as default, AuthorImage, AuthorImageProps, AuthorMeta, AuthorMetaProps, AuthorProps };

package/dist/components/Author/index.js

@@ -1,5 +1,5 @@
-import { Author } from "./Author.js";
+import { Author, AuthorImage, AuthorMeta } from "./Author.js";
 //#region src/components/Author/index.ts
 var Author_default = Author;
 //#endregion
-export { Author, Author_default as default };
+export { Author, AuthorImage, AuthorMeta, Author_default as default };

package/dist/components/Combobox/Combobox.d.ts

@@ -181,4 +181,4 @@ declare const ComboboxOptions: {
   };
 };
 //#endregion
-export { Combobox, Combobox as default, ComboboxButton, ComboboxControls, ComboboxInput, type ComboboxItem, type ComboboxOption, ComboboxOptions };
+export { Combobox, Combobox as default, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions };

package/dist/components/Combobox/Combobox.js

@@ -4,18 +4,19 @@ import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
 import { getSlotProp } from "../../utils/slots.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import { getFieldError, useField } from "../Field/Field.context.js";
-import { defaultFilter, defaultIsItemDisabled, defaultItemToString, isMatchingText, normalizeOptions, resolveOption } from "./combobox-utils.js";
+import { defaultFilter, defaultIsItemDisabled, defaultItemToString, defaultMaxResultsText, isMatchingText, normalizeOptions, resolveOption, shouldShowSelectionText } from "./combobox-internal.js";
 import { ComboboxContext, useComboboxContext } from "./Combobox.context.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
+import { useFormReset } from "../../hooks/useFormReset.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useCombobox } from "downshift";
+import mergeRefs from "merge-refs";
 //#region src/components/Combobox/Combobox.tsx
 const DEFAULT_MAX_RESULTS = 50;
 const ANNOUNCEMENT_DELAY = 750;
-const defaultMaxResultsText = (shown, total) => `Showing ${shown} of ${total} results.`;
 const componentSlots = {
 	ComboboxControls: null,
 	ComboboxOptions: null
@@ -39,7 +40,9 @@ const Combobox = ({ allowCustom = false, children, className, defaultSelected, d
 	]);
 	const visibleItems = useMemo(() => maxResults === false ? matchingItems : matchingItems.slice(0, maxResults), [matchingItems, maxResults]);
 	const [initialSelectedItem] = useState(() => resolveOption(defaultSelected, items));
-	const selectedItem = selected === void 0 ? void 0 : resolveOption(selected, items);
+	const defaultSelectedItem = resolveOption(defaultSelected, items);
+	const controlled = selected !== void 0;
+	const selectedItem = controlled ? resolveOption(selected, items) : void 0;
 	const commit = (changes, closeMenu) => {
 		const text = (changes.inputValue ?? "").trim();
 		if (text === "") return {
@@ -92,6 +95,10 @@ const Combobox = ({ allowCustom = false, children, className, defaultSelected, d
 		}
 	};
 	const downshift = useCombobox({
+		...!controlled && {
+			defaultInputValue: toString(defaultSelectedItem),
+			defaultSelectedItem
+		},
 		getItemId: (index) => visibleItems[index]?.id ?? `${uid}_item_${index}`,
 		id: uid,
 		initialSelectedItem,
@@ -133,25 +140,33 @@ const Combobox = ({ allowCustom = false, children, className, defaultSelected, d
 		text: selectionText,
 		value: selectionValue
 	});
-	const { inputValue, setInputValue } = downshift;
+	const { inputValue, reset, setInputValue } = downshift;
 	useEffect(() => {
 		const previous = previousSelection.current;
-		previousSelection.current = {
+		const current = {
 			text: selectionText,
 			value: selectionValue
 		};
-		if (selectionValue === previous.value && selectionText !== previous.text && inputValue === previous.text) setInputValue(selectionText);
+		previousSelection.current = current;
+		if (shouldShowSelectionText(previous, current, inputValue)) setInputValue(selectionText);
 	}, [
 		inputValue,
 		selectionText,
 		selectionValue,
 		setInputValue
 	]);
+	const inputRef = useRef(null);
+	useFormReset(inputRef, () => {
+		if (controlled) return;
+		reset();
+		setFilterText("");
+	});
 	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
 		value: {
 			disabled,
 			downshift,
 			error: hasError,
+			inputRef,
 			items: visibleItems,
 			matchCount: matchingItems.length,
 			size
@@ -177,7 +192,8 @@ const ComboboxInput = ({ error, name, size, ...props }) => {
 	const disabled = combobox.disabled || props.disabled;
 	const inputProps = combobox.downshift.getInputProps({
 		...props,
-		disabled
+		disabled,
+		ref: mergeRefs(combobox.inputRef, props.ref)
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [name && /* @__PURE__ */ jsx("input", {
 		disabled,
@@ -218,10 +234,15 @@ const ComboboxOptions = ({ className, maxResults: _maxResults, maxResultsText =
 	};
 	const message = getMessage();
 	const announcement = useDebounce(message, ANNOUNCEMENT_DELAY);
+	const onMouseLeave = (event) => {
+		props.onMouseLeave?.(event);
+		if (!isOpen) Object.assign(event, { preventDownshiftDefault: true });
+	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("ul", {
 		...getMenuProps({
 			...props,
-			className: clsx("coop-combobox-options", className)
+			className: clsx("coop-combobox-options", className),
+			onMouseLeave
 		}),
 		children: [isOpen && items.map((item, index) => {
 			const { children, disabled: _disabled, icon, label, onClick, onMouseDown, onMouseMove, value, ...attributes } = item;

package/dist/components/Combobox/{combobox-utils.js → combobox-internal.js}

@@ -1,8 +1,9 @@
 import { matchSorter } from "match-sorter";
-//#region src/components/Combobox/combobox-utils.ts
+//#region src/components/Combobox/combobox-internal.ts
 const defaultFilter = (items, inputValue) => inputValue !== "" ? matchSorter(items, inputValue, { keys: [(item) => [item.label ?? item.value]] }) : items;
 const defaultIsItemDisabled = (item) => item.disabled ?? false;
 const defaultItemToString = (item) => item?.label ?? item?.value ?? "";
+const defaultMaxResultsText = (shown, total) => `Showing ${shown} of ${total} results.`;
 const normalizeOptions = (options) => options.filter((option) => option && typeof option !== "number").map((option) => typeof option === "string" ? { value: option } : option);
 const collator = new Intl.Collator(void 0, { sensitivity: "base" });
 const isMatchingText = (optionText, text) => collator.compare(optionText.trim(), text.trim()) === 0;
@@ -11,5 +12,6 @@ const resolveOption = (option, items) => {
 	const item = typeof option === "string" ? { value: option } : option;
 	return items.find(({ value }) => value === item.value) ?? item;
 };
+const shouldShowSelectionText = (previous, current, inputValue) => current.value === previous.value && current.text !== previous.text && inputValue === previous.text;
 //#endregion
-export { defaultFilter, defaultIsItemDisabled, defaultItemToString, isMatchingText, normalizeOptions, resolveOption };
+export { defaultFilter, defaultIsItemDisabled, defaultItemToString, defaultMaxResultsText, isMatchingText, normalizeOptions, resolveOption, shouldShowSelectionText };

package/dist/components/DateInput/DateInput.context.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/components/DateInput/DateInput.context.ts
+const DateInputContext = createContext(null);
+const useDateInput = () => useContext(DateInputContext);
+//#endregion
+export { DateInputContext, useDateInput };

package/dist/components/DateInput/DateInput.d.ts

@@ -0,0 +1,104 @@
+import { StandardSizes } from "../../types/index.js";
+import { TextInputProps } from "../TextInput/TextInput.js";
+import "../TextInput/index.js";
+import { DateInputMode, DateParts } from "./dateinput-utils.js";
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/DateInput/DateInput.d.ts
+export interface DateInputChangeEvent {
+  /** The parts as typed. */
+  parts: DateParts;
+  /** The parts as typed, joined from year to day, such as `2026-2-30`.
+   *
+   * Not checked: use `validateDate` before relying on it. */
+  value: string;
+}
+export interface DateInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onBlur" | "onChange"> {
+  /** Content inside the component.
+   *
+   * This should be a set of `<DateInput.Day>`, `<DateInput.Month>` and `<DateInput.Year>`. */
+  children?: ReactNode;
+  /** Specify additional CSS classes. */
+  className?: string;
+  /** Specify the initial value, when not controlled. One of:
+   *
+   * - an ISO date, such as `1990-08-21`
+   * - the parts, such as `{ year: "2026" }` */
+  defaultValue?: DateParts | string;
+  /** Specify the base for the part ids. Will be auto-generated if not set. */
+  id?: string;
+  /** Specify the DateInput mode. */
+  mode?: DateInputMode;
+  /** Specify the name.
+   *
+   * Each part is `{name}-day`, `{name}-month` and`{name}-year`.
+   *
+   * A hidden input `{name}` holds the value as typed. */
+  name?: string;
+  /** Called when focus leaves the whole DateInput, not each part. */
+  onBlur?: (event: DateInputChangeEvent) => void;
+  /** Called when any part changes. */
+  onChange?: (event: DateInputChangeEvent) => void;
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+  /** Specify the component size. */
+  size?: StandardSizes;
+  /** Specify the value, when controlled. One of:
+   *
+   * - an ISO date, such as `1990-08-21`
+   * - the parts, such as `{ year: "2026" }`
+   *
+   * Update it in `onChange` with the `value` or `parts` of the event. */
+  value?: DateParts | string;
+}
+declare const DateInput: {
+  ({ children, className, defaultValue, id, mode, name, onBlur, onChange, ref, size, value, ...props }: DateInputProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+  Day: {
+    ({ label, ...props }: DateInputPartProps): JSX.Element;
+    slot: {
+      name: string;
+    };
+  };
+  Month: {
+    ({ label, ...props }: DateInputPartProps): JSX.Element;
+    slot: {
+      name: string;
+    };
+  };
+  Year: {
+    ({ label, ...props }: DateInputPartProps): JSX.Element;
+    slot: {
+      name: string;
+    };
+  };
+};
+export interface DateInputPartProps extends Omit<TextInputProps, "defaultValue" | "fit" | "prefix" | "prefixInline" | "suffix" | "suffixInline" | "type" | "value"> {
+  /** Specify the part error state.
+   *
+   * Inherits error state of a `group` Fieldset when not set. */
+  error?: boolean;
+  /** Specify the label. */
+  label?: ReactNode;
+}
+declare const DateInputDay: {
+  ({ label, ...props }: DateInputPartProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+};
+declare const DateInputMonth: {
+  ({ label, ...props }: DateInputPartProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+};
+declare const DateInputYear: {
+  ({ label, ...props }: DateInputPartProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+};
+//#endregion
+export { DateInput, DateInput as default, DateInputDay, DateInputMonth, DateInputYear };

package/dist/components/DateInput/DateInput.js

@@ -0,0 +1,128 @@
+"use client";
+import { useId as useId$1 } from "../../hooks/useId.js";
+import { forEachSlot } from "../../utils/slots.js";
+import { TextInput } from "../TextInput/TextInput.js";
+import { useFormReset } from "../../hooks/useFormReset.js";
+import { Field } from "../Field/Field.js";
+import { formatDateValue, toDateParts, toDateValue } from "./dateinput-internal.js";
+import { getAutoComplete } from "./dateinput-utils.js";
+import { DateInputContext, useDateInput } from "./DateInput.context.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import mergeRefs from "merge-refs";
+//#region src/components/DateInput/DateInput.tsx
+const PART_SLOTS = {
+	DateInputDay: "day",
+	DateInputMonth: "month",
+	DateInputYear: "year"
+};
+const DateInput = ({ children, className, defaultValue, id, mode, name, onBlur, onChange, ref, size, value, ...props }) => {
+	const uid = useId$1(id);
+	const rendered = [];
+	forEachSlot(children, (slot) => {
+		const part = PART_SLOTS[slot.name];
+		if (part && !rendered.includes(part)) rendered.push(part);
+	});
+	const defaultParts = toDateParts(defaultValue, rendered);
+	const [typed, setTyped] = useState(() => value === void 0 ? defaultParts : toDateParts(value, rendered));
+	const controlled = value !== void 0;
+	const parts = controlled && toDateValue(value, rendered) !== toDateValue(typed, rendered) ? toDateParts(value, rendered) : typed;
+	const controlRef = useRef(null);
+	useFormReset(controlRef, () => {
+		if (!controlled) setTyped(defaultParts);
+	});
+	const getEvent = (next) => ({
+		parts: next,
+		value: formatDateValue(next, rendered)
+	});
+	const changePart = (part, partValue) => {
+		const next = {
+			...parts,
+			[part]: partValue
+		};
+		setTyped(next);
+		onChange?.(getEvent(next));
+	};
+	const handleBlur = (event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) onBlur?.(getEvent(parts));
+	};
+	const componentProps = {
+		...props,
+		className: clsx("coop-date-input", className),
+		onBlur: handleBlur
+	};
+	return /* @__PURE__ */ jsx(DateInputContext.Provider, {
+		value: {
+			changePart,
+			controlled,
+			controlPart: rendered[0],
+			controlRef,
+			defaultValue: defaultParts,
+			id: uid,
+			mode,
+			name,
+			parts,
+			size
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			...componentProps,
+			ref,
+			children: [name && /* @__PURE__ */ jsx("input", {
+				name,
+				type: "hidden",
+				value: formatDateValue(parts, rendered)
+			}), children]
+		})
+	});
+};
+const DateInputPart = ({ autoComplete, className, datePart: part, error, id, label, name, onChange, size, ...props }) => {
+	const dateInput = useDateInput();
+	const inputProps = {
+		...dateInput?.controlled ? { value: dateInput.parts[part] ?? "" } : { defaultValue: dateInput?.defaultValue?.[part] },
+		autoComplete: autoComplete ?? getAutoComplete(dateInput?.mode, part),
+		className: clsx("coop-date-input--input", className),
+		"data-part": part,
+		id: id ?? (dateInput ? `${dateInput.id}-${part}` : void 0),
+		inputMode: "numeric",
+		name: name ?? (dateInput?.name ? `${dateInput.name}-${part}` : void 0),
+		onChange: (event) => {
+			dateInput?.changePart(part, event.target.value);
+			onChange?.(event);
+		},
+		pattern: "[0-9]*",
+		size: size ?? dateInput?.size,
+		spellCheck: false,
+		...props,
+		ref: dateInput?.controlPart === part ? mergeRefs(dateInput.controlRef, props.ref) : props.ref
+	};
+	return /* @__PURE__ */ jsxs(Field, {
+		error,
+		hideErrorBar: true,
+		children: [/* @__PURE__ */ jsx(Field.Label, { children: label }), /* @__PURE__ */ jsx(TextInput, { ...inputProps })]
+	});
+};
+const DateInputDay = ({ label = "Day", ...props }) => /* @__PURE__ */ jsx(DateInputPart, {
+	...props,
+	datePart: "day",
+	label
+});
+const DateInputMonth = ({ label = "Month", ...props }) => /* @__PURE__ */ jsx(DateInputPart, {
+	...props,
+	datePart: "month",
+	label
+});
+const DateInputYear = ({ label = "Year", ...props }) => /* @__PURE__ */ jsx(DateInputPart, {
+	...props,
+	datePart: "year",
+	label
+});
+DateInput.slot = { name: "DateInput" };
+DateInputDay.slot = { name: "DateInputDay" };
+DateInputMonth.slot = { name: "DateInputMonth" };
+DateInputYear.slot = { name: "DateInputYear" };
+DateInput.Day = DateInputDay;
+DateInput.Month = DateInputMonth;
+DateInput.Year = DateInputYear;
+//#endregion
+export { DateInput, DateInput as default, DateInputDay, DateInputMonth, DateInputYear };

package/dist/components/DateInput/dateinput-internal.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/DateInput/dateinput-internal.d.ts
+export interface Limits {
+  max?: string;
+  min?: string;
+}
+//#endregion

package/dist/components/DateInput/dateinput-internal.js

@@ -0,0 +1,82 @@
+import { format, formatISO, isExists, isValid, parseISO } from "date-fns";
+//#region src/components/DateInput/dateinput-internal.ts
+const VALUE_ORDER = [
+	"year",
+	"month",
+	"day"
+];
+const WHOLE_DATE_ERRORS = /* @__PURE__ */ new Set([
+	"after-max",
+	"before-min",
+	"impossible-date",
+	"missing-date",
+	"unsupported-parts"
+]);
+const valueParts = (parts) => VALUE_ORDER.filter((part) => parts.includes(part));
+const formatDateValue = (date, parts = VALUE_ORDER) => {
+	const values = valueParts(parts).map((part) => date[part] ?? "");
+	return values.every((value) => value === "") ? "" : values.join("-");
+};
+const splitValue = (value, used) => {
+	const pieces = value.split("-");
+	return !used.includes("year") && value.startsWith("--") && pieces.length === used.length + 2 ? pieces.slice(2) : pieces;
+};
+const parseDateValue = (value, parts = VALUE_ORDER) => {
+	if (value === "") return {};
+	const used = valueParts(parts);
+	const pieces = splitValue(value, used);
+	if (pieces.length !== used.length) return void 0;
+	return Object.fromEntries(used.map((part, index) => [part, pieces[index]]));
+};
+const toDateValue = (input = "", parts) => typeof input === "string" ? input : formatDateValue(input, parts);
+const toDateParts = (input = "", parts) => typeof input === "string" ? parseDateValue(input, parts) ?? {} : input;
+const toNumber = (value) => /^\d+$/.test(value) ? Number(value) : null;
+const isValidPart = (part, value) => {
+	if (part === "year") return /^\d{4}$/.test(value);
+	const number = toNumber(value);
+	return number !== null && number >= 1 && number <= (part === "day" ? 31 : 12);
+};
+const trimParts = (date) => ({
+	day: date.day?.trim() ?? "",
+	month: date.month?.trim() ?? "",
+	year: date.year?.trim() ?? ""
+});
+const getDateErrors = (values, parts) => {
+	if (parts.every((part) => values[part] === "")) return ["missing-date"];
+	const errors = [];
+	for (const part of parts) if (values[part] === "") errors.push(`missing-${part}`);
+	else if (!isValidPart(part, values[part])) errors.push(`invalid-${part}`);
+	if (errors.length > 0 || !parts.includes("day") || !parts.includes("month")) return errors;
+	const year = parts.includes("year") ? Number(values.year) : 2e3;
+	return isExists(year, Number(values.month) - 1, Number(values.day)) ? [] : ["impossible-date"];
+};
+const getInvalidParts = (errors, parts) => parts.filter((part) => errors.some((code) => WHOLE_DATE_ERRORS.has(code) || code.endsWith(part)));
+const pad = (value) => String(Number(value)).padStart(2, "0");
+const toISODate = ({ day, month, year }, parts) => {
+	const has = (part) => parts.includes(part);
+	if (has("day") && has("month") && has("year")) return `${year}-${pad(month)}-${pad(day)}`;
+	if (has("month") && has("year") && !has("day")) return `${year}-${pad(month)}`;
+	if (has("day") && has("month")) return `--${pad(month)}-${pad(day)}`;
+	if (parts.length === 1 && has("year")) return year;
+	return "";
+};
+const toLimit = (limit, name) => {
+	const date = typeof limit === "string" ? parseISO(limit) : limit;
+	if (!isValid(date)) throw new Error(`${name} must be a valid Date or an ISO date, such as 2020-01-31`);
+	return date;
+};
+const formatLimit = (limit, length) => format(limit, length === 4 ? "yyyy" : length === 7 ? "MMMM yyyy" : "d MMMM yyyy");
+const getRangeError = (value, min, max) => {
+	if (value.startsWith("--")) return void 0;
+	const cut = (limit) => formatISO(limit, { representation: "date" }).slice(0, value.length);
+	if (min && value < cut(min)) return "before-min";
+	if (max && value > cut(max)) return "after-max";
+};
+const getMessage = (code, label, messages = {}, limits, defaults) => {
+	const custom = messages[code];
+	if (custom !== void 0) return typeof custom === "function" ? custom(label) : custom;
+	const fallback = defaults[code];
+	return typeof fallback === "function" ? fallback(label, limits) : fallback;
+};
+//#endregion
+export { WHOLE_DATE_ERRORS, formatDateValue, formatLimit, getDateErrors, getInvalidParts, getMessage, getRangeError, isValidPart, pad, parseDateValue, toDateParts, toDateValue, toISODate, toLimit, toNumber, trimParts };

package/dist/components/DateInput/dateinput-utils.d.ts

@@ -0,0 +1,66 @@
+import { Limits } from "./dateinput-internal.js";
+//#region src/components/DateInput/dateinput-utils.d.ts
+export type DatePart = "day" | "month" | "year";
+export interface DateParts {
+  day?: string;
+  month?: string;
+  year?: string;
+}
+export type DateInputMode = "dob" | undefined;
+export type DateErrorCode = "missing-date" | "missing-day" | "missing-month" | "missing-year" | "invalid-day" | "invalid-month" | "invalid-year" | "impossible-date" | "unsupported-parts" | "before-min" | "after-max";
+/** A message, or a function that builds one from the label. */
+export type DateErrorMessage = string | ((label?: string) => string);
+export interface DateValidationOptions {
+  /** The name of the date, as it would start a sentence, such as "Date
+   * of birth".
+   *
+   * Default: `Date`. */
+  label?: string;
+  /** The latest date allowed, as a `Date` or an ISO date such as `2026-12-31`.
+   *
+   * Only the parts used are compared, such as the month and year. */
+  max?: Date | string;
+  /** Messages to use instead of the defaults. */
+  messages?: Partial<Record<DateErrorCode, DateErrorMessage>>;
+  /** The earliest date allowed, as a `Date` or an ISO date such as `2020-01-01`.
+   *
+   * Only the parts used are compared, such as the month and year. */
+  min?: Date | string;
+  /** The parts used, in the order they are entered.
+   *
+   * Default: `day`, `month`, `year`. */
+  parts?: DatePart[];
+}
+export interface DateValidationSuccess {
+  /** Whether the date is valid. */
+  valid: true;
+  /** The date as an ISO 8601 string, such as 1990-08-21. */
+  value: string;
+}
+export interface DateValidationError {
+  /** The code for the first problem, in the order the parts are entered. */
+  error: DateErrorCode;
+  /** The parts with an error. Every part is invalid when the date is
+   * empty, impossible, has no ISO format or is outside `min` and `max`. */
+  invalid: DatePart[];
+  /** The message for the error. */
+  message: string;
+  /** Whether the date is valid. */
+  valid: false;
+}
+export type DateValidation = DateValidationSuccess | DateValidationError;
+export declare const DATE_PARTS: DatePart[];
+export declare const DATE_ERROR_MESSAGES: Record<DateErrorCode, string | ((label?: string, limits?: Limits) => string)>;
+export declare const validateDateParts: (date: DateParts, { label, max, messages, min, parts }?: DateValidationOptions) => DateValidation;
+/** Check a value, such as the DateInput value or the value a form
+ * submits, the same way as `validateDateParts`. Use the same `parts` as
+ * the DateInput. */
+export declare const validateDate: (value: string, options?: DateValidationOptions) => DateValidation;
+/** As this is a more specific function for a birth of date validation, we can make some assumptions.
+ * Such as, date needs to be today or in the past and error message should reflect date of birth.
+ * Check a value, such as the DateInput value or the value a form
+ * submits, the same way as `validateDateParts`. Use the same `parts` as
+ * the DateInput. */
+export declare const validateDob: (value: string, options?: DateValidationOptions) => DateValidation;
+export declare const getAutoComplete: (mode: DateInputMode, part: DatePart) => string | undefined;
+//#endregion

package/dist/components/DateInput/dateinput-utils.js

@@ -0,0 +1,91 @@
+import { formatLimit, getDateErrors, getInvalidParts, getMessage, getRangeError, parseDateValue, toISODate, toLimit, trimParts } from "./dateinput-internal.js";
+//#region src/components/DateInput/dateinput-utils.ts
+const DATE_PARTS = [
+	"day",
+	"month",
+	"year"
+];
+const realDate = (label = "Date") => `${label} must be a real date`;
+const DATE_ERROR_MESSAGES = {
+	"after-max": (label = "Date", limits) => `${label} must be on or before ${limits?.max}`,
+	"before-min": (label = "Date", limits) => `${label} must be on or after ${limits?.min}`,
+	"impossible-date": realDate,
+	"invalid-day": realDate,
+	"invalid-month": realDate,
+	"invalid-year": "Year must include 4 numbers",
+	"missing-date": "Enter a date",
+	"missing-day": (label = "Date") => `${label} must include a day`,
+	"missing-month": (label = "Date") => `${label} must include a month`,
+	"missing-year": (label = "Date") => `${label} must include a year`,
+	"unsupported-parts": realDate
+};
+const validateDateParts = (date, { label, max, messages = {}, min, parts = DATE_PARTS } = {}) => {
+	const minDate = min === void 0 ? void 0 : toLimit(min, "min");
+	const maxDate = max === void 0 ? void 0 : toLimit(max, "max");
+	const values = trimParts(date);
+	const errors = getDateErrors(values, parts);
+	let value = "";
+	if (errors.length === 0) {
+		value = toISODate(values, parts);
+		const rangeError = value ? getRangeError(value, minDate, maxDate) : "unsupported-parts";
+		if (!rangeError) return {
+			valid: true,
+			value
+		};
+		errors.push(rangeError);
+	}
+	const [error] = errors;
+	const limits = {
+		max: maxDate && value ? formatLimit(maxDate, value.length) : void 0,
+		min: minDate && value ? formatLimit(minDate, value.length) : void 0
+	};
+	return {
+		error,
+		invalid: getInvalidParts(errors, parts),
+		message: getMessage(error, label, messages, limits, DATE_ERROR_MESSAGES),
+		valid: false
+	};
+};
+/** Check a value, such as the DateInput value or the value a form
+* submits, the same way as `validateDateParts`. Use the same `parts` as
+* the DateInput. */
+const validateDate = (value, options = {}) => {
+	const date = parseDateValue(value, options.parts);
+	if (date) return validateDateParts(date, options);
+	const { label, messages, parts = DATE_PARTS } = options;
+	return {
+		error: "impossible-date",
+		invalid: parts,
+		message: getMessage("impossible-date", label, messages, {}, DATE_ERROR_MESSAGES),
+		valid: false
+	};
+};
+/** As this is a more specific function for a birth of date validation, we can make some assumptions.
+* Such as, date needs to be today or in the past and error message should reflect date of birth.
+* Check a value, such as the DateInput value or the value a form
+* submits, the same way as `validateDateParts`. Use the same `parts` as
+* the DateInput. */
+const validateDob = (value, options = {}) => {
+	const { messages, ...rest } = options;
+	return validateDate(value, {
+		label: "Date of birth",
+		max: /* @__PURE__ */ new Date(),
+		messages: {
+			"after-max": "Date of birth must be today or in the past",
+			"missing-date": "Enter your date of birth",
+			...messages
+		},
+		parts: DATE_PARTS,
+		...rest
+	});
+};
+const getAutoComplete = (mode, part) => {
+	if (!mode) return void 0;
+	if (mode === "dob") {
+		if (part === "day") return "bday-day";
+		if (part === "month") return "bday-month";
+		if (part === "year") return "bday-year";
+	}
+};
+//#endregion
+export { DATE_ERROR_MESSAGES, DATE_PARTS, getAutoComplete, validateDate, validateDateParts, validateDob };

package/dist/components/DateInput/index.d.ts

@@ -0,0 +1,3 @@
+import { DATE_ERROR_MESSAGES, DATE_PARTS, DateErrorCode, DateErrorMessage, DateInputMode, DatePart, DateParts, DateValidation, DateValidationError, DateValidationOptions, DateValidationSuccess, getAutoComplete, validateDate, validateDateParts, validateDob } from "./dateinput-utils.js";
+import { DateInput, DateInputChangeEvent, DateInputDay, DateInputMonth, DateInputPartProps, DateInputProps, DateInputYear } from "./DateInput.js";
+export { DATE_ERROR_MESSAGES, DATE_PARTS, DateErrorCode, DateErrorMessage, DateInput, DateInput as default, DateInputChangeEvent, DateInputDay, DateInputMode, DateInputMonth, DateInputPartProps, DateInputProps, DateInputYear, DatePart, DateParts, DateValidation, DateValidationError, DateValidationOptions, DateValidationSuccess, getAutoComplete, validateDate, validateDateParts, validateDob };