@onereach/ui-components 2.67.9-beta.2038.0 → 2.67.9-beta.2045.0

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,18 +2,19 @@ import { TagColor, TagVariant } from './props';
 
 export const TagRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-inline-row',
 
   // Box
-  'max-w-max',
+  'w-min',
+
+  // 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',

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

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

@@ -1,17 +1,19 @@
 import { PositionsX, PositionsY, ToastType } from './props';
 
-export const ToastRoot = [
+export const ToastRoot: string[] = [
   // Layout
-  'flex',
-  'items-start',
+  'layout-row',
 
   // Box
   'w-[343px] md:w-[512px]',
+
+  // Shape
   'rounded-md',
 
-  // Sizing
+  // Spacing
   'px-md',
   'py-md',
+
   'gap-md',
 
   // Typography
@@ -24,24 +26,32 @@ export const ToastRoot = [
   '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',
 ];
 
-export const ToastContainer = [
+export const ToastActionButton: string[] = [
+  // Layout
+  'contents',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];
+
+export const ToastContainer: string[] = [
   // Position
   'absolute',
 
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  'items-center',
-
-  // Sizing
+  // Spacing
   'gap-sm',
 
   // Overflow
@@ -50,36 +60,53 @@ export const ToastContainer = [
 
 export const ToastContainerPositions: Record<`${PositionsX}-${PositionsY}`, string[]> = {
   'left-top': [
+    // Position
     'left-md md:left-lg',
     'top-md md:top-lg',
   ],
 
   'center-top': [
+    // Position
     'top-md md:top-lg',
   ],
 
   'right-top': [
+    // Position
     'right-md md:right-lg',
     'top-md md:top-lg',
   ],
 
   'left-bottom': [
+    // Position
     'left-md md:left-lg',
     'bottom-md md:bottom-lg',
   ],
 
   'center-bottom': [
+    // Position
     'bottom-md md:bottom-lg',
   ],
 
   'right-bottom': [
+    // Position
     'right-md md:right-lg',
     'bottom-md md:bottom-lg',
   ],
 };
 
 export const messageStyleVariant: Record<ToastType, string[]> = {
-  [ToastType.Success]: ['typography-caption-regular'],
-  [ToastType.Error]: ['typography-caption-bold'],
-  [ToastType.Loading]: ['typography-caption-bold'],
+  'success': [
+    // Typography
+    'typography-caption-regular',
+  ],
+
+  'error': [
+    // Typography
+    'typography-caption-bold',
+  ],
+
+  'loading': [
+    // Typography
+    'typography-caption-bold',
+  ],
 };

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

@@ -2,15 +2,17 @@ import { TooltipPlacement } from './props';
 
 export const TooltipRoot: string[] = [
   // Layout
-  'inline-block',
+  'layout-inline-row justify-center',
 ];
 
 export const TooltipBody: string[] = [
-  // Box
-  'max-w-max',
+  // Layout
+  'layout-inline-row',
+
+  // Shape
   'rounded-sm',
 
-  // Sizing
+  // Spacing
   'mx-sm',
   'my-sm',
 
@@ -32,48 +34,48 @@ export const TooltipBodyPlacements: Record<TooltipPlacement, 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',
   ],
 };