@onereach/ui-components 10.0.2 → 10.1.0-beta.4242.0

package/dist/esm/v3/OrDateTimeFormat-595566fa.js

@@ -0,0 +1,83 @@
+import { defineComponent, ref, computed, inject } from 'vue-demi';
+import { D as DateFormat, T as TimeFormat, L as Locale } from './OrDateTimePicker-c3544059.js';
+import './OrDateTimePickerTimeSelect-62e04a6c.js';
+import { D as DateTimePickerDateFormat, a as DateTimePickerTimeFormat, f as formatDate, b as formatTime } from './getTimePlaceholder-9d18b5ac.js';
+import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from 'vue';
+
+const DateTimeFormat = [
+// Layout
+'inline'];
+
+var script = defineComponent({
+  name: 'OrDateTimeFormat',
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    dateFormat: {
+      type: String,
+      default: undefined
+    },
+    timeFormat: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-date-time-format-v3', ...DateTimeFormat]);
+    // Options
+    const resolvedDateFormat = computed(() => {
+      var _a;
+      return (_a = props.dateFormat) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedTimeFormat = computed(() => {
+      var _a;
+      return (_a = props.timeFormat) !== null && _a !== void 0 ? _a : inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
+    return {
+      root,
+      rootStyles,
+      resolvedDateFormat,
+      resolvedTimeFormat,
+      resolvedLocale,
+      formatDate,
+      formatTime
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.modelValue ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createTextVNode(toDisplayString(`${_ctx.formatDate(_ctx.modelValue, _ctx.resolvedDateFormat, _ctx.resolvedLocale)} ${_ctx.formatTime(_ctx.modelValue, _ctx.resolvedTimeFormat, _ctx.resolvedLocale)}`), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-date-time-format-v3/OrDateTimeFormat.vue";
+
+export { script as s };

package/dist/esm/v3/{OrDateTimePicker-b2749f72.js → OrDateTimePicker-c3544059.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import './dom-aecadd9a.js';
@@ -10,10 +10,10 @@ import { s as script$a } from './OrHint-262c8217.js';
 import { s as script$c } from './OrIconButton-bc7ebce6.js';
 import { s as script$b } from './OrIcon-c446d072.js';
 import { s as script$d, a as InputBoxSize } from './OrInputBox-287f97ba.js';
-import { s as script$e } from './OrLabel-02aa56ad.js';
+import { s as script$e } from './OrLabel-59d09591.js';
 import { s as script$f } from './OrPopover-93803a23.js';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, f as script$7, g as script$8 } from './OrDateTimePickerTimeSelect-c6ea3195.js';
-import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-a1d75821.js';
+import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, f as script$7, g as script$8 } from './OrDateTimePickerTimeSelect-62e04a6c.js';
+import { D as DateTimePickerDateFormat, a as DateTimePickerTimeFormat } from './getTimePlaceholder-9d18b5ac.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 
@@ -27,6 +27,10 @@ const DateTimePickerDatePopover = [
 'w-[298px]'];
 const DateTimePickerTimePopover = [];
 
+const DateFormat = Symbol();
+const TimeFormat = Symbol();
+const Locale = Symbol();
+
 var script = defineComponent({
   name: 'OrDateTimePicker',
   components: {
@@ -56,12 +60,20 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    dateFormat: {
+      type: String,
       default: undefined
     },
     timeFormat: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
     },
     yearFilter: {
       type: Function,
@@ -120,8 +132,9 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -132,15 +145,26 @@ var script = defineComponent({
       var _a;
       return (_a = datePopover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    const datePopoverStyles = computed(() => ['or-date-time-picker-date-popover-v3', ...DateTimePickerDatePopover]);
     const timePopover = ref();
     const timePopoverState = computed(() => {
       var _a;
       return (_a = timePopover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker]);
-    const datePopoverStyles = computed(() => ['or-date-time-picker-date-popover-v3', ...DateTimePickerDatePopover]);
     const timePopoverStyles = computed(() => ['or-date-time-picker-time-popover-v3', ...DateTimePickerTimePopover]);
+    // Options
+    const resolvedDateFormat = computed(() => {
+      var _a;
+      return (_a = props.dateFormat) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedTimeFormat = computed(() => {
+      var _a;
+      return (_a = props.timeFormat) !== null && _a !== void 0 ? _a : inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     // State
     const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
     watch(() => props.modelValue, value => {
@@ -219,30 +243,33 @@ var script = defineComponent({
     }
     function formatDateAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
     function formatTimeAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
-        hourCycle: props.timeFormat !== DateTimePickerTimeFormat.Auto ? props.timeFormat : undefined,
+        hourCycle: resolvedTimeFormat.value !== DateTimePickerTimeFormat.Auto ? resolvedTimeFormat.value : undefined,
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       datePopover,
       datePopoverState,
+      datePopoverStyles,
       timePopover,
       timePopoverState,
-      rootStyles,
-      datePopoverStyles,
       timePopoverStyles,
+      resolvedDateFormat,
+      resolvedTimeFormat,
+      resolvedLocale,
       initialValue,
       proxyModelValue,
       draftModelValue,
@@ -316,19 +343,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
+      format: _ctx.resolvedDateFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.datePopover && _ctx.datePopover.state === 'open',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleDatePopover], [_directive_dropdown_close, _ctx.closeDatePopover]]), withDirectives(createVNode(_component_OrDateTimePickerTimeControl, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleDatePopover], [_directive_dropdown_close, _ctx.closeDatePopover]]), withDirectives(createVNode(_component_OrDateTimePickerTimeControl, {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.draftModelValue = $event),
-      format: _ctx.timeFormat,
+      format: _ctx.resolvedTimeFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.timePopover && _ctx.timePopover.state === 'open',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "format", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
       ref: 'datePopover',
       class: normalizeClass(_ctx.datePopoverStyles),
       "custom-styles": _ctx.datePopoverStyles,
@@ -359,14 +389,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValue,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.initialValue = $event),
+        locale: _ctx.resolvedLocale,
         "year-filter": _ctx.yearFilter,
         "month-filter": _ctx.monthFilter
-      }, null, 8 /* PROPS */, ["modelValue", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
+      }, null, 8 /* PROPS */, ["modelValue", "locale", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialValue,
+        format: _ctx.resolvedDateFormat,
+        locale: _ctx.resolvedLocale,
         "date-filter": _ctx.dateFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[4] || (_cache[4] = $event => {
           _ctx.apply();
@@ -410,10 +443,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialValue,
-        format: _ctx.timeFormat,
+        format: _ctx.resolvedTimeFormat,
+        locale: _ctx.resolvedLocale,
         "hours-filter": _ctx.hoursFilter,
         "minutes-filter": _ctx.minutesFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[8] || (_cache[8] = $event => {
           _ctx.apply();
@@ -449,4 +483,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-date-time-picker-v3/OrDateTimePicker.vue";
 
-export { script as s };
+export { DateFormat as D, Locale as L, TimeFormat as T, script as s };

package/dist/esm/v3/{OrDateTimePickerTimeSelect-c6ea3195.js → OrDateTimePickerTimeSelect-62e04a6c.js}

@@ -4,10 +4,10 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { g as getDatePlaceholder, f as formatDate, D as DateTimePickerTimeFormat, b as getTimePlaceholder, a as formatTime } from './getTimePlaceholder-a1d75821.js';
+import { g as getDatePlaceholder, f as formatDate, c as getTimePlaceholder, b as formatTime, a as DateTimePickerTimeFormat } from './getTimePlaceholder-9d18b5ac.js';
 import { openBlock, createElementBlock, normalizeClass, withModifiers, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withCtx, createVNode, renderSlot, createCommentVNode } from 'vue';
 import { s as script$8 } from './OrButton-c95aef65.js';
-import { s as script$9 } from './OrLabel-02aa56ad.js';
+import { s as script$9 } from './OrLabel-59d09591.js';
 import { s as script$b } from './OrIconButton-bc7ebce6.js';
 import { s as script$a } from './OrIcon-c446d072.js';
 import { s as script$d } from './OrMenuItem-639ab707.js';
@@ -34,9 +34,17 @@ var script$7 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
+    format: {
+      type: String,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
     selected: {
       type: Boolean,
       default: false
@@ -56,14 +64,15 @@ var script$7 = defineComponent({
   },
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-date-control-v3', ...DateTimePickerDateControl]);
     const placeholderStyles = computed(() => [...DateTimePickerDateControlPlaceholder]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const placeholder = getDatePlaceholder();
+    const placeholder = computed(() => {
+      return getDatePlaceholder(props.format, props.locale);
+    });
     return {
       root,
       rootStyles,
@@ -89,7 +98,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
   }, [_ctx.proxyModelValue ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [createTextVNode(toDisplayString(_ctx.formatDate(_ctx.proxyModelValue)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
+  }, [createTextVNode(toDisplayString(_ctx.formatDate(_ctx.proxyModelValue, _ctx.format, _ctx.locale)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
     key: 1,
     class: normalizeClass(_ctx.placeholderStyles),
     disabled: _ctx.disabled
@@ -151,13 +160,21 @@ var script$6 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     initialValue: {
       type: Date,
       required: true
     },
+    format: {
+      type: String,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
     dateFilter: {
       type: Function,
       default: undefined
@@ -174,9 +191,8 @@ var script$6 = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-date-select-v3', ...DateTimePickerDateSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDateSelectButtonGroup]);
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
@@ -210,13 +226,13 @@ var script$6 = defineComponent({
     });
     // Methods
     function formatWeekday(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         weekday: 'short',
         timeZone: 'UTC'
       });
     }
     function formatDay(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         day: 'numeric',
         timeZone: 'UTC'
       });
@@ -305,9 +321,8 @@ var script$5 = defineComponent({
   },
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-mobile-control-v3', ...DateTimePickerMobileControl]);
     const contentStyles = computed(() => [...DateTimePickerMobileControlContent]);
     return {
@@ -358,7 +373,11 @@ var script$4 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      required: true
+    },
+    locale: {
+      type: String,
       required: true
     },
     yearFilter: {
@@ -373,30 +392,29 @@ var script$4 = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     const yearButton = ref();
-    const monthButton = ref();
     const yearButtonRoot = computed(() => {
       var _a;
       return (_a = yearButton.value) === null || _a === void 0 ? void 0 : _a.root;
     });
+    const monthButton = ref();
     const monthButtonRoot = computed(() => {
       var _a;
       return (_a = monthButton.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const yearMenu = ref();
-    const monthMenu = ref();
     const yearMenuState = computed(() => {
       var _a;
       return (_a = yearMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    const monthMenu = ref();
     const monthMenuState = computed(() => {
       var _a;
       return (_a = monthMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const yearOptions = computed(() => {
@@ -426,28 +444,28 @@ var script$4 = defineComponent({
       proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() - 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
     }
     function formatYear(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         year: 'numeric',
         timeZone: 'UTC'
       });
     }
     function formatMonth(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         month: 'long',
         timeZone: 'UTC'
       });
     }
     return {
       root,
+      rootStyles,
       yearButton,
-      monthButton,
       yearButtonRoot,
+      monthButton,
       monthButtonRoot,
       yearMenu,
-      monthMenu,
       yearMenuState,
+      monthMenu,
       monthMenuState,
-      rootStyles,
       proxyModelValue,
       yearOptions,
       monthOptions,
@@ -575,9 +593,8 @@ var script$3 = defineComponent({
   emits: ['apply', 'reset'],
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-popover-footer-v3', ...DateTimePickerPopoverFooter]);
     return {
       root,
@@ -620,9 +637,8 @@ var script$2 = defineComponent({
   name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-popover-header-v3', ...DateTimePickerPopoverHeader]);
     return {
       root,
@@ -662,12 +678,16 @@ var script$1 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
     },
     selected: {
       type: Boolean,
@@ -688,14 +708,15 @@ var script$1 = defineComponent({
   },
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-time-control-v3', ...DateTimePickerTimeControl]);
     const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const placeholder = getTimePlaceholder(props.format);
+    const placeholder = computed(() => {
+      return getTimePlaceholder(props.format, props.locale);
+    });
     return {
       root,
       rootStyles,
@@ -717,14 +738,15 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     selected: _ctx.selected,
     required: _ctx.required,
     readonly: _ctx.readonly,
-    disabled: _ctx.disabled
+    disabled: _ctx.disabled,
+    onKeydown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
   }, [_ctx.proxyModelValue ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [createTextVNode(toDisplayString(_ctx.formatTime(_ctx.proxyModelValue, _ctx.format)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
+  }, [createTextVNode(toDisplayString(_ctx.formatTime(_ctx.proxyModelValue, _ctx.format, _ctx.locale)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
     key: 1,
     class: normalizeClass(_ctx.placeholderStyles),
     disabled: _ctx.disabled
-  }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1);
 }
 
 script$1.render = render$1;
@@ -763,7 +785,7 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     initialValue: {
@@ -772,7 +794,11 @@ var script = defineComponent({
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
     },
     hoursFilter: {
       type: Function,
@@ -787,9 +813,8 @@ var script = defineComponent({
   expose: ['root'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-time-select-v3', ...DateTimePickerTimeSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
@@ -798,7 +823,7 @@ var script = defineComponent({
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {
         const timeSample = new Date(1970, 0);
-        if (timeSample.toLocaleTimeString(navigator.language).includes('12')) {
+        if (timeSample.toLocaleTimeString(props.locale).includes('12')) {
           return DateTimePickerTimeFormat.H12;
         }
         return DateTimePickerTimeFormat.H23;
@@ -847,11 +872,11 @@ var script = defineComponent({
     });
     // Methods
     function formatHours(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         hour: 'numeric',
         hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
-      }).replace(/\s(am|pm)/i, '');
+      }).replace(/\D/g, '');
     }
     function formatMinutes(value) {
       return String(value.getUTCMinutes()).padStart(2, '0');

package/dist/esm/v3/{OrFormGroup-17c3cc0a.js → OrFormGroup-230f2015.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { s as script$1 } from './OrError-331220bc.js';
 import { s as script$2 } from './OrHint-262c8217.js';
-import { s as script$3 } from './OrLabel-02aa56ad.js';
+import { s as script$3 } from './OrLabel-59d09591.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 var FormGroupDirection;

package/dist/esm/v3/{OrInput-89bb16d6.js → OrInput-89162a71.js}

@@ -11,7 +11,7 @@ import { s as script$2 } from './OrHint-262c8217.js';
 import { s as script$4 } from './OrIconButton-bc7ebce6.js';
 import { s as script$3 } from './OrIcon-c446d072.js';
 import { s as script$5, a as InputBoxSize } from './OrInputBox-287f97ba.js';
-import { s as script$6 } from './OrLabel-02aa56ad.js';
+import { s as script$6 } from './OrLabel-59d09591.js';
 import { s as script$7 } from './OrLoader-5e2f359b.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, withDirectives, createElementVNode, mergeProps, vModelDynamic, Fragment, withModifiers, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrLabel-02aa56ad.js → OrLabel-59d09591.js}

@@ -33,10 +33,10 @@ const LabelVariants = {
   'theme-foreground-default', 'dark:theme-foreground-default-dark']
 };
 const LabelText = [
-// Content (required)
-'required:after:content-["*"]',
 // Interactivity
-'interactivity-default'];
+'interactivity-default',
+// Content (required)
+'required:after:content-["*"]'];
 const LabelAddon = [
 // Layout
 'layout-inline-row empty:hidden',

package/dist/esm/v3/{OrList-384bf436.js → OrList-75b5e6ac.js}

@@ -7,7 +7,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$1 } from './OrIconButton-bc7ebce6.js';
-import { s as script$2 } from './OrLabel-02aa56ad.js';
+import { s as script$2 } from './OrLabel-59d09591.js';
 import { s as script$3 } from './OrListItem-12e21bc6.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrRadio-160d7841.js → OrRadio-a7bb97f7.js}

@@ -5,7 +5,7 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { s as script$1, L as LabelVariant } from './OrLabel-02aa56ad.js';
+import { s as script$1, L as LabelVariant } from './OrLabel-59d09591.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';