@onereach/ui-components 5.0.0 → 5.0.1-beta.3124.0

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a3097661.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2810460a.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
 import { DatePicker, DatePickerPopover } 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/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-a3097661.js';
+import '../../OrDateTimePickerMonthSelect-2810460a.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a3097661.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2810460a.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-e57095bf.js';
 import { DateTimePickerTimeFormat } from './props.js';

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

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-a3097661.js';
+import '../../OrDateTimePickerMonthSelect-2810460a.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -142,9 +142,6 @@ var script = defineComponent({
     });
     const maxLength = computed(() => controlAttributes.maxlength);
     const disclosed = ref(false);
-    const {
-      isMobile
-    } = useResponsive();
     // Methods
     function focus() {
       var _a;
@@ -154,6 +151,10 @@ var script = defineComponent({
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
+    // Helpers
+    const {
+      isMobile
+    } = useResponsive(root);
     return {
       root,
       control,
@@ -164,14 +165,14 @@ var script = defineComponent({
       currentLength,
       maxLength,
       disclosed,
-      isMobile,
       focus,
-      blur
+      blur,
+      isMobile
     };
   }
 });
 
-var css_248z = "input[data-v-76960543]{min-width:0;background:0 0;outline:0}input[type=number][data-v-76960543]::-webkit-inner-spin-button{display:none}input[type=search][data-v-76960543]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-0c853770]{min-width:0;background:0 0;outline:0}input[type=number][data-v-0c853770]::-webkit-inner-spin-button{display:none}input[type=search][data-v-0c853770]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -431,7 +432,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-76960543";
+const __vue_scope_id__ = "data-v-0c853770";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrInputV3/OrInput.vue.d.ts

@@ -22,9 +22,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     disclosed: import("@vue/composition-api").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
     focus: () => void;
     blur: () => void;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: (StringConstructor | NumberConstructor)[];
@@ -169,9 +169,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     disclosed: import("@vue/composition-api").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
     focus: () => void;
     blur: () => void;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number;
     type: "number" | "text" | "password" | "search";

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.js

@@ -4,8 +4,8 @@ import __vue_component__$1 from '../OrButtonV3/OrButton.js';
 import __vue_component__$2 from '../OrIconV3/OrIcon.js';
 import __vue_component__$3 from '../OrMenuV3/OrMenu.js';
 import __vue_component__$4 from '../OrMenuItemV3/OrMenuItem.js';
-import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
+import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
@@ -67,10 +67,6 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
     // Refs
     const root = ref();
     const limitButton = ref();
@@ -164,9 +160,12 @@ var script = defineComponent({
     function toPage(page) {
       currentPage.value = page;
     }
-    return {
+    // Helpers
+    const {
       isDesktop,
-      isMobile,
+      isMobile
+    } = useResponsive(root);
+    return {
       root,
       limitButton,
       limitButtonRoot,
@@ -185,7 +184,9 @@ var script = defineComponent({
       buttonGroup,
       toPreviousPage,
       toNextPage,
-      toPage
+      toPage,
+      isDesktop,
+      isMobile
     };
   }
 });

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.vue.d.ts

@@ -1,8 +1,6 @@
 import { PropType } from 'vue-demi';
 import { PaginationModel } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     limitButton: 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;
@@ -30,6 +28,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toPreviousPage: () => void;
     toNextPage: () => void;
     toPage: (page: number) => void;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<PaginationModel>;
@@ -63,8 +63,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     limitButton: 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;
@@ -92,6 +90,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toPreviousPage: () => void;
     toNextPage: () => void;
     toPage: (page: number) => void;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     length: number;
     modelValue: PaginationModel;

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.js

@@ -69,10 +69,6 @@ var script = defineComponent({
   emits: ['update:state', 'open', 'close'],
   expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle'],
   setup(props, context) {
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
     // Refs
     const root = ref();
     const bottomSheet = ref();
@@ -92,6 +88,11 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isFlipped = ref(false);
     const isHidden = ref(false);
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive(root);
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -143,8 +144,6 @@ var script = defineComponent({
     });
     // #endregion
     return {
-      isDesktop,
-      isMobile,
       root,
       bottomSheet,
       bottomSheetRoot,
@@ -153,6 +152,8 @@ var script = defineComponent({
       state,
       isFlipped,
       isHidden,
+      isDesktop,
+      isMobile,
       open,
       close,
       toggle

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.vue.d.ts

@@ -1,8 +1,6 @@
 import { PropType } from 'vue-demi';
 import { PopoverOffset, PopoverPlacement, PopoverVariant } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     bottomSheet: 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;
@@ -15,6 +13,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isFlipped: import("@vue/composition-api").Ref<boolean>;
     isHidden: import("@vue/composition-api").Ref<boolean>;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;
@@ -117,8 +117,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     bottomSheet: 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;
@@ -131,6 +129,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isFlipped: import("@vue/composition-api").Ref<boolean>;
     isHidden: import("@vue/composition-api").Ref<boolean>;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;

package/dist/bundled/v2/components/OrProgressV3/OrProgress.js

@@ -53,9 +53,6 @@ var script = defineComponent({
   },
   expose: ['root'],
   setup(props) {
-    const {
-      isMobile
-    } = useResponsive();
     // Refs
     const root = ref();
     // Slots
@@ -114,6 +111,10 @@ var script = defineComponent({
       return width.value ? width.value - 2 : '100%';
     });
     const strokeDashoffset = computed(() => props.loading ? undefined : (1 - localProgress.value) * strokeDasharray.value);
+    // Helpers
+    const {
+      isMobile
+    } = useResponsive(root);
     return {
       root,
       rootStyles,

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

@@ -235,7 +235,7 @@ import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-a3097661.js';
+import '../OrDateTimePickerMonthSelect-2810460a.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../OrDateTimePickerPopoverHeader-a4f77733.js';
 import './OrDatePickerV3/styles.js';

package/dist/bundled/v2/hooks/useResponsive/useResponsive.d.ts

@@ -1,5 +1,6 @@
-declare function useResponsive(): {
-    isMobile: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
+import { Ref } from 'vue-demi';
+declare function useResponsive(element: Ref<HTMLElement | undefined>): {
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 };
 export default useResponsive;

package/dist/bundled/v2/hooks/useResponsive/useResponsive.js

@@ -1,13 +1,32 @@
 import { k as useMediaQuery } from '../../index-509d77a1.js';
-import { ref } from 'vue-demi';
+import { computed } from 'vue-demi';
 import '../../index-ec92055d.js';
 
-function useResponsive() {
-  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
-  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
+function useResponsive(element) {
+  const isDesktop = computed(() => {
+    return isForcedDesktop(element.value) || useMediaQuery('(min-width: 768px)').value;
+  });
+  const isMobile = computed(() => {
+    return !isDesktop.value;
+  });
+  function isForcedDesktop(element) {
+    var _a, _b;
+    if (!element) {
+      return false;
+    }
+    const forcedScreens = (_a = element.getAttribute('force-screen')) === null || _a === void 0 ? void 0 : _a.split(/\s+/);
+    if (forcedScreens === null || forcedScreens === void 0 ? void 0 : forcedScreens.some(forcedScreen => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
+      return true;
+    }
+    return isForcedDesktop((_b = element.parentElement) !== null && _b !== void 0 ? _b : undefined);
+  }
+  console.log({
+    isDesktop: isDesktop.value,
+    isMobile: isMobile.value
+  });
   return {
-    isMobile,
-    isDesktop
+    isDesktop,
+    isMobile
   };
 }
 

package/dist/bundled/v2/hooks/useTheme.js

@@ -1950,17 +1950,19 @@ const {
   typeStyles: typographyTokens,
 } = require$$2;
 
+const screens = {
+  'sm': '640px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1280px',
+  '2xl': '1536px',
+};
+
 var tailwind_config_preset = {
   darkMode: ['class', '[data-theme="dark"]'],
 
   theme: {
-    screens: {
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
-      '2xl': '1536px',
-    },
+    screens: {},
 
     spacing: {
       ...parseSpacingTokens(spacingTokens),
@@ -2117,6 +2119,16 @@ var tailwind_config_preset = {
   plugins: [
     // Core
     plugin(({ addVariant, addUtilities }) => {
+      const breakpoints = Object.keys(screens);
+
+      breakpoints.forEach((breakpoint) => {
+        addVariant(breakpoint, [
+          `@media (min-width: ${screens[breakpoint]})`,
+          `[force-screen~="${breakpoint}"] &`,
+          `&[force-screen~="${breakpoint}"]`,
+        ]);
+      });
+
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -2245,7 +2257,21 @@ var tailwind_config_preset = {
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
             // Desktop
-            [`@media (min-width: ${theme('screens.md')})`]: {
+            [`@media (min-width: ${screens.md})`]: {
+              fontFamily: theme(`fontFamily.${value}`),
+              fontWeight: theme(`fontWeight.${value}`),
+              fontSize: fontSizeDesktop,
+              lineHeight: optionsDesktop?.lineHeight,
+            },
+
+            '[force-screen~="md"] &': {
+              fontFamily: theme(`fontFamily.${value}`),
+              fontWeight: theme(`fontWeight.${value}`),
+              fontSize: fontSizeDesktop,
+              lineHeight: optionsDesktop?.lineHeight,
+            },
+
+            '&[force-screen~="md"]': {
               fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
               fontSize: fontSizeDesktop,
@@ -2323,7 +2349,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
                 },
@@ -2365,7 +2391,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
                 },
@@ -2407,7 +2433,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
                 },
@@ -2449,7 +2475,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   color: theme(`textColor.${token}-hover` + suffix),
                 },