@onereach/ui-components 10.4.5-beta.4373.0 → 10.5.0-beta.4375.0

package/dist/esm/v2/{OrPagination-404ee1b8.js → OrPagination-1384bc66.js}

@@ -5,8 +5,8 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import { u as useResponsive } from './useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { _ as __vue_component__$1 } from './OrButton-3a743a90.js';
-import './OrButton.vue_rollup-plugin-vue_script-e8900483.js';
+import { _ as __vue_component__$1 } from './OrButton-e4e85817.js';
+import './OrButton.vue_rollup-plugin-vue_script-199bb600.js';
 import { _ as __vue_component__$2 } from './OrIcon-03e3c802.js';
 import { _ as __vue_component__$4 } from './OrMenuItem-c49f96d5.js';
 import { _ as __vue_component__$3 } from './OrMenu-8db097c0.js';
@@ -51,14 +51,14 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: undefined,
+      type: Object,
       default: undefined
     },
     length: {
       type: Number,
       required: true
     },
-    options: {
+    pageSizeOptions: {
       type: Array,
       default: () => [50, 20, 10, 5]
     }
@@ -88,7 +88,7 @@ var script = defineComponent({
     const currentLimit = computed({
       get: () => {
         var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.options[0];
+        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.pageSizeOptions[0];
       },
       set: value => {
         proxyModelValue.value = {
@@ -212,6 +212,7 @@ var __vue_render__ = function () {
     },
     on: {
       "click": function ($event) {
+        $event.stopPropagation();
         return _vm.toPreviousPage();
       }
     }
@@ -230,6 +231,7 @@ var __vue_render__ = function () {
       },
       on: {
         "click": function ($event) {
+          $event.stopPropagation();
           typeof page === 'number' && _vm.toPage(page);
         }
       }
@@ -243,6 +245,7 @@ var __vue_render__ = function () {
     },
     on: {
       "click": function ($event) {
+        $event.stopPropagation();
         return _vm.toNextPage();
       }
     }
@@ -262,7 +265,8 @@ var __vue_render__ = function () {
     },
     on: {
       "click": function ($event) {
-        _vm.limitMenu && _vm.limitMenu.open();
+        $event.stopPropagation();
+        return _vm.limitMenu.open();
       }
     }
   }, [_vm._v("\n      " + _vm._s(_vm.currentLimit) + " "), _c('OrIcon', {
@@ -276,13 +280,14 @@ var __vue_render__ = function () {
       "trigger": _vm.limitButtonRoot,
       "placement": 'top'
     }
-  }, _vm._l(_vm.options, function (pageSize) {
+  }, _vm._l(_vm.pageSizeOptions, function (pageSize) {
     return _c('OrMenuItem', {
       key: pageSize,
       on: {
         "click": function ($event) {
+          $event.stopPropagation();
           _vm.currentLimit = pageSize;
-          _vm.limitMenu && _vm.limitMenu.close();
+          _vm.limitMenu.close();
         }
       }
     }, [_vm._v("\n        " + _vm._s(pageSize) + "\n      ")]);
@@ -297,6 +302,7 @@ var __vue_render__ = function () {
     },
     on: {
       "click": function ($event) {
+        $event.stopPropagation();
         return _vm.toNextPage();
       }
     }

package/dist/esm/v2/{OrRadio-d6e78d8b.js → OrRadio-fd6ae0b3.js}

@@ -25,9 +25,9 @@ const RadioControl = [
 // Box
 'w-md+ md:w-md', 'h-md+ md:h-md',
 // Theme
-'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark',
+'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark',
 // Theme (focus)
-'focus-visible:theme-outline-primary focus-visible:outline-2', 'dark:focus-visible:theme-outline-primary-dark',
+'focus-visible:theme-outline-2-primary', 'dark:focus-visible:theme-outline-2-primary-dark',
 // Theme (checked)
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
 const RadioControlHandle = [
@@ -35,9 +35,9 @@ const RadioControlHandle = [
 'after:w-sm after:md:w-xs', 'after:h-sm after:md:h-xs',
 // Shape (children)
 'after:rounded-full',
-// Theme (checked / children)
+// Theme (children/checked)
 'after:checked:bg-on-primary', 'dark:after:checked:bg-on-primary-dark',
-// Theme (checked + disabled / children)
+// Theme (children/checked/disabled)
 'after:disabled:checked:bg-on-disabled', 'dark:after:disabled:checked:bg-on-disabled-dark'];
 
 var script = defineComponent({

package/dist/esm/v2/{OrRadioGroup-8bb28757.js → OrRadioGroup-3e97aa2a.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
 import { _ as __vue_component__$1, F as FormGroupDirection } from './OrFormGroup-a814b820.js';
-import { _ as __vue_component__$2 } from './OrRadio-d6e78d8b.js';
+import { _ as __vue_component__$2 } from './OrRadio-fd6ae0b3.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({

package/dist/esm/v2/{OrRangeSlider-95670fdf.js → OrRangeSlider-e958c24c.js}

@@ -5,7 +5,7 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import './TimeFormat-a7f5565b.js';
-import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-fc565351.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSlider.vue_rollup-plugin-vue_script-3d19c498.js';
 import { _ as __vue_component__$1 } from './OrTooltip-7387462e.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -115,18 +115,18 @@ const RangeSliderThumb = [
 const RangeSliderThumbColors = {
   [SliderColor.Primary]: [
   // Theme
-  'theme-border-primary border-4', 'dark:theme-border-primary-dark',
+  'theme-border-4-primary', 'dark:theme-border-4-primary-dark',
   // Theme (hover)
   'hover:theme-background-primary', 'dark:hover:theme-background-primary-dark',
   // Theme (active)
-  'active:theme-background-primary', 'dark:active:theme-background-primary-dark', 'active:theme-outline-primary active:outline-10', 'dark:active:theme-outline-primary-dark'],
+  'active:theme-background-primary', 'dark:active:theme-background-primary-dark', 'active:theme-outline-10-primary', 'dark:active:theme-outline-10-primary-dark'],
   [SliderColor.Secondary]: [
   // Theme
-  'theme-border-secondary border-4', 'dark:theme-border-secondary-dark',
+  'theme-border-4-secondary', 'dark:theme-border-4-secondary-dark',
   // Theme (hover)
   'hover:theme-background-secondary', 'dark:hover:theme-background-secondary-dark',
   // Theme (active)
-  'active:theme-background-secondary', 'dark:active:theme-background-secondary-dark', 'active:theme-outline-secondary active:outline-10', 'dark:active:theme-outline-secondary-dark']
+  'active:theme-background-secondary', 'dark:active:theme-background-secondary-dark', 'active:theme-outline-10-secondary', 'dark:active:theme-outline-10-secondary-dark']
 };
 const RangeSliderBreakpointMark = [
 // Position
@@ -215,7 +215,7 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: undefined,
+      type: Object,
       default: undefined
     },
     minValue: {
@@ -232,7 +232,7 @@ var script = defineComponent({
     },
     breakpoints: {
       type: Array,
-      default: () => []
+      default: []
     },
     color: {
       type: String,
@@ -254,14 +254,19 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs & Styles
+    // Refs
     const root = ref();
-    const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
     const rail = ref();
-    const railStyles = computed(() => ['or-range-slider-rail-v3', ...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
     const offset = ref();
+    const track = ref();
+    const filler = ref();
+    const thumbFrom = ref();
+    const thumbTo = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
+    const railStyles = computed(() => ['or-range-slider-rail-v3', ...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
     const offsetStyles = computed(() => [...RangeSliderOffset, ...RangeSliderOffsetOrientations[props.orientation]]);
-    const offsetInlineStyles = computed(() => {
+    const offsetComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -275,9 +280,8 @@ var script = defineComponent({
           };
       }
     });
-    const track = ref();
     const trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
-    const trackInlineStyles = computed(() => {
+    const trackComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -291,9 +295,6 @@ var script = defineComponent({
           };
       }
     });
-    const filler = ref();
-    const thumbFrom = ref();
-    const thumbTo = ref();
     const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...RangeSliderBreakpointMark, ...RangeSliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
@@ -368,7 +369,9 @@ var script = defineComponent({
       }
     });
     const internalModelValueFrom = computed({
-      get: () => (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue);
+      },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
         const draftProxyModelValue = [internalBreakpoints.value.reduce((a, b) => {
@@ -387,7 +390,9 @@ var script = defineComponent({
       }
     });
     const internalModelValueTo = computed({
-      get: () => (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue);
+      },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
         const draftProxyModelValue = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
@@ -409,7 +414,7 @@ var script = defineComponent({
       if (!props.step) {
         return [props.minValue, ...props.breakpoints, props.maxValue];
       }
-      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(undefined).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
+      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(null).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
     });
     const tooltipPlacement = computed(() => {
       switch (props.orientation) {
@@ -542,18 +547,18 @@ var script = defineComponent({
     });
     return {
       root,
-      rootStyles,
       rail,
-      railStyles,
       offset,
-      offsetStyles,
-      offsetInlineStyles,
       track,
-      trackStyles,
-      trackInlineStyles,
       filler,
       thumbFrom,
       thumbTo,
+      rootStyles,
+      railStyles,
+      offsetStyles,
+      offsetComputedStyles,
+      trackStyles,
+      trackComputedStyles,
       thumbStyles,
       breakpointMarkStyles,
       labelStyles,
@@ -598,7 +603,7 @@ var __vue_render__ = function () {
   }, [_c('div', {
     ref: 'offset',
     class: _vm.offsetStyles,
-    style: _vm.offsetInlineStyles,
+    style: _vm.offsetComputedStyles,
     attrs: {
       "disabled": _vm.disabled
     }
@@ -630,7 +635,7 @@ var __vue_render__ = function () {
   })]), _vm._v(" "), _c('div', {
     ref: 'track',
     class: _vm.trackStyles,
-    style: _vm.trackInlineStyles,
+    style: _vm.trackComputedStyles,
     attrs: {
       "disabled": _vm.disabled
     }
@@ -692,7 +697,7 @@ var __vue_render__ = function () {
       style: _vm.getBreakpointMarkComputedStyles(breakpoint),
       attrs: {
         "disabled": _vm.disabled,
-        "force-state": _vm.highlightedBreakpoint === breakpoint ? 'hover' : undefined
+        "force-state": _vm.highlightedBreakpoint === breakpoint ? 'hover' : null
       },
       on: {
         "mouseenter": function ($event) {

package/dist/esm/v2/{OrResizeablePanel-b0cc4d2b.js → OrResizeablePanel-91f1e9c5.js}

@@ -139,7 +139,7 @@ const ResizeablePanelCollapseButtonContainer = [
 // Typography
 'leading-[0]',
 // Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline-variant border-1', 'dark:theme-border-outline-variant-dark'];
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark'];
 const ResizeablePanelCollapseButtonContainerPlacements = {
   [ResizeablePanelPlacement.Top]: [
   // Position
@@ -162,7 +162,7 @@ const ResizeablePanelToolbar = [
 // Spacing
 'px-md', 'py-md', 'gap-md',
 // Theme
-'theme-border-outline-variant border-1', 'dark:theme-border-outline-variant-dark'];
+'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark'];
 const ResizeablePanelToolbarPlacements = {
   [ResizeablePanelPlacement.Top]: [
   // Layout