@onereach/ui-components 2.67.9-beta.2035.0 → 2.67.9

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

@@ -2,9 +2,11 @@ import { ButtonColor, ButtonVariant } from './props';
 
 export const ButtonRoot: string[] = [
   // Layout
-  'layout-inline-row justify-center',
+  'inline-flex',
+  'items-center',
+  'justify-center',
 
-  // Shape
+  // Box
   'rounded-md',
 
   // Interactivity
@@ -16,10 +18,9 @@ export const ButtonRoot: string[] = [
 
 export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
   'contained': [
-    // Spacing
+    // Sizing
     'px-md md:px-md',
     'py-sm+ md:py-sm',
-
     'gap-sm+ md:gap-sm',
 
     // Theme
@@ -28,23 +29,21 @@ export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
   ],
 
   'outlined': [
-    // Spacing
+    // Sizing
     'px-[15px] md:px-[15px]',
     'py-[11px] md:py-[7px]',
-
     'gap-sm+ md:gap-sm',
   ],
 
   'text': [
-    // Spacing
+    // Sizing
     'px-md md:px-md',
     'py-sm+ md:py-sm',
-
     'gap-sm+ md:gap-sm',
   ],
 
   'link': [
-    // Spacing
+    // Sizing
     'gap-sm md:gap-xs',
   ],
 };

package/src/components/or-card-collection-v3/styles.ts

@@ -2,7 +2,7 @@ import { CardCollectionView } from './props';
 
 export const CardCollectionRoot: string[] = [
   // Layout
-  'layout-column',
+  'flex flex-col',
 
   // Spacing
   'gap-md',
@@ -10,7 +10,9 @@ export const CardCollectionRoot: string[] = [
 
 export const CardCollectionToolbar: string[] = [
   // Layout
-  'layout-row justify-between',
+  'flex',
+  'justify-between',
+  'items-center',
 
   // Typography
   'typography-body-2-regular',
@@ -22,7 +24,9 @@ export const CardCollectionToolbar: string[] = [
 
 export const CardCollectionToolbarPanel: string[] = [
   // Layout
-  'layout-row',
+  'flex',
+  'justify-normal',
+  'items-center',
 
   // Spacing
   'gap-sm',

package/src/components/or-checkbox/OrCheckbox.vue

@@ -118,7 +118,7 @@ export default defineComponent({
     },
     isChecked(): boolean {
       if (this.isArrayModelValue) {
-        return _.some(this.modelValue, this.value) || _.includes(this.modelValue, this.value);
+        return _.includes(this.modelValue, this.value);
       }
 
       if (this.withState) return this.modelValue?.icon;

package/src/components/or-error-tag-v3/OrErrorTag.vue

@@ -4,12 +4,11 @@
     v-bind="$attrs"
     :class="rootStyles"
   >
-    <div :class="['flex', 'items-center', 'm-[-4px] md:m-[-2px]']">
-      <OrIcon
-        :icon="'error'"
-        :variant="'filled-bold'"
-      />
-    </div>
+    <OrIcon
+      :class="['-m-xs', 'mr-none']"
+      :icon="'error'"
+      :variant="'filled-bold'"
+    />
 
     <slot />
   </div>

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

@@ -1,18 +1,17 @@
 export const ErrorTagRoot: string[] = [
   // Layout
-  'layout-inline-row',
+  'flex',
+  'items-center',
+  'justify-center',
 
   // Box
-  'w-min',
-
-  // Shape
+  'max-w-max',
   'rounded-full',
 
-  // Spacing
+  // Sizing
   'px-sm+ md:px-sm',
   'py-sm md:py-xs',
-
-  'gap-sm+ md:gap-sm',
+  'gap-sm md:gap-xs',
 
   // Interactivity
   'interactivity-none',

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

@@ -2,18 +2,20 @@ import { FabColor } from './props';
 
 export const FabRoot: string[] = [
   // Layout
-  'layout-inline-row justify-center',
+  'flex',
+  'justify-center',
+  'items-center',
 
-  // Shape
+  // Box
   'rounded-full',
 
-  // Spacing
-  'px-md+',
-  'py-md+',
+  // Sizing
+  'px-md',
+  'py-md',
 
   // Theme
-  'enabled:shadow-button',
-  'dark:enabled:shadow-button-dark',
+  'shadow-button',
+  'dark:shadow-button-dark',
 ];
 
 export const FabRootColors: Record<FabColor, string[]> = {

package/src/components/or-icon-button-v3/OrIconButton.stories3.ts

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
 import OrIconButtonDocs from './OrIconButton.docs.mdx';
 import OrIconButton from './OrIconButton.vue';
-import { IconButtonColor, IconButtonSize } from './props';
+import { IconButtonColor } from './props';
 
 export default {
   title: 'Components/Buttons/Icon Button',
@@ -19,11 +19,6 @@ export default {
       options: Object.values(IconButtonColor),
     },
 
-    size: {
-      control: { type: 'select' },
-      options: Object.values(IconButtonSize),
-    },
-
     disabled: {
       control: { type: 'boolean' },
     },

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -11,9 +11,8 @@
       @blur="$emit('blur', $event)"
     >
       <OrIcon
-        :icon="icon"
         :variant="'inherit'"
-        :size="size"
+        v-bind="typeof icon === 'string' ? { icon } : icon"
       />
     </button>
   </OrTooltip>
@@ -24,7 +23,7 @@ import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
-import { IconButtonColor, IconButtonSize } from './props';
+import { IconButtonColor } from './props';
 import { IconButtonRoot, IconButtonRootColors } from './styles';
 
 export default defineComponent({
@@ -39,7 +38,7 @@ export default defineComponent({
 
   props: {
     icon: {
-      type: String,
+      type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,
       required: true,
     },
 
@@ -48,11 +47,6 @@ export default defineComponent({
       default: IconButtonColor.Inherit,
     },
 
-    size: {
-      type: String as PropType<IconButtonSize>,
-      default: IconButtonSize.M,
-    },
-
     disabled: {
       type: Boolean,
       default: false,

package/src/components/or-icon-button-v3/props.ts

@@ -3,5 +3,3 @@ export enum IconButtonColor {
   Danger = 'danger',
   Inherit = 'inherit',
 }
-
-export { IconSize as IconButtonSize } from '../or-icon-v3';

package/src/components/or-icon-button-v3/styles.ts

@@ -2,18 +2,14 @@ import { IconButtonColor } from './props';
 
 export const IconButtonRoot: string[] = [
   // Layout
-  'layout-inline-row justify-center',
+  'flex',
+  'items-center',
+  'justify-center',
 
-  // Shape
+  // Box
+  'max-w-max',
   'rounded-full',
 
-  // Spacing
-  'mx-[-2px]',
-  'my-[-2px]',
-
-  'px-[2px]',
-  'py-[2px]',
-
   // Interactivity
   'interactivity-auto',
 

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

@@ -2,7 +2,12 @@ import { IconSize, IconVariant } from './props';
 
 export const IconRoot: string[] = [
   // Layout
-  'layout-inline-row justify-center',
+  'inline-flex',
+  'items-center',
+  'justify-center',
+
+  // Typography
+  'align-bottom',
 ];
 
 export const IconRootVariants: Record<IconVariant, string[]> = {
@@ -35,17 +40,17 @@ export const IconRootVariants: Record<IconVariant, string[]> = {
 export const IconRootSizes: Record<IconSize, string[]> = {
   'xl': [
     // Box
-    'w-[28px] md:w-[24px]',
-    'h-[28px] md:h-[24px]',
+    'w-[36px] md:w-[32px]',
+    'h-[36px] md:h-[32px]',
 
     // Typography
-    'text-[28px] md:text-[24px]',
+    'text-[32px] md:text-[28px]',
   ],
 
   'l': [
     // Box
-    'w-[24px] md:w-[20px]',
-    'h-[24px] md:h-[20px]',
+    'w-[28px] md:w-[24px]',
+    'h-[28px] md:h-[24px]',
 
     // Typography
     'text-[24px] md:text-[20px]',
@@ -53,8 +58,8 @@ export const IconRootSizes: Record<IconSize, string[]> = {
 
   'm': [
     // Box
-    'w-[20px] md:w-[16px]',
-    'h-[20px] md:h-[16px]',
+    'w-[24px] md:w-[20px]',
+    'h-[24px] md:h-[20px]',
 
     // Typography
     'text-[20px] md:text-[16px]',

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

@@ -2,12 +2,11 @@ import { InlineInputBoxSize } from './props';
 
 export const InlineInputBoxRoot: string[] = [
   // Layout
-  'layout-row',
+  'flex',
+  'items-center',
 
   // Box
   'w-full',
-
-  // Shape
   'rounded-sm',
 
   // Theme
@@ -67,7 +66,7 @@ export const InlineInputBoxRoot: string[] = [
 
 export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
   'm': [
-    // Spacing
+    // Sizing
     'activated:children:px-sm',
     'children:py-xs',
 
@@ -78,7 +77,7 @@ export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
   ],
 
   's': [
-    // Spacing
+    // Sizing
     'activated:children:px-sm',
     'children:py-none',
 

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -3,7 +3,7 @@
     ref="root"
     :class="rootStyles"
   >
-    <div :class="['flex', 'items-center', 'gap-md']">
+    <div :class="['flex', 'items-center', 'gap-[10px]']">
       <OrInlineInputBox
         :size="size"
         :invalid="invalid"

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

@@ -1,8 +1,9 @@
 export const InlineInputRoot: string[] = [
   // Layout
-  'layout-column',
+  'flex',
+  'flex-col',
 
-  // Spacing
+  // Sizing
   'gap-xs',
 ];
 
@@ -20,10 +21,11 @@ export const InlineInputControl: string[] = [
 
 export const InlineInputAction: string[] = [
   // Layout
-  'layout-inline-row',
+  'flex',
+  'items-center',
 
-  // Spacing
-  'gap-md',
+  // Sizing
+  'gap-sm',
 
   // Theme
   'theme-foreground-outline',

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -3,7 +3,7 @@
     ref="root"
     :class="rootStyles"
   >
-    <div :class="['flex', 'items-center', 'gap-md']">
+    <div :class="['flex', 'items-start', 'gap-[10px]']">
       <OrInlineInputBox
         :size="'s'"
         :invalid="invalid"

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

@@ -1,8 +1,9 @@
 export const InlineTextareaRoot: string[] = [
   // Layout
-  'layout-column',
+  'flex',
+  'flex-col',
 
-  // Spacing
+  // Sizing
   'gap-xs',
 ];
 
@@ -20,10 +21,11 @@ export const InlineTextareaControl: string[] = [
 
 export const InlineTextareaAction: string[] = [
   // Layout
-  'layout-inline-row',
+  'flex',
+  'items-center',
 
-  // Spacing
-  'gap-md',
+  // Sizing
+  'gap-sm',
 
   // Theme
   'theme-foreground-outline',

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

@@ -2,12 +2,11 @@ import { InputBoxSize, InputBoxVariant } from './props';
 
 export const InputBoxRoot: string[] = [
   // Layout
-  'layout-row',
+  'flex',
+  'items-center',
 
   // Box
   'w-full',
-
-  // Shape
   'rounded-md',
 
   // Theme (children)
@@ -92,7 +91,7 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     // Box
     'children:min-h-[34px]',
 
-    // Spacing
+    // Sizing
     'first-child:pl-md first-child:md:pl-sm+',
     'last-child:pr-md last-child:md:pr-sm+',
     'children:pt-[11px] children:md:pt-[7px]',
@@ -108,7 +107,7 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     // Box
     'children:min-h-[30px]',
 
-    // Spacing
+    // Sizing
     'first-child:pl-sm',
     'last-child:pr-sm',
     'children:py-[6px]',

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

@@ -41,7 +41,7 @@
         @blur="$emit('blur', $event)"
       >
 
-      <div :class="['flex', 'items-center', 'm-[-4px] md:m-[-2px]']">
+      <div :class="['-m-xs', 'ml-none']">
         <template v-if="type === 'password'">
           <OrIconButton
             :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"

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

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

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

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

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

@@ -1,8 +1,9 @@
 export const SelectRoot: string[] = [
   // Layout
-  'layout-column',
+  'flex',
+  'flex-col',
 
-  // Spacing
+  // Sizing
   'gap-xs',
 ];
 
@@ -13,7 +14,7 @@ export const SelectControl: string[] = [
 
   'overflow-hidden',
 
-  // Spacing
+  // Sizing
   'gap-xs',
 
   // Typography
@@ -32,8 +33,6 @@ export const SelectDropdown: string[] = [
 
   // Box
   'max-h-[340px]',
-
-  // Shape
   'rounded-b-md',
 
   // Theme
@@ -48,9 +47,11 @@ export const SelectDropdown: string[] = [
 
 export const SelectNoSearchResults: string[] = [
   // Layout
-  'layout-row justify-center',
+  'flex',
+  'items-center',
+  'justify-center',
 
-  // Spacing
+  // Sizing
   'px-md',
   'py-md',
 

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

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

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

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

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

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