@onereach/ui-components 4.16.2-beta.3085.0 → 4.16.2-beta.3086.0

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

@@ -4,17 +4,12 @@ import 'vue-demi';
 import './styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '../../index-509d77a1.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/props.js';
 import '../OrBottomSheetV3/styles.js';
-import '../OrBottomSheetV3/hooks/useBottomSheetSwipeState.js';
-import '../../hooks/useTheme.js';
-import '../../_commonjsHelpers-48a9cab9.js';
-import 'node:tty';
-import 'node:util';
 import '../OrOverlayV3/OrOverlay.js';
 import '../OrOverlayV3/styles.js';
 import '../OrTeleportV3/OrTeleport.js';

package/dist/bundled/v2/components/OrTreeV3/OrTree.js

@@ -7,7 +7,7 @@ import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
-import '../../index-509d77a1.js';
+import '../../index-760079e7.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../OrIconV3/props.js';

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

@@ -5,7 +5,7 @@ import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
-import '../../index-509d77a1.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';

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

@@ -185,13 +185,9 @@ import '../utils/functions/hash.js';
 import '../utils/constants/color.js';
 import './OrAvatarV3/styles.js';
 import './OrIconV3/styles.js';
-import '../index-509d77a1.js';
+import '../index-760079e7.js';
 import '../index-ec92055d.js';
 import './OrBottomSheetV3/styles.js';
-import './OrBottomSheetV3/hooks/useBottomSheetSwipeState.js';
-import '../hooks/useTheme.js';
-import 'node:tty';
-import 'node:util';
 import '../hooks/usePopoverState.js';
 import './OrOverlayV3/styles.js';
 import '../hooks/useElevation.js';
@@ -229,22 +225,25 @@ import '../index-40a6d6e0.js';
 import './OrCode/lang.js';
 import './OrCode/theme.js';
 import './OrCodeV3/styles.js';
+import '../hooks/useTheme.js';
+import 'node:tty';
+import 'node:util';
 import './OrModalV3/styles.js';
 import './OrColorPicker/utils/defultPalette.js';
 import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-8792b53f.js';
+import '../OrDateTimePickerMonthSelect-af6410d9.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerPopoverHeader-03768809.js';
+import '../OrDateTimePickerPopoverHeader-52a99e6a.js';
 import './OrDatePickerV3/styles.js';
 import '../directives/dropdown-close.js';
 import '../directives/dropdown-open.js';
 import '../_baseProperty-a52739e9.js';
 import '../toInteger-db8a475d.js';
 import '../toFinite-021b0c50.js';
-import '../OrDateTimePickerTimeSelect-4d42b488.js';
+import '../OrDateTimePickerTimeSelect-8851268e.js';
 import './OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './OrDateTimePickerV3/styles.js';
 import './OrEmptyStateV3/styles.js';

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

@@ -10,7 +10,7 @@ export { useValidationAttributes } from './useValidationAttributes.js';
 export { default as useResponsive } from './useResponsive/useResponsive.js';
 import 'vue-demi';
 import '../utils/isVisible.js';
-import '../index-509d77a1.js';
+import '../index-760079e7.js';
 import '../index-ec92055d.js';
 import '../_commonjsHelpers-48a9cab9.js';
 import 'node:tty';

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

@@ -1,4 +1,4 @@
-import { j as useMutationObserver, f as useResizeObserver } from '../index-509d77a1.js';
+import { k as useMutationObserver, f as useResizeObserver } from '../index-760079e7.js';
 import { isRef, ref, watch } from 'vue-demi';
 import '../index-ec92055d.js';
 

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

@@ -1,4 +1,4 @@
 export { default as useResponsive } from './useResponsive.js';
-import '../../index-509d77a1.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import 'vue-demi';

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 { l as useMediaQuery } from '../../index-760079e7.js';
+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),
                 },

package/dist/bundled/v2/{index-509d77a1.js → index-760079e7.js}

@@ -1,5 +1,5 @@
 import { i as isClient, b as computedWithControl, d as resolveUnref, e as toRefs, t as tryOnScopeDispose, f as tryOnMounted, n as noop, g as resolveRef, h as isString, j as isIOS, k as identity, l as isFunction, m as isDef } from './index-ec92055d.js';
-import { ref, computed, watch, reactive, unref, getCurrentInstance, isVue2, watchEffect, readonly, getCurrentScope } from 'vue-demi';
+import { ref, computed, watch, reactive, unref, readonly, getCurrentInstance, isVue2, watchEffect, getCurrentScope } from 'vue-demi';
 
 function unrefElement(elRef) {
   var _a;
@@ -794,4 +794,4 @@ function useVModel(props, key, emit, options = {}) {
   }
 }
 
-export { SwipeDirection as S, useMagicKeys as a, useActiveElement as b, useVModel as c, useElementBounding as d, useDraggable as e, useResizeObserver as f, useElementSize as g, unrefElement as h, useScrollLock as i, useMutationObserver as j, useMediaQuery as k, useEventBus as l, usePointerSwipe as m, onClickOutside as o, useElementHover as u };
+export { SwipeDirection as S, useMagicKeys as a, useActiveElement as b, useVModel as c, useElementBounding as d, useDraggable as e, useResizeObserver as f, usePointerSwipe as g, useElementSize as h, unrefElement as i, useScrollLock as j, useMutationObserver as k, useMediaQuery as l, useEventBus as m, onClickOutside as o, useElementHover as u };