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

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

@@ -1,14 +1,14 @@
 export const CardRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Box
+  // Shape
   'rounded-md',
 
-  // Sizing
+  // Spacing
   'px-md',
   'py-md',
+
   'gap-[10px]',
 
   // Typography
@@ -21,6 +21,7 @@ export const CardRoot: string[] = [
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
 
+  // Elevation
   'shadow-card',
   'dark:shadow-card-dark',
 ];

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

@@ -1,21 +1,20 @@
 export const CheckboxRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
-  // Sizing
+  // Spacing
   'gap-sm+ md:gap-sm',
 ];
 
 export const CheckboxControl: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
   // Box
   'w-md+ md:w-md',
   'h-md+ md:h-md',
+
+  // Shape
   'rounded-sm',
 
   // Interactivity

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

@@ -2,17 +2,18 @@ import { ConfirmType } from './props';
 
 export const ConfirmRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
   // Box
   'w-[320px]',
-  'h-auto',
+
+  // Shape
   'rounded-md',
 
-  // Sizing
+  // Spacing
   'px-lg',
   'py-lg',
+
   'gap-md',
 
   // Typography
@@ -25,6 +26,7 @@ export const ConfirmRoot: string[] = [
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
 
+  // Elevation
   'shadow-modal',
   'dark:shadow-modal-dark',
 ];
@@ -43,7 +45,7 @@ export const ConfirmInput: string[] = [
   // Box
   'w-full',
 
-  // Sizing
+  // Spacing
   'mt-md',
 ];
 
@@ -53,7 +55,7 @@ export const ConfirmFooter: string[] = [
   'items-center',
   'justify-between',
 
-  // Sizing
+  // Spacing
   'gap-md',
 ];
 

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

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

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

@@ -1,23 +1,24 @@
 export const ErrorTagRoot: 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',
 
   // Interactivity
   'interactivity-none',
 
   // Typography
-  'typography-caption-regular',
+  'typography-caption-regular whitespace-nowrap',
 
   // Theme
   'theme-preset-1-error',

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

@@ -1,10 +1,8 @@
 export const ErrorRoot: string[] = [
   // Layout
-  'flex',
-  'items-start',
-  'justify-between',
+  'layout-row !items-start justify-between',
 
-  // Sizing
+  // Spacing
   'gap-sm',
 
   // Typography
@@ -25,8 +23,8 @@ export const ErrorText: string[] = [
 
 export const ErrorAddon: string[] = [
   // Layout
-  'flex empty:hidden',
+  'layout-row empty:hidden',
 
-  // Box
-  'min-w-max',
+  // Typography
+  'whitespace-nowrap',
 ];

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -5,7 +5,7 @@
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
-    <div :class="['flex', 'items-center', 'justify-between']">
+    <div :class="['layout-row', 'justify-between']">
       <div
         :class="headerStyles"
         :tabindex="!disabled ? 0 : null"

package/src/components/or-expansion-panel-v3/styles.ts

@@ -2,20 +2,20 @@ import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
 
 export const ExpansionPanelRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 ];
 
 export const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]> = {
   'default': [],
 
   'card': [
-    // Box
+    // Shape
     'rounded-md',
 
-    // Sizing
+    // Spacing
     'px-md',
     'py-md',
+
     'gap-md',
 
     // Theme
@@ -26,10 +26,9 @@ export const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]>
 
 export const ExpansionPanelHeader: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
-  // Sizing
+  // Spacing
   'gap-sm',
 
   // Interactivity
@@ -73,6 +72,9 @@ export const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]> =
 };
 
 export const ExpansionPanelAddon: string[] = [
+  // Layout
+  'contents',
+
   // Typography
   'typography-body-2-regular',
 

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

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

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

@@ -1,10 +1,8 @@
 export const HintRoot: string[] = [
   // Layout
-  'flex',
-  'items-start',
-  'justify-between',
+  'layout-row !items-start justify-between',
 
-  // Sizing
+  // Spacing
   'gap-sm',
 
   // Typography
@@ -25,8 +23,8 @@ export const HintText: string[] = [
 
 export const HintAddon: string[] = [
   // Layout
-  'flex empty:hidden',
+  'layout-row empty:hidden',
 
-  // Box
-  'min-w-max',
+  // Typography
+  'whitespace-nowrap',
 ];

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 } from './props';
+import { IconButtonColor, IconButtonSize } from './props';
 
 export default {
   title: 'Components/Buttons/Icon Button',
@@ -19,6 +19,11 @@ 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

@@ -12,6 +12,7 @@
     >
       <OrIcon
         :variant="'inherit'"
+        :size="size"
         v-bind="typeof icon === 'string' ? { icon } : icon"
       />
     </button>
@@ -23,7 +24,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 } from './props';
+import { IconButtonColor, IconButtonSize } from './props';
 import { IconButtonRoot, IconButtonRootColors } from './styles';
 
 export default defineComponent({
@@ -38,7 +39,7 @@ export default defineComponent({
 
   props: {
     icon: {
-      type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,
+      type: [String, Object] as PropType<string | Omit<InstanceType<typeof OrIcon>['$props'], 'size'>>,
       required: true,
     },
 
@@ -47,6 +48,11 @@ 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,3 +3,5 @@ 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,12 +2,9 @@ import { IconButtonColor } from './props';
 
 export const IconButtonRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-inline-row justify-center',
 
-  // Box
-  'max-w-max',
+  // Shape
   'rounded-full',
 
   // Interactivity
@@ -24,6 +21,9 @@ export const IconButtonRoot: string[] = [
 
   // Iconography (focus)
   'focus:iconography-filled',
+
+  // Theme
+  '!outline outline-2 outline-transparent',
 ];
 
 export const IconButtonRootColors: Record<IconButtonColor, string[]> = {
@@ -31,12 +31,36 @@ export const IconButtonRootColors: Record<IconButtonColor, string[]> = {
     // Theme
     'theme-preset-3-primary',
     'dark:theme-preset-3-primary-dark',
+
+    // Theme (hover)
+    'hover:outline-primary-opacity-0-08',
+    'dark:hover:outline-primary-opacity-0-08-dark',
+
+    // Theme (focus)
+    'focus:outline-primary-opacity-0-08',
+    'dark:focus:outline-primary-opacity-0-08-dark',
+
+    // Theme (active)
+    'active:outline-primary-opacity-0-16',
+    'dark:active:outline-primary-opacity-0-16-dark',
   ],
 
   'danger': [
     // Theme
     'theme-preset-3-error',
     'dark:theme-preset-3-error-dark',
+
+    // Theme (hover)
+    'hover:outline-error-opacity-0-08',
+    'dark:hover:outline-error-opacity-0-08-dark',
+
+    // Theme (focus)
+    'focus:outline-error-opacity-0-08',
+    'dark:focus:outline-error-opacity-0-08-dark',
+
+    // Theme (active)
+    'active:outline-error-opacity-0-16',
+    'dark:active:outline-error-opacity-0-16-dark',
   ],
 
   'inherit': [
@@ -46,5 +70,17 @@ export const IconButtonRootColors: Record<IconButtonColor, string[]> = {
 
     'theme-foreground-inherit',
     'dark:theme-foreground-inherit',
+
+    // Theme (hover)
+    'hover:outline-primary-opacity-0-08',
+    'dark:hover:outline-primary-opacity-0-08-dark',
+
+    // Theme (focus)
+    'focus:outline-primary-opacity-0-08',
+    'dark:focus:outline-primary-opacity-0-08-dark',
+
+    // Theme (active)
+    'active:outline-primary-opacity-0-16',
+    'dark:active:outline-primary-opacity-0-16-dark',
   ],
 };

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

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

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

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

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

@@ -1,9 +1,8 @@
 export const InlineInputRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 
@@ -21,11 +20,10 @@ export const InlineInputControl: string[] = [
 
 export const InlineInputAction: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
-  // Sizing
-  'gap-sm',
+  // Spacing
+  '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-start', 'gap-[10px]']">
+    <div :class="['layout-row', 'gap-sm+']">
       <OrInlineInputBox
         :size="'s'"
         :invalid="invalid"

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

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

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

@@ -2,11 +2,12 @@ import { InputBoxSize, InputBoxVariant } from './props';
 
 export const InputBoxRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
   // Box
   'w-full',
+
+  // Shape
   'rounded-md',
 
   // Theme (children)
@@ -91,7 +92,7 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     // Box
     'children:min-h-[34px]',
 
-    // Sizing
+    // Spacing
     '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]',
@@ -107,7 +108,7 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     // Box
     'children:min-h-[30px]',
 
-    // Sizing
+    // Spacing
     '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="['-m-xs', 'ml-none']">
+      <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
         <template v-if="type === 'password'">
           <OrIconButton
             :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"

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

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

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

@@ -2,11 +2,9 @@ import { LabelVariant } from './props';
 
 export const LabelRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-between',
+  'layout-row justify-between',
 
-  // Sizing
+  // Spacing
   'gap-sm',
 ];
 
@@ -40,8 +38,8 @@ export const LabelText: string[] = [
 
 export const LabelAddon: string[] = [
   // Layout
-  'flex empty:hidden',
+  'layout-row empty:hidden',
 
-  // Box
-  'min-w-max',
+  // Typography
+  'whitespace-nowrap',
 ];