@uipath/apollo-wind 2.80.1 → 2.81.0

package/dist/components/ui/calendar.cjs

@@ -34,14 +34,17 @@ const external_react_namespaceObject = require("react");
 const external_react_day_picker_namespaceObject = require("react-day-picker");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }) {
+const external_locale_provider_cjs_namespaceObject = require("./locale-provider.cjs");
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, locale, ...props }) {
     const defaultClassNames = (0, external_react_day_picker_namespaceObject.getDefaultClassNames)();
+    const inheritedLocale = (0, external_locale_provider_cjs_namespaceObject.useDateLocale)();
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_day_picker_namespaceObject.DayPicker, {
         showOutsideDays: showOutsideDays,
         className: (0, index_cjs_namespaceObject.cn)('bg-background group/calendar p-4 [--cell-size:2.75rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
         captionLayout: captionLayout,
+        locale: locale ?? inheritedLocale,
         formatters: {
-            formatMonthDropdown: (date)=>date.toLocaleString('default', {
+            formatMonthDropdown: (date, dateLib)=>dateLib ? dateLib.format(date, 'LLL') : date.toLocaleString('en-US', {
                     month: 'short'
                 }),
             ...formatters

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DayButton, DayPicker } from 'react-day-picker';
 import { Button } from './button';
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, locale, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }): import("react/jsx-runtime").JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/calendar.js

@@ -5,14 +5,17 @@ import { useEffect, useRef } from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { Button, buttonVariants } from "./button.js";
 import { cn } from "../../lib/index.js";
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }) {
+import { useDateLocale } from "./locale-provider.js";
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, locale, ...props }) {
     const defaultClassNames = getDefaultClassNames();
+    const inheritedLocale = useDateLocale();
     return /*#__PURE__*/ jsx(DayPicker, {
         showOutsideDays: showOutsideDays,
         className: cn('bg-background group/calendar p-4 [--cell-size:2.75rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
         captionLayout: captionLayout,
+        locale: locale ?? inheritedLocale,
         formatters: {
-            formatMonthDropdown: (date)=>date.toLocaleString('default', {
+            formatMonthDropdown: (date, dateLib)=>dateLib ? dateLib.format(date, 'LLL') : date.toLocaleString('en-US', {
                     month: 'short'
                 }),
             ...formatters

package/dist/components/ui/date-picker.cjs

@@ -37,12 +37,18 @@ const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
 const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const date_locale_cjs_namespaceObject = require("../../lib/date-locale.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
 const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
-const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+const external_locale_provider_cjs_namespaceObject = require("./locale-provider.cjs");
+const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder: placeholderProp, className, locale: localeProp, strings: stringsProp, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
     const date = value instanceof Date && (0, external_date_fns_namespaceObject.isValid)(value) ? value : void 0;
+    const locale = (0, external_locale_provider_cjs_namespaceObject.useDateLocale)(localeProp);
+    const strings = (0, external_locale_provider_cjs_namespaceObject.useDatePickerStrings)(stringsProp);
+    const placeholder = placeholderProp ?? strings.pickDate;
+    const displayValue = date ? (0, date_locale_cjs_namespaceObject.formatLongDate)(date, locale) : void 0;
     const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
     const grouped = group.inGroup;
     const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
@@ -54,7 +60,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
     });
     const triggerProps = {
         id,
-        'aria-label': id || ariaLabelledBy ? void 0 : date ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(date, 'PPP')}` : placeholder,
+        'aria-label': id || ariaLabelledBy ? void 0 : displayValue ? strings.selectedDate(displayValue) : placeholder,
         'aria-labelledby': ariaLabelledBy,
         ...validation.aria,
         disabled: disabled || group.disabled
@@ -69,9 +75,9 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                         ...triggerProps,
                         className: className,
                         placeholder: placeholder,
-                        children: date && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: displayValue && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                             className: "truncate",
-                            children: (0, external_date_fns_namespaceObject.format)(date, 'PPP')
+                            children: displayValue
                         })
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
@@ -82,7 +88,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                             className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
-                                date ? (0, external_date_fns_namespaceObject.format)(date, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                displayValue ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                     className: "text-foreground-muted",
                                     children: placeholder
                                 })
@@ -97,6 +103,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                             selected: date,
                             onSelect: onValueChange,
                             initialFocus: true,
+                            locale: locale,
                             ...calendarProps
                         })
                     })
@@ -109,10 +116,15 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
         ]
     });
 });
-const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder: placeholderProp, className, locale: localeProp, strings: stringsProp, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `date-range-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const computedLabel = value?.from ? value.to ? `Selected range: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')} to ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}` : `Selected date: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')}` : placeholder;
+    const locale = (0, external_locale_provider_cjs_namespaceObject.useDateLocale)(localeProp);
+    const strings = (0, external_locale_provider_cjs_namespaceObject.useDatePickerStrings)(stringsProp);
+    const placeholder = placeholderProp ?? strings.pickDateRange;
+    const from = value?.from ? (0, date_locale_cjs_namespaceObject.formatMediumDate)(value.from, locale) : void 0;
+    const to = value?.to ? (0, date_locale_cjs_namespaceObject.formatMediumDate)(value.to, locale) : void 0;
+    const computedLabel = from ? to ? strings.selectedRange(from, to) : strings.selectedDate(from) : placeholder;
     const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
     const grouped = group.inGroup;
     const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
@@ -139,11 +151,11 @@ const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject
                         ...triggerProps,
                         className: className,
                         placeholder: placeholder,
-                        children: value?.from && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                        children: from && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
                             className: "truncate",
                             children: [
-                                (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y'),
-                                value.to && ` - ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}`
+                                from,
+                                to && ` - ${to}`
                             ]
                         })
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
@@ -155,13 +167,13 @@ const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject
                             className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
-                                value?.from ? value.to ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                from ? to ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                                     children: [
-                                        (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y'),
+                                        from,
                                         " - ",
-                                        (0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')
+                                        to
                                     ]
-                                }) : (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                }) : from : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                     className: "text-foreground-muted",
                                     children: placeholder
                                 })
@@ -179,6 +191,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject
                             onSelect: onValueChange,
                             numberOfMonths: 2,
                             required: false,
+                            locale: locale,
                             ...calendarProps
                         })
                     })

package/dist/components/ui/date-picker.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { DateRange } from 'react-day-picker';
 import { Calendar } from './calendar';
+import { type DateLocale } from '../../lib/date-locale';
+import { type DatePickerStrings } from './locale-provider';
 export interface DatePickerProps {
     /** Applied to the trigger button, so a `<label htmlFor>` pointing at it associates correctly. */
     id?: string;
@@ -21,6 +23,13 @@ export interface DatePickerProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-describedby'?: string;
     'aria-errormessage'?: string;
+    /**
+     * Language tag or locale for this picker, over the nearest `LocaleProvider`'s.
+     * @see LocaleProvider
+     */
+    locale?: string | DateLocale;
+    /** Translations for this picker, over the nearest `LocaleProvider`'s. */
+    strings?: Partial<DatePickerStrings>;
     calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus'>;
 }
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -44,6 +53,13 @@ export interface DateRangePickerProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-describedby'?: string;
     'aria-errormessage'?: string;
+    /**
+     * Language tag or locale for this picker, over the nearest `LocaleProvider`'s.
+     * @see LocaleProvider
+     */
+    locale?: string | DateLocale;
+    /** Translations for this picker, over the nearest `LocaleProvider`'s. */
+    strings?: Partial<DatePickerStrings>;
     calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus' | 'defaultMonth' | 'numberOfMonths' | 'required'>;
 }
 export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/date-picker.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { format, isValid } from "date-fns";
+import { isValid } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { forwardRef, useId } from "react";
 import { Button } from "./button.js";
@@ -8,12 +8,18 @@ import { Calendar } from "./calendar.js";
 import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
+import { formatLongDate, formatMediumDate } from "../../lib/date-locale.js";
 import { FormFieldError } from "./form-field.js";
 import { useControlValidation, useInputGroup } from "./input-group-context.js";
-const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+import { useDateLocale, useDatePickerStrings } from "./locale-provider.js";
+const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder: placeholderProp, className, locale: localeProp, strings: stringsProp, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
     const date = value instanceof Date && isValid(value) ? value : void 0;
+    const locale = useDateLocale(localeProp);
+    const strings = useDatePickerStrings(stringsProp);
+    const placeholder = placeholderProp ?? strings.pickDate;
+    const displayValue = date ? formatLongDate(date, locale) : void 0;
     const group = useInputGroup();
     const grouped = group.inGroup;
     const validation = useControlValidation(group, {
@@ -25,7 +31,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
     });
     const triggerProps = {
         id,
-        'aria-label': id || ariaLabelledBy ? void 0 : date ? `Selected date: ${format(date, 'PPP')}` : placeholder,
+        'aria-label': id || ariaLabelledBy ? void 0 : displayValue ? strings.selectedDate(displayValue) : placeholder,
         'aria-labelledby': ariaLabelledBy,
         ...validation.aria,
         disabled: disabled || group.disabled
@@ -40,9 +46,9 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                         ...triggerProps,
                         className: className,
                         placeholder: placeholder,
-                        children: date && /*#__PURE__*/ jsx("span", {
+                        children: displayValue && /*#__PURE__*/ jsx("span", {
                             className: "truncate",
-                            children: format(date, 'PPP')
+                            children: displayValue
                         })
                     }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
@@ -53,7 +59,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                             className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {}),
-                                date ? format(date, 'PPP') : /*#__PURE__*/ jsx("span", {
+                                displayValue ?? /*#__PURE__*/ jsx("span", {
                                     className: "text-foreground-muted",
                                     children: placeholder
                                 })
@@ -68,6 +74,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                             selected: date,
                             onSelect: onValueChange,
                             initialFocus: true,
+                            locale: locale,
                             ...calendarProps
                         })
                     })
@@ -80,10 +87,15 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
         ]
     });
 });
-const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder: placeholderProp, className, locale: localeProp, strings: stringsProp, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `date-range-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const computedLabel = value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder;
+    const locale = useDateLocale(localeProp);
+    const strings = useDatePickerStrings(stringsProp);
+    const placeholder = placeholderProp ?? strings.pickDateRange;
+    const from = value?.from ? formatMediumDate(value.from, locale) : void 0;
+    const to = value?.to ? formatMediumDate(value.to, locale) : void 0;
+    const computedLabel = from ? to ? strings.selectedRange(from, to) : strings.selectedDate(from) : placeholder;
     const group = useInputGroup();
     const grouped = group.inGroup;
     const validation = useControlValidation(group, {
@@ -110,11 +122,11 @@ const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, valu
                         ...triggerProps,
                         className: className,
                         placeholder: placeholder,
-                        children: value?.from && /*#__PURE__*/ jsxs("span", {
+                        children: from && /*#__PURE__*/ jsxs("span", {
                             className: "truncate",
                             children: [
-                                format(value.from, 'LLL dd, y'),
-                                value.to && ` - ${format(value.to, 'LLL dd, y')}`
+                                from,
+                                to && ` - ${to}`
                             ]
                         })
                     }) : /*#__PURE__*/ jsx(PopoverTrigger, {
@@ -126,13 +138,13 @@ const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, valu
                             className: cn('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {}),
-                                value?.from ? value.to ? /*#__PURE__*/ jsxs(Fragment, {
+                                from ? to ? /*#__PURE__*/ jsxs(Fragment, {
                                     children: [
-                                        format(value.from, 'LLL dd, y'),
+                                        from,
                                         " - ",
-                                        format(value.to, 'LLL dd, y')
+                                        to
                                     ]
-                                }) : format(value.from, 'LLL dd, y') : /*#__PURE__*/ jsx("span", {
+                                }) : from : /*#__PURE__*/ jsx("span", {
                                     className: "text-foreground-muted",
                                     children: placeholder
                                 })
@@ -150,6 +162,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, valu
                             onSelect: onValueChange,
                             numberOfMonths: 2,
                             required: false,
+                            locale: locale,
                             ...calendarProps
                         })
                     })

package/dist/components/ui/datetime-picker.cjs

@@ -32,30 +32,42 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
-const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
-const external_label_cjs_namespaceObject = require("./label.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const date_locale_cjs_namespaceObject = require("../../lib/date-locale.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
 const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
-const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, onOpenChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+const external_locale_provider_cjs_namespaceObject = require("./locale-provider.cjs");
+const external_time_field_cjs_namespaceObject = require("./time-field.cjs");
+function timeOf(date) {
+    return date ? {
+        hours: date.getHours(),
+        minutes: date.getMinutes()
+    } : void 0;
+}
+const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, onOpenChange, disabled, placeholder: placeholderProp, className, use12Hour: use12HourProp, locale: localeProp, strings: stringsProp, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpenState] = external_react_namespaceObject.useState(false);
     const setOpen = (next)=>{
         setOpenState(next);
         onOpenChange?.(next);
     };
     const generatedId = external_react_namespaceObject.useId();
-    const validationId = errorId ?? `${id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const baseId = id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`;
+    const validationId = errorId ?? `${baseId}-error`;
+    const timeLabelId = `${baseId}-time-label`;
+    const locale = (0, external_locale_provider_cjs_namespaceObject.useDateLocale)(localeProp);
+    const strings = (0, external_locale_provider_cjs_namespaceObject.useDatePickerStrings)(stringsProp);
+    const placeholder = placeholderProp ?? strings.pickDateTime;
     const date = value instanceof Date && (0, external_date_fns_namespaceObject.isValid)(value) ? value : void 0;
     const [selectedDate, setSelectedDate] = external_react_namespaceObject.useState(date);
-    const [timeValue, setTimeValue] = external_react_namespaceObject.useState(date ? (0, external_date_fns_namespaceObject.format)(date, 'HH:mm') : '');
+    const [time, setTime] = external_react_namespaceObject.useState(()=>timeOf(date));
     const valueTime = date?.getTime();
     const [seededTime, setSeededTime] = external_react_namespaceObject.useState(valueTime);
     if (!Object.is(valueTime, seededTime)) {
         setSeededTime(valueTime);
         setSelectedDate(date);
-        setTimeValue(date ? (0, external_date_fns_namespaceObject.format)(date, 'HH:mm') : '');
+        setTime(timeOf(date));
     }
     const handleDateSelect = (date)=>{
         if (!date) return;
@@ -64,26 +76,22 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
             date.setMinutes(selectedDate.getMinutes());
             date.setSeconds(selectedDate.getSeconds());
             date.setMilliseconds(selectedDate.getMilliseconds());
-        }
+        } else if (time) date.setHours(time.hours, time.minutes);
         setSelectedDate(date);
         onValueChange?.(date);
     };
-    const handleTimeChange = (e)=>{
-        const time = e.target.value;
-        setTimeValue(time);
+    const handleTimeChange = (next)=>{
+        setTime(next);
         if (!selectedDate) return;
-        const [hours, minutes] = time.split(':').map(Number);
         const newDate = new Date(selectedDate);
-        newDate.setHours(hours);
-        newDate.setMinutes(minutes);
+        newDate.setHours(next.hours);
+        newDate.setMinutes(next.minutes);
         setSelectedDate(newDate);
         onValueChange?.(newDate);
     };
     const formatDisplayValue = ()=>{
         if (!selectedDate) return null;
-        const datePart = (0, external_date_fns_namespaceObject.format)(selectedDate, 'PPP');
-        const timePart = (0, external_date_fns_namespaceObject.format)(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
-        return `${datePart} at ${timePart}`;
+        return (0, date_locale_cjs_namespaceObject.formatDateTime)(selectedDate, locale, use12HourProp);
     };
     const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
     const grouped = group.inGroup;
@@ -144,25 +152,30 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
                                     mode: "single",
                                     selected: selectedDate,
                                     onSelect: handleDateSelect,
-                                    initialFocus: true
+                                    initialFocus: true,
+                                    locale: locale
                                 }),
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                     className: "border-t pt-3 space-y-2",
                                     children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.Label, {
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                            id: timeLabelId,
                                             className: "text-sm font-medium flex items-center gap-2",
                                             children: [
                                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Clock, {
-                                                    className: "h-4 w-4"
+                                                    className: "h-4 w-4",
+                                                    "aria-hidden": "true"
                                                 }),
-                                                "Time"
+                                                strings.time
                                             ]
                                         }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
-                                            type: "time",
-                                            value: timeValue,
-                                            onChange: handleTimeChange,
-                                            className: "w-full"
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_time_field_cjs_namespaceObject.TimeField, {
+                                            "aria-labelledby": timeLabelId,
+                                            value: time,
+                                            onValueChange: handleTimeChange,
+                                            use12Hour: (0, date_locale_cjs_namespaceObject.resolveUse12Hour)(use12HourProp, locale),
+                                            locale: locale,
+                                            strings: strings
                                         })
                                     ]
                                 }),
@@ -174,17 +187,17 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
                                             className: "w-full",
                                             onClick: ()=>{
                                                 setSelectedDate(void 0);
-                                                setTimeValue('');
+                                                setTime(void 0);
                                                 onValueChange?.(void 0);
                                                 setOpen(false);
                                             },
-                                            children: "Clear"
+                                            children: strings.clear
                                         }),
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
                                             className: "w-full",
                                             onClick: ()=>setOpen(false),
                                             disabled: !selectedDate,
-                                            children: "Done"
+                                            children: strings.done
                                         })
                                     ]
                                 })

package/dist/components/ui/datetime-picker.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { type DateLocale } from '../../lib/date-locale';
+import { type DatePickerStrings } from './locale-provider';
 export interface DateTimePickerProps {
     /** Applied to the trigger button, so a `<label htmlFor>` pointing at it associates correctly. */
     id?: string;
@@ -9,7 +11,18 @@ export interface DateTimePickerProps {
     disabled?: boolean;
     placeholder?: string;
     className?: string;
+    /**
+     * Shows a 12-hour clock with AM/PM. Unset, the clock follows the locale when one is set
+     * (here or on a `LocaleProvider`), else 24-hour.
+     */
     use12Hour?: boolean;
+    /**
+     * Language tag or locale for this picker, over the nearest `LocaleProvider`'s.
+     * @see LocaleProvider
+     */
+    locale?: string | DateLocale;
+    /** Translations for this picker, over the nearest `LocaleProvider`'s. */
+    strings?: Partial<DatePickerStrings>;
     /**
      * Field-specific feedback rendered immediately below the trigger.
      * Keep the message focused on what went wrong and how to resolve it.