@onereach/ui-components 2.68.2 → 2.69.0-beta.2076.0

package/src/components/or-empty-state-v3/index.ts

@@ -0,0 +1,3 @@
+export { default as OrEmptyStateV3 } from './OrEmptyState.vue';
+export * from './types';
+export * from './props';

package/src/components/or-empty-state-v3/props.ts

@@ -0,0 +1,4 @@
+export enum EmptyStateSize {
+  L = 'l',
+  M = 'm',
+}

package/src/components/or-empty-state-v3/styles.ts

@@ -0,0 +1,72 @@
+import { EmptyStateSize } from './props';
+
+export const EmptyStateRoot: string[] = [
+  // Layout
+  'grow',
+  'flex',
+  'flex-col',
+  'justify-center',
+  'items-center',
+
+  // Box
+  'w-full',
+
+  // Sizing
+  'gap-sm',
+];
+
+export const EmptyStateImage = [
+  // Sizing
+  'mb-sm',
+];
+
+export const EmptyStateImageSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Box
+    'h-3xl',
+  ],
+  [EmptyStateSize.M]: [
+    // Box
+    'h-2xl',
+  ],
+}
+
+export const EmptyStateHeading: string[] = [
+  // Theme
+  'theme-foreground-default',
+  'dark:theme-foreground-default-dark',
+];
+
+export const EmptyStateHeadingSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Typography
+    'typography-headline-2',
+  ],
+  [EmptyStateSize.M]: [
+    // Typography
+    'typography-headline-4',
+  ],
+}
+
+export const EmptyStateText: string[] = [
+  'text-center',
+
+  // Theme
+  'text-outline',
+  'dark:text-outline-dark',
+];
+
+export const EmptyStateContent = EmptyStateText;
+
+export const EmptyStateTextSizes: Record<EmptyStateSize, string[]> = {
+  [EmptyStateSize.L]: [
+    // Typography
+    'typography-body-2-regular',
+  ],
+  [EmptyStateSize.M]: [
+    // Typography
+    'typography-caption-regular',
+  ],
+};
+
+export const EmptyStateContentSizes = EmptyStateTextSizes;

package/src/components/or-empty-state-v3/types.ts

@@ -0,0 +1,3 @@
+import { LoaderVariant } from '../or-loader-v3';
+
+export type EmptyStateLoader = boolean | LoaderVariant | undefined;

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

@@ -41,7 +41,7 @@
         @blur="$emit('blur', $event)"
       >
 
-      <div :class="['layout-row']">
+      <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-select-v3/OrSelect.vue

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