@onereach/ui-components 4.0.4-beta.2521.0 → 4.0.4-beta.2523.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-9f9ce5cc.js → OrDateTimePickerMonthSelect-59c639c8.js}

@@ -21,7 +21,16 @@ const DateTimePickerDaySelectButtonGroup = [
 'grid', 'grid-cols-7',
 // Spacing
 'gap-xs'];
-const DateTimePickerDaySelectButtonGroupItem = [
+const DateTimePickerDaySelectButtonGroupWeekdayItem = [
+// Box
+'min-w-fit',
+// Spacing
+'px-sm', 'py-sm',
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const DateTimePickerDaySelectButtonGroupDayItem = [
 // Box
 'min-w-fit',
 // Spacing
@@ -56,7 +65,8 @@ var script$1 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-day-select', ...DateTimePickerDaySelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDaySelectButtonGroup]);
-    const buttonGroupItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupItem]);
+    const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupWeekdayItem]);
+    const buttonGroupDayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupDayItem]);
     // State
     const proxyModelValue = computed({
       get: () => {
@@ -83,6 +93,12 @@ var script$1 = defineComponent({
       })();
     });
     // Methods
+    function formatWeekday(value) {
+      return value.toLocaleString('default', {
+        weekday: 'short',
+        timeZone: 'UTC'
+      });
+    }
     function formatDay(value) {
       return value.toLocaleString('default', {
         day: 'numeric',
@@ -93,9 +109,11 @@ var script$1 = defineComponent({
       root,
       rootStyles,
       buttonGroupStyles,
-      buttonGroupItemStyles,
+      buttonGroupWeekdayItemStyles,
+      buttonGroupDayItemStyles,
       proxyModelValue,
       dayOptions,
+      formatWeekday,
       formatDay
     };
   }
@@ -114,10 +132,14 @@ var __vue_render__$1 = function () {
     class: _vm.rootStyles
   }, [_c('div', {
     class: _vm.buttonGroupStyles
-  }, _vm._l(_vm.dayOptions, function (value) {
+  }, [_vm._l(7, function (i) {
+    return _c('div', {
+      class: _vm.buttonGroupWeekdayItemStyles
+    }, [_vm._v("\n      " + _vm._s(_vm.formatWeekday(_vm.dayOptions[i - 1])) + "\n    ")]);
+  }), _vm._v(" "), _vm._l(_vm.dayOptions, function (value) {
     return _c('OrButton', {
       key: Number(value),
-      class: _vm.buttonGroupItemStyles,
+      class: _vm.buttonGroupDayItemStyles,
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -130,7 +152,7 @@ var __vue_render__$1 = function () {
         }
       }
     }, [_vm._v("\n      " + _vm._s(_vm.formatDay(value)) + "\n    ")]);
-  }), 1)]);
+  })], 2)]);
 };
 var __vue_staticRenderFns__$1 = [];
 

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
 import { useDateFormat } from '../OrDateTimePickerV3/hooks/useDateFormat.js';
-import { O as OrDateTimePickerDaySelect, a as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-9f9ce5cc.js';
+import { O as OrDateTimePickerDaySelect, a as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-59c639c8.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-ffdf51e9.js';
 import { DatePicker, DatePickerControl } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

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

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useDateFormat.js';
-import '../../OrDateTimePickerMonthSelect-9f9ce5cc.js';
+import '../../OrDateTimePickerMonthSelect-59c639c8.js';
 import '../OrDateTimePickerV3/hooks/useDefaultDate.js';
 import '../OrDateTimePickerV3/hooks/useDefaultHours.js';
 import '../OrDateTimePickerV3/hooks/useDefaultMinutes.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
 import { useDateFormat } from './hooks/useDateFormat.js';
 import { useTimeFormat } from './hooks/useTimeFormat.js';
-import { O as OrDateTimePickerDaySelect, a as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-9f9ce5cc.js';
+import { O as OrDateTimePickerDaySelect, a as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-59c639c8.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-ffdf51e9.js';
 import { O as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-cb1394ee.js';
 import { DateTimePicker, DateTimePickerControl } from './styles.js';

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

@@ -3,7 +3,7 @@ export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useDateFormat.js';
 import './hooks/useTimeFormat.js';
-import '../../OrDateTimePickerMonthSelect-9f9ce5cc.js';
+import '../../OrDateTimePickerMonthSelect-59c639c8.js';
 import './hooks/useDefaultDate.js';
 import './hooks/useDefaultHours.js';
 import './hooks/useDefaultMinutes.js';

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

@@ -203,7 +203,7 @@ import './OrColorPicker/utils/defultPalette.js';
 import '../index-63e094a0.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useDateFormat.js';
-import '../OrDateTimePickerMonthSelect-9f9ce5cc.js';
+import '../OrDateTimePickerMonthSelect-59c639c8.js';
 import './OrDateTimePickerV3/hooks/useDefaultDate.js';
 import './OrDateTimePickerV3/hooks/useDefaultHours.js';
 import './OrDateTimePickerV3/hooks/useDefaultMinutes.js';

package/dist/bundled/v2/index.js

@@ -185,7 +185,7 @@ import './components/OrColorPicker/utils/defultPalette.js';
 import './index-63e094a0.js';
 import './components/OrConfirmV3/styles.js';
 import './components/OrDateTimePickerV3/hooks/useDateFormat.js';
-import './OrDateTimePickerMonthSelect-9f9ce5cc.js';
+import './OrDateTimePickerMonthSelect-59c639c8.js';
 import './components/OrDateTimePickerV3/hooks/useDefaultDate.js';
 import './components/OrDateTimePickerV3/hooks/useDefaultHours.js';
 import './components/OrDateTimePickerV3/hooks/useDefaultMinutes.js';

package/dist/bundled/v3/{OrDatePicker.vue_vue_type_script_lang-bf895434.js → OrDatePicker.vue_vue_type_script_lang-53f5b925.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
 import { useDateFormat } from './components/OrDateTimePickerV3/hooks/useDateFormat.js';
-import { s as script$1, a as script$3 } from './OrDateTimePickerMonthSelect-ad05eff6.js';
+import { s as script$1, a as script$3 } from './OrDateTimePickerMonthSelect-dea4a5ae.js';
 import { s as script$2, a as script$4, b as script$5 } from './OrDateTimePickerPopoverHeader-8fbb4dfc.js';
 import { DatePicker, DatePickerControl } from './components/OrDatePickerV3/styles.js';
 import './components/OrErrorV3/OrError.js';

package/dist/bundled/v3/{OrDateTimePicker.vue_vue_type_script_lang-2fe2b8c0.js → OrDateTimePicker.vue_vue_type_script_lang-d78de3fd.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
 import { useDateFormat } from './components/OrDateTimePickerV3/hooks/useDateFormat.js';
 import { useTimeFormat } from './components/OrDateTimePickerV3/hooks/useTimeFormat.js';
-import { s as script$1, a as script$3 } from './OrDateTimePickerMonthSelect-ad05eff6.js';
+import { s as script$1, a as script$3 } from './OrDateTimePickerMonthSelect-dea4a5ae.js';
 import { s as script$2, a as script$4, b as script$5 } from './OrDateTimePickerPopoverHeader-8fbb4dfc.js';
 import { s as script$6 } from './OrDateTimePickerTimeSelect-6cb9e69d.js';
 import { DateTimePicker, DateTimePickerControl } from './components/OrDateTimePickerV3/styles.js';

package/dist/bundled/v3/{OrDateTimePickerMonthSelect-ad05eff6.js → OrDateTimePickerMonthSelect-dea4a5ae.js}

@@ -6,7 +6,7 @@ import { useDefaultMonth } from './components/OrDateTimePickerV3/hooks/useDefaul
 import { useDefaultYear } from './components/OrDateTimePickerV3/hooks/useDefaultYear.js';
 import './components/OrButtonV3/OrButton.js';
 import { s as script$2 } from './OrButton.vue_vue_type_script_lang-5650b394.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createBlock, withModifiers, withCtx, createTextVNode, createVNode } from 'vue';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrIconButtonV3/OrIconButton.js';
 import './components/OrMenuV3/OrMenu.js';
@@ -26,7 +26,16 @@ const DateTimePickerDaySelectButtonGroup = [
 'grid', 'grid-cols-7',
 // Spacing
 'gap-xs'];
-const DateTimePickerDaySelectButtonGroupItem = [
+const DateTimePickerDaySelectButtonGroupWeekdayItem = [
+// Box
+'min-w-fit',
+// Spacing
+'px-sm', 'py-sm',
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const DateTimePickerDaySelectButtonGroupDayItem = [
 // Box
 'min-w-fit',
 // Spacing
@@ -61,7 +70,8 @@ var script$1 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-day-select', ...DateTimePickerDaySelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDaySelectButtonGroup]);
-    const buttonGroupItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupItem]);
+    const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupWeekdayItem]);
+    const buttonGroupDayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupDayItem]);
     // State
     const proxyModelValue = computed({
       get: () => {
@@ -88,6 +98,12 @@ var script$1 = defineComponent({
       })();
     });
     // Methods
+    function formatWeekday(value) {
+      return value.toLocaleString('default', {
+        weekday: 'short',
+        timeZone: 'UTC'
+      });
+    }
     function formatDay(value) {
       return value.toLocaleString('default', {
         day: 'numeric',
@@ -98,9 +114,11 @@ var script$1 = defineComponent({
       root,
       rootStyles,
       buttonGroupStyles,
-      buttonGroupItemStyles,
+      buttonGroupWeekdayItemStyles,
+      buttonGroupDayItemStyles,
       proxyModelValue,
       dayOptions,
+      formatWeekday,
       formatDay
     };
   }
@@ -113,10 +131,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.rootStyles)
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.buttonGroupStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dayOptions, value => {
+  }, [(openBlock(), createElementBlock(Fragment, null, renderList(7, i => {
+    return createElementVNode("div", {
+      class: normalizeClass(_ctx.buttonGroupWeekdayItemStyles)
+    }, toDisplayString(_ctx.formatWeekday(_ctx.dayOptions[i - 1])), 3 /* TEXT, CLASS */);
+  }), 64 /* STABLE_FRAGMENT */)), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dayOptions, value => {
     return openBlock(), createBlock(_component_OrButton, {
       key: Number(value),
-      class: normalizeClass(_ctx.buttonGroupItemStyles),
+      class: normalizeClass(_ctx.buttonGroupDayItemStyles),
       variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
       color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
       disabled: _ctx.filter && !_ctx.filter(value),

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

@@ -1,9 +1,9 @@
-import { s as script } from '../../OrDatePicker.vue_vue_type_script_lang-bf895434.js';
-export { s as default } from '../../OrDatePicker.vue_vue_type_script_lang-bf895434.js';
+import { s as script } from '../../OrDatePicker.vue_vue_type_script_lang-53f5b925.js';
+export { s as default } from '../../OrDatePicker.vue_vue_type_script_lang-53f5b925.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, mergeProps, createVNode, createElementVNode, withModifiers, Fragment } from 'vue';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useDateFormat.js';
-import '../../OrDateTimePickerMonthSelect-ad05eff6.js';
+import '../../OrDateTimePickerMonthSelect-dea4a5ae.js';
 import '../OrDateTimePickerV3/hooks/useDefaultDate.js';
 import '../OrDateTimePickerV3/hooks/useDefaultHours.js';
 import '../OrDateTimePickerV3/hooks/useDefaultMinutes.js';

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

@@ -1,8 +1,8 @@
-export { s as OrDatePickerV3 } from '../../OrDatePicker.vue_vue_type_script_lang-bf895434.js';
+export { s as OrDatePickerV3 } from '../../OrDatePicker.vue_vue_type_script_lang-53f5b925.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useDateFormat.js';
-import '../../OrDateTimePickerMonthSelect-ad05eff6.js';
+import '../../OrDateTimePickerMonthSelect-dea4a5ae.js';
 import '../OrDateTimePickerV3/hooks/useDefaultDate.js';
 import '../OrDateTimePickerV3/hooks/useDefaultHours.js';
 import '../OrDateTimePickerV3/hooks/useDefaultMinutes.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,10 +1,10 @@
-import { s as script } from '../../OrDateTimePicker.vue_vue_type_script_lang-2fe2b8c0.js';
-export { s as default } from '../../OrDateTimePicker.vue_vue_type_script_lang-2fe2b8c0.js';
+import { s as script } from '../../OrDateTimePicker.vue_vue_type_script_lang-d78de3fd.js';
+export { s as default } from '../../OrDateTimePicker.vue_vue_type_script_lang-d78de3fd.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, mergeProps, createVNode, createElementVNode, withModifiers, Fragment } from 'vue';
 import 'vue-demi';
 import './hooks/useDateFormat.js';
 import './hooks/useTimeFormat.js';
-import '../../OrDateTimePickerMonthSelect-ad05eff6.js';
+import '../../OrDateTimePickerMonthSelect-dea4a5ae.js';
 import './hooks/useDefaultDate.js';
 import './hooks/useDefaultHours.js';
 import './hooks/useDefaultMinutes.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/index.js

@@ -1,9 +1,9 @@
-export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker.vue_vue_type_script_lang-2fe2b8c0.js';
+export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker.vue_vue_type_script_lang-d78de3fd.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useDateFormat.js';
 import './hooks/useTimeFormat.js';
-import '../../OrDateTimePickerMonthSelect-ad05eff6.js';
+import '../../OrDateTimePickerMonthSelect-dea4a5ae.js';
 import './hooks/useDefaultDate.js';
 import './hooks/useDefaultHours.js';
 import './hooks/useDefaultMinutes.js';

package/dist/bundled/v3/components/index.js

@@ -30,11 +30,11 @@ export { amber, black, blue, blueGrey, brown, cyan, deepOrange, deepPurple, gree
 export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-806d209b.js';
 export { s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-a04553af.js';
 export { ConfirmType } from './OrConfirmV3/props.js';
-export { s as OrDatePickerV3 } from '../OrDatePicker.vue_vue_type_script_lang-bf895434.js';
+export { s as OrDatePickerV3 } from '../OrDatePicker.vue_vue_type_script_lang-53f5b925.js';
 export { InputBoxSize as DatePickerSize, InputBoxSize as DateTimePickerSize, InputBoxSize, InputBoxVariant, InputBoxSize as InputSize, InputBoxSize as SearchSize, InputBoxSize as SelectSize, InputBoxSize as TextareaSize, InputBoxSize as TimePickerSize } from './OrInputBoxV3/props.js';
 export { s as OrDateTimePicker } from '../OrDateTimePicker.vue_vue_type_script_lang-5c1a5d4a.js';
 export { DEFAULT_TEXT, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './OrDateTimePicker/constants.js';
-export { s as OrDateTimePickerV3 } from '../OrDateTimePicker.vue_vue_type_script_lang-2fe2b8c0.js';
+export { s as OrDateTimePickerV3 } from '../OrDateTimePicker.vue_vue_type_script_lang-d78de3fd.js';
 export { s as OrEmptyStateV3 } from '../OrEmptyState.vue_vue_type_script_lang-2c1f09ef.js';
 export { EmptyStateSize } from './OrEmptyStateV3/props.js';
 export { s as OrError } from '../OrError.vue_vue_type_script_lang-450321b8.js';
@@ -235,7 +235,7 @@ import '../index-63e094a0.js';
 import './OrButtonV2/OrButton.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useDateFormat.js';
-import '../OrDateTimePickerMonthSelect-ad05eff6.js';
+import '../OrDateTimePickerMonthSelect-dea4a5ae.js';
 import './OrDateTimePickerV3/hooks/useDefaultDate.js';
 import './OrDateTimePickerV3/hooks/useDefaultHours.js';
 import './OrDateTimePickerV3/hooks/useDefaultMinutes.js';

package/dist/bundled/v3/index.js

@@ -27,11 +27,11 @@ export { s as OrConfirm } from './OrConfirm.vue_vue_type_script_lang-806d209b.js
 import './components/OrConfirmV3/OrConfirm.js';
 export { s as OrConfirmV3 } from './OrConfirm.vue_vue_type_script_lang-a04553af.js';
 import './components/OrDatePickerV3/OrDatePicker.js';
-export { s as OrDatePickerV3 } from './OrDatePicker.vue_vue_type_script_lang-bf895434.js';
+export { s as OrDatePickerV3 } from './OrDatePicker.vue_vue_type_script_lang-53f5b925.js';
 import './components/OrDateTimePicker/OrDateTimePicker.js';
 export { s as OrDateTimePicker } from './OrDateTimePicker.vue_vue_type_script_lang-5c1a5d4a.js';
 import './components/OrDateTimePickerV3/OrDateTimePicker.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker.vue_vue_type_script_lang-2fe2b8c0.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker.vue_vue_type_script_lang-d78de3fd.js';
 import './components/OrEmptyStateV3/OrEmptyState.js';
 export { s as OrEmptyStateV3 } from './OrEmptyState.vue_vue_type_script_lang-2c1f09ef.js';
 import './components/OrErrorTagV3/OrErrorTag.js';
@@ -268,7 +268,7 @@ import './components/OrConfirmV3/styles.js';
 import './components/OrOverlayV3/OrOverlay.js';
 import './components/OrInputV3/OrInput.js';
 import './components/OrDateTimePickerV3/hooks/useDateFormat.js';
-import './OrDateTimePickerMonthSelect-ad05eff6.js';
+import './OrDateTimePickerMonthSelect-dea4a5ae.js';
 import './components/OrDateTimePickerV3/hooks/useDefaultDate.js';
 import './components/OrDateTimePickerV3/hooks/useDefaultHours.js';
 import './components/OrDateTimePickerV3/hooks/useDefaultMinutes.js';

package/dist/esm/v2/{OrDatePicker-cbf6a43f.js → OrDatePicker-f24e50af.js}

@@ -3,7 +3,7 @@ import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
-import { _ as __vue_component__$1, a as __vue_component__$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-3b05a38c.js';
+import { _ as __vue_component__$1, a as __vue_component__$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-d49207f4.js';
 import { _ as __vue_component__$2, a as __vue_component__$4, b as __vue_component__$5 } from './OrDateTimePickerPopoverHeader-93f19c1d.js';
 import { _ as __vue_component__$6 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$7 } from './OrHint-aa221198.js';

package/dist/esm/v2/{OrDateTimePicker-892918d6.js → OrDateTimePicker-a65f6007.js}

@@ -10,7 +10,7 @@ import { _ as __vue_component__$a } from './OrInputBox-0f4e8500.js';
 import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 import { _ as __vue_component__$b } from './OrLabel-63380256.js';
 import { _ as __vue_component__$c } from './OrPopover-a70deaa6.js';
-import { _ as __vue_component__$1, a as __vue_component__$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-3b05a38c.js';
+import { _ as __vue_component__$1, a as __vue_component__$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-d49207f4.js';
 import { _ as __vue_component__$6, u as useTimeFormat } from './OrDateTimePickerTimeSelect-46dac0e1.js';
 import { _ as __vue_component__$2, a as __vue_component__$4, b as __vue_component__$5 } from './OrDateTimePickerPopoverHeader-93f19c1d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrDateTimePickerMonthSelect-3b05a38c.js → OrDateTimePickerMonthSelect-d49207f4.js}

@@ -26,7 +26,16 @@ const DateTimePickerDaySelectButtonGroup = [
 'grid', 'grid-cols-7',
 // Spacing
 'gap-xs'];
-const DateTimePickerDaySelectButtonGroupItem = [
+const DateTimePickerDaySelectButtonGroupWeekdayItem = [
+// Box
+'min-w-fit',
+// Spacing
+'px-sm', 'py-sm',
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const DateTimePickerDaySelectButtonGroupDayItem = [
 // Box
 'min-w-fit',
 // Spacing
@@ -61,7 +70,8 @@ var script$1 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-day-select', ...DateTimePickerDaySelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDaySelectButtonGroup]);
-    const buttonGroupItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupItem]);
+    const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupWeekdayItem]);
+    const buttonGroupDayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupDayItem]);
     // State
     const proxyModelValue = computed({
       get: () => {
@@ -88,6 +98,12 @@ var script$1 = defineComponent({
       })();
     });
     // Methods
+    function formatWeekday(value) {
+      return value.toLocaleString('default', {
+        weekday: 'short',
+        timeZone: 'UTC'
+      });
+    }
     function formatDay(value) {
       return value.toLocaleString('default', {
         day: 'numeric',
@@ -98,9 +114,11 @@ var script$1 = defineComponent({
       root,
       rootStyles,
       buttonGroupStyles,
-      buttonGroupItemStyles,
+      buttonGroupWeekdayItemStyles,
+      buttonGroupDayItemStyles,
       proxyModelValue,
       dayOptions,
+      formatWeekday,
       formatDay
     };
   }
@@ -119,10 +137,14 @@ var __vue_render__$1 = function () {
     class: _vm.rootStyles
   }, [_c('div', {
     class: _vm.buttonGroupStyles
-  }, _vm._l(_vm.dayOptions, function (value) {
+  }, [_vm._l(7, function (i) {
+    return _c('div', {
+      class: _vm.buttonGroupWeekdayItemStyles
+    }, [_vm._v("\n      " + _vm._s(_vm.formatWeekday(_vm.dayOptions[i - 1])) + "\n    ")]);
+  }), _vm._v(" "), _vm._l(_vm.dayOptions, function (value) {
     return _c('OrButton', {
       key: Number(value),
-      class: _vm.buttonGroupItemStyles,
+      class: _vm.buttonGroupDayItemStyles,
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -135,7 +157,7 @@ var __vue_render__$1 = function () {
         }
       }
     }, [_vm._v("\n      " + _vm._s(_vm.formatDay(value)) + "\n    ")]);
-  }), 1)]);
+  })], 2)]);
 };
 var __vue_staticRenderFns__$1 = [];
 

package/dist/esm/v2/components/index.js

@@ -21,11 +21,11 @@ export { _ as OrCollapse } from '../OrCollapse-50e3914c.js';
 export { _ 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-fa92b4fa.js';
 export { _ as OrConfirm } from '../OrConfirm-497cd260.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-a4f2c6db.js';
-export { _ as OrDatePickerV3 } from '../OrDatePicker-cbf6a43f.js';
+export { _ as OrDatePickerV3 } from '../OrDatePicker-f24e50af.js';
 export { _ as OrInputBoxV3 } from '../OrInputBox-0f4e8500.js';
 export { I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TextareaSize, I as TimePickerSize } from '../OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-c88ca716.js';
-export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-892918d6.js';
+export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-a65f6007.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-2d3fd68d.js';
 export { _ as OrError } from '../OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-a55ae01a.js';
@@ -136,7 +136,7 @@ import '../dom-7a41831b.js';
 import '@vueuse/math';
 import '../dropdown-open-e1f90e0a.js';
 import '../useValidationAttributes-d1abbe34.js';
-import '../OrDateTimePickerMonthSelect-3b05a38c.js';
+import '../OrDateTimePickerMonthSelect-d49207f4.js';
 import '../OrDateTimePickerPopoverHeader-93f19c1d.js';
 import '../OrDateTimePickerTimeSelect-46dac0e1.js';
 import '@floating-ui/dom';

package/dist/esm/v2/components/or-date-picker-v3/index.js

@@ -1,11 +1,11 @@
-export { _ as OrDatePickerV3 } from '../../OrDatePicker-cbf6a43f.js';
+export { _ as OrDatePickerV3 } from '../../OrDatePicker-f24e50af.js';
 export { I as DatePickerSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import '../../useValidationAttributes-d1abbe34.js';
-import '../../OrDateTimePickerMonthSelect-3b05a38c.js';
+import '../../OrDateTimePickerMonthSelect-d49207f4.js';
 import '../../OrButton-6b60a776.js';
 import '../../OrLoader-b0c381f9.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/esm/v2/components/or-date-time-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-892918d6.js';
+export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-a65f6007.js';
 export { I as DateTimePickerSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
@@ -21,7 +21,7 @@ import '../../OrTeleport.vue2-fb92f29f.js';
 import 'portal-vue';
 import '../../OrInputBox-0f4e8500.js';
 import '../../OrLabel-63380256.js';
-import '../../OrDateTimePickerMonthSelect-3b05a38c.js';
+import '../../OrDateTimePickerMonthSelect-d49207f4.js';
 import '../../OrButton-6b60a776.js';
 import '../../OrLoader-b0c381f9.js';
 import '../../OrDateTimePickerPopoverHeader-93f19c1d.js';

package/dist/esm/v2/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/OrDateTimePickerDaySelect.vue.d.ts

@@ -3,9 +3,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     buttonGroupStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    buttonGroupItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupWeekdayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupDayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     dayOptions: import("@vue/composition-api").ComputedRef<Date[]>;
+    formatWeekday: (value: Date) => string;
     formatDay: (value: Date) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
@@ -34,9 +36,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     buttonGroupStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    buttonGroupItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupWeekdayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupDayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     dayOptions: import("@vue/composition-api").ComputedRef<Date[]>;
+    formatWeekday: (value: Date) => string;
     formatDay: (value: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     filter: (value: Date) => boolean;

package/dist/esm/v2/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const DateTimePickerDaySelect: string[];
 export declare const DateTimePickerDaySelectButtonGroup: string[];
-export declare const DateTimePickerDaySelectButtonGroupItem: string[];
+export declare const DateTimePickerDaySelectButtonGroupWeekdayItem: string[];
+export declare const DateTimePickerDaySelectButtonGroupDayItem: string[];

package/dist/esm/v2/index.js

@@ -21,11 +21,11 @@ export { _ as OrCollapse } from './OrCollapse-50e3914c.js';
 export { _ 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-fa92b4fa.js';
 export { _ as OrConfirm } from './OrConfirm-497cd260.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-a4f2c6db.js';
-export { _ as OrDatePickerV3 } from './OrDatePicker-cbf6a43f.js';
+export { _ as OrDatePickerV3 } from './OrDatePicker-f24e50af.js';
 export { _ as OrInputBoxV3 } from './OrInputBox-0f4e8500.js';
 export { I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-c88ca716.js';
-export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-892918d6.js';
+export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-a65f6007.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-2d3fd68d.js';
 export { _ as OrError } from './OrError-efc74907.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-a55ae01a.js';
@@ -140,7 +140,7 @@ import '@lezer/highlight';
 import './px-to-rem-0b26b83e.js';
 import './dom-7a41831b.js';
 import '@vueuse/math';
-import './OrDateTimePickerMonthSelect-3b05a38c.js';
+import './OrDateTimePickerMonthSelect-d49207f4.js';
 import './OrDateTimePickerPopoverHeader-93f19c1d.js';
 import './OrDateTimePickerTimeSelect-46dac0e1.js';
 import '@floating-ui/dom';

package/dist/esm/v3/{OrDatePicker-07f95e87.js → OrDatePicker-9bf74aab.js}

@@ -3,7 +3,7 @@ import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
-import { s as script$1, a as script$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-62fba6d6.js';
+import { s as script$1, a as script$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-315f7a54.js';
 import { s as script$2, a as script$4, b as script$5 } from './OrDateTimePickerPopoverHeader-92a85080.js';
 import { s as script$6 } from './OrError-c01d0c29.js';
 import { s as script$7 } from './OrHint-06ab89d7.js';

package/dist/esm/v3/{OrDateTimePicker-deedd692.js → OrDateTimePicker-1d5941b7.js}

@@ -9,7 +9,7 @@ import { s as script$9 } from './OrIconButton-1f288e53.js';
 import { s as script$a, I as InputBoxSize } from './OrInputBox-901887a1.js';
 import { s as script$b } from './OrLabel-4da56db0.js';
 import { s as script$c } from './OrPopover-64e3977f.js';
-import { s as script$1, a as script$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-62fba6d6.js';
+import { s as script$1, a as script$3, u as useDateFormat } from './OrDateTimePickerMonthSelect-315f7a54.js';
 import { s as script$6, u as useTimeFormat } from './OrDateTimePickerTimeSelect-00697b44.js';
 import { s as script$2, a as script$4, b as script$5 } from './OrDateTimePickerPopoverHeader-92a85080.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, mergeProps, createVNode, createElementVNode, withModifiers, Fragment } from 'vue';

package/dist/esm/v3/{OrDateTimePickerMonthSelect-62fba6d6.js → OrDateTimePickerMonthSelect-315f7a54.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { s as script$2 } from './OrButton-8558588c.js';
 import { u as useDefaultYear, c as useDefaultMonth, d as useDefaultDate, e as useDefaultHours, f as useDefaultMinutes } from './OrDateTimePickerPopoverHeader-92a85080.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createBlock, withModifiers, withCtx, createTextVNode, createVNode } from 'vue';
 import { s as script$4 } from './OrIconButton-1f288e53.js';
 import { s as script$3 } from './OrIcon-62793572.js';
 import { s as script$6 } from './OrMenuItem-dbee450f.js';
@@ -26,7 +26,16 @@ const DateTimePickerDaySelectButtonGroup = [
 'grid', 'grid-cols-7',
 // Spacing
 'gap-xs'];
-const DateTimePickerDaySelectButtonGroupItem = [
+const DateTimePickerDaySelectButtonGroupWeekdayItem = [
+// Box
+'min-w-fit',
+// Spacing
+'px-sm', 'py-sm',
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+const DateTimePickerDaySelectButtonGroupDayItem = [
 // Box
 'min-w-fit',
 // Spacing
@@ -61,7 +70,8 @@ var script$1 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-day-select', ...DateTimePickerDaySelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDaySelectButtonGroup]);
-    const buttonGroupItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupItem]);
+    const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupWeekdayItem]);
+    const buttonGroupDayItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupDayItem]);
     // State
     const proxyModelValue = computed({
       get: () => {
@@ -88,6 +98,12 @@ var script$1 = defineComponent({
       })();
     });
     // Methods
+    function formatWeekday(value) {
+      return value.toLocaleString('default', {
+        weekday: 'short',
+        timeZone: 'UTC'
+      });
+    }
     function formatDay(value) {
       return value.toLocaleString('default', {
         day: 'numeric',
@@ -98,9 +114,11 @@ var script$1 = defineComponent({
       root,
       rootStyles,
       buttonGroupStyles,
-      buttonGroupItemStyles,
+      buttonGroupWeekdayItemStyles,
+      buttonGroupDayItemStyles,
       proxyModelValue,
       dayOptions,
+      formatWeekday,
       formatDay
     };
   }
@@ -113,10 +131,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.rootStyles)
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.buttonGroupStyles)
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dayOptions, value => {
+  }, [(openBlock(), createElementBlock(Fragment, null, renderList(7, i => {
+    return createElementVNode("div", {
+      class: normalizeClass(_ctx.buttonGroupWeekdayItemStyles)
+    }, toDisplayString(_ctx.formatWeekday(_ctx.dayOptions[i - 1])), 3 /* TEXT, CLASS */);
+  }), 64 /* STABLE_FRAGMENT */)), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dayOptions, value => {
     return openBlock(), createBlock(_component_OrButton, {
       key: Number(value),
-      class: normalizeClass(_ctx.buttonGroupItemStyles),
+      class: normalizeClass(_ctx.buttonGroupDayItemStyles),
       variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
       color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
       disabled: _ctx.filter && !_ctx.filter(value),

package/dist/esm/v3/components/index.js

@@ -20,10 +20,10 @@ export { s as OrCollapse } from '../OrCollapse-37a52e8f.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-9a149e6b.js';
 export { s as OrConfirm } from '../OrConfirm-1ffb7ed6.js';
 export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-ad5f8c2c.js';
-export { s as OrDatePickerV3 } from '../OrDatePicker-07f95e87.js';
+export { s as OrDatePickerV3 } from '../OrDatePicker-9bf74aab.js';
 export { 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 TextareaSize, I as TimePickerSize } from '../OrInputBox-901887a1.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-02c6de49.js';
-export { s as OrDateTimePickerV3 } from '../OrDateTimePicker-deedd692.js';
+export { s as OrDateTimePickerV3 } from '../OrDateTimePicker-1d5941b7.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-5349a1f9.js';
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-ade9192b.js';
@@ -132,7 +132,7 @@ import '../dom-7a41831b.js';
 import '@vueuse/math';
 import '../dropdown-open-e1f90e0a.js';
 import '../useValidationAttributes-d1abbe34.js';
-import '../OrDateTimePickerMonthSelect-62fba6d6.js';
+import '../OrDateTimePickerMonthSelect-315f7a54.js';
 import '../OrDateTimePickerPopoverHeader-92a85080.js';
 import '../OrDateTimePickerTimeSelect-00697b44.js';
 import '@floating-ui/dom';

package/dist/esm/v3/components/or-date-picker-v3/index.js

@@ -1,11 +1,11 @@
-export { s as OrDatePickerV3 } from '../../OrDatePicker-07f95e87.js';
+export { s as OrDatePickerV3 } from '../../OrDatePicker-9bf74aab.js';
 export { I as DatePickerSize } from '../../OrInputBox-901887a1.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import '../../useValidationAttributes-d1abbe34.js';
-import '../../OrDateTimePickerMonthSelect-62fba6d6.js';
+import '../../OrDateTimePickerMonthSelect-315f7a54.js';
 import '../../OrButton-8558588c.js';
 import '../../OrLoader-b79022da.js';
 import 'vue';

package/dist/esm/v3/components/or-date-time-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker-deedd692.js';
+export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker-1d5941b7.js';
 export { I as DateTimePickerSize } from '../../OrInputBox-901887a1.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
@@ -19,7 +19,7 @@ import '../../OrBottomSheet-e8499538.js';
 import '../../OrOverlay-7cf03aea.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../OrLabel-4da56db0.js';
-import '../../OrDateTimePickerMonthSelect-62fba6d6.js';
+import '../../OrDateTimePickerMonthSelect-315f7a54.js';
 import '../../OrButton-8558588c.js';
 import '../../OrLoader-b79022da.js';
 import '../../OrDateTimePickerPopoverHeader-92a85080.js';

package/dist/esm/v3/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/OrDateTimePickerDaySelect.vue.d.ts

@@ -3,9 +3,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     buttonGroupStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    buttonGroupItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupWeekdayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupDayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     dayOptions: import("@vue/composition-api").ComputedRef<Date[]>;
+    formatWeekday: (value: Date) => string;
     formatDay: (value: Date) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
@@ -34,9 +36,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     buttonGroupStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    buttonGroupItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupWeekdayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    buttonGroupDayItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     dayOptions: import("@vue/composition-api").ComputedRef<Date[]>;
+    formatWeekday: (value: Date) => string;
     formatDay: (value: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     filter: (value: Date) => boolean;

package/dist/esm/v3/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const DateTimePickerDaySelect: string[];
 export declare const DateTimePickerDaySelectButtonGroup: string[];
-export declare const DateTimePickerDaySelectButtonGroupItem: string[];
+export declare const DateTimePickerDaySelectButtonGroupWeekdayItem: string[];
+export declare const DateTimePickerDaySelectButtonGroupDayItem: string[];

package/dist/esm/v3/index.js

@@ -20,10 +20,10 @@ export { s as OrCollapse } from './OrCollapse-37a52e8f.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-9a149e6b.js';
 export { s as OrConfirm } from './OrConfirm-1ffb7ed6.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-ad5f8c2c.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-07f95e87.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-9bf74aab.js';
 export { 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 TextareaSize, I as TimePickerSize } from './OrInputBox-901887a1.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-02c6de49.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-deedd692.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-1d5941b7.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
@@ -136,7 +136,7 @@ import '@lezer/highlight';
 import './px-to-rem-0b26b83e.js';
 import './dom-7a41831b.js';
 import '@vueuse/math';
-import './OrDateTimePickerMonthSelect-62fba6d6.js';
+import './OrDateTimePickerMonthSelect-315f7a54.js';
 import './OrDateTimePickerPopoverHeader-92a85080.js';
 import './OrDateTimePickerTimeSelect-00697b44.js';
 import '@floating-ui/dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.0.4-beta.2521.0",
+  "version": "4.0.4-beta.2523.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.37.4-beta.2521.0",
+    "@onereach/styles": "^2.37.4-beta.2523.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/OrDateTimePickerDaySelect.vue

@@ -4,10 +4,17 @@
     :class="rootStyles"
   >
     <div :class="buttonGroupStyles">
+      <div
+        v-for="i in 7"
+        :class="buttonGroupWeekdayItemStyles"
+      >
+        {{ formatWeekday(dayOptions[i - 1]) }}
+      </div>
+
       <OrButton
         v-for="value in dayOptions"
         :key="Number(value)"
-        :class="buttonGroupItemStyles"
+        :class="buttonGroupDayItemStyles"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
         :disabled="filter && !filter(value)"
@@ -27,7 +34,7 @@ import { useDefaultHours } from '../../hooks/useDefaultHours';
 import { useDefaultMinutes } from '../../hooks/useDefaultMinutes';
 import { useDefaultMonth } from '../../hooks/useDefaultMonth';
 import { useDefaultYear } from '../../hooks/useDefaultYear';
-import { DateTimePickerDaySelect, DateTimePickerDaySelectButtonGroup, DateTimePickerDaySelectButtonGroupItem } from './styles';
+import { DateTimePickerDaySelect, DateTimePickerDaySelectButtonGroup, DateTimePickerDaySelectButtonGroupDayItem, DateTimePickerDaySelectButtonGroupWeekdayItem } from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerDaySelect',
@@ -75,8 +82,12 @@ export default defineComponent({
       ...DateTimePickerDaySelectButtonGroup,
     ]);
 
-    const buttonGroupItemStyles = computed(() => [
-      ...DateTimePickerDaySelectButtonGroupItem,
+    const buttonGroupWeekdayItemStyles = computed(() => [
+      ...DateTimePickerDaySelectButtonGroupWeekdayItem,
+    ]);
+
+    const buttonGroupDayItemStyles = computed(() => [
+      ...DateTimePickerDaySelectButtonGroupDayItem,
     ]);
 
     // State
@@ -147,6 +158,13 @@ export default defineComponent({
     });
 
     // Methods
+    function formatWeekday(value: Date): string {
+      return value.toLocaleString('default', {
+        weekday: 'short',
+        timeZone: 'UTC',
+      });
+    }
+
     function formatDay(value: Date): string {
       return value.toLocaleString('default', {
         day: 'numeric',
@@ -158,9 +176,11 @@ export default defineComponent({
       root,
       rootStyles,
       buttonGroupStyles,
-      buttonGroupItemStyles,
+      buttonGroupWeekdayItemStyles,
+      buttonGroupDayItemStyles,
       proxyModelValue,
       dayOptions,
+      formatWeekday,
       formatDay,
     };
   },

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/styles.ts

@@ -18,7 +18,23 @@ export const DateTimePickerDaySelectButtonGroup: string[] = [
   'gap-xs',
 ];
 
-export const DateTimePickerDaySelectButtonGroupItem: string[] = [
+export const DateTimePickerDaySelectButtonGroupWeekdayItem: string[] = [
+  // Box
+  'min-w-fit',
+
+  // Spacing
+  'px-sm',
+  'py-sm',
+
+  // Typography
+  'typography-caption-regular',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];
+
+export const DateTimePickerDaySelectButtonGroupDayItem: string[] = [
   // Box
   'min-w-fit',