@onereach/ui-components 8.8.3 → 8.8.4-beta.3738.0

package/src/components/or-input-box-v3/styles.ts

@@ -96,8 +96,8 @@ export const InputBoxSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[46px] children:md:min-h-[34px]',
 
     // Spacing
-    'first-child:ml-md first-child:md:ml-sm+',
-    'last-child:mr-md last-child:md:mr-sm+',
+    'first:children:ml-md first:children:md:ml-sm+',
+    'last:children:mr-md last:children:md:mr-sm+',
 
     'gap-sm+ md:gap-sm',
 
@@ -110,8 +110,8 @@ export const InputBoxSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[30px]',
 
     // Spacing
-    'first-child:ml-md first-child:md:ml-sm+',
-    'last-child:mr-md last-child:md:mr-sm+',
+    'first:children:ml-md first:children:md:ml-sm+',
+    'last:children:mr-md last:children:md:mr-sm+',
 
     'gap-[6px]',
 

package/src/components/or-notification-v3/OrNotification.vue

@@ -28,7 +28,7 @@ import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { NotificationVariant } from './props';
-import { NotificationIcon, NotificationIconVariants, NotificationRoot, NotificationRootVariants } from './styles';
+import { Notification, NotificationIcon, NotificationIconVariants, NotificationVariants } from './styles';
 
 export default defineComponent({
   name: 'OrNotification',
@@ -61,8 +61,8 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-notification-v3',
-      ...NotificationRoot,
-      ...NotificationRootVariants[props.variant],
+      ...Notification,
+      ...NotificationVariants[props.variant],
     ]);
 
     const iconStyles = computed(() => [

package/src/components/or-notification-v3/styles.ts

@@ -1,6 +1,6 @@
 import { NotificationVariant } from './props';
 
-export const NotificationRoot: string[] = [
+export const Notification: string[] = [
   // Layout
   'layout-row !items-start',
 
@@ -16,27 +16,27 @@ export const NotificationRoot: string[] = [
   // Typography
   'typography-body-2-regular',
 
-  // Typography (links)
-  'links:typography-body-2-bold',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
+  // Typography (children)
+  '[&_:any-link]:typography-body-2-bold',
 
   // Elevation
   'shadow-contextual',
   'dark:shadow-contextual-dark',
+
+  // Theme
+  'theme-foreground-default',
+  'dark:theme-foreground-default-dark',
 ];
 
-export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
+export const NotificationVariants: Record<NotificationVariant, string[]> = {
   'success': [
     // Theme
     'theme-background-success-container',
     'dark:theme-background-success-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-success',
-    'dark:links:theme-foreground-success-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-success',
+    'dark:[&_:any-link]:theme-foreground-success-dark',
   ],
 
   'warning': [
@@ -44,9 +44,9 @@ export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
     'theme-background-warning-container',
     'dark:theme-background-warning-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-warning',
-    'dark:links:theme-foreground-warning-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-warning',
+    'dark:[&_:any-link]:theme-foreground-warning-dark',
   ],
 
   'error': [
@@ -54,9 +54,9 @@ export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
     'theme-background-error-container',
     'dark:theme-background-error-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-error',
-    'dark:links:theme-foreground-error-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-error',
+    'dark:[&_:any-link]:theme-foreground-error-dark',
   ],
 
   'info': [
@@ -64,9 +64,9 @@ export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
     'theme-background-primary-container',
     'dark:theme-background-primary-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-primary',
-    'dark:links:theme-foreground-primary-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-primary',
+    'dark:[&_:any-link]:theme-foreground-primary-dark',
   ],
 };
 

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -17,7 +17,7 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="isHovering || isDragging"
+        :is-open="(!isDragging && isHovering) || (isDragging && selectedControl === 'from')"
         :content="String(proxyModelValue[0])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
         :offset="8"
@@ -38,7 +38,7 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="isHovering || isDragging"
+        :is-open="(!isDragging && isHovering) || (isDragging && selectedControl === 'to')"
         :content="String(proxyModelValue[1])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
         :offset="8"
@@ -68,7 +68,7 @@
 
 <script lang="ts">
 import { Position, clamp, useDraggable, useElementBounding, useElementHover } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { RangeSliderColor, RangeSliderOrientation } from './props';
@@ -105,6 +105,11 @@ export default defineComponent({
       default: 1,
     },
 
+    breakpoints: {
+      type: Array as PropType<number[]>,
+      default: () => [],
+    },
+
     color: {
       type: String as PropType<`${RangeSliderColor}`>,
       default: RangeSliderColor.Primary,
@@ -191,8 +196,13 @@ export default defineComponent({
       },
 
       set: (value) => {
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+
         proxyModelValue.value = [
-          Math.round(value * (props.maxValue - props.minValue) + props.minValue),
+          internalBreakpoints.value.reduce((a, b) => {
+            return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+          }),
+
           Math.round(internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue),
         ];
       },
@@ -204,13 +214,30 @@ export default defineComponent({
       },
 
       set: (value) => {
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+
         proxyModelValue.value = [
           Math.round(internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue),
-          Math.round(value * (props.maxValue - props.minValue) + props.minValue),
+
+          internalBreakpoints.value.reduce((a, b) => {
+            return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+          }),
         ];
       },
     });
 
+    const internalBreakpoints = computed(() => {
+      if (!props.step) {
+        return [props.minValue, ...props.breakpoints, props.maxValue];
+      }
+
+      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 railBoundingBox = useElementBounding(rail);
 
     const selectedControl = ref<'from' | 'to'>();
@@ -260,6 +287,19 @@ export default defineComponent({
       onEnd: onDrag,
     });
 
+    // Constraints
+    watch(toRef(props, 'minValue'), (value) => {
+      if (value >= props.maxValue) {
+        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+      }
+    }, { immediate: true });
+
+    watch(toRef(props, 'maxValue'), (value) => {
+      if (value <= props.minValue) {
+        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+      }
+    }, { immediate: true });
+
     return {
       root,
       rail,
@@ -276,8 +316,6 @@ export default defineComponent({
       labelMarkStyles,
 
       proxyModelValue,
-      internalModelValueFrom,
-      internalModelValueTo,
       selectedControl,
 
       isHovering,

package/src/components/or-range-slider-v3/styles.ts

@@ -68,12 +68,12 @@ export const RangeSliderOffsetOrientations: Record<RangeSliderOrientation, strin
 };
 
 export const RangeSliderTrack: string[] = [
+  // Shape
+  'rounded-full',
+
   // Box
   'w-full',
   'h-full',
-
-  // Shape
-  'rounded-full',
 ];
 
 export const RangeSliderTrackColors: Record<RangeSliderColor, string[]> = {
@@ -94,6 +94,9 @@ export const RangeSliderThumb: string[] = [
   // Layout
   'shrink-0',
 
+  // Shape
+  'rounded-full',
+
   // Box
   'w-[20px]',
   'h-[20px]',
@@ -101,11 +104,9 @@ export const RangeSliderThumb: string[] = [
   '-mx-[10px]',
   '-my-[10px]',
 
-  // Shape
-  'rounded-full',
-
   // Theme
-  'bg-white dark:bg-black',
+  'theme-background-base',
+  'dark:theme-background-base-dark',
 ];
 
 export const RangeSliderThumbColors: Record<RangeSliderColor, string[]> = {
@@ -114,16 +115,16 @@ export const RangeSliderThumbColors: Record<RangeSliderColor, string[]> = {
     'theme-border-4-primary',
     'dark:theme-border-4-primary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-primary',
-    'dark:hover:enabled:theme-background-primary-dark',
+    // Theme (hover)
+    'hover:theme-background-primary',
+    'dark:hover:theme-background-primary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-primary',
-    'dark:active:enabled:theme-background-primary-dark',
+    // Theme (active)
+    'active:theme-background-primary',
+    'dark:active:theme-background-primary-dark',
 
-    'active:enabled:theme-outline-10-primary',
-    'dark:active:enabled:theme-outline-10-primary-dark',
+    'active:theme-outline-10-primary',
+    'dark:active:theme-outline-10-primary-dark',
   ],
 
   [RangeSliderColor.Secondary]: [
@@ -131,16 +132,16 @@ export const RangeSliderThumbColors: Record<RangeSliderColor, string[]> = {
     'theme-border-4-secondary',
     'dark:theme-border-4-secondary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-secondary',
-    'dark:hover:enabled:theme-background-secondary-dark',
+    // Theme (hover)
+    'hover:theme-background-secondary',
+    'dark:hover:theme-background-secondary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-secondary',
-    'dark:active:enabled:theme-background-secondary-dark',
+    // Theme (active)
+    'active:theme-background-secondary',
+    'dark:active:theme-background-secondary-dark',
 
-    'active:enabled:theme-outline-10-secondary',
-    'dark:active:enabled:theme-outline-10-secondary-dark',
+    'active:theme-outline-10-secondary',
+    'dark:active:theme-outline-10-secondary-dark',
   ],
 };
 

package/src/components/or-slider-v3/OrSlider.vue

@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { Position, clamp, useDraggable, useElementBounding, useElementHover } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { SliderColor, SliderOrientation } from './props';
@@ -84,6 +84,11 @@ export default defineComponent({
       default: 1,
     },
 
+    breakpoints: {
+      type: Array as PropType<number[]>,
+      default: () => [],
+    },
+
     color: {
       type: String as PropType<`${SliderColor}`>,
       default: SliderColor.Primary,
@@ -160,10 +165,26 @@ export default defineComponent({
       },
 
       set: (value) => {
-        proxyModelValue.value = Math.round(value * (props.maxValue - props.minValue) + props.minValue);
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+
+        proxyModelValue.value = internalBreakpoints.value.reduce((a, b) => {
+          return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+        });
       },
     });
 
+    const internalBreakpoints = computed(() => {
+      if (!props.step) {
+        return [props.minValue, ...props.breakpoints, props.maxValue];
+      }
+
+      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 railBoundingBox = useElementBounding(rail);
 
     // Handlers
@@ -189,6 +210,19 @@ export default defineComponent({
       onEnd: onDrag,
     });
 
+    // Constraints
+    watch(toRef(props, 'minValue'), (value) => {
+      if (value >= props.maxValue) {
+        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+      }
+    }, { immediate: true });
+
+    watch(toRef(props, 'maxValue'), (value) => {
+      if (value <= props.minValue) {
+        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+      }
+    }, { immediate: true });
+
     return {
       root,
       rail,
@@ -202,7 +236,6 @@ export default defineComponent({
       labelMarkStyles,
 
       proxyModelValue,
-      internalModelValue,
 
       isHovering,
       isDragging,

package/src/components/or-slider-v3/styles.ts

@@ -61,12 +61,12 @@ export const SliderRailOrientations: Record<SliderOrientation, string[]> = {
 };
 
 export const SliderTrack: string[] = [
+  // Shape
+  'rounded-full',
+
   // Box
   'w-full',
   'h-full',
-
-  // Shape
-  'rounded-full',
 ];
 
 export const SliderTrackColors: Record<SliderColor, string[]> = {
@@ -87,6 +87,9 @@ export const SliderThumb: string[] = [
   // Layout
   'shrink-0',
 
+  // Shape
+  'rounded-full',
+
   // Box
   'w-[20px]',
   'h-[20px]',
@@ -94,11 +97,9 @@ export const SliderThumb: string[] = [
   '-mx-[10px]',
   '-my-[10px]',
 
-  // Shape
-  'rounded-full',
-
   // Theme
-  'bg-white dark:bg-black',
+  'theme-background-base',
+  'dark:theme-background-base-dark',
 ];
 
 export const SliderThumbColors: Record<SliderColor, string[]> = {
@@ -107,16 +108,16 @@ export const SliderThumbColors: Record<SliderColor, string[]> = {
     'theme-border-4-primary',
     'dark:theme-border-4-primary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-primary',
-    'dark:hover:enabled:theme-background-primary-dark',
+    // Theme (hover)
+    'hover:theme-background-primary',
+    'dark:hover:theme-background-primary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-primary',
-    'dark:active:enabled:theme-background-primary-dark',
+    // Theme (active)
+    'active:theme-background-primary',
+    'dark:active:theme-background-primary-dark',
 
-    'active:enabled:theme-outline-10-primary',
-    'dark:active:enabled:theme-outline-10-primary-dark',
+    'active:theme-outline-10-primary',
+    'dark:active:theme-outline-10-primary-dark',
   ],
 
   [SliderColor.Secondary]: [
@@ -124,16 +125,16 @@ export const SliderThumbColors: Record<SliderColor, string[]> = {
     'theme-border-4-secondary',
     'dark:theme-border-4-secondary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-secondary',
-    'dark:hover:enabled:theme-background-secondary-dark',
+    // Theme (hover)
+    'hover:theme-background-secondary',
+    'dark:hover:theme-background-secondary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-secondary',
-    'dark:active:enabled:theme-background-secondary-dark',
+    // Theme (active)
+    'active:theme-background-secondary',
+    'dark:active:theme-background-secondary-dark',
 
-    'active:enabled:theme-outline-10-secondary',
-    'dark:active:enabled:theme-outline-10-secondary-dark',
+    'active:theme-outline-10-secondary',
+    'dark:active:theme-outline-10-secondary-dark',
   ],
 };
 

package/src/components/or-tab-v3/styles.ts

@@ -21,6 +21,19 @@ export const Tab: string[] = [
   'theme-border-2-transparent',
   'dark:theme-border-2-transparent-dark',
 
+  // Theme (hover)
+  'hover:md:theme-foreground-default',
+  'dark:hover:md:theme-foreground-default-dark',
+
+  // Theme (active)
+  'active:theme-foreground-default',
+  'dark:active:theme-foreground-default-dark',
+
+  'active:theme-border-underline',
+
+  'active:theme-border-2-current',
+  'dark:active:theme-border-2-current-dark',
+
   // Theme (selected)
   'selected:theme-foreground-default',
   'dark:selected:theme-foreground-default-dark',
@@ -34,29 +47,16 @@ export const Tab: string[] = [
   'invalid:theme-foreground-error',
   'dark:invalid:theme-foreground-error-dark',
 
-  // Theme (hover)
-  'hover:md:theme-foreground-default',
-  'dark:hover:md:theme-foreground-default-dark',
-
-  // Theme (hover, invalid)
+  // Theme (invalid/hover)
   'hover:invalid:md:theme-foreground-error-hover',
   'dark:hover:invalid:md:theme-foreground-error-hover-dark',
 
-  // Theme (active)
-  'active:theme-foreground-default',
-  'dark:active:theme-foreground-default-dark',
-
-  'active:theme-border-underline',
-
-  'active:enabled:theme-border-2-current',
-  'dark:active:enabled:theme-border-2-current-dark',
-
-  // Theme (active, invalid)
+  // Theme (invalid/active)
   'active:invalid:theme-foreground-error',
   'dark:active:invalid:theme-foreground-error-dark',
 
   'active:invalid:theme-border-underline',
 
-  'active:enabled:invalid:theme-border-2-current',
-  'dark:active:enabled:invalid:theme-border-2-current-dark',
+  'active:invalid:theme-border-2-current',
+  'dark:active:invalid:theme-border-2-current-dark',
 ];

package/src/components/or-toast-v3/OrToast.vue

@@ -61,7 +61,7 @@ import successPng from '../../assets/success.png';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { ToastType } from './props';
-import { messageStyleVariant, ToastRoot } from './styles';
+import { messageStyleVariant, Toast } from './styles';
 import { ToastLink } from './types';
 
 export default defineComponent({
@@ -108,7 +108,7 @@ export default defineComponent({
 
     // Styles
     const rootStyles = computed(() => [
-      ...ToastRoot,
+      ...Toast,
     ]);
 
     const toastIconStyle = computed(() => [

package/src/components/or-toast-v3/styles.ts

@@ -1,6 +1,6 @@
 import { PositionsX, PositionsY, ToastType } from './props';
 
-export const ToastRoot: string[] = [
+export const Toast: string[] = [
   // Layout
   'layout-row',
 
@@ -19,6 +19,10 @@ export const ToastRoot: string[] = [
   // Typography
   'typography-caption-regular',
 
+  // Elevation
+  'shadow-card',
+  'dark:shadow-card-dark',
+
   // Theme
   'theme-background-surface-inverse',
   'dark:theme-background-surface-inverse-dark',
@@ -26,13 +30,9 @@ export const ToastRoot: string[] = [
   'theme-foreground-on-surface-inverse',
   'dark:theme-foreground-on-surface-inverse-dark',
 
-  // Theme (links)
-  'links:text-inverse-primary',
-  'dark:links:text-inverse-primary-dark',
-
-  // Elevation
-  'shadow-card',
-  'dark:shadow-card-dark',
+  // Theme (children)
+  '[&_:any-link]:text-inverse-primary',
+  'dark:[&_:any-link]:text-inverse-primary-dark',
 ];
 
 export const ToastContainer: string[] = [

package/src/hooks/useResponsive/useResponsive.ts

@@ -41,7 +41,7 @@ function useResponsive(element?: Ref<Element | undefined>) {
 
     const forcedScreens = element.getAttribute('force-screen')?.split(/\s+/);
 
-    if (forcedScreens?.some((forcedScreen) => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
+    if (forcedScreens?.some((forcedScreen) => ['md', 'lg', 'xl'].includes(forcedScreen))) {
       return true;
     }
 

package/src/shims.d.ts

@@ -1,5 +1,5 @@
 declare module '@onereach/styles/tailwind/plugins/core' {
-  const screens: Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', string>;
+  const screens: Record<'sm' | 'md' | 'lg' | 'xl', string>;
 }
 
 declare module '@onereach/styles/tailwind.config' {