@lumx/vue 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/utils/function/listenerTower.js

@@ -0,0 +1,28 @@
+import { __toESM } from "../../../../../../_virtual/_rolldown/runtime.js";
+import { require_last } from "../../../../../../node_modules/lodash/last.js";
+import { require_pull } from "../../../../../../node_modules/lodash/pull.js";
+//#region ../lumx-core/src/js/utils/function/listenerTower.ts
+var import_last = /* @__PURE__ */ __toESM(require_last(), 1);
+var import_pull = /* @__PURE__ */ __toESM(require_pull(), 1);
+/**
+* Keep track of listeners, only the last registered listener gets activated at any point (previously registered
+* listener are disabled).
+* When a listener gets unregistered, the previously registered listener gets enabled again.
+*/
+function makeListenerTowerContext() {
+	const LISTENERS = [];
+	return {
+		register(listener) {
+			(0, import_last.default)(LISTENERS)?.disable();
+			LISTENERS.push(listener);
+			listener.enable();
+		},
+		unregister(listener) {
+			listener.disable();
+			(0, import_pull.default)(LISTENERS, listener);
+			(0, import_last.default)(LISTENERS)?.enable();
+		}
+	};
+}
+//#endregion
+export { makeListenerTowerContext };

package/_internal/packages/lumx-core/src/js/utils/iterable/first.js

@@ -0,0 +1,8 @@
+//#region ../lumx-core/src/js/utils/iterable/first.ts
+/** Return the first item of an iterable, or `null` if it is empty. */
+function first(iterable) {
+	const { value, done } = iterable[Symbol.iterator]().next();
+	return done ? null : value;
+}
+//#endregion
+export { first };

package/_internal/packages/lumx-core/src/js/utils/locale/getCurrentLocale.js

@@ -0,0 +1,10 @@
+//#region ../lumx-core/src/js/utils/locale/getCurrentLocale.ts
+/**
+* Get current browser locale (BCP-47 string).
+*
+* Reads `navigator.languages[0]` (the user's preferred language) with a
+* fallback to `navigator.language`.
+*/
+var getCurrentLocale = () => navigator.languages?.[0] || navigator.language;
+//#endregion
+export { getCurrentLocale };

package/_internal/packages/lumx-core/src/js/utils/select/findOptionById.js

@@ -0,0 +1,19 @@
+import { getWithSelector } from "../selectors/getWithSelector.js";
+//#region ../lumx-core/src/js/utils/select/findOptionById.ts
+/**
+* Find the option whose id matches the given value.
+*
+* Used by Select* wrappers to resolve a selection event (which carries the option id
+* as `selectedOption.value`) back to the original option object.
+*
+* @param options    The list of options.
+* @param getOptionId Selector returning the option id (matches `<Combobox.Option value>`).
+* @param id          The id to match against.
+* @return The matching option, or `undefined` if none is found / inputs are nullish.
+*/
+function findOptionById(options, getOptionId, id) {
+	if (id == null) return void 0;
+	return options?.find((option) => getWithSelector(getOptionId, option) === id);
+}
+//#endregion
+export { findOptionById };

package/_internal/packages/lumx-core/src/js/utils/select/getOptionDisplayName.js

@@ -0,0 +1,19 @@
+import { getWithSelector } from "../selectors/getWithSelector.js";
+//#region ../lumx-core/src/js/utils/select/getOptionDisplayName.ts
+/**
+* Get the display name for a single option value.
+*
+* Resolves the option's display name by trying `getOptionName` first,
+* then falling back to `getOptionId`, returning `''` for nullish values.
+*/
+function getOptionDisplayName(value, getOptionName, getOptionId) {
+	if (value === void 0 || value === null) return "";
+	if (getOptionName) {
+		const name = getWithSelector(getOptionName, value);
+		if (name != null) return String(name);
+	}
+	if (getOptionId) return String(getWithSelector(getOptionId, value));
+	return "";
+}
+//#endregion
+export { getOptionDisplayName };

package/_internal/packages/lumx-core/src/js/utils/select/renderSelectOptions.js

@@ -0,0 +1,55 @@
+import { getWithSelector } from "../selectors/getWithSelector.js";
+import { groupBySelector } from "../selectors/groupBySelector.js";
+import { createVNode, isVNode } from "vue";
+//#region ../lumx-core/src/js/utils/select/renderSelectOptions.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Render options as ComboboxOption elements.
+* Framework-specific components are passed as a second argument.
+*/
+function renderSelectOptions(props, components) {
+	const { options, getOptionId, getOptionName, getOptionDescription, renderOption, selected, getSectionId, renderSectionTitle } = props;
+	const { Combobox } = components;
+	if (getSectionId && options) {
+		const sections = groupBySelector(options, (option) => getWithSelector(getSectionId, option));
+		return Array.from(sections.entries()).map(([sectionId, sectionOptions]) => {
+			let _slot;
+			const sectionLabel = renderSectionTitle ? renderSectionTitle(sectionId, sectionOptions) : sectionId;
+			return createVNode(Combobox.Section, {
+				"key": sectionId,
+				"label": sectionLabel
+			}, _isSlot(_slot = renderSelectOptions({
+				options: sectionOptions,
+				getOptionId,
+				getOptionName,
+				getOptionDescription,
+				renderOption,
+				selected
+			}, components)) ? _slot : { default: () => [_slot] });
+		});
+	}
+	const selectedIds = selected ? new Set((Array.isArray(selected) ? selected : [selected]).map((s) => getWithSelector(getOptionId, s))) : void 0;
+	return options?.map((item, index) => {
+		const id = getWithSelector(getOptionId || getOptionName, item);
+		const name = getWithSelector(getOptionName || getOptionId, item) || id;
+		const description = getOptionDescription && getWithSelector(getOptionDescription, item);
+		const isSelected = selectedIds?.has(id) ?? false;
+		if (renderOption) return renderOption(item, {
+			index,
+			value: id,
+			name,
+			isSelected,
+			description
+		});
+		return createVNode(Combobox.Option, {
+			"key": id,
+			"value": id,
+			"description": description,
+			"isSelected": isSelected
+		}, _isSlot(name) ? name : { default: () => [name] });
+	});
+}
+//#endregion
+export { renderSelectOptions };

package/_internal/packages/lumx-core/src/js/utils/select/toggleSelection.js

@@ -0,0 +1,39 @@
+import { getWithSelector } from "../selectors/getWithSelector.js";
+import { findOptionById } from "./findOptionById.js";
+//#region ../lumx-core/src/js/utils/select/toggleSelection.ts
+/**
+* Compute the next selection state after a user toggles an option.
+*
+* Single-mode behaviour (`isMultiple=false`):
+* - Returns the option matched by id (or `undefined` if none matches the id —
+*   e.g. when the consumer triggers a custom action via `beforeOptions`).
+*
+* Multi-mode behaviour (`isMultiple=true`):
+* - If the option is already in the current value array → returns a new array with it removed.
+* - Otherwise → returns a new array with the option appended.
+* - If the id matches no option in `options` (e.g. custom actions), the current array is returned unchanged.
+*
+* Pure function: never mutates `currentValue`.
+*
+* @param options          The list of options.
+* @param getOptionId      Selector returning the option id (matches `<Combobox.Option value>`).
+* @param currentValue     Current selection (option, array of options, or undefined).
+* @param selectedOptionId Id of the option the user just selected.
+* @param isMultiple       Whether to use multi-select semantics.
+* @return                 The new selection — `O | undefined` in single mode, `O[]` in multi mode.
+*/
+function toggleSelection(options, getOptionId, currentValue, selectedOptionId, isMultiple) {
+	const newOption = findOptionById(options, getOptionId, selectedOptionId);
+	if (!isMultiple) return newOption;
+	const currentArray = Array.isArray(currentValue) ? currentValue : [];
+	const existingIndex = currentArray.findIndex((item) => getWithSelector(getOptionId, item) === selectedOptionId);
+	if (existingIndex === -1) {
+		if (!newOption) return currentArray;
+		return [...currentArray, newOption];
+	}
+	const updated = [...currentArray];
+	updated.splice(existingIndex, 1);
+	return updated;
+}
+//#endregion
+export { toggleSelection };

package/_internal/packages/lumx-core/src/js/utils/select/types.d.ts

@@ -0,0 +1,224 @@
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { Selector } from "../../types/Selector.js";
+//#region ../lumx-core/src/js/utils/select/types.d.ts
+/**
+ * Status of the select dropdown list.
+ *
+ * - `'idle'` — Default state, no loading indicators.
+ * - `'loading'` — Full loading: shows skeleton placeholders, hides real options.
+ * - `'loadingMore'` — Paginated loading: appends a skeleton after existing options.
+ * - `'error'` — Error state: shows an error message in the dropdown.
+ */
+type SelectListStatus = 'idle' | 'loading' | 'loadingMore' | 'error';
+/**
+ * Context passed to the `renderOption` callback alongside the option object.
+ * Contains core-computed values that the consumer should forward to `<Combobox.Option>`.
+ */
+interface RenderOptionContext {
+  /** Index of the option in the current (possibly section-filtered) list. */
+  index: number;
+  /** Resolved option id (from `getOptionId`). Should be passed as `value` to `<Combobox.Option>`. */
+  value: any;
+  /** Resolved option name (from `getOptionName`, falling back to `getOptionId`). */
+  name: string;
+  /** Whether this option is currently selected. Should be forwarded as `isSelected`. */
+  isSelected: boolean;
+  /** Resolved description string (from `getOptionDescription`), if any. Should be forwarded as `description`. */
+  description?: string | null;
+}
+interface BaseSelectProps<O> {
+  /** List of option objects. */
+  options?: Array<O>;
+  /** Option object id selector. */
+  getOptionId: Selector<O>;
+  /** Option object name selector (falls back to id if not defined). */
+  getOptionName?: Selector<O, string | undefined | null>;
+  /** Option object description selector. */
+  getOptionDescription?: Selector<O, string | undefined | null>;
+  /**
+   * Custom option render function (core/Vue contract).
+   * Receives the option object and a `RenderOptionContext` with core-computed props (`value`,
+   * `isSelected`, `description`, `index`). The callee must render a `<Combobox.Option>` and
+   * forward those context values, including a unique `key`.
+   *
+   * @example (Vue / core level)
+   * renderOption={(fruit, { value, isSelected, description }) => (
+   *     <Combobox.Option key={value} value={value} isSelected={isSelected} description={description}>
+   *         <strong>{fruit.name}</strong>
+   *     </Combobox.Option>
+   * )}
+   */
+  renderOption?: (option: O, context: RenderOptionContext) => JSXElement;
+  /**
+   * Selector returning a section id string for each option. Options with the same
+   * section id are grouped together. The id is also used as the default displayed
+   * label unless `renderSectionTitle` is provided.
+   */
+  getSectionId?: Selector<O, string | undefined>;
+  /**
+   * Custom section title render function. Receives the section id and the options
+   * in that section. Returns custom JSX to display as the section header.
+   * When not provided, the section id is used as a plain text label.
+   */
+  renderSectionTitle?: (sectionId: string | undefined, options: O[]) => JSXElement;
+}
+/**
+ * Shared translation labels for SelectTextField wrappers (React and Vue).
+ */
+interface SelectTextFieldTranslations {
+  /** Accessible label for the clear button. */
+  clearLabel?: string;
+  /** Accessible label for the show-suggestions toggle button. When omitted, the toggle button is not rendered. */
+  showSuggestionsLabel?: string;
+  /** Accessible label for the chip group. */
+  chipGroupLabel?: string;
+  /** Accessible label for the remove action on chips (used in visually hidden text). */
+  chipRemoveLabel?: string;
+  /** Screen reader loading announcement (e.g. "Loading…"). */
+  loadingMessage?: string;
+  /**
+   * Message to display when the list has no visible options.
+   * Can be a plain string or a function receiving the current input value (for dynamic messages).
+   * When omitted, the empty state is not shown.
+   */
+  emptyMessage?: string | ((inputValue: string) => string);
+  /**
+   * Message callback to display the number of available options.
+   * Called with the current visible option count and should return a human-readable string
+   * (e.g. `(n) => \`${n} result(s) available\``).
+   * Displayed when the combobox is open, not empty, not loading, and not in error.
+   * When omitted, no option count message is shown.
+   */
+  nbOptionMessage?: (optionsLength: number) => string;
+  /** Error title displayed in the dropdown (e.g. "Failed to load"). */
+  errorMessage?: string;
+  /** Secondary error message (e.g. "Please try again"). */
+  errorTryReloadMessage?: string;
+}
+/**
+ * Shared translation labels for SelectButton wrappers (React and Vue).
+ */
+interface SelectButtonTranslations {
+  /** Screen reader loading announcement (e.g. "Loading…"). */
+  loadingMessage?: string;
+  /**
+   * Message to display when the list has no visible options.
+   * Can be a plain string or a function receiving the current input value (for dynamic messages).
+   * When omitted, the empty state is not shown.
+   */
+  emptyMessage?: string | ((inputValue: string) => string);
+  /**
+   * Message callback to display the number of available options.
+   * Called with the current visible option count and should return a human-readable string.
+   * Displayed when the dropdown is open, not empty, not loading, and not in error.
+   * When omitted, no option count message is shown.
+   */
+  nbOptionMessage?: (optionsLength: number) => string;
+  /** Error title displayed in the dropdown (e.g. "Failed to load"). */
+  errorMessage?: string;
+  /** Secondary error message (e.g. "Please try again"). */
+  errorTryReloadMessage?: string;
+}
+/**
+ * Wrapper-level props shared between React and Vue SelectButton implementations.
+ * These are framework-specific concerns (not part of the core template) that both
+ * wrappers need — extracted here to avoid duplication.
+ */
+interface BaseSelectButtonWrapperProps<O> extends Pick<BaseSelectProps<O>, 'options' | 'getOptionId' | 'getOptionName' | 'getOptionDescription' | 'getSectionId'> {
+  /**
+   * Selection type. Discriminator that wrappers expand into a typed union:
+   * `'single'` (default) → `value?: O`, `'multiple'` → `value: O[]`.
+   */
+  selectionType?: 'single' | 'multiple';
+  /** Button label (used for ARIA and when no selection). */
+  label: string;
+  /**
+   * Status of the dropdown list.
+   * @default 'idle'
+   */
+  listStatus?: SelectListStatus;
+  /** Optional translations for screen-reader announcements (loading/empty/error/option count). */
+  translations?: SelectButtonTranslations;
+}
+/**
+ * Wrapper-level props shared between React and Vue SelectTextField implementations.
+ * These are framework-specific concerns (not part of the core template) that both
+ * wrappers need — extracted here to avoid duplication.
+ */
+interface BaseSelectTextFieldWrapperProps<O> extends Pick<BaseSelectProps<O>, 'options' | 'getOptionId' | 'getOptionName' | 'getOptionDescription' | 'getSectionId'>, HasAriaDisabled, HasTheme {
+  /** Selection type: 'single' or 'multiple'. */
+  selectionType: 'single' | 'multiple';
+  /**
+   * Status of the dropdown list.
+   * @default 'idle'
+   */
+  listStatus?: SelectListStatus;
+  /**
+   * Controls how the combobox filters options as the user types.
+   *
+   * - `'auto'` — Options that do not match the input value are hidden client-side.
+   * - `'manual'` — All options remain visible; filtering is the consumer's
+   *   responsibility (e.g. by updating the `options` prop in response to `onSearch`).
+   * - `'off'` — Like `'manual'`, but the input is also set to `readOnly` and
+   *   `openOnFocus` defaults to `true` (useful for static dropdowns / pure pickers).
+   *
+   * This prop is independent of `onSearch`: you can use both together (e.g. client-side
+   * filtering + tracking search text for a "create" action), or use `filter: 'manual'`
+   * without `onSearch` for static dropdowns.
+   */
+  filter: 'auto' | 'manual' | 'off';
+  /**
+   * Controlled search input value.
+   * When provided, this value seeds (and resets) the visible search text in the input.
+   * Setting it to `''` (empty string) resets the input.
+   */
+  searchInputValue?: string;
+  /**
+   * Whether to show a clear button when a value is selected.
+   * @default true
+   */
+  hasClearButton?: boolean;
+  /**
+   * When true, the dropdown opens automatically when the input receives focus.
+   * When false (default), the dropdown only opens on click, typing, or keyboard navigation.
+   *
+   * @default false
+   */
+  openOnFocus?: boolean;
+  /** Field label (required). Also used as aria-label for the listbox. */
+  label: string;
+  /** Input placeholder text. */
+  placeholder?: string;
+  /** Leading icon (SVG path). */
+  icon?: string;
+  /** Disabled state. */
+  isDisabled?: boolean;
+  /** Required field indicator. */
+  isRequired?: boolean;
+  /** Error state flag. */
+  hasError?: boolean;
+  /** Error message text. */
+  error?: string;
+  /** Helper text below the field. */
+  helper?: string;
+  /** Native input id attribute. */
+  id?: string;
+  /** Native input name attribute. */
+  name?: string;
+  /** Whether displayed with valid style. */
+  isValid?: boolean;
+  /** Maximum string length (shows character counter). */
+  maxLength?: number;
+  /** Accessible label for the input element (overrides the visual label for screen readers). */
+  ariaLabel?: string;
+  /** Additional props forwarded to the Combobox.Input (and ultimately to TextField). */
+  inputProps?: Record<string, any>;
+  /** Props forwarded to the Combobox.Popover. */
+  popoverProps?: Record<string, any>;
+  /** Labels for the clear button, toggle button, and chip group. */
+  translations: SelectTextFieldTranslations;
+}
+//#endregion
+export { BaseSelectButtonWrapperProps, BaseSelectProps, BaseSelectTextFieldWrapperProps, SelectButtonTranslations, SelectListStatus, SelectTextFieldTranslations };

package/_internal/packages/lumx-core/src/js/utils/selectors/getWithSelector.js

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/utils/selectors/getWithSelector.ts
+/** Get value with a string of function selector */
+var getWithSelector = (selector, object) => {
+	if (typeof selector === "function") return selector(object);
+	if (typeof selector === "string") return object[selector];
+	return String(object);
+};
+//#endregion
+export { getWithSelector };

package/_internal/packages/lumx-core/src/js/utils/selectors/groupBySelector.js

@@ -0,0 +1,21 @@
+import { getWithSelector } from "./getWithSelector.js";
+//#region ../lumx-core/src/js/utils/selectors/groupBySelector.ts
+/**
+* Equivalent to `lodash/groupBy` but returns a `Map` of groups items (instead of an object)
+* (has the major advantage to not forcing the keys to be string!)
+*/
+function groupBySelector(array, selector) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const item of array) {
+		const key = getWithSelector(selector, item);
+		let group = groups.get(key);
+		if (!group) {
+			group = [];
+			groups.set(key, group);
+		}
+		group.push(item);
+	}
+	return groups;
+}
+//#endregion
+export { groupBySelector };

package/_internal/packages/lumx-core/src/js/utils/time/buildTimeList.js

@@ -0,0 +1,36 @@
+import { formatTime } from "./formatTime.js";
+import { getDateAtTime } from "./getDateAtTime.js";
+import { timeOfDayMinutes } from "./timeOfDayMinutes.js";
+//#region ../lumx-core/src/js/utils/time/buildTimeList.ts
+var MINUTES_IN_HOUR = 60;
+var MINUTES_IN_DAY = 24 * MINUTES_IN_HOUR;
+/**
+* Build a full-day list of `TimeOfDay` entries spaced `step` minutes apart.
+* Out-of-bounds entries are kept (with `outOfRange: true`) so consumers can
+* render them as visible-but-unselectable. Returns `[]` for invalid `step`.
+*/
+function buildTimeList(options = {}) {
+	const { step = 30, minTime, maxTime, locale } = options;
+	if (!Number.isInteger(step) || step <= 0) return [];
+	const minMinutes = minTime ? timeOfDayMinutes(minTime) : void 0;
+	const maxMinutes = maxTime ? timeOfDayMinutes(maxTime) : void 0;
+	const list = [];
+	for (let minutes = 0; minutes < MINUTES_IN_DAY; minutes += step) {
+		const hour = Math.floor(minutes / MINUTES_IN_HOUR);
+		const minute = minutes % MINUTES_IN_HOUR;
+		const outOfRange = minMinutes !== void 0 && minutes < minMinutes || maxMinutes !== void 0 && minutes > maxMinutes || void 0;
+		const name = locale ? formatTime(getDateAtTime({
+			hour,
+			minute
+		}), locale) : void 0;
+		list.push({
+			hour,
+			minute,
+			name,
+			outOfRange
+		});
+	}
+	return list;
+}
+//#endregion
+export { buildTimeList };

package/_internal/packages/lumx-core/src/js/utils/time/formatTime.js

@@ -0,0 +1,14 @@
+//#region ../lumx-core/src/js/utils/time/formatTime.ts
+/**
+* Format a time-of-day as a locale-aware short time (e.g. `'10:30 AM'`,
+* `'10:30'`). Hour is `numeric` (not `'2-digit'`); some locales insert a
+* narrow no-break space (U+202F) before AM/PM.
+*/
+function formatTime(date, locale) {
+	return date.toLocaleTimeString(locale, {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+//#endregion
+export { formatTime };

package/_internal/packages/lumx-core/src/js/utils/time/getDateAtTime.js

@@ -0,0 +1,12 @@
+//#region ../lumx-core/src/js/utils/time/getDateAtTime.ts
+/**
+* Build a new `Date` with the given time-of-day, inheriting the date part of
+* `reference` (or today). Seconds/ms zeroed; `reference` is not mutated.
+*/
+function getDateAtTime({ hour, minute }, reference) {
+	const next = reference ? new Date(reference) : /* @__PURE__ */ new Date();
+	next.setHours(hour, minute, 0, 0);
+	return next;
+}
+//#endregion
+export { getDateAtTime };

package/_internal/packages/lumx-core/src/js/utils/time/isDateOnTime.js

@@ -0,0 +1,10 @@
+//#region ../lumx-core/src/js/utils/time/isDateOnTime.ts
+/**
+* Returns `true` when the time-of-day of `date` matches `time` (hour and
+* minute). Seconds and milliseconds are ignored.
+*/
+function isDateOnTime(date, time) {
+	return date.getHours() === time.hour && date.getMinutes() === time.minute;
+}
+//#endregion
+export { isDateOnTime };

package/_internal/packages/lumx-core/src/js/utils/time/parseTimeInput.js

@@ -0,0 +1,46 @@
+//#region ../lumx-core/src/js/utils/time/parseTimeInput.ts
+/**
+* Match a free-form time. Supports:
+* - 12h with am/pm suffix (`a`, `am`, `p`, `pm`, `a.m.`, `p.m.`), optional whitespace
+* - 24h with colon (`15:45`), dot (`15.45`), `h` (`15h45`) or no separator (`1545`)
+* - Optional seconds segment (ignored): `15:45:00`, `15.45.00`
+* - Optional ISO `T` prefix and trailing `Z` (UTC marker)
+*
+* Capture groups:
+*   1: hour, 2: minutes (optional), 3: am/pm marker (optional)
+*/
+var RE_TIME = /^T?(\d{1,2})(?:[:.h]?([0-5]\d)(?:[:.]?[0-5]\d)?)?\s*(a\.?m?\.?|p\.?m?\.?)?Z?$/i;
+/**
+* Parse a free-form user time input into a 24h `TimeOfDay`. Accepts a wide
+* range of formats:
+*
+* - 12h AM/PM: `'2pm'`, `'2 PM'`, `'2:30pm'`, `'3.45 PM'`, `'3:45 p.m.'`
+* - 24h colon: `'10:30'`, `'15:45'`
+* - 24h dot (DE/FR/IT): `'15.45'`
+* - 24h French: `'15h45'`
+* - Military / no separator: `'1545'`, `'1030pm'`
+* - With seconds (ignored): `'15:45:00'`
+* - ISO 8601: `'T15:45'`, `'15:45Z'`
+*
+* Whitespace is trimmed. Returns `undefined` if no format matches.
+*/
+function parseTimeInput(raw) {
+	if (typeof raw !== "string") return void 0;
+	const match = raw.trim().match(RE_TIME);
+	if (!match) return void 0;
+	const [, rawHour, rawMinute, ampm] = match;
+	let hour = Number(rawHour);
+	const minute = rawMinute ? Number(rawMinute) : 0;
+	if (ampm) {
+		if (hour < 1 || hour > 12) return void 0;
+		const isPm = ampm[0].toLowerCase() === "p";
+		if (hour === 12) hour = isPm ? 12 : 0;
+		else if (isPm) hour += 12;
+	} else if (hour > 23) return;
+	return {
+		hour,
+		minute
+	};
+}
+//#endregion
+export { parseTimeInput };

package/_internal/packages/lumx-core/src/js/utils/time/snapTimeToBounds.js

@@ -0,0 +1,21 @@
+import { timeOfDayMinutes } from "./timeOfDayMinutes.js";
+//#region ../lumx-core/src/js/utils/time/snapTimeToBounds.ts
+/**
+* Clamp `time` to `[minTime, maxTime]`. Inputs strictly before `minTime` snap
+* up; inputs strictly after `maxTime` snap down; otherwise returned unchanged.
+* Only the time-of-day of `minTime`/`maxTime` is used.
+*/
+function snapTimeToBounds(time, minTime, maxTime) {
+	const totalMinutes = time.hour * 60 + time.minute;
+	if (minTime && totalMinutes < timeOfDayMinutes(minTime)) return {
+		hour: minTime.getHours(),
+		minute: minTime.getMinutes()
+	};
+	if (maxTime && totalMinutes > timeOfDayMinutes(maxTime)) return {
+		hour: maxTime.getHours(),
+		minute: maxTime.getMinutes()
+	};
+	return time;
+}
+//#endregion
+export { snapTimeToBounds };

package/_internal/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.js

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/utils/time/timeOfDayMinutes.ts
+/**
+* Return the time-of-day of `date` in minutes since 00:00 (date part ignored).
+*/
+function timeOfDayMinutes(date) {
+	return date.getHours() * 60 + date.getMinutes();
+}
+//#endregion
+export { timeOfDayMinutes };