@onereach/ui-components 4.1.1-beta.2540.0 → 4.1.1-beta.2578.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-f5dd7748.js → OrDateTimePickerMonthSelect-75f29163.js}

@@ -1,11 +1,6 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { useDatePlaceholder } from './components/OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { useDefaultDate } from './components/OrDateTimePickerV3/hooks/useDefaultDate.js';
-import { useDefaultHours } from './components/OrDateTimePickerV3/hooks/useDefaultHours.js';
-import { useDefaultMinutes } from './components/OrDateTimePickerV3/hooks/useDefaultMinutes.js';
-import { useDefaultMonth } from './components/OrDateTimePickerV3/hooks/useDefaultMonth.js';
-import { useDefaultYear } from './components/OrDateTimePickerV3/hooks/useDefaultYear.js';
 import __vue_component__$3 from './components/OrButtonV3/OrButton.js';
 import __vue_component__$4 from './components/OrIconV3/OrIcon.js';
 import __vue_component__$5 from './components/OrIconButtonV3/OrIconButton.js';
@@ -18,7 +13,7 @@ const DateTimePickerDateControl = [
 // Interactivity
 'interactivity-auto',
 // Theme (focus)
-'focus:theme-border-2-inherit', 'dark:focus:theme-border-2-inherit-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
+'focus:theme-border-2-inherit', 'dark:focus:theme-border-2-inherit-dark', 'focus:theme-border-underline'];
 const DateTimePickerDateControlPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
@@ -130,7 +125,9 @@ const DateTimePickerDaySelect = [
 'px-md', 'py-md', 'gap-sm'];
 const DateTimePickerDaySelectButtonGroup = [
 // Layout
-'grid', 'grid-cols-7',
+'grid content-start', 'grid-cols-7',
+// Box
+'h-[318px] md:h-[262px]',
 // Spacing
 'gap-xs'];
 const DateTimePickerDaySelectButtonGroupWeekdayItem = [
@@ -151,6 +148,9 @@ const DateTimePickerDaySelectButtonGroupDayItem = [
 '!px-sm', '!py-sm',
 // Typography
 'typography-caption-regular'];
+const DateTimePickerDaySelectButtonGroupTodayItem = [
+// Theme
+'theme-foreground-primary', 'dark:theme-foreground-primary-dark', 'theme-outline-1-primary', 'dark:theme-outline-1-primary-dark'];
 
 var script$1 = defineComponent({
   name: 'OrDateTimePickerDaySelect',
@@ -166,6 +166,10 @@ var script$1 = defineComponent({
       type: Date,
       default: undefined
     },
+    initialValue: {
+      type: Date,
+      required: true
+    },
     filter: {
       type: Function,
       default: undefined
@@ -181,11 +185,12 @@ var script$1 = defineComponent({
     const buttonGroupStyles = computed(() => [...DateTimePickerDaySelectButtonGroup]);
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupWeekdayItem]);
     const buttonGroupDayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupDayItem]);
+    const buttonGroupTodayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupTodayItem]);
     // State
     const proxyModelValue = computed({
       get: () => {
         var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
       },
       set: value => {
         context.emit('update:modelValue', value);
@@ -206,6 +211,14 @@ var script$1 = defineComponent({
         return options;
       })();
     });
+    const currentDate = computed(() => {
+      const value = new Date();
+      value.setUTCHours(proxyModelValue.value.getUTCHours());
+      value.setUTCMinutes(proxyModelValue.value.getUTCMinutes());
+      value.setUTCSeconds(proxyModelValue.value.getUTCSeconds());
+      value.setUTCMilliseconds(proxyModelValue.value.getUTCMilliseconds());
+      return value;
+    });
     // Methods
     function formatWeekday(value) {
       return value.toLocaleString(navigator.language, {
@@ -225,8 +238,10 @@ var script$1 = defineComponent({
       buttonGroupStyles,
       buttonGroupWeekdayItemStyles,
       buttonGroupDayItemStyles,
+      buttonGroupTodayItemStyles,
       proxyModelValue,
       dayOptions,
+      currentDate,
       formatWeekday,
       formatDay
     };
@@ -248,12 +263,14 @@ var __vue_render__$1 = function () {
     class: _vm.buttonGroupStyles
   }, [_vm._l(7, function (weekday) {
     return _c('div', {
+      key: weekday,
       class: _vm.buttonGroupWeekdayItemStyles
     }, [_vm._v("\n      " + _vm._s(_vm.formatWeekday(_vm.dayOptions[weekday - 1])) + "\n    ")]);
   }), _vm._v(" "), _vm._l(_vm.dayOptions, function (value) {
+    var _obj;
     return _c('OrButton', {
       key: Number(value),
-      class: _vm.buttonGroupDayItemStyles,
+      class: (_obj = {}, _obj[_vm.buttonGroupDayItemStyles.join(' ')] = true, _obj[_vm.buttonGroupTodayItemStyles.join(' ')] = Number(value) === Number(_vm.currentDate) && Number(value) !== Number(_vm.proxyModelValue), _obj),
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -314,6 +331,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    initialValue: {
+      type: Date,
+      required: true
+    },
     filter: {
       type: Function,
       default: undefined
@@ -350,7 +371,7 @@ var script = defineComponent({
     const proxyModelValue = computed({
       get: () => {
         var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
       },
       set: value => {
         context.emit('update:modelValue', value);
@@ -447,7 +468,8 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.yearMenu.open();
+        _vm.monthMenu.close();
+        _vm.yearMenu.open();
       }
     }
   }, [_vm._v("\n      " + _vm._s(_vm.formatYear(_vm.proxyModelValue)) + " "), _c('OrIcon', {
@@ -463,7 +485,8 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.monthMenu.open();
+        _vm.yearMenu.close();
+        _vm.monthMenu.open();
       }
     }
   }, [_vm._v("\n      " + _vm._s(_vm.formatMonth(_vm.proxyModelValue)) + " "), _c('OrIcon', {

package/dist/bundled/v2/{OrDateTimePickerPopoverHeader-40001d2f.js → OrDateTimePickerPopoverHeader-7c87f38a.js}

@@ -83,14 +83,16 @@ const DateTimePickerPopoverFooter = [
 // Layout (children)
 'children:grow',
 // Spacing
-'px-md md:px-sm', 'py-md md:py-sm', 'gap-md md:gap-sm'];
+'px-md md:px-sm', 'py-md md:py-sm', 'gap-md md:gap-sm',
+// Theme
+'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark', 'theme-border-overline'];
 
 var script$1 = defineComponent({
   name: 'OrDateTimePickerPopoverFooter',
   components: {
     OrButton: __vue_component__$4
   },
-  emits: ['resolve', 'reject'],
+  emits: ['apply', 'reset'],
   expose: ['root'],
   setup() {
     // Refs
@@ -122,7 +124,7 @@ var __vue_render__$1 = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.$emit('resolve');
+        return _vm.$emit('apply');
       }
     }
   }, [_vm._v("\n    Done\n  ")]), _vm._v(" "), _c('OrButton', {
@@ -132,7 +134,7 @@ var __vue_render__$1 = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.$emit('reject');
+        return _vm.$emit('reset');
       }
     }
   }, [_vm._v("\n    Cancel\n  ")])], 1);

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-153a174a.js → OrDateTimePickerTimeSelect-0653e282.js}

@@ -1,11 +1,6 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { useTimePlaceholder } from './components/OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { useDefaultDate } from './components/OrDateTimePickerV3/hooks/useDefaultDate.js';
-import { useDefaultHours } from './components/OrDateTimePickerV3/hooks/useDefaultHours.js';
-import { useDefaultMinutes } from './components/OrDateTimePickerV3/hooks/useDefaultMinutes.js';
-import { useDefaultMonth } from './components/OrDateTimePickerV3/hooks/useDefaultMonth.js';
-import { useDefaultYear } from './components/OrDateTimePickerV3/hooks/useDefaultYear.js';
 import __vue_component__$2 from './components/OrButtonV3/OrButton.js';
 
 const DateTimePickerTimeControl = [
@@ -14,7 +9,7 @@ const DateTimePickerTimeControl = [
 // Interactivity
 'interactivity-auto',
 // Theme (focus)
-'focus:theme-border-2-inherit', 'dark:focus:theme-border-2-inherit-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
+'focus:theme-border-2-inherit', 'dark:focus:theme-border-2-inherit-dark', 'focus:theme-border-underline'];
 const DateTimePickerTimeControlPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
@@ -132,10 +127,12 @@ const DateTimePickerTimeSelectButtonGroup = [
 // Layout
 'layout-column',
 // Box
-'max-h-[224px]',
+'h-[294px] md:h-[238px]',
 // Overflow
 'overflow-x-hidden', 'overflow-y-auto'];
 const DateTimePickerTimeSelectButtonGroupItem = [
+// Box
+'!min-w-fit',
 // Typography
 'typography-caption-regular'];
 
@@ -153,6 +150,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    initialValue: {
+      type: Date,
+      required: true
+    },
     filter: {
       type: Function,
       default: undefined
@@ -171,7 +172,7 @@ var script = defineComponent({
     const proxyModelValue = computed({
       get: () => {
         var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
       },
       set: value => {
         context.emit('update:modelValue', value);

package/dist/bundled/v2/components/OrButtonV3/OrButton.vue.d.ts

@@ -6,15 +6,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isVue3: boolean;
 }> & import("@vue/composition-api").Data, {}, {}, {
     type: {
-        type: PropType<ButtonType>;
+        type: PropType<"button" | "submit" | "reset">;
         default: ButtonType;
     };
     variant: {
-        type: PropType<ButtonVariant>;
+        type: PropType<"contained" | "outlined" | "text" | "link">;
         default: ButtonVariant;
     };
     color: {
-        type: PropType<ButtonColor>;
+        type: PropType<"primary" | "danger" | "inherit">;
         default: ButtonColor;
     };
     activated: {
@@ -35,15 +35,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     type: {
-        type: PropType<ButtonType>;
+        type: PropType<"button" | "submit" | "reset">;
         default: ButtonType;
     };
     variant: {
-        type: PropType<ButtonVariant>;
+        type: PropType<"contained" | "outlined" | "text" | "link">;
         default: ButtonVariant;
     };
     color: {
-        type: PropType<ButtonColor>;
+        type: PropType<"primary" | "danger" | "inherit">;
         default: ButtonColor;
     };
     activated: {
@@ -64,9 +64,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     activated: boolean;
-    type: ButtonType;
-    variant: ButtonVariant;
-    color: ButtonColor;
+    type: "button" | "submit" | "reset";
+    variant: "contained" | "outlined" | "text" | "link";
+    color: "primary" | "danger" | "inherit";
     disabled: boolean;
     loading: boolean;
     loadingText: string;
@@ -78,9 +78,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isVue3: boolean;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     activated: boolean;
-    type: ButtonType;
-    variant: ButtonVariant;
-    color: ButtonColor;
+    type: "button" | "submit" | "reset";
+    variant: "contained" | "outlined" | "text" | "link";
+    color: "primary" | "danger" | "inherit";
     disabled: boolean;
     loading: boolean;
     loadingText: string;
@@ -88,9 +88,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     activated: boolean;
-    type: ButtonType;
-    variant: ButtonVariant;
-    color: ButtonColor;
+    type: "button" | "submit" | "reset";
+    variant: "contained" | "outlined" | "text" | "link";
+    color: "primary" | "danger" | "inherit";
     disabled: boolean;
     loading: boolean;
     loadingText: string;

package/dist/bundled/v2/components/OrCheckboxV3/styles.js

@@ -17,7 +17,7 @@ const CheckboxControl = [
 // Theme
 'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
 // Theme (focus)
-'focus:theme-outline-primary', 'dark:focus:theme-outline-primary-dark',
+'focus:theme-outline-2-primary', 'dark:focus:theme-outline-2-primary-dark',
 // Theme (checked)
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark',
 // Theme (indeterminate)

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,12 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDaySelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-f5dd7748.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-40001d2f.js';
-import { DatePicker } from './styles.js';
+import { useDefaultDate } from '../OrDateTimePickerV3/hooks/useDefaultDate.js';
+import { useDefaultHours } from '../OrDateTimePickerV3/hooks/useDefaultHours.js';
+import { useDefaultMinutes } from '../OrDateTimePickerV3/hooks/useDefaultMinutes.js';
+import { useDefaultMonth } from '../OrDateTimePickerV3/hooks/useDefaultMonth.js';
+import { useDefaultYear } from '../OrDateTimePickerV3/hooks/useDefaultYear.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDaySelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-75f29163.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';
@@ -14,11 +19,6 @@ import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerV3/hooks/useDefaultDate.js';
-import '../OrDateTimePickerV3/hooks/useDefaultHours.js';
-import '../OrDateTimePickerV3/hooks/useDefaultMinutes.js';
-import '../OrDateTimePickerV3/hooks/useDefaultMonth.js';
-import '../OrDateTimePickerV3/hooks/useDefaultYear.js';
 import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
@@ -126,10 +126,10 @@ var script = defineComponent({
   setup(props, context) {
     // Refs
     const root = ref();
-    const control = ref();
-    const controlRoot = computed(() => {
+    const inputBox = ref();
+    const inputBoxRoot = computed(() => {
       var _a;
-      return (_a = control.value) === null || _a === void 0 ? void 0 : _a.root;
+      return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const popover = ref();
     const popoverState = computed(() => {
@@ -138,7 +138,9 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-date-picker', ...DatePicker]);
+    const popoverStyles = computed(() => [...DatePickerPopover]);
     // State
+    const initialModelValue = new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
     const proxyModelValue = computed({
       get: () => props.modelValue,
       set: value => {
@@ -152,6 +154,13 @@ var script = defineComponent({
       immediate: true
     });
     // Methods
+    function apply() {
+      var _a;
+      proxyModelValue.value = (_a = draftModelValue.value) !== null && _a !== void 0 ? _a : initialModelValue;
+    }
+    function reset() {
+      draftModelValue.value = proxyModelValue.value;
+    }
     function togglePopover() {
       if (!props.readonly && !props.disabled) {
         const popoverInstance = popover.value;
@@ -179,13 +188,17 @@ var script = defineComponent({
     }
     return {
       root,
-      control,
-      controlRoot,
+      inputBox,
+      inputBoxRoot,
       popover,
       popoverState,
       rootStyles,
+      popoverStyles,
+      initialModelValue,
       proxyModelValue,
       draftModelValue,
+      apply,
+      reset,
       togglePopover,
       closePopover,
       formatDateAlt
@@ -218,6 +231,7 @@ var __vue_render__ = function () {
       proxy: true
     }], null, true)
   }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
+    ref: "inputBox",
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
       "size": _vm.size,
@@ -237,7 +251,6 @@ var __vue_render__ = function () {
       value: _vm.closePopover,
       expression: "closePopover"
     }],
-    ref: "control",
     attrs: {
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -252,10 +265,16 @@ var __vue_render__ = function () {
     }
   }), _vm._v(" "), _c('OrPopover', {
     ref: "popover",
+    class: _vm.popoverStyles,
     attrs: {
       "variant": 'auto',
-      "trigger": _vm.controlRoot,
-      "placement": 'bottom'
+      "trigger": _vm.inputBoxRoot,
+      "placement": 'bottom-start'
+    },
+    on: {
+      "update:state:closed-automatically": function ($event) {
+        return _vm.reset();
+      }
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
@@ -263,6 +282,7 @@ var __vue_render__ = function () {
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {
+      "initial-value": _vm.initialModelValue,
       "filter": _vm.filter
     },
     model: {
@@ -274,6 +294,7 @@ var __vue_render__ = function () {
     }
   }), _vm._v(" "), _c('OrDateTimePickerDaySelect', {
     attrs: {
+      "initial-value": _vm.initialModelValue,
       "filter": _vm.filter
     },
     model: {
@@ -285,12 +306,12 @@ var __vue_render__ = function () {
     }
   }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
     on: {
-      "resolve": function ($event) {
-        _vm.proxyModelValue = _vm.draftModelValue;
+      "apply": function ($event) {
+        _vm.apply();
         _vm.popover.close();
       },
-      "reject": function ($event) {
-        _vm.draftModelValue = _vm.proxyModelValue;
+      "reset": function ($event) {
+        _vm.reset();
         _vm.popover.close();
       }
     }

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.vue.d.ts

@@ -2,12 +2,12 @@ import { PropType } from 'vue-demi';
 import { DatePickerSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
         [x: number]: string;
     } | {}, true> | undefined>;
-    controlRoot: import("@vue/composition-api").ComputedRef<undefined>;
+    inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -15,8 +15,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    apply: () => void;
+    reset: () => void;
     togglePopover: () => void;
     closePopover: () => void;
     formatDateAlt: (value?: Date) => string;
@@ -117,12 +121,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
         [x: number]: string;
     } | {}, true> | undefined>;
-    controlRoot: import("@vue/composition-api").ComputedRef<undefined>;
+    inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -130,8 +134,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    apply: () => void;
+    reset: () => void;
     togglePopover: () => void;
     closePopover: () => void;
     formatDateAlt: (value?: Date) => string;

package/dist/bundled/v2/components/OrDatePickerV3/index.js

@@ -1,14 +1,14 @@
 export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
-import '../../OrDateTimePickerMonthSelect-f5dd7748.js';
-import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../../normalize-component-6e8e3d80.js';
 import '../OrDateTimePickerV3/hooks/useDefaultDate.js';
 import '../OrDateTimePickerV3/hooks/useDefaultHours.js';
 import '../OrDateTimePickerV3/hooks/useDefaultMinutes.js';
 import '../OrDateTimePickerV3/hooks/useDefaultMonth.js';
 import '../OrDateTimePickerV3/hooks/useDefaultYear.js';
+import '../../OrDateTimePickerMonthSelect-75f29163.js';
+import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
+import '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
@@ -41,7 +41,7 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-40001d2f.js';
+import '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrDatePickerV3/styles.d.ts

@@ -1 +1,2 @@
 export declare const DatePicker: string[];
+export declare const DatePickerPopover: string[];

package/dist/bundled/v2/components/OrDatePickerV3/styles.js

@@ -3,5 +3,8 @@ const DatePicker = [
 'layout-column',
 // Spacing
 'gap-xs'];
+const DatePickerPopover = [
+// Box
+'w-[298px]'];
 
-export { DatePicker };
+export { DatePicker, DatePickerPopover };