@onereach/ui-components 20.1.5 → 20.1.6

package/dist/esm/components/or-button-v3/OrButton.vue.d.ts

@@ -33,6 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     root: import("vue").Ref<HTMLButtonElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
     contentStyles: import("vue").ComputedRef<string[]>;
+    contentContainerStyles: import("vue").ComputedRef<string[]>;
     isVue3: boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "focus" | "blur")[], "click" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {

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

@@ -50,7 +50,7 @@ var ButtonType;
 
 const Button = [
 // Layout
-'layout-inline-row justify-center',
+'layout-inline-row',
 // Overflow
 'overflow-hidden',
 // Interactivity
@@ -61,34 +61,60 @@ const Button = [
 'typography-button'];
 const ButtonVariants = {
   [ButtonVariant.Contained]: [
+  //  Layout
+  'layout-inline-row justify-center',
   // Box
   'min-w-[96px]',
   // Spacing
-  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm',
-  // Elevation (enabled)
-  'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
+  'px-md md:px-md', 'py-sm+ md:py-sm'],
   [ButtonVariant.Outlined]: [
+  //  Layout
+  'layout-inline-row justify-center',
   // Box
   'min-w-[96px]',
   // Spacing
-  'px-md* md:px-md*', 'py-sm+* md:py-sm*', 'gap-sm+ md:gap-sm'],
+  'px-md* md:px-md*', 'py-sm+* md:py-sm*'],
   [ButtonVariant.Text]: [
+  //  Layout
+  'layout-inline-row justify-center',
   // Box
   'min-w-[96px]',
   // Spacing
-  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
+  'px-md md:px-md', 'py-sm+ md:py-sm'],
   [ButtonVariant.Link]: [
+  //  Layout
+  'layout-inline-row justify-center']
+};
+const ButtonContainerVariants = {
+  [ButtonVariant.Contained]: [
+  //  Layout
+  'layout-inline-row', 'gap-sm+ md:gap-sm'],
+  [ButtonVariant.Outlined]: [
+  //  Layout
+  'layout-inline-row', 'gap-sm+ md:gap-sm'],
+  [ButtonVariant.Text]: [
+  //  Layout
+  'layout-inline-row', 'gap-sm+ md:gap-sm'],
+  [ButtonVariant.Link]: [
+  //  Layout
+  'layout-inline-row',
   // Spacing
   'gap-xs']
 };
 const ButtonColors = {
   'primary-contained': [
   // Theme
-  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'],
+  'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark',
+  // Elevation (enabled)
+  'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
   'danger-contained': [
   // Theme
-  'theme-preset-1-error', 'dark:theme-preset-1-error-dark'],
-  'inherit-contained': [],
+  'theme-preset-1-error', 'dark:theme-preset-1-error-dark',
+  // Elevation (enabled)
+  'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
+  'inherit-contained': [
+  // Elevation (enabled)
+  'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
   'primary-outlined': [
   // Theme
   'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark',
@@ -133,7 +159,31 @@ const ButtonLoadingColors = {
   'danger-link': ['interactivity-none', 'text-error-hover dark:text-error-hover-dark'],
   'inherit-link': ['interactivity-none']
 };
-const ButtonContentLoadingStyles = {
+const ButtonContainerVariantsLoading = {
+  'contained': [
+  // Position
+  'relative', 'flex',
+  // Box
+  'w-full', 'h-full',
+  // Aligment
+  'items-center', 'justify-center'],
+  'outlined': [
+  // Position
+  'relative', 'flex',
+  // Box
+  'w-full', 'h-full',
+  // Aligment
+  'items-center', 'justify-center'],
+  'text': [
+  // Position
+  'relative', 'flex',
+  // Box
+  'w-full', 'h-full',
+  // Aligment
+  'items-center', 'justify-center'],
+  'link': ['contents']
+};
+const ButtonContentLoading = {
   'contained': ['invisible'],
   'outlined': ['invisible'],
   'text': ['hidden'],
@@ -182,11 +232,13 @@ var script = defineComponent({
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-button-v3', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], ...(props.loading ? ButtonLoadingColors[`${props.color}-${props.variant}`] : [])]);
-    const contentStyles = computed(() => ['contents', ...(props.loading ? ButtonContentLoadingStyles[props.variant] : [])]);
+    const contentContainerStyles = computed(() => [...ButtonContainerVariants[props.variant], ...(props.loading ? ButtonContainerVariantsLoading[props.variant] : [])]);
+    const contentStyles = computed(() => ['contents', ...(props.loading ? ButtonContentLoading[props.variant] : [])]);
     return {
       root,
       rootStyles,
       contentStyles,
+      contentContainerStyles,
       isVue3
     };
   }
@@ -212,6 +264,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     focus: e => _ctx.$emit('focus', e),
     blur: e => _ctx.$emit('blur', e)
   }, true)), [createElementVNode("div", {
+    class: normalizeClass(_ctx.contentContainerStyles)
+  }, [createElementVNode("div", {
     class: normalizeClass(_ctx.contentStyles)
   }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */), _ctx.loading ? (openBlock(), createElementBlock(Fragment, {
     key: 0
@@ -223,7 +277,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1,
     variant: "text",
     text: _ctx.loadingText
-  }, null, 8 /* PROPS */, ["text"]))], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */, _hoisted_1);
+  }, null, 8 /* PROPS */, ["text"]))], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */)], 16 /* FULL_PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/esm/components/or-button-v3/styles.d.ts

@@ -1,6 +1,8 @@
 import { ButtonColor, ButtonVariant } from './props';
 export declare const Button: string[];
 export declare const ButtonVariants: Record<ButtonVariant, string[]>;
+export declare const ButtonContainerVariants: Record<ButtonVariant, string[]>;
 export declare const ButtonColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;
 export declare const ButtonLoadingColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;
-export declare const ButtonContentLoadingStyles: Record<ButtonVariant, string[]>;
+export declare const ButtonContainerVariantsLoading: Record<ButtonVariant, string[]>;
+export declare const ButtonContentLoading: Record<ButtonVariant, string[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "20.1.5",
+  "version": "20.1.6",
   "description": "Vue components library for v3",
   "sideEffects": false,
   "exports": {
@@ -46,8 +46,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^20.1.5",
-    "@onereach/ui-components-common": "^20.1.5",
+    "@onereach/styles": "^20.1.6",
+    "@onereach/ui-components-common": "^20.1.6",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -107,5 +107,5 @@
     "access": "public"
   },
   "npmUnpacked": "4.15.2",
-  "gitHead": "b2cee0cd0cdbb3ba583892e915c62a9ca6a404dd"
+  "gitHead": "b46e97a449cd736b8575738ae968fe5570ed5351"
 }