@onereach/ui-components 5.3.1 → 5.4.0

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

@@ -1,29 +1,30 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-c2cdb4ed.js';
-export { D as TimePickerFormat } from '../../OrDateTimePicker-debf236f.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-7b86ab50.js';
+export { D as TimePickerFormat } from '../../OrDateTimePicker-41629d12.js';
 export { I as TimePickerSize } from '../../OrInputBox-912a6254.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import '../../useProxyModelValue-940010d2.js';
+import '@onereach/styles/tailwind-screens';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrDateTimePickerPopoverHeader-89418017.js';
+import '../../OrDateTimePickerPopoverHeader-f3e5d27d.js';
 import 'vue';
 import '../../OrButton-4a3c3e7b.js';
 import '../../OrLoader-b79022da.js';
 import '../../OrLabel-d4c46bb6.js';
-import '../../OrIconButton-6b7afbb3.js';
+import '../../OrIconButton-fbd39f8d.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-e988cab2.js';
+import '../../OrTooltip-9d606b66.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../OrPopover-4ae174d0.js';
+import '../../OrPopover-5637267a.js';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
-import '../../useResponsive-a02e95b7.js';
-import '../../OrBottomSheet-7d392a68.js';
-import '../../OrOverlay-b350eee6.js';
+import '../../useResponsive-dfa0f675.js';
+import '../../OrBottomSheet-f8d589d8.js';
+import '../../OrOverlay-63e5b9ad.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-e8494a32.js';
 import '../../OrMenuItem-54062d59.js';
-import '../../OrMenu-adbde52a.js';
+import '../../OrMenu-260be0af.js';
 import '../../OrError-c01d0c29.js';
 import '../../OrHint-06ab89d7.js';

package/dist/esm/v3/components/or-toast-v3/index.js

@@ -1,20 +1,21 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-1fd3bbfc.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-bd02559e.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../useToast-5aa9dc05.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../useElevation-a50ec347.js';
+import '@onereach/styles/tailwind-screens';
 import '@onereach/styles/tailwind.config.json';
 import '../../OrTeleport.vue3-8099178c.js';
 import 'vue';
-import '../../OrIconButton-6b7afbb3.js';
+import '../../OrIconButton-fbd39f8d.js';
 import '../../OrIcon-62793572.js';
-import '../../OrTooltip-e988cab2.js';
+import '../../OrTooltip-9d606b66.js';
 import '../../usePopoverState-b92c698b.js';
-import '../../OrPopover-4ae174d0.js';
+import '../../OrPopover-5637267a.js';
 import '@floating-ui/dom';
-import '../../useResponsive-a02e95b7.js';
-import '../../OrBottomSheet-7d392a68.js';
-import '../../OrOverlay-b350eee6.js';
+import '../../useResponsive-dfa0f675.js';
+import '../../OrBottomSheet-f8d589d8.js';
+import '../../OrOverlay-63e5b9ad.js';
 import '../../useTheme-e8494a32.js';
 import '../../OrLoader-b79022da.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/components/or-toast-v3/or-toast-container-v3/index.js

@@ -1,20 +1,21 @@
-export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-1fd3bbfc.js';
+export { a as OrToastContainerV3, t as TypesV3 } from '../../../types-bd02559e.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../../useToast-5aa9dc05.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../../useElevation-a50ec347.js';
+import '@onereach/styles/tailwind-screens';
 import '@onereach/styles/tailwind.config.json';
 import '../../../OrTeleport.vue3-8099178c.js';
 import 'vue';
-import '../../../OrIconButton-6b7afbb3.js';
+import '../../../OrIconButton-fbd39f8d.js';
 import '../../../OrIcon-62793572.js';
-import '../../../OrTooltip-e988cab2.js';
+import '../../../OrTooltip-9d606b66.js';
 import '../../../usePopoverState-b92c698b.js';
-import '../../../OrPopover-4ae174d0.js';
+import '../../../OrPopover-5637267a.js';
 import '@floating-ui/dom';
-import '../../../useResponsive-a02e95b7.js';
-import '../../../OrBottomSheet-7d392a68.js';
-import '../../../OrOverlay-b350eee6.js';
+import '../../../useResponsive-dfa0f675.js';
+import '../../../OrBottomSheet-f8d589d8.js';
+import '../../../OrOverlay-63e5b9ad.js';
 import '../../../useTheme-e8494a32.js';
 import '../../../OrLoader-b79022da.js';
 import '../../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/components/or-tooltip-v3/index.js

@@ -1,14 +1,15 @@
-export { s as OrTooltipV3 } from '../../OrTooltip-e988cab2.js';
-export { P as TooltipPlacement } from '../../OrPopover-4ae174d0.js';
+export { s as OrTooltipV3 } from '../../OrTooltip-9d606b66.js';
+export { P as TooltipPlacement } from '../../OrPopover-5637267a.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../usePopoverState-b92c698b.js';
+import '@onereach/styles/tailwind-screens';
 import '@onereach/styles/tailwind.config.json';
 import 'vue';
 import '@floating-ui/dom';
 import '../../useElevation-a50ec347.js';
-import '../../useResponsive-a02e95b7.js';
-import '../../OrBottomSheet-7d392a68.js';
-import '../../OrOverlay-b350eee6.js';
+import '../../useResponsive-dfa0f675.js';
+import '../../OrBottomSheet-f8d589d8.js';
+import '../../OrOverlay-63e5b9ad.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-e8494a32.js';

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

@@ -3,10 +3,11 @@ export { u as useElevation } from '../useElevation-a50ec347.js';
 export { u as useOverflow } from '../useOverflow-c856b7b7.js';
 export { u as usePopoverState } from '../usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from '../useProxyModelValue-940010d2.js';
-export { u as useResponsive } from '../useResponsive-a02e95b7.js';
+export { u as useResponsive } from '../useResponsive-dfa0f675.js';
 export { u as useTheme } from '../useTheme-e8494a32.js';
 export { u as useToggle } from '../useToggle-c04fc920.js';
 export { u as useValidationAttributes } from '../useValidationAttributes-d1abbe34.js';
 import 'vue-demi';
 import '@vueuse/core';
+import '@onereach/styles/tailwind-screens';
 import '@onereach/styles/tailwind.config.json';

package/dist/esm/v3/hooks/useResponsive/index.js

@@ -1,3 +1,4 @@
-export { u as useResponsive } from '../../useResponsive-a02e95b7.js';
+export { u as useResponsive } from '../../useResponsive-dfa0f675.js';
+import '@onereach/styles/tailwind-screens';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/esm/v3/hooks/useResponsive/useResponsive.d.ts

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

package/dist/esm/v3/index.js

@@ -1,50 +1,50 @@
 export { O as OR_AVATAR_SIZE, s as OrAvatar } from './OrAvatar-c1b2339e.js';
 export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-554347e6.js';
-export { B as BottomSheetVariant, s as OrBottomSheetV3 } from './OrBottomSheet-7d392a68.js';
+export { B as BottomSheetVariant, s as OrBottomSheetV3 } from './OrBottomSheet-f8d589d8.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-9118c20e.js';
 export { s as OrButtonV2 } from './OrButton-130ad8d9.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrIconButton, s as OrIconButtonV2 } from './OrIconButton-287bb86a.js';
 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-cac6a8d3.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-6f556d9a.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
-export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-599305cc.js';
-export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-9776fb8a.js';
-export { s as OrCheckboxV3 } from './OrCheckbox-4433eaa6.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-9b8548d0.js';
+export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-6c54e835.js';
+export { s as OrCheckboxV3 } from './OrCheckbox-7aeb8af1.js';
 export { s as OrChip } from './OrChip-74e27265.js';
 export { s as OrChips } from './OrChips-348b13e4.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-0aadc737.js';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-0ee0ad81.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-5d42a6b9.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-6dd0f75d.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 OrConfirm } from './OrConfirm-97ab80b9.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-bd034042.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-1548bf25.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-68150686.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-c23f1aca.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-debf236f.js';
+export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-41629d12.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';
 export { s as OrErrorV3 } from './OrError-c01d0c29.js';
-export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-cb469c25.js';
+export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-4a28f073.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-83cd7ed7.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-052ede5f.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-c4631ef0.js';
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-06ab89d7.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-f7130a5c.js';
-export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-6b7afbb3.js';
+export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-fbd39f8d.js';
 export { I as IconButtonSize, I as IconSize, a as IconVariant, s as OrIconV3 } from './OrIcon-62793572.js';
 export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3 } from './OrInlineInputBox-01fb2cb2.js';
-export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-db0dbff9.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-7fbdc006.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-a3c4c7dc.js';
-export { s as OrInlineTextareaV3 } from './OrInlineTextarea-9b114ab8.js';
+export { s as OrInlineTextareaV3 } from './OrInlineTextarea-b0d6f9f8.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-4aa8ef29.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-d28c8c10.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';
@@ -53,32 +53,32 @@ export { s as OrListOfInputs } from './OrListOfInputs-f8740785.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-d28a8ebf.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b79022da.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-54062d59.js';
-export { s as OrMenuV3 } from './OrMenu-adbde52a.js';
-export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-4ae174d0.js';
+export { s as OrMenuV3 } from './OrMenu-260be0af.js';
+export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-5637267a.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-b2060770.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal-f737b870.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-6dd278c0.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-1b28dd4a.js';
-export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-772684d4.js';
+export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-7f25412d.js';
 export { s as OrNumberInput } from './OrNumberInput-e9dcdcbd.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-440ddf3e.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
-export { s as OrOverlayV3 } from './OrOverlay-b350eee6.js';
-export { s as OrPaginationV3 } from './OrPagination-44bc1131.js';
-export { s as OrPassword } from './OrPassword-af65bd40.js';
+export { s as OrOverlayV3 } from './OrOverlay-63e5b9ad.js';
+export { s as OrPaginationV3 } from './OrPagination-8c428114.js';
+export { s as OrPassword } from './OrPassword-ed2fc171.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-aa2ea84b.js';
-export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-d28ce3f7.js';
+export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-b405214e.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from './OrRadioGroup-8124dd62.js';
-export { s as OrRadioV3 } from './OrRadio-561b6900.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-d8044e7c.js';
+export { s as OrRadioV3 } from './OrRadio-dd484558.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
-export { s as OrSearchV3 } from './OrSearch-98342176.js';
-export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-851db474.js';
+export { s as OrSearchV3 } from './OrSearch-895067e0.js';
+export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-3df84379.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-ba0f0da3.js';
+export { s as OrSelectV3 } from './OrSelect-1e03eb9d.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
-export { s as OrSidebarV3 } from './OrSidebar-8f9b7502.js';
-export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-79a7c625.js';
+export { s as OrSidebarV3 } from './OrSidebar-47154aa9.js';
+export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-890ed7af.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
 export { s as OrSkeletonRect } from './OrSkeletonRect-c694574e.js';
 export { s as OrSkeletonText } from './OrSkeletonText-9a800de4.js';
@@ -87,33 +87,33 @@ export { s as OrSkeletonCircleV3 } from './OrSkeletonCircle-1eae069b.js';
 export { s as OrSkeletonRectV3 } from './OrSkeletonRect-ba5df861.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-3c3207d0.js';
 export { s as OrSlider } from './OrSlider-b7bd588e.js';
-export { s as OrSortingV3 } from './OrSorting-536caed2.js';
+export { s as OrSortingV3 } from './OrSorting-0cf35eea.js';
 export { s as OrStepper } from './OrStepper-4943002c.js';
 export { s as OrSwitch } from './OrSwitch-fb864132.js';
-export { s as OrSwitchV3 } from './OrSwitch-58fdc4bf.js';
+export { s as OrSwitchV3 } from './OrSwitch-ed97acd5.js';
 export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
 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-a8c41238.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-c053d3d6.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-84bcd9c7.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-05c5e0fd.js';
-export { s as OrTagsV3 } from './OrTags-392ee3f9.js';
+export { s as OrTagInputV3 } from './OrTagInput-8b97bbf0.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-31fd6ae4.js';
+export { s as OrTagsV3 } from './OrTags-19d496a9.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-e86881b0.js';
-export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-20157075.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-c2cdb4ed.js';
+export { s as OrTextareaV3 } from './OrTextarea-4852104f.js';
+export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-262d3f2a.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-7b86ab50.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-1fd3bbfc.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-bd02559e.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-5aa9dc05.js';
 export { s as OrTooltip } from './OrTooltip-7ac03028.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
-export { s as OrTooltipV3 } from './OrTooltip-e988cab2.js';
+export { s as OrTooltipV3 } from './OrTooltip-9d606b66.js';
 export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-a0e57f4e.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
@@ -121,7 +121,7 @@ export { u as useElevation } from './useElevation-a50ec347.js';
 export { u as useOverflow } from './useOverflow-c856b7b7.js';
 export { u as usePopoverState } from './usePopoverState-b92c698b.js';
 export { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
-export { u as useResponsive } from './useResponsive-a02e95b7.js';
+export { u as useResponsive } from './useResponsive-dfa0f675.js';
 export { u as useTheme } from './useTheme-e8494a32.js';
 export { u as useToggle } from './useToggle-c04fc920.js';
 export { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
@@ -135,6 +135,7 @@ import 'vue-demi';
 import 'vue';
 import './style-inject.es-4c6f2515.js';
 import '@vueuse/core';
+import '@onereach/styles/tailwind-screens';
 import '@onereach/styles/tailwind.config.json';
 import '@codemirror/state';
 import '@codemirror/view';
@@ -148,7 +149,7 @@ import '@codemirror/lang-markdown';
 import '@codemirror/language';
 import '@lezer/highlight';
 import '@vueuse/math';
-import './OrDateTimePickerPopoverHeader-89418017.js';
+import './OrDateTimePickerPopoverHeader-f3e5d27d.js';
 import 'lodash/padStart';
 import '@floating-ui/dom';
 import 'lodash/cloneDeep';

package/dist/esm/v3/{types-1fd3bbfc.js → types-bd02559e.js}

@@ -1,10 +1,11 @@
 import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
 import { u as useElevation } from './useElevation-a50ec347.js';
+import '@onereach/styles/tailwind-screens';
 import '@onereach/styles/tailwind.config.json';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-5aa9dc05.js';
-import { s as script$2 } from './OrIconButton-6b7afbb3.js';
+import { s as script$2 } from './OrIconButton-fbd39f8d.js';
 import { s as script$3 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/useResponsive-dfa0f675.js

@@ -0,0 +1,48 @@
+import screens from '@onereach/styles/tailwind-screens';
+import { useMediaQuery } from '@vueuse/core';
+import { getCurrentInstance, ref, watch, onMounted, isVue3, computed } from 'vue-demi';
+
+function useResponsive(element) {
+  const currentInstance = getCurrentInstance();
+  const currentRootElement = ref();
+  if (element) {
+    watch(element, value => {
+      currentRootElement.value = value;
+    });
+  } else {
+    onMounted(() => {
+      if (currentInstance) {
+        const element = currentInstance.vnode[isVue3 ? 'el' : 'elm'];
+        if (element instanceof Element) {
+          currentRootElement.value = element;
+        }
+      }
+    });
+  }
+  // State
+  const isDesktop = computed(() => {
+    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
+  });
+  const isMobile = computed(() => {
+    return !isDesktop.value;
+  });
+  const desktopQuery = useMediaQuery(`(min-width: ${screens.md})`);
+  // Helpers
+  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);
+  }
+  return {
+    isDesktop,
+    isMobile
+  };
+}
+
+export { useResponsive as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.3.1",
+  "version": "5.4.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": "0.3.1",
-    "@onereach/styles": "^3.1.1",
+    "@onereach/styles": "^3.2.0",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
@@ -157,5 +157,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "d470f8b4c4169258c301f44e44ec5abff0619895"
+  "gitHead": "a168a9cba9af592f41064e7e88e92851d4c92d7f"
 }

package/src/components/or-input-v3/OrInput.vue

@@ -263,8 +263,6 @@ export default defineComponent({
 
     const disclosed = ref(false);
 
-    const { isMobile } = useResponsive();
-
     // Methods
     function focus(): void {
       control.value?.focus();
@@ -274,6 +272,9 @@ export default defineComponent({
       control.value?.blur();
     }
 
+    // Helpers
+    const { isMobile } = useResponsive();
+
     return {
       root,
       control,
@@ -284,9 +285,9 @@ export default defineComponent({
       currentLength,
       maxLength,
       disclosed,
-      isMobile,
       focus,
       blur,
+      isMobile,
     };
   },
 });

package/src/components/or-pagination-v3/OrPagination.vue

@@ -138,8 +138,6 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    const { isDesktop, isMobile } = useResponsive();
-
     // Refs
     const root = ref<HTMLElement>();
 
@@ -264,10 +262,10 @@ export default defineComponent({
       currentPage.value = page;
     }
 
-    return {
-      isDesktop,
-      isMobile,
+    // Helpers
+    const { isDesktop, isMobile } = useResponsive();
 
+    return {
       root,
       limitButton,
       limitButtonRoot,
@@ -287,6 +285,8 @@ export default defineComponent({
       toPreviousPage,
       toNextPage,
       toPage,
+      isDesktop,
+      isMobile,
     };
   },
 });

package/src/components/or-popover-v3/OrPopover.vue

@@ -2,6 +2,7 @@
   <OrTeleport>
     <div
       v-show="state === 'open'"
+      ref="containerRoot"
       :class="['contents']"
     >
       <template v-if="isDesktop && variant === 'auto' || variant === 'popover'">
@@ -122,10 +123,9 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    const { isDesktop, isMobile } = useResponsive();
-
     // Refs
     const root = ref<HTMLElement>();
+    const containerRoot = ref<HTMLElement>();
 
     const bottomSheet = ref<InstanceType<typeof OrBottomSheet>>();
     const bottomSheetRoot = computed(() => bottomSheet.value?.root);
@@ -148,6 +148,9 @@ export default defineComponent({
     const isFlipped = ref<boolean>(false);
     const isHidden = ref<boolean>(false);
 
+    // Helpers
+    const { isDesktop, isMobile } = useResponsive(containerRoot);
+
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -201,9 +204,8 @@ export default defineComponent({
     // #endregion
 
     return {
-      isDesktop,
-      isMobile,
       root,
+      containerRoot,
       bottomSheet,
       bottomSheetRoot,
       rootStyles,
@@ -211,6 +213,8 @@ export default defineComponent({
       state,
       isFlipped,
       isHidden,
+      isDesktop,
+      isMobile,
       open,
       close,
       toggle,

package/src/components/or-progress-v3/OrProgress.vue

@@ -150,8 +150,6 @@ export default defineComponent({
   ],
 
   setup(props) {
-    const { isMobile } = useResponsive();
-
     // Refs
     const root = ref<HTMLElement>();
 
@@ -248,6 +246,9 @@ export default defineComponent({
       (1 - localProgress.value) * strokeDasharray.value,
     );
 
+    // Helpers
+    const { isMobile } = useResponsive();
+
     return {
       root,
       rootStyles,

package/src/hooks/useResponsive/useResponsive.ts

@@ -1,13 +1,56 @@
+import screens from '@onereach/styles/tailwind-screens';
 import { useMediaQuery } from '@vueuse/core';
-import { ref } from 'vue-demi';
+import { Ref, computed, getCurrentInstance, isVue3, onMounted, ref, watch } from 'vue-demi';
 
-function useResponsive() {
-  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
-  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
+function useResponsive(element?: Ref<Element | undefined>) {
+  const currentInstance = getCurrentInstance();
+  const currentRootElement = ref<Element>();
+
+  if (element) {
+    watch(element, (value) => {
+      currentRootElement.value = value;
+    });
+  } else {
+    onMounted(() => {
+      if (currentInstance) {
+        const element = (currentInstance.vnode as any)[isVue3 ? 'el' : 'elm'] as unknown;
+
+        if (element instanceof Element) {
+          currentRootElement.value = element as Element;
+        }
+      }
+    });
+  }
+
+  // State
+  const isDesktop = computed(() => {
+    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
+  });
+
+  const isMobile = computed(() => {
+    return !isDesktop.value;
+  });
+
+  const desktopQuery = useMediaQuery(`(min-width: ${screens.md})`);
+
+  // Helpers
+  function isForcedDesktop(element?: Element): boolean {
+    if (!element) {
+      return false;
+    }
+
+    const forcedScreens = element.getAttribute('force-screen')?.split(/\s+/);
+
+    if (forcedScreens?.some((forcedScreen) => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
+      return true;
+    }
+
+    return isForcedDesktop(element.parentElement ?? undefined);
+  }
 
   return {
-    isMobile,
     isDesktop,
+    isMobile,
   };
 }
 

package/src/shims.d.ts

@@ -1,3 +1,8 @@
+declare module '@onereach/styles/tailwind-screens' {
+  const content: Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', string>;
+  export default content;
+}
+
 declare module '@onereach/styles/tailwind.config' {
   import { Config } from 'tailwindcss';