@onereach/ui-components 6.4.5 → 6.4.6-beta.3436.0

package/dist/esm/v3/index.js

@@ -7,7 +7,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-4a3c3e7b.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-8c81a2d5.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-64175d94.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-afb06802.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-a789e0d9.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-53478516.js';
@@ -21,23 +21,24 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-56268647.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-7b117808.js';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-252f482b.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-b8a868cb.js';
-export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-912a6254.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-fb045646.js';
+export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBox-5f246763.js';
 export { s as OrConfirm } from './OrConfirm-97ab80b9.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-658dfa58.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-02fa91eb.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-0a6a5668.js';
 export { s as OrMenuV3 } from './OrMenu-ce78b703.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-2132e8b9.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-8322187d.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-a6518904.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-fc9a09d9.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-ec0f16ae.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-6d6bd296.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-be4290b4.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-037ee1a2.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-e13abe97.js';
-export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-1a7950ad.js';
-export { D as DateTimePickerTimeFormat, D as TimePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-09859f55.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-049f67b6.js';
+export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-7da38974.js';
+export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-f190a43f.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
@@ -57,7 +58,7 @@ export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-4321
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-a3c4c7dc.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-3434585e.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-30df8d73.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-2e7d99fd.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-d4c46bb6.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-dcae31fb.js';
@@ -82,12 +83,12 @@ export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-cae1897c.js';
 export { s as OrRadioV3 } from './OrRadio-02e0d111.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-bdf2e88f.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-a9b18821.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
-export { s as OrSearchV3 } from './OrSearch-04fdc116.js';
+export { s as OrSearchV3 } from './OrSearch-7eca5aa8.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-4c4fff7b.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-559c6cf5.js';
+export { s as OrSelectV3 } from './OrSelect-0f754f8b.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-f9803fee.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-035f0736.js';
@@ -109,17 +110,18 @@ export { s as OrTabV3 } from './OrTab-2d567d8e.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-05d39983.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-6824b64e.js';
+export { s as OrTagInputV3 } from './OrTagInput-eb018195.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-31b2c78f.js';
 export { s as OrTagsV3, T as TagsOverflow } from './OrTags-ba7e85ee.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from './OrTextarea-aa1cf564.js';
+export { s as OrTextareaV3 } from './OrTextarea-019e74fe.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-cb6762c8.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-845f1078.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-294ab841.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-d387b261.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-7a73bbae.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-5ee02d17.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-1a079b57.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "6.4.5",
+  "version": "6.4.6-beta.3436.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^4.0.0",
+    "@onereach/styles": "^4.0.1-beta.3436.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -175,6 +175,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "526f63f62395416a20461c854cf4630410199e7d"
+  }
 }

package/src/components/index.ts

@@ -23,6 +23,7 @@ export * from './or-confirm-v3';
 export * from './or-context-menu-v3';
 export * from './or-date-format-v3';
 export * from './or-date-picker-v3';
+export * from './or-date-range-picker-v3';
 export * from './or-date-time-format-v3';
 export * from './or-date-time-picker';
 export * from './or-date-time-picker-v3';
@@ -105,6 +106,7 @@ export * from './or-textarea-v3';
 export * from './or-textbox';
 export * from './or-time-format-v3';
 export * from './or-time-picker-v3';
+export * from './or-time-range-picker-v3';
 export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';

package/src/components/or-combined-input-v3/styles.ts

@@ -14,9 +14,9 @@ export const CombinedInputControlGroup: string[] = [
   'w-full',
 
   // Shape (.or-input-box-v3)
-  '[&_.or-input-box-v3]:first-child:rounded-r-0',
-  '[&_.or-input-box-v3]:middle-child:rounded-0',
-  '[&_.or-input-box-v3]:last-child:rounded-l-0',
+  '[&_.or-input-box-v3]:first-child:rounded-r-none',
+  '[&_.or-input-box-v3]:middle-child:rounded-none',
+  '[&_.or-input-box-v3]:last-child:rounded-l-none',
 
   // Spacing (.or-input-box-v3)
   '[&_.or-input-box-v3]:first-child:mr-[-1px]',

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -46,7 +46,10 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl label="Date">
+          <OrDateTimePickerMobileControl
+            :label="'Date'"
+            :selected="true"
+          >
             {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
@@ -124,8 +127,6 @@ import { DatePickerSize } from './props';
 import { DatePicker, DatePickerPopover } from './styles';
 
 export default defineComponent({
-  name: 'OrDatePicker',
-
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -0,0 +1,421 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <template v-if="label">
+      <OrLabel
+        :variant="'input'"
+        :required="required"
+        :disabled="disabled"
+      >
+        {{ label }}
+
+        <template v-slot:addon>
+          <slot name="addon" />
+        </template>
+      </OrLabel>
+    </template>
+
+    <OrInputBox
+      ref="inputBox"
+      v-dropdown-open="togglePopover"
+      v-dropdown-close="closePopover"
+      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :size="size"
+      :invalid="!!error"
+      :readonly="readonly"
+      :disabled="disabled"
+    >
+      <OrDateTimePickerDateControl
+        v-model="draftModelValueFrom"
+        v-dropdown-open="togglePopover"
+        v-dropdown-close="closePopover"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+      />
+
+      -
+
+      <OrDateTimePickerDateControl
+        v-model="draftModelValueTo"
+        v-dropdown-open="togglePopover"
+        v-dropdown-close="closePopover"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+      />
+
+      <OrPopover
+        ref="popover"
+        :class="popoverStyles"
+        :variant="'auto'"
+        :bottom-sheet-props="{ variant: 'basic' }"
+        :trigger="inputBoxRoot"
+        :placement="'bottom-start'"
+        @close="reset()"
+      >
+        <OrDateTimePickerPopoverHeader>
+          <OrDateTimePickerMobileControl
+            :label="'Start Date'"
+            :selected="selectedMobileControl === 'from'"
+            @click="selectedMobileControl = 'from'"
+          >
+            {{ formatDateAlt(draftModelValueFrom) }}
+          </OrDateTimePickerMobileControl>
+
+          -
+
+          <OrDateTimePickerMobileControl
+            :label="'End Date'"
+            :selected="selectedMobileControl === 'to'"
+            @click="selectedMobileControl = 'to'"
+          >
+            {{ formatDateAlt(draftModelValueTo) }}
+          </OrDateTimePickerMobileControl>
+        </OrDateTimePickerPopoverHeader>
+
+        <div :class="['layout-row', 'gap-md']">
+          <template v-if="isDesktop || (isMobile && selectedMobileControl === 'from')">
+            <div :class="['layout-column', 'grow']">
+              <OrDateTimePickerMonthSelect
+                v-model="draftModelValueFrom"
+                :initial-value="initialModelValue"
+                :year-filter="filterFrom"
+                :month-filter="filterFrom"
+              />
+
+              <OrDateTimePickerDateSelect
+                v-model="draftModelValueFrom"
+                :initial-value="initialModelValue"
+                :date-filter="filterFrom"
+                :range-start="draftModelValueFrom"
+                :range-end="draftModelValueTo"
+              />
+            </div>
+          </template>
+
+          <template v-if="isDesktop || (isMobile && selectedMobileControl === 'to')">
+            <div :class="['layout-column']">
+              <OrDateTimePickerMonthSelect
+                v-model="draftModelValueTo"
+                :initial-value="initialModelValue"
+                :year-filter="filterTo"
+                :month-filter="filterTo"
+              />
+
+              <OrDateTimePickerDateSelect
+                v-model="draftModelValueTo"
+                :initial-value="initialModelValue"
+                :date-filter="filterTo"
+                :range-start="draftModelValueFrom"
+                :range-end="draftModelValueTo"
+              />
+            </div>
+          </template>
+        </div>
+
+        <OrDateTimePickerPopoverFooter
+          :disabled="isInvalidDraftModelValue"
+          @apply="apply(); popover.close()"
+          @reset="reset(); popover.close()"
+        />
+      </OrPopover>
+
+      <div :class="['grow']" />
+
+      <template v-slot:addon>
+        <template v-if="modelValue">
+          <OrIconButton
+            :icon="'close'"
+            :color="'inherit'"
+            :disabled="readonly || disabled"
+            @click.stop="$emit('update:modelValue', undefined)"
+          />
+        </template>
+
+        <template v-else>
+          <OrIcon
+            :icon="'calendar_month'"
+            :variant="'outlined'"
+          />
+        </template>
+      </template>
+    </OrInputBox>
+
+    <template v-if="!error">
+      <template v-if="hint">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+        </OrHint>
+      </template>
+    </template>
+
+    <template v-if="typeof error === 'string'">
+      <OrError :disabled="disabled">
+        {{ error }}
+      </OrError>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { DropdownClose, DropdownOpen } from '../../directives';
+import { useProxyModelValue, useResponsive } from '../../hooks';
+import { FilterFunction, getCurrentDate, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader } from '../or-date-time-picker-v3';
+import { OrErrorV3 as OrError } from '../or-error-v3';
+import { OrHintV3 as OrHint } from '../or-hint-v3';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
+import { DateRangePickerSize } from './props';
+import { DateRangePicker, DateRangePickerPopover } from './styles';
+
+export default defineComponent({
+  components: {
+    OrDateTimePickerDateControl,
+    OrDateTimePickerDateSelect,
+    OrDateTimePickerMobileControl,
+    OrDateTimePickerMonthSelect,
+    OrDateTimePickerPopoverFooter,
+    OrDateTimePickerPopoverHeader,
+    OrError,
+    OrHint,
+    OrIcon,
+    OrIconButton,
+    OrInputBox,
+    OrLabel,
+    OrPopover,
+  },
+
+  directives: {
+    DropdownClose,
+    DropdownOpen,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: Object as PropType<[Date, Date]>,
+      default: undefined,
+    },
+
+    size: {
+      type: String as PropType<`${DateRangePickerSize}`>,
+      default: DateRangePickerSize.M,
+    },
+
+    label: {
+      type: String,
+      default: undefined,
+    },
+
+    hint: {
+      type: String,
+      default: undefined,
+    },
+
+    error: {
+      type: [String, Boolean],
+      default: undefined,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+
+    'keydown',
+    'keyup',
+    'focus',
+    'blur',
+  ],
+
+  expose: [
+    'root',
+
+    'focus',
+    'blur',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    const inputBox = ref<InstanceType<typeof OrInputBox>>();
+    const inputBoxRoot = computed(() => inputBox.value?.root);
+
+    const popover = ref<InstanceType<typeof OrPopover>>();
+    const popoverState = computed(() => popover.value?.state);
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-date-range-picker-v3',
+      ...DateRangePicker,
+    ]);
+
+    const popoverStyles = computed(() => [
+      ...DateRangePickerPopover,
+    ]);
+
+    // State
+    const initialModelValue = getCurrentDate();
+
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref<[Date | undefined, Date | undefined]>(proxyModelValue.value ?? [undefined, undefined]);
+
+    watch(proxyModelValue, (value) => {
+      draftModelValue.value = value ?? [undefined, undefined];
+    });
+
+    const draftModelValueFrom = computed({
+      get: () => draftModelValue.value[0],
+
+      set: (value) => {
+        draftModelValue.value = [
+          value,
+          draftModelValue.value[1],
+        ];
+      },
+    });
+
+    const draftModelValueTo = computed({
+      get: () => draftModelValue.value[1],
+
+      set: (value) => {
+        draftModelValue.value = [
+          draftModelValue.value[0],
+          value,
+        ];
+      },
+    });
+
+    const selectedMobileControl = ref<'from' | 'to'>('from');
+
+    const filterFrom: FilterFunction = (value) => {
+      if (draftModelValueTo.value) {
+        return Number(value) <= Number(draftModelValueTo.value);
+      }
+
+      return true;
+    };
+
+    const filterTo: FilterFunction = (value) => {
+      if (draftModelValueFrom.value) {
+        return Number(value) >= Number(draftModelValueFrom.value);
+      }
+
+      return true;
+    };
+
+    const isInvalidDraftModelValue = computed(() => {
+      if (draftModelValueFrom.value) {
+        return !filterFrom(draftModelValueFrom.value);
+      }
+
+      if (draftModelValueTo.value) {
+        return !filterTo(draftModelValueTo.value);
+      }
+
+      return false;
+    });
+
+    // Methods
+    function apply(): void {
+      proxyModelValue.value = [
+        draftModelValue.value[0] ?? initialModelValue,
+        draftModelValue.value[1] ?? initialModelValue,
+      ];
+    }
+
+    function reset(): void {
+      draftModelValue.value = proxyModelValue.value ?? [undefined, undefined];
+    }
+
+    function togglePopover(): void {
+      if (!props.readonly && !props.disabled) {
+        const popoverInstance = popover.value;
+
+        if (popoverInstance) {
+          if (popoverState.value === 'open') {
+            (popoverInstance.close as () => void)();
+          } else {
+            (popoverInstance.open as () => void)();
+          }
+        }
+      }
+    }
+
+    function closePopover(): void {
+      const popoverInstance = popover.value;
+
+      if (popoverInstance) {
+        (popoverInstance.close as () => void)();
+      }
+    }
+
+    function formatDateAlt(value?: Date): string {
+      return value?.toLocaleString(navigator.language, {
+        dateStyle: 'medium',
+        timeZone: 'UTC',
+      }) ?? '--';
+    }
+
+    // Helpers
+    const { isDesktop, isMobile } = useResponsive();
+
+    return {
+      root,
+      inputBox,
+      inputBoxRoot,
+      popover,
+      popoverState,
+      rootStyles,
+      popoverStyles,
+      initialModelValue,
+      proxyModelValue,
+      draftModelValue,
+      draftModelValueFrom,
+      draftModelValueTo,
+      selectedMobileControl,
+      filterFrom,
+      filterTo,
+      isInvalidDraftModelValue,
+      apply,
+      reset,
+      togglePopover,
+      closePopover,
+      formatDateAlt,
+      isDesktop,
+      isMobile,
+    };
+  },
+});
+</script>

package/src/components/or-date-range-picker-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as OrDateRangePickerV3 } from './OrDateRangePicker.vue';
+export * from './props';

package/src/components/or-date-range-picker-v3/props.ts

@@ -0,0 +1 @@
+export { InputBoxSize as DateRangePickerSize } from '../or-input-box-v3';

package/src/components/or-date-range-picker-v3/styles.ts

@@ -0,0 +1,12 @@
+export const DateRangePicker: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const DateRangePickerPopover: string[] = [
+  // Box
+  'w-[580px]',
+];

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -56,11 +56,11 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl label="Date">
+          <OrDateTimePickerMobileControl :label="'Date'">
             {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
-          <OrDateTimePickerMobileControl label="Time">
+          <OrDateTimePickerMobileControl :label="'Time'">
             {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
@@ -95,11 +95,11 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl label="Date">
+          <OrDateTimePickerMobileControl :label="'Date'">
             {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
-          <OrDateTimePickerMobileControl label="Time">
+          <OrDateTimePickerMobileControl :label="'Time'">
             {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
@@ -174,8 +174,6 @@ import { FilterFunction } from './types';
 import { getCurrentDate } from './utils';
 
 export default defineComponent({
-  name: 'OrDateTimePicker',
-
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-control/OrDateTimePickerDateControl.vue

@@ -29,8 +29,6 @@ import { formatDate, getDatePlaceholder } from '../../utils';
 import { DateTimePickerDateControl, DateTimePickerDateControlPlaceholder } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerDateControl',
-
   model: {
     prop: 'modelValue',
     event: 'update:modelValue',