@onereach/ui-components 2.67.9-beta.2030.0 → 2.67.9-beta.2031.0

package/dist/esm/v3/components/or-toast-v3/index.js

@@ -1,4 +1,4 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-977d9680.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from '../../types-8ef262da.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../../useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
@@ -14,5 +14,5 @@ import '../../useElevation-31bfe1f6.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../OrBottomSheet-0eb33b18.js';
 import '../../OrOverlay-738a44d5.js';
-import '../../OrLoader-35e5dfaf.js';
+import '../../OrLoader-b3cf4231.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/index.js

@@ -3,7 +3,7 @@ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-e
 export { s as OrBottomSheetV3 } from './OrBottomSheet-0eb33b18.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-fca9019a.js';
 export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrButtonV2, a as OrIconButton } from './OrIconButton-8be9c89f.js';
-export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-9021f9c8.js';
+export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-3670279e.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a5e326ef.js';
 export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-34aa611e.js';
@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-ee19a5e6.js';
 export { s as OrCollapse } from './OrCollapse-445141ab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-189cb097.js';
 export { s as OrConfirm } from './OrConfirm-f39bd784.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-b090a158.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-748ed50b.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-f2e08564.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-bbfd3ca6.js';
@@ -42,7 +42,7 @@ export { L as LinkColor, s as OrLinkV3 } from './OrLink-338db3ca.js';
 export { s as OrList } from './OrList-b740d13e.js';
 export { s as OrListOfInputs } from './OrListOfInputs-7a67440f.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-15174477.js';
-export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-35e5dfaf.js';
+export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b3cf4231.js';
 export { s as OrMenuItemV3 } from './OrMenuItem-d001f0f6.js';
 export { s as OrMenuV3 } from './OrMenu-d9e12030.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-94a8f21d.js';
@@ -70,7 +70,7 @@ export { s as OrSlider } from './OrSlider-87e2da8c.js';
 export { s as OrSortHeaderV3 } from './OrSortHeader-9d645226.js';
 export { s as OrStepper } from './OrStepper-f19b4eac.js';
 export { s as OrSwitch } from './OrSwitch-c333ee32.js';
-export { s as OrSwitchV3 } from './OrSwitch-5415978d.js';
+export { s as OrSwitchV3 } from './OrSwitch-94399738.js';
 export { s as OrTab } from './OrTab-bc98be02.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-d668cc59.js';
 export { s as OrTabV3 } from './OrTab-97044946.js';
@@ -85,7 +85,7 @@ export { s as OrTextareaV3 } from './OrTextarea-98895b2a.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-2f33e9c3.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-40c4c1c8.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-977d9680.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-8ef262da.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-78cd7f6b.js';
 export { s as OrTooltipV3 } from './OrTooltip-6412166a.js';

package/dist/esm/v3/{types-977d9680.js → types-8ef262da.js}

@@ -3,7 +3,7 @@ import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTic
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
 import { s as script$2 } from './OrIconButton-1d78453b.js';
-import { s as script$3 } from './OrLoader-35e5dfaf.js';
+import { s as script$3 } from './OrLoader-b3cf4231.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, toDisplayString, createElementVNode, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.67.9-beta.2030.0",
+  "version": "2.67.9-beta.2031.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-loader-v3/OrLoader.vue

@@ -5,75 +5,74 @@
     :class="rootStyles"
   >
     <template v-if="title">
-      <div class="typography-headline-2 text-center	text-on-background dark:text-on-background-dark">
+      <div :class="titleStyles">
         {{ title }}
       </div>
     </template>
-    <template v-if="variant === 'circular'">
-      <svg
-        viewBox="0 0 16 16"
-        :width="computedSize"
-        :height="computedSize"
-      >
-        <g
-          fill="none"
-          stroke-width="2"
-          stroke-linecap="round"
+    <div :class="containerStyles">
+      <template v-if="variant === 'circular'">
+        <svg
+          viewBox="0 0 16 16"
+          :width="computedSize"
+          :height="computedSize"
         >
-          <circle
-            :class="[
-              'animate-circular-loader',
-              'origin-center',
-            ]"
-
-            cx="50%"
-            cy="50%"
-            r="7"
-            :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
-          />
-        </g>
-      </svg>
-    </template>
-
-    <template v-if="variant === 'linear'">
-      <svg
-        width="100%"
-        height="4"
-      >
-        <g
-          fill="none"
-          stroke-width="4"
-          stroke-linecap="round"
+          <g
+            fill="none"
+            stroke-width="2"
+            stroke-linecap="round"
+          >
+            <circle
+              :class="[
+                'animate-circular-loader',
+                'origin-center',
+              ]"
+              cx="50%"
+              cy="50%"
+              r="7"
+              :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
+            />
+          </g>
+        </svg>
+      </template>
+
+      <template v-if="variant === 'linear'">
+        <svg
+          width="100%"
+          height="4"
         >
-          <line
-            :class="[
-              'stroke-surface-variant',
-              'dark:stroke-surface-variant-dark',
-            ]"
-
-            x1="2"
-            y1="50%"
-            x2="calc(100% - 2px)"
-            y2="50%"
-          />
-
-          <line
-            :class="[
-              'animate-linear-loader',
-              'origin-center',
-            ]"
-
-            x1="2"
-            y1="50%"
-            x2="calc(100% - 2px)"
-            y2="50%"
-            :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
-          />
-        </g>
-      </svg>
-    </template>
+          <g
+            fill="none"
+            stroke-width="4"
+            stroke-linecap="round"
+          >
+            <line
+              :class="[
+                'stroke-surface-variant',
+                'dark:stroke-surface-variant-dark',
+              ]"
+              x1="2"
+              y1="50%"
+              x2="calc(100% - 2px)"
+              y2="50%"
+            />
+
+            <line
+              :class="[
+                'animate-linear-loader',
+                'origin-center',
+              ]"
+              x1="2"
+              y1="50%"
+              x2="calc(100% - 2px)"
+              y2="50%"
+              :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
+            />
+          </g>
+        </svg>
+      </template>
+    </div>
     <template v-if="description">
-      <div class="typography-body-2-regular text-center	text-outline dark:text-outline-dark">
+      <div :class="descriptionStyles">
         {{ description }}
       </div>
     </template>
@@ -84,7 +83,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { LoaderColor, LoaderSize, LoaderVariant } from './props';
-import { LoaderRoot, LoaderRootColors } from './styles';
+import { LoaderRoot, LoaderRootColors, LoaderTitle, LoaderDescription, LoaderContainer } from './styles';
 
 export default defineComponent({
   name: 'OrLoader',
@@ -136,6 +135,18 @@ export default defineComponent({
       classAttribute.value,
     ]);
 
+    const titleStyles = computed(() => [
+      ...LoaderTitle,
+    ]);
+
+    const descriptionStyles = computed(() => [
+      ...LoaderDescription,
+    ]);
+
+    const containerStyles = computed(() => [
+      ...LoaderContainer,
+    ]);
+
     // State
     const computedSize = computed(() => {
       switch (props.size) {
@@ -150,6 +161,9 @@ export default defineComponent({
     return {
       root,
       rootStyles,
+      containerStyles,
+      titleStyles,
+      descriptionStyles,
       computedSize,
     };
   },

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

@@ -23,3 +23,22 @@ export const LoaderRootColors: Record<LoaderColor, string[]> = {
 
   'inherit': [],
 };
+
+export const LoaderContainer: string[] = [
+  'flex',
+  'justify-center',
+];
+
+export const LoaderTitle: string[] = [
+  'typography-headline-2',
+  'text-center',
+  'text-on-background',
+  'dark:text-on-background-dark',
+];
+
+export const LoaderDescription: string[] = [
+  'typography-body-2-regular',
+  'text-center',
+  'text-outline',
+  'dark:text-outline-dark',
+];

package/dist/bundled/v3/OrLoader-c51c2f43.js

@@ -1,64 +0,0 @@
-import { s as script } from './OrLoader.vue_vue_type_script_lang-e2f5bb7d.js';
-import { openBlock, createElementBlock, mergeProps, toDisplayString, createCommentVNode, createElementVNode, normalizeClass } from 'vue';
-
-const _hoisted_1 = {
-  key: 0,
-  class: "typography-headline-2 text-center text-on-background dark:text-on-background-dark"
-};
-const _hoisted_2 = ["width", "height"];
-const _hoisted_3 = {
-  fill: "none",
-  "stroke-width": "2",
-  "stroke-linecap": "round"
-};
-const _hoisted_4 = ["stroke"];
-const _hoisted_5 = {
-  key: 2,
-  width: "100%",
-  height: "4"
-};
-const _hoisted_6 = {
-  fill: "none",
-  "stroke-width": "4",
-  "stroke-linecap": "round"
-};
-const _hoisted_7 = /*#__PURE__*/createElementVNode("line", {
-  class: /*#__PURE__*/normalizeClass(['stroke-surface-variant', 'dark:stroke-surface-variant-dark']),
-  x1: "2",
-  y1: "50%",
-  x2: "calc(100% - 2px)",
-  y2: "50%"
-}, null, -1 /* HOISTED */);
-const _hoisted_8 = ["stroke"];
-const _hoisted_9 = {
-  key: 3,
-  class: "typography-body-2-regular text-center text-outline dark:text-outline-dark"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [_ctx.title ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.title), 1 /* TEXT */)) : createCommentVNode("v-if", true), _ctx.variant === 'circular' ? (openBlock(), createElementBlock("svg", {
-    key: 1,
-    viewBox: "0 0 16 16",
-    width: _ctx.computedSize,
-    height: _ctx.computedSize
-  }, [createElementVNode("g", _hoisted_3, [createElementVNode("circle", {
-    class: normalizeClass(['animate-circular-loader', 'origin-center']),
-    cx: "50%",
-    cy: "50%",
-    r: "7",
-    stroke: _ctx.color === 'inherit' ? 'currentColor' : 'inherit'
-  }, null, 8 /* PROPS */, _hoisted_4)])], 8 /* PROPS */, _hoisted_2)) : createCommentVNode("v-if", true), _ctx.variant === 'linear' ? (openBlock(), createElementBlock("svg", _hoisted_5, [createElementVNode("g", _hoisted_6, [_hoisted_7, createElementVNode("line", {
-    class: normalizeClass(['animate-linear-loader', 'origin-center']),
-    x1: "2",
-    y1: "50%",
-    x2: "calc(100% - 2px)",
-    y2: "50%",
-    stroke: _ctx.color === 'inherit' ? 'currentColor' : 'inherit'
-  }, null, 8 /* PROPS */, _hoisted_8)])])) : createCommentVNode("v-if", true), _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(_ctx.description), 1 /* TEXT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-loader-v3/OrLoader.vue";