@onereach/ui-components 2.67.11 → 2.67.12-beta.2052.0

package/src/components/or-menu-item-v3/styles.ts

@@ -1,11 +1,11 @@
 export const MenuItemRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
-  // Sizing
+  // Spacing
   'px-lg md:px-sm',
   'py-sm+ md:py-sm',
+
   'gap-sm md:gap-sm',
 
   // Interactivity

package/src/components/or-modal-v3/OrModal.vue

@@ -15,7 +15,8 @@
 
         <div :class="closeButtonStyles">
           <OrIconButton
-            :icon="{ icon: 'close', size: 'l' }"
+            :icon="'close'"
+            :size="'l'"
             @click.stop="close"
           />
         </div>

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

@@ -2,17 +2,19 @@ import { ModalSize } from './props';
 
 export const ModalRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
   // Box
   'w-full',
   'h-full',
+
+  // Shape
   'md:rounded-md',
 
-  // Sizing
+  // Spacing
   'px-lg',
   'py-lg',
+
   'gap-md md:gap-lg',
 
   // Typography
@@ -25,6 +27,7 @@ export const ModalRoot: string[] = [
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
 
+  // Elevation
   'shadow-modal',
   'dark:shadow-modal-dark',
 ];
@@ -51,14 +54,16 @@ export const ModalRootSizes: Record<ModalSize, string[]> = {
 
 export const ModalHeader: string[] = [
   // Layouot
-  'flex',
-  'items-center',
+  'layout-row',
 
   // Typography
   'typography-headline-2',
 ];
 
 export const ModalCloseButton: string[] = [
+  // Layout
+  'contents',
+
   // Theme
   'text-outline',
   'dark:text-outline-dark',

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

@@ -11,7 +11,7 @@
       />
     </div>
 
-    <div :class="['grow']">
+    <div :class="['grow', 'my-[-2px] md:my-[-3px]']">
       <slot />
     </div>
 
@@ -30,7 +30,7 @@ import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { NotificationVariant } from './props';
-import { NotificationAction, NotificationIconVariants, NotificationRoot, NotificationRootVariants } from './styles';
+import { NotificationAction, NotificationIcon, NotificationIconVariants, NotificationRoot, NotificationRootVariants } from './styles';
 
 export default defineComponent({
   name: 'OrNotification',
@@ -68,6 +68,7 @@ export default defineComponent({
     ]);
 
     const iconStyles = computed(() => [
+      ...NotificationIcon,
       ...NotificationIconVariants[props.variant],
     ]);
 

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

@@ -2,15 +2,15 @@ import { NotificationVariant } from './props';
 
 export const NotificationRoot: string[] = [
   // Layout
-  'flex',
-  'items-start',
+  'layout-row !items-start',
 
-  // Box
+  // Shape
   'rounded-md',
 
-  // Sizing
+  // Spacing
   'px-md',
   'py-md',
+
   'gap-md',
 
   // Typography
@@ -23,6 +23,7 @@ export const NotificationRoot: string[] = [
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
 
+  // Elevation
   'shadow-contextual',
   'dark:shadow-contextual-dark',
 ];
@@ -69,6 +70,8 @@ export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
   ],
 };
 
+export const NotificationIcon: string[] = [];
+
 export const NotificationIconVariants: Record<NotificationVariant, string[]> = {
   'success': [
     // Theme
@@ -96,6 +99,9 @@ export const NotificationIconVariants: Record<NotificationVariant, string[]> = {
 };
 
 export const NotificationAction: string[] = [
+  // Layout
+  'contents',
+
   // Theme
   'theme-foreground-outline',
   'dark:theme-foreground-outline-dark',

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

@@ -6,10 +6,10 @@ export const PopoverRoot: string[] = [
 ];
 
 export const PopoverBody: string[] = [
-  // Box
+  // Shape
   'rounded-md',
 
-  // Sizing
+  // Spacing
   'mx-sm',
   'my-sm',
 
@@ -17,6 +17,7 @@ export const PopoverBody: string[] = [
   'bg-background',
   'dark:bg-background-dark',
 
+  // Elevation
   'shadow-contextual',
   'dark:shadow-contextual-dark',
 ];
@@ -25,48 +26,48 @@ export const PopoverBodyPlacements: Record<PopoverPlacement, string[]> = {
   'top': [],
 
   'top-start': [
-    // Sizing
+    // Spacing
     'ml-none',
   ],
 
   'top-end': [
-    // Sizing
+    // Spacing
     'mr-none',
   ],
 
   'bottom': [],
 
   'bottom-start': [
-    // Sizing
+    // Spacing
     'ml-none',
   ],
 
   'bottom-end': [
-    // Sizing
+    // Spacing
     'mr-none',
   ],
 
   'left': [],
 
   'left-start': [
-    // Sizing
+    // Spacing
     'mt-none',
   ],
 
   'left-end': [
-    // Sizing
+    // Spacing
     'mb-none',
   ],
 
   'right': [],
 
   'right-start': [
-    // Sizing
+    // Spacing
     'mt-none',
   ],
 
   'right-end': [
-    // Sizing
+    // Spacing
     'mb-none',
   ],
 };

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

@@ -1,21 +1,20 @@
 export const RadioRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
-  // Sizing
+  // Spacing
   'gap-sm+ md:gap-sm',
 ];
 
 export const RadioControl: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
   // Box
   'w-md+ md:w-md',
   'h-md+ md:h-md',
+
+  // Shape
   'rounded-full',
 
   // Interactivity
@@ -44,6 +43,8 @@ export const RadioControlHandle: string[] = [
   // Box
   'after:w-sm after:md:w-xs',
   'after:h-sm after:md:h-xs',
+
+  // Shape
   'after:rounded-full',
 
   // Theme

package/src/components/or-segmented-control-v3/components/or-segmented-control-item/styles.ts

@@ -2,9 +2,7 @@ import { SegmentedControlSize } from '../../props';
 
 export const SegmentedControlItemRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
   // Shape
   'rounded-md',

package/src/components/or-select-v3/OrSelect.vue

@@ -74,10 +74,12 @@
         +{{ outerItems.length }}
       </template>
 
-      <OrIcon
-        :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
-        :variant="'outlined'"
-      />
+      <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
+        <OrIcon
+          :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
+          :variant="'outlined'"
+        />
+      </div>
 
       <OrPopover
         ref="popover"

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

@@ -1,20 +1,19 @@
 export const SelectRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 
 export const SelectControl: string[] = [
   // Layout
-  'flex grow',
-  'items-center',
+  'layout-row grow',
 
+  // Overflow
   'overflow-hidden',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 
   // Typography
@@ -28,11 +27,13 @@ export const SelectPlaceholder: string[] = [
 ];
 
 export const SelectDropdown: string[] = [
-  // Layout
+  // Overflow
   'overflow-y-auto',
 
   // Box
   'max-h-[340px]',
+
+  // Shape
   'rounded-b-md',
 
   // Theme
@@ -47,11 +48,9 @@ export const SelectDropdown: string[] = [
 
 export const SelectNoSearchResults: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
-  // Sizing
+  // Spacing
   'px-md',
   'py-md',
 

package/src/components/or-sort-header-v3/styles.ts

@@ -1,8 +1,6 @@
 export const SortHeaderRoot: string[] = [
   // Layout
-  'inline-flex',
-  'justify-normal',
-  'items-center',
+  'layout-row',
 
   // Interactivity
   'interactivity-auto',

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

@@ -1,28 +1,27 @@
 export const SwitchRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
-  // Sizing
+  // Spacing
   'gap-sm+ md:gap-sm',
 ];
 
 export const SwitchControl: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-start checked:justify-end',
+  'layout-row justify-start checked:justify-end',
 
   // Box
   'w-[43px] md:w-[37px]',
   'h-[24px] md:h-[21px]',
+
+  // Shape
   'rounded-full',
 
-  // Sizing
+  // Spacing
   'px-[2px]',
   'active:px-[1px]',
 
-  // Sizing (checked)
+  // Spacing (checked)
   'checked:px-[3px]',
   'active:checked:px-[2px]',
 
@@ -52,6 +51,8 @@ export const SwitchControlHandle: string[] = [
   // Box
   'after:w-[18px] after:md:w-[16px]',
   'after:h-[18px] after:md:h-[16px]',
+
+  // Shape
   'after:rounded-full',
 
   // Theme
@@ -93,13 +94,13 @@ export const SwitchControlHandle: string[] = [
 
 export const SwitchLoader: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
   // Box
   'w-[24px] md:w-[20px]',
   'h-[24px] md:h-[20px]',
+
+  // Shape
   'rounded-full',
 
   // Theme
@@ -114,6 +115,8 @@ export const SwitchLoaderHandle: string[] = [
   // Box
   'after:w-[18px] after:md:w-[14px]',
   'after:h-[18px] after:md:h-[14px]',
+
+  // Shape
   'after:rounded-full',
 
   // Theme

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

@@ -1,10 +1,8 @@
 export const TabRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
-  // Sizing
+  // Spacing
   'py-[6px]',
 
   // Interactivity

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

@@ -10,7 +10,7 @@ export const TabsRoot: string[] = [
   // Box
   'overflow-hidden',
 
-  // Sizing
+  // Spacing
   'gap-md',
 
   // Theme

package/src/components/or-tag-v3/OrTag.vue

@@ -12,13 +12,14 @@
     <slot />
 
     <template v-if="variant === 'reset'">
-      <OrIconButton
-        :class="['-m-xs', 'ml-none']"
-        :icon="'close'"
-        :color="!custom ? color : 'inherit'"
-        :disabled="disabled"
-        @click.stop="$emit('reset')"
-      />
+      <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
+        <OrIconButton
+          :icon="'close'"
+          :color="!custom ? color : 'inherit'"
+          :disabled="disabled"
+          @click.stop="$emit('reset')"
+        />
+      </div>
     </template>
   </div>
 </template>

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

@@ -2,21 +2,22 @@ import { TagColor, TagVariant } from './props';
 
 export const TagRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-inline-row',
 
   // Box
-  'max-w-max',
+  'max-w-fit',
+
+  // Shape
   'rounded-full',
 
-  // Sizing
+  // Spacing
   'px-sm+ md:px-sm',
   'py-sm md:py-xs',
-  'gap-sm md:gap-xs',
+
+  'gap-sm+ md:gap-sm',
 
   // Typography
-  'typography-caption-regular',
+  'typography-caption-regular whitespace-nowrap',
 
   // Theme
   'disabled:!bg-disabled',

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

@@ -1,9 +1,8 @@
 export const TextareaRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 

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

@@ -15,6 +15,7 @@
           :size="'s'"
         />
       </div>
+
       <img
         v-else-if="emojiSrc"
         :class="toastIconStyle"
@@ -28,41 +29,42 @@
         :class="messageStyle"
         v-html="messageText"
       />
-
-
-      <!-- link -->
-      <a
-        v-if="link"
-        class="or-toast__link"
-        :href="link.href"
-        :target="hrefTarget"
-        @click="onLinkClick"
-      >
-        {{ link.title }}
-      </a>
     </slot>
 
-    <!-- close button -->
-    <div :class="actionButtonStyle">
-      <OrIconButton
-        v-if="dismissible"
-        icon="close"
-        class="dark:theme-foreground-inherit"
-        @click.stop="onClose()"
-      />
+    <div :class="['layout-row', 'self-start', 'gap-md']">
+      <template v-if="link">
+        <a
+          class="or-toast__link"
+          :href="link.href"
+          :target="hrefTarget"
+          @click="onLinkClick"
+        >
+          {{ link.title }}
+        </a>
+      </template>
+
+      <template v-if="dismissible">
+        <div :class="actionButtonStyle">
+          <OrIconButton
+            icon="close"
+            class="dark:theme-foreground-inherit"
+            @click.stop="onClose()"
+          />
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import errorPng from '../../assets/error.png';
+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, ToastActionButton, ToastRoot } from './styles';
 import { ToastLink } from './types';
-import successPng from '../../assets/success.png';
-import errorPng from '../../assets/error.png';
 
 export default defineComponent({
   name: 'OrToast',
@@ -133,8 +135,7 @@ export default defineComponent({
     ]);
 
     const actionButtonStyle = computed(() => [
-      'text-outline-dark',
-      'dark:text-outline',
+      ...ToastActionButton,
     ]);
 
     // State