@uipath/apollo-wind 2.80.1 → 2.82.0

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

@@ -47,6 +47,7 @@ export * from './label';
 export * from './layout';
 export * from './live-region';
 export * from './loading-dots';
+export * from './locale-provider';
 export * from './lockable-value-field';
 export * from './markdown';
 export * from './marker';

package/dist/components/ui/index.js

@@ -50,6 +50,7 @@ export * from "./label.js";
 export * from "./layout/index.js";
 export * from "./live-region.js";
 export * from "./loading-dots.js";
+export * from "./locale-provider.js";
 export * from "./lockable-value-field/index.js";
 export * from "./markdown.js";
 export * from "./marker.js";

package/dist/components/ui/locale-provider.cjs

@@ -0,0 +1,124 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useDatePickerStrings: ()=>useDatePickerStrings,
+    DEFAULT_DATE_PICKER_STRINGS: ()=>DEFAULT_DATE_PICKER_STRINGS,
+    LocaleProvider: ()=>LocaleProvider,
+    useResolvedDateLocale: ()=>useResolvedDateLocale,
+    useDateLocale: ()=>useDateLocale
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const date_locale_cjs_namespaceObject = require("../../lib/date-locale.cjs");
+const DEFAULT_DATE_PICKER_STRINGS = {
+    pickDate: 'Pick a date',
+    pickDateRange: 'Pick a date range',
+    pickDateTime: 'Pick a date and time',
+    selectedDate: (date)=>`Selected date: ${date}`,
+    selectedRange: (from, to)=>`Selected range: ${from} to ${to}`,
+    time: 'Time',
+    hours: 'Hours',
+    minutes: 'Minutes',
+    dayPeriod: 'AM/PM',
+    clear: 'Clear',
+    done: 'Done'
+};
+const LocaleContext = /*#__PURE__*/ external_react_namespaceObject.createContext({
+    datePickerStrings: DEFAULT_DATE_PICKER_STRINGS
+});
+function mergeStrings(base, overrides) {
+    const merged = {
+        ...base
+    };
+    for (const key of Object.keys(overrides)){
+        const value = overrides[key];
+        if (void 0 !== value) merged[key] = value;
+    }
+    return merged;
+}
+function useResolvedDateLocale(locale) {
+    const tag = 'string' == typeof locale ? locale : void 0;
+    const [, rerender] = external_react_namespaceObject.useReducer((n)=>n + 1, 0);
+    external_react_namespaceObject.useEffect(()=>{
+        if (!tag || (0, date_locale_cjs_namespaceObject.getLoadedDateLocale)(tag)) return;
+        let active = true;
+        (0, date_locale_cjs_namespaceObject.loadDateLocale)(tag).then(()=>{
+            if (active) rerender();
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        tag
+    ]);
+    if ('object' == typeof locale) return locale;
+    return tag ? (0, date_locale_cjs_namespaceObject.getLoadedDateLocale)(tag) : void 0;
+}
+function useDateLocale(locale) {
+    const own = useResolvedDateLocale(locale);
+    const inherited = external_react_namespaceObject.useContext(LocaleContext).dateLocale;
+    return void 0 === locale ? inherited : own;
+}
+function useDatePickerStrings(overrides) {
+    const inherited = external_react_namespaceObject.useContext(LocaleContext).datePickerStrings;
+    return external_react_namespaceObject.useMemo(()=>overrides ? mergeStrings(inherited, overrides) : inherited, [
+        inherited,
+        overrides
+    ]);
+}
+function LocaleProvider({ locale, datePickerStrings, children }) {
+    const outer = external_react_namespaceObject.useContext(LocaleContext);
+    const own = useResolvedDateLocale(locale);
+    const dateLocale = void 0 === locale ? outer.dateLocale : own;
+    const value = external_react_namespaceObject.useMemo(()=>({
+            dateLocale,
+            datePickerStrings: datePickerStrings ? mergeStrings(outer.datePickerStrings, datePickerStrings) : outer.datePickerStrings
+        }), [
+        dateLocale,
+        datePickerStrings,
+        outer.datePickerStrings
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LocaleContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+exports.DEFAULT_DATE_PICKER_STRINGS = __webpack_exports__.DEFAULT_DATE_PICKER_STRINGS;
+exports.LocaleProvider = __webpack_exports__.LocaleProvider;
+exports.useDateLocale = __webpack_exports__.useDateLocale;
+exports.useDatePickerStrings = __webpack_exports__.useDatePickerStrings;
+exports.useResolvedDateLocale = __webpack_exports__.useResolvedDateLocale;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DEFAULT_DATE_PICKER_STRINGS",
+    "LocaleProvider",
+    "useDateLocale",
+    "useDatePickerStrings",
+    "useResolvedDateLocale"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/locale-provider.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { type DateLocale } from '../../lib/date-locale';
+/** The English text of the date and time pickers, overridable key by key. */
+export interface DatePickerStrings {
+    /** DatePicker placeholder. */
+    pickDate: string;
+    /** DateRangePicker placeholder. */
+    pickDateRange: string;
+    /** DateTimePicker placeholder. */
+    pickDateTime: string;
+    /** Accessible name of a trigger holding a date, when nothing else labels it. */
+    selectedDate: (date: string) => string;
+    /** Accessible name of a range trigger holding both ends, when nothing else labels it. */
+    selectedRange: (from: string, to: string) => string;
+    /** Heading of the DateTimePicker time field. */
+    time: string;
+    /** Accessible name of the hour segment. */
+    hours: string;
+    /** Accessible name of the minute segment. */
+    minutes: string;
+    /** Accessible name of the AM/PM choice. */
+    dayPeriod: string;
+    /** DateTimePicker button that empties the value. */
+    clear: string;
+    /** DateTimePicker button that closes the panel. */
+    done: string;
+}
+export declare const DEFAULT_DATE_PICKER_STRINGS: DatePickerStrings;
+/**
+ * Resolves a language tag to its date locale, loading it on first use. Renders in English
+ * until the language arrives; a locale object is used as is.
+ */
+export declare function useResolvedDateLocale(locale: string | DateLocale | undefined): DateLocale | undefined;
+/** The date locale from a component's own `locale` prop, else the nearest `LocaleProvider`. */
+export declare function useDateLocale(locale?: string | DateLocale): DateLocale | undefined;
+/** The date picker strings from the nearest `LocaleProvider`, with a component's overrides on top. */
+export declare function useDatePickerStrings(overrides?: Partial<DatePickerStrings>): DatePickerStrings;
+export interface LocaleProviderProps {
+    /**
+     * The platform language as a tag (`'de'`, `'pt-BR'`, `'zh-TW'`), or a locale from
+     * `react-day-picker/locale`. A tag loads its locale on first use and renders in English until
+     * then; await `loadDateLocale(tag)` and pass the result to avoid that. Unset, an outer
+     * provider's locale applies, and English without one.
+     */
+    locale?: string | DateLocale;
+    /** Translations for the date and time pickers, merged over any outer provider's. */
+    datePickerStrings?: Partial<DatePickerStrings>;
+    children: React.ReactNode;
+}
+/**
+ * Sets the language of the apollo-wind components below it, usually once at the app root.
+ * Dates, month and weekday names, the first day of the week, the 12- or 24-hour clock and the
+ * calendar's own accessible labels follow `locale`. The pickers' remaining text comes from
+ * `datePickerStrings`, in English unless translated. Components also take their own `locale`
+ * and `strings`, which win over the provider.
+ */
+export declare function LocaleProvider({ locale, datePickerStrings, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/locale-provider.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useReducer } from "react";
+import { getLoadedDateLocale, loadDateLocale } from "../../lib/date-locale.js";
+const DEFAULT_DATE_PICKER_STRINGS = {
+    pickDate: 'Pick a date',
+    pickDateRange: 'Pick a date range',
+    pickDateTime: 'Pick a date and time',
+    selectedDate: (date)=>`Selected date: ${date}`,
+    selectedRange: (from, to)=>`Selected range: ${from} to ${to}`,
+    time: 'Time',
+    hours: 'Hours',
+    minutes: 'Minutes',
+    dayPeriod: 'AM/PM',
+    clear: 'Clear',
+    done: 'Done'
+};
+const LocaleContext = /*#__PURE__*/ createContext({
+    datePickerStrings: DEFAULT_DATE_PICKER_STRINGS
+});
+function mergeStrings(base, overrides) {
+    const merged = {
+        ...base
+    };
+    for (const key of Object.keys(overrides)){
+        const value = overrides[key];
+        if (void 0 !== value) merged[key] = value;
+    }
+    return merged;
+}
+function useResolvedDateLocale(locale) {
+    const tag = 'string' == typeof locale ? locale : void 0;
+    const [, rerender] = useReducer((n)=>n + 1, 0);
+    useEffect(()=>{
+        if (!tag || getLoadedDateLocale(tag)) return;
+        let active = true;
+        loadDateLocale(tag).then(()=>{
+            if (active) rerender();
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        tag
+    ]);
+    if ('object' == typeof locale) return locale;
+    return tag ? getLoadedDateLocale(tag) : void 0;
+}
+function useDateLocale(locale) {
+    const own = useResolvedDateLocale(locale);
+    const inherited = useContext(LocaleContext).dateLocale;
+    return void 0 === locale ? inherited : own;
+}
+function useDatePickerStrings(overrides) {
+    const inherited = useContext(LocaleContext).datePickerStrings;
+    return useMemo(()=>overrides ? mergeStrings(inherited, overrides) : inherited, [
+        inherited,
+        overrides
+    ]);
+}
+function LocaleProvider({ locale, datePickerStrings, children }) {
+    const outer = useContext(LocaleContext);
+    const own = useResolvedDateLocale(locale);
+    const dateLocale = void 0 === locale ? outer.dateLocale : own;
+    const value = useMemo(()=>({
+            dateLocale,
+            datePickerStrings: datePickerStrings ? mergeStrings(outer.datePickerStrings, datePickerStrings) : outer.datePickerStrings
+        }), [
+        dateLocale,
+        datePickerStrings,
+        outer.datePickerStrings
+    ]);
+    return /*#__PURE__*/ jsx(LocaleContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+export { DEFAULT_DATE_PICKER_STRINGS, LocaleProvider, useDateLocale, useDatePickerStrings, useResolvedDateLocale };

package/dist/components/ui/quick-form-field/quick-form-field.cjs

@@ -35,6 +35,7 @@ const external_editable_text_cjs_namespaceObject = require("../editable-text.cjs
 const external_file_upload_cjs_namespaceObject = require("../file-upload.cjs");
 const external_input_group_cjs_namespaceObject = require("../input-group.cjs");
 const external_label_cjs_namespaceObject = require("../label.cjs");
+const external_locale_provider_cjs_namespaceObject = require("../locale-provider.cjs");
 const external_multi_select_cjs_namespaceObject = require("../multi-select.cjs");
 const external_popover_cjs_namespaceObject = require("../popover.cjs");
 const external_prompt_value_control_cjs_namespaceObject = require("../prompt-value-control.cjs");
@@ -60,6 +61,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         }), [
         stringOverrides
     ]);
+    const dateLocale = (0, external_locale_provider_cjs_namespaceObject.useDateLocale)();
     const generatedId = (0, external_react_namespaceObject.useId)().replace(/:/g, '');
     const valueInputRef = (0, external_react_namespaceObject.useRef)(null);
     const committedRef = (0, external_react_namespaceObject.useRef)(value);
@@ -260,7 +262,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                     "aria-errormessage": controlProps['aria-errormessage'],
                     disabled: !editableOnValueChange,
                     className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
-                    children: value ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    children: value ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value, dateLocale?.code) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                         className: "text-muted-foreground",
                         children: strings.pickDate
                     })

package/dist/components/ui/quick-form-field/quick-form-field.js

@@ -7,6 +7,7 @@ import { EditableText } from "../editable-text.js";
 import { FileUpload } from "../file-upload.js";
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea } from "../input-group.js";
 import { RequiredIndicator } from "../label.js";
+import { useDateLocale } from "../locale-provider.js";
 import { MultiSelect } from "../multi-select.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
 import { PromptValueControl } from "../prompt-value-control.js";
@@ -32,6 +33,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         }), [
         stringOverrides
     ]);
+    const dateLocale = useDateLocale();
     const generatedId = useId().replace(/:/g, '');
     const valueInputRef = useRef(null);
     const committedRef = useRef(value);
@@ -232,7 +234,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                     "aria-errormessage": controlProps['aria-errormessage'],
                     disabled: !editableOnValueChange,
                     className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
-                    children: value ? formatDateValue(value) : /*#__PURE__*/ jsx("span", {
+                    children: value ? formatDateValue(value, dateLocale?.code) : /*#__PURE__*/ jsx("span", {
                         className: "text-muted-foreground",
                         children: strings.pickDate
                     })

package/dist/components/ui/quick-form-field/utils.cjs

@@ -59,9 +59,9 @@ function toDateOnlyString(date) {
     const day = String(date.getDate()).padStart(2, '0');
     return `${year}-${month}-${day}`;
 }
-function formatDateValue(value) {
+function formatDateValue(value, localeCode) {
     const date = (0, date_value_cjs_namespaceObject.toDateValue)(value);
-    return date ? date.toLocaleDateString(void 0, {
+    return date ? date.toLocaleDateString(localeCode, {
         year: 'numeric',
         month: 'long',
         day: 'numeric'

package/dist/components/ui/quick-form-field/utils.d.ts

@@ -5,7 +5,8 @@ export declare function parseListValue(value: string): string[];
 /** Formats a Date as a local `YYYY-MM-DD` string, which `toDateValue` reads back as a local date. */
 export declare function toDateOnlyString(date: Date): string;
 /** Formats a date field's value for display, falling back to the raw value if it isn't a valid date. */
-export declare function formatDateValue(value: string): string;
+/** Unset, `localeCode` falls back to the browser's language. */
+export declare function formatDateValue(value: string, localeCode?: string): string;
 export interface VariablePickerSource {
     items: VariablePickerItem[];
     /** The consumer's own entry for a picked item: rebuilding it from the item would drop `type`. */

package/dist/components/ui/quick-form-field/utils.js

@@ -27,9 +27,9 @@ function toDateOnlyString(date) {
     const day = String(date.getDate()).padStart(2, '0');
     return `${year}-${month}-${day}`;
 }
-function formatDateValue(value) {
+function formatDateValue(value, localeCode) {
     const date = toDateValue(value);
-    return date ? date.toLocaleDateString(void 0, {
+    return date ? date.toLocaleDateString(localeCode, {
         year: 'numeric',
         month: 'long',
         day: 'numeric'

package/dist/components/ui/time-field.cjs

@@ -0,0 +1,191 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    TimeField: ()=>TimeField
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_date_fns_namespaceObject = require("date-fns");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const date_locale_cjs_namespaceObject = require("../../lib/date-locale.cjs");
+const external_toggle_group_cjs_namespaceObject = require("./toggle-group.cjs");
+function timeLayout(locale, use12Hour) {
+    const pattern = (0, date_locale_cjs_namespaceObject.localeTimePattern)(locale) ?? '';
+    const bare = pattern.replace(/'[^']*'/g, '');
+    const hourAt = bare.search(/[hHkK]/);
+    const periodAt = bare.search(/[aBb]/);
+    const separator = /[hHkK]+([^hHkKm]*)m/.exec(pattern)?.[1].replace(/'/g, '').trim() || ':';
+    return {
+        periodFirst: use12Hour && -1 !== periodAt && periodAt < hourAt,
+        separator
+    };
+}
+const time_field_TimeSegment = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, min, max, label, disabled, onCommit, onFilled }, ref) {
+    const [draft, setDraft] = external_react_namespaceObject.useState(null);
+    const text = draft ?? (void 0 === value ? '' : String(value).padStart(2, '0'));
+    const enter = (digits)=>{
+        setDraft(digits);
+        if (!digits) return;
+        const typed = Number(digits);
+        if (typed >= min && typed <= max) onCommit(typed);
+        else if (2 === digits.length) onCommit(Math.min(Math.max(typed, min), max));
+        if (2 === digits.length || 10 * typed > max) onFilled?.();
+    };
+    const step = (delta)=>{
+        const span = max - min + 1;
+        const from = value ?? (delta > 0 ? min - 1 : max + 1);
+        setDraft(null);
+        onCommit(((from - min + delta) % span + span) % span + min);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+        ref: ref,
+        type: "text",
+        inputMode: "numeric",
+        role: "spinbutton",
+        autoComplete: "off",
+        "aria-label": label,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        placeholder: "--",
+        disabled: disabled,
+        value: text,
+        onBlur: ()=>setDraft(null),
+        onKeyDown: (e)=>{
+            if (/^\d$/.test(e.key)) {
+                e.preventDefault();
+                const next = (draft ?? '') + e.key;
+                enter(next.length > 2 ? e.key : next);
+            } else if ('ArrowUp' === e.key || 'ArrowDown' === e.key) {
+                e.preventDefault();
+                step('ArrowUp' === e.key ? 1 : -1);
+            }
+        },
+        onChange: (e)=>enter(e.target.value.replace(/\D/g, '').slice(-2)),
+        className: "w-[2.5ch] rounded-sm bg-transparent text-center tabular-nums caret-transparent outline-none placeholder:text-muted-foreground focus:bg-accent focus:text-accent-foreground disabled:cursor-not-allowed"
+    });
+});
+function TimeField({ value, onValueChange, use12Hour, locale, strings, 'aria-labelledby': ariaLabelledBy, disabled, className }) {
+    const minuteRef = external_react_namespaceObject.useRef(null);
+    const { periodFirst, separator } = timeLayout(locale, use12Hour);
+    const hours = value?.hours;
+    const [pendingPm, setPendingPm] = external_react_namespaceObject.useState(false);
+    const pm = void 0 === hours ? pendingPm : hours >= 12;
+    const commit = (next)=>onValueChange({
+            hours: next.hours ?? hours ?? (use12Hour && pm ? 12 : 0),
+            minutes: next.minutes ?? value?.minutes ?? 0
+        });
+    const setPm = (nextPm)=>{
+        setPendingPm(nextPm);
+        if (void 0 !== hours) commit({
+            hours: hours % 12 + (nextPm ? 12 : 0)
+        });
+    };
+    const period = use12Hour && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_toggle_group_cjs_namespaceObject.ToggleGroup, {
+        type: "single",
+        variant: "outline",
+        size: "sm",
+        "aria-label": strings.dayPeriod,
+        value: pm ? 'pm' : 'am',
+        onValueChange: (next)=>next && setPm('pm' === next),
+        disabled: disabled,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_toggle_group_cjs_namespaceObject.ToggleGroupItem, {
+                value: "am",
+                className: "future:h-10",
+                children: (0, external_date_fns_namespaceObject.format)(new Date(2000, 0, 1, 9), 'a', {
+                    locale
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_toggle_group_cjs_namespaceObject.ToggleGroupItem, {
+                value: "pm",
+                className: "future:h-10",
+                children: (0, external_date_fns_namespaceObject.format)(new Date(2000, 0, 1, 21), 'a', {
+                    locale
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
+        "aria-labelledby": ariaLabelledBy,
+        "data-slot": "time-field",
+        className: (0, index_cjs_namespaceObject.cn)('m-0 flex min-w-0 items-center gap-2 border-0 p-0', className),
+        children: [
+            periodFirst && period,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('flex h-9 flex-1 items-center gap-0.5 rounded-md border border-input bg-transparent px-3 text-base transition-colors focus-within:ring-2 focus-within:ring-ring has-disabled:cursor-not-allowed has-disabled:opacity-50 md:text-sm', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:text-sm future:focus-within:ring-primary future:focus-within:ring-offset-2 future:focus-within:ring-offset-background'),
+                children: [
+                    use12Hour ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(time_field_TimeSegment, {
+                        label: strings.hours,
+                        value: void 0 === hours ? void 0 : hours % 12 || 12,
+                        min: 1,
+                        max: 12,
+                        disabled: disabled,
+                        onCommit: (shown)=>commit({
+                                hours: shown % 12 + (pm ? 12 : 0)
+                            }),
+                        onFilled: ()=>minuteRef.current?.focus()
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(time_field_TimeSegment, {
+                        label: strings.hours,
+                        value: hours,
+                        min: 0,
+                        max: 23,
+                        disabled: disabled,
+                        onCommit: (next)=>commit({
+                                hours: next
+                            }),
+                        onFilled: ()=>minuteRef.current?.focus()
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "aria-hidden": "true",
+                        className: "text-muted-foreground",
+                        children: separator
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(time_field_TimeSegment, {
+                        ref: minuteRef,
+                        label: strings.minutes,
+                        value: value?.minutes,
+                        min: 0,
+                        max: 59,
+                        disabled: disabled,
+                        onCommit: (minutes)=>commit({
+                                minutes
+                            })
+                    })
+                ]
+            }),
+            !periodFirst && period
+        ]
+    });
+}
+exports.TimeField = __webpack_exports__.TimeField;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "TimeField"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/time-field.d.ts

@@ -0,0 +1,24 @@
+import { type DateLocale } from '../../lib/date-locale';
+import type { DatePickerStrings } from './locale-provider';
+export interface TimeValue {
+    /** 0 to 23, whatever the clock shown. */
+    hours: number;
+    minutes: number;
+}
+export interface TimeFieldProps {
+    value: TimeValue | undefined;
+    onValueChange: (value: TimeValue) => void;
+    use12Hour: boolean;
+    /** Supplies the AM/PM words and the segment order. English when unset. */
+    locale?: DateLocale;
+    strings: Pick<DatePickerStrings, 'hours' | 'minutes' | 'dayPeriod'>;
+    /** Id of the element naming the whole field. */
+    'aria-labelledby'?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Hours and minutes typed as separate segments, with an AM/PM choice on a 12-hour clock. Unlike
+ * a native time input it follows the given locale, not the browser's or the OS's settings.
+ */
+export declare function TimeField({ value, onValueChange, use12Hour, locale, strings, 'aria-labelledby': ariaLabelledBy, disabled, className, }: TimeFieldProps): import("react/jsx-runtime").JSX.Element;