@lumx/core 4.14.0-next.1 → 4.14.0-next.3

package/js/components/TimePickerField/Stories.d.ts

@@ -0,0 +1,57 @@
+import type { SetupStoriesOptions } from '@lumx/core/stories/types';
+/**
+ * Setup TimePickerField stories for a specific framework (React or Vue).
+ *
+ * The framework wrapper (`TimePickerField`) is fully self-contained — it builds
+ * its option list from `step`/`minTime`/`maxTime`/`locale` internally — so each
+ * story is just an args object with optional render override.
+ */
+export declare function setup({ component: TimePickerField, decorators: { withValueOnChange, withCombinations }, }: SetupStoriesOptions<{
+    decorators: 'withValueOnChange' | 'withCombinations';
+}>): {
+    meta: {
+        component: any;
+        args: {
+            label: string;
+            locale: string;
+            translations: {
+                clearLabel: string;
+                showSuggestionsLabel: string;
+            };
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+    Default: {};
+    WithValue: {
+        args: {
+            value: Date;
+        };
+    };
+    Step15: {
+        args: {
+            step: number;
+        };
+    };
+    WithMinTime: {
+        args: {
+            minTime: Date;
+        };
+    };
+    WithMaxTime: {
+        args: {
+            maxTime: Date;
+        };
+    };
+    French: {
+        args: {
+            locale: string;
+            value: Date;
+        };
+    };
+    Disabled: {
+        args: {
+            value: Date;
+        };
+        decorators: ((story: any, context: any) => any)[];
+    };
+};

package/js/components/TimePickerField/Tests.d.ts

@@ -0,0 +1,29 @@
+export declare const TRANSLATIONS: {
+    clearLabel: string;
+    showSuggestionsLabel: string;
+};
+type RenderResult = {
+    unmount: () => void;
+    container: HTMLElement;
+};
+/**
+ * Options to set up the TimePickerField test suite.
+ * Injected by the framework-specific test file (React or Vue).
+ */
+export interface TimePickerFieldTestSetup {
+    components: {
+        TimePickerField: any;
+    };
+    /**
+     * Render a TimePickerField template with controlled state management.
+     *
+     * @param template    JSX render function receiving `{ value, onChange, ... }`.
+     * @param initialArgs Initial props (value, spies, etc.).
+     */
+    renderWithState: (template: (props: any) => any, initialArgs?: Record<string, any>) => RenderResult;
+}
+export declare function createTemplates(TimePickerField: any): {
+    defaultTemplate: (props: any) => import("react").JSX.Element;
+};
+export default function timePickerFieldTests({ components, renderWithState }: TimePickerFieldTestSetup): void;
+export {};

package/js/components/TimePickerField/index.d.ts

@@ -0,0 +1,64 @@
+import type { GenericProps, HasClassName, HasTheme, LumxClassName } from '../../types';
+import type { TimeOfDay } from '../../utils/time';
+import type { SelectTextFieldTranslations } from '../../utils/select/types';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "TimePickerField";
+/**
+ * Component default class name (BEM root).
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * Translations consumed by `TimePickerField` (forwarded as-is to the underlying
+ * `SelectTextField`).
+ */
+export type TimePickerFieldTranslations = Pick<SelectTextFieldTranslations, 'clearLabel' | 'showSuggestionsLabel'>;
+/**
+ * Core props for the `TimePickerField` template.
+ */
+export interface TimePickerFieldProps extends HasTheme, HasClassName, GenericProps {
+    /**
+     * Currently selected option. Resolve from the consumer's `Date` value via
+     * `value && timeList.find((e) => e.hour === value.getHours() && e.minute === value.getMinutes())`.
+     */
+    value?: TimeOfDay;
+    /** Time options (one entry per `step`-minute slot). */
+    options: TimeOfDay[];
+    /** Translation labels (clear button, show-suggestions toggle). */
+    translations: TimePickerFieldTranslations;
+    /** Called when the user picks (or clears) an option. */
+    handleChange(next: TimeOfDay | undefined): void;
+    /** Called as the user types — wrappers track this to resolve on blur. */
+    handleSearch(typed: string): void;
+    /** Called when the input loses focus — wrappers commit the typed value. */
+    handleBlur(): void;
+}
+/**
+ * Injected framework-specific components for TimePickerField rendering.
+ */
+export interface TimePickerFieldComponents {
+    /** Framework-specific `SelectTextField` wrapper. */
+    SelectTextField: any;
+    /** Framework-specific `SelectTextField.Option` sub-component (used to render disabled out-of-range entries). */
+    Option: any;
+}
+/**
+ * `TimePickerField` core template.
+ *
+ * Renders a `SelectTextField<TimeOfDay>` with an option list built from
+ * `buildTimeList`. Out-of-range options (strictly before `minTime` / after
+ * `maxTime`) remain visible in the dropdown but are rendered as disabled.
+ *
+ * Framework-specific components are passed as a second argument by the
+ * React/Vue wrappers.
+ *
+ * @param props      Component props.
+ * @param components Injected framework-specific components.
+ * @return JSX element.
+ */
+export declare const TimePickerField: {
+    (props: TimePickerFieldProps, { SelectTextField, Option }: TimePickerFieldComponents): import("react").JSX.Element;
+    displayName: string;
+    className: "lumx-time-picker-field";
+};

package/js/utils/locale/getCurrentLocale.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Get current browser locale (BCP-47 string).
+ *
+ * Reads `navigator.languages[0]` (the user's preferred language) with a
+ * fallback to `navigator.language`.
+ */
+export declare const getCurrentLocale: () => string;

package/js/utils/locale/index.d.ts

@@ -0,0 +1 @@
+export { getCurrentLocale } from './getCurrentLocale';

package/js/utils/time/buildTimeList.d.ts

@@ -0,0 +1,34 @@
+/**
+ * A time-of-day (24h), independent of any date or time zone. Canonical
+ * exchange shape for the time utilities and `TimePickerField`.
+ */
+export interface TimeOfDay {
+    /** 0–23 */
+    hour: number;
+    /** 0–59 */
+    minute: number;
+    /** Locale-aware short display string. Populated by `buildTimeList` when `locale` is set. */
+    name?: string;
+    /**
+     * `true` when strictly outside `[minTime, maxTime]`. Set by `buildTimeList`;
+     * consumers typically forward this as `isDisabled` on the rendered option.
+     */
+    outOfRange?: boolean;
+}
+/** Options for `buildTimeList`. */
+export interface BuildTimeListOptions {
+    /** Positive integer minute interval between entries. @default 30 */
+    step?: number;
+    /** Lower bound (date part ignored). Entries before are kept but marked `outOfRange`. */
+    minTime?: Date;
+    /** Upper bound (date part ignored). Entries after are kept but marked `outOfRange`. */
+    maxTime?: Date;
+    /** BCP-47 locale used to populate `name` on each entry. */
+    locale?: string;
+}
+/**
+ * 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`.
+ */
+export declare function buildTimeList(options?: BuildTimeListOptions): TimeOfDay[];

package/js/utils/time/formatTime.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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.
+ */
+export declare function formatTime(date: Date, locale: string): string;

package/js/utils/time/getDateAtTime.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export declare function getDateAtTime({ hour, minute }: {
+    hour: number;
+    minute: number;
+}, reference?: Date): Date;

package/js/utils/time/index.d.ts

@@ -0,0 +1,8 @@
+/** Time of day utilities */
+export { buildTimeList, type BuildTimeListOptions, type TimeOfDay } from './buildTimeList';
+export { formatTime } from './formatTime';
+export { parseTimeInput } from './parseTimeInput';
+export { getDateAtTime } from './getDateAtTime';
+export { timeOfDayMinutes } from './timeOfDayMinutes';
+export { snapTimeToBounds } from './snapTimeToBounds';
+export { isDateOnTime } from './isDateOnTime';

package/js/utils/time/isDateOnTime.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns `true` when the time-of-day of `date` matches `time` (hour and
+ * minute). Seconds and milliseconds are ignored.
+ */
+export declare function isDateOnTime(date: Date, time: {
+    hour: number;
+    minute: number;
+}): boolean;

package/js/utils/time/parseTimeInput.d.ts

@@ -0,0 +1,16 @@
+import type { TimeOfDay } from './buildTimeList';
+/**
+ * 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.
+ */
+export declare function parseTimeInput(raw: string): TimeOfDay | undefined;

package/js/utils/time/snapTimeToBounds.d.ts

@@ -0,0 +1,7 @@
+import type { TimeOfDay } from './buildTimeList';
+/**
+ * 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.
+ */
+export declare function snapTimeToBounds(time: TimeOfDay, minTime?: Date, maxTime?: Date): TimeOfDay;

package/js/utils/time/timeOfDayMinutes.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Return the time-of-day of `date` in minutes since 00:00 (date part ignored).
+ */
+export declare function timeOfDayMinutes(date: Date): number;

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.14.0-next.1",
+        "@lumx/icons": "^4.14.0-next.3",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -69,7 +69,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.14.0-next.1",
+    "version": "4.14.0-next.3",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",