@onereach/ui-components 2.69.2-beta.2136.0 → 2.69.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/dist/bundled/v2/{OrAvatar-2fa559e1.js → OrAvatar-ae61bfb9.js} +41 -15
  2. package/dist/bundled/v2/{OrButton-4b99c680.js → OrButton-0e91a808.js} +1 -5
  3. package/dist/bundled/v2/{OrConfirm-cab6535b.js → OrConfirm-18c534df.js} +1 -1
  4. package/dist/bundled/v2/components/index.js +3 -3
  5. package/dist/bundled/v2/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  6. package/dist/bundled/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  7. package/dist/bundled/v2/components/or-avatar-v3/index.js +2 -1
  8. package/dist/bundled/v2/components/or-avatar-v3/props.d.ts +2 -1
  9. package/dist/bundled/v2/components/or-avatar-v3/styles.d.ts +2 -0
  10. package/dist/bundled/v2/components/or-button-v3/index.js +1 -1
  11. package/dist/bundled/v2/components/or-confirm-v3/index.js +2 -2
  12. package/dist/bundled/v2/index.js +4 -4
  13. package/dist/bundled/v3/{OrAvatar.vue_vue_type_script_lang-22e46ce1.js → OrAvatar.vue_vue_type_script_lang-0426862b.js} +35 -13
  14. package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-b0dc31ca.js → OrButton.vue_vue_type_script_lang-3718b300.js} +1 -5
  15. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-3993a015.js → OrCardCollection.vue_vue_type_script_lang-861158b5.js} +2 -2
  16. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-49a3a9bd.js → OrConfirm.vue_vue_type_script_lang-289b5600.js} +1 -1
  17. package/dist/bundled/v3/{OrIconButton-4bd33e3c.js → OrIconButton-1581013c.js} +1 -1
  18. package/dist/bundled/v3/{OrIconButton.vue_vue_type_script_lang-641f6e06.js → OrIconButton.vue_vue_type_script_lang-f6f801ff.js} +1 -1
  19. package/dist/bundled/v3/{OrInlineInput.vue_vue_type_script_lang-3a8189f4.js → OrInlineInput.vue_vue_type_script_lang-f29483f4.js} +2 -2
  20. package/dist/bundled/v3/{OrInlineTextarea.vue_vue_type_script_lang-890b97ab.js → OrInlineTextarea.vue_vue_type_script_lang-cc40af48.js} +2 -2
  21. package/dist/bundled/v3/OrInput.vue_vue_type_script_lang-f6d793d3.js +2 -2
  22. package/dist/bundled/v3/{OrModal.vue_vue_type_script_lang-00a477f0.js → OrModal.vue_vue_type_script_lang-80a7b906.js} +2 -2
  23. package/dist/bundled/v3/OrNotification.vue_vue_type_script_lang-fbb35355.js +2 -2
  24. package/dist/bundled/v3/OrSelect.vue_vue_type_script_lang-15285ce4.js +1 -1
  25. package/dist/bundled/v3/{OrTag.vue_vue_type_script_lang-92d9fb12.js → OrTag.vue_vue_type_script_lang-dc6a4011.js} +2 -2
  26. package/dist/bundled/v3/{OrToastContainer-afb51e5d.js → OrToastContainer-7c3c0b12.js} +1 -1
  27. package/dist/bundled/v3/components/index.js +12 -12
  28. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  29. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  30. package/dist/bundled/v3/components/or-avatar-v3/index.js +3 -1
  31. package/dist/bundled/v3/components/or-avatar-v3/props.d.ts +2 -1
  32. package/dist/bundled/v3/components/or-avatar-v3/styles.d.ts +2 -0
  33. package/dist/bundled/v3/components/or-button-v3/index.js +1 -1
  34. package/dist/bundled/v3/components/or-card-collection-v3/index.js +3 -3
  35. package/dist/bundled/v3/components/or-confirm-v3/index.js +4 -4
  36. package/dist/bundled/v3/components/or-icon-button-v3/index.js +1 -1
  37. package/dist/bundled/v3/components/or-inline-input-v3/index.js +3 -3
  38. package/dist/bundled/v3/components/or-inline-textarea-v3/index.js +3 -3
  39. package/dist/bundled/v3/components/or-input-v3/index.js +2 -2
  40. package/dist/bundled/v3/components/or-modal-v3/index.js +3 -3
  41. package/dist/bundled/v3/components/or-notification-v3/index.js +2 -2
  42. package/dist/bundled/v3/components/or-search-v3/index.js +2 -2
  43. package/dist/bundled/v3/components/or-select-v3/index.js +3 -3
  44. package/dist/bundled/v3/components/or-tag-v3/index.js +3 -3
  45. package/dist/bundled/v3/components/or-toast-v3/index.js +4 -4
  46. package/dist/bundled/v3/index.js +29 -23
  47. package/dist/bundled/v3/{types-6c5eee23.js → types-dcc78caa.js} +2 -2
  48. package/dist/esm/v2/{OrAvatar-0afdef36.js → OrAvatar-3d155af3.js} +41 -15
  49. package/dist/esm/v2/{OrButton-357e1e2c.js → OrButton-357a5756.js} +1 -5
  50. package/dist/esm/v2/{OrConfirm-ec7aef0e.js → OrConfirm-b0b2e43c.js} +1 -1
  51. package/dist/esm/v2/components/index.js +3 -3
  52. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  53. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  54. package/dist/esm/v2/components/or-avatar-v3/index.js +2 -1
  55. package/dist/esm/v2/components/or-avatar-v3/props.d.ts +2 -1
  56. package/dist/esm/v2/components/or-avatar-v3/styles.d.ts +2 -0
  57. package/dist/esm/v2/components/or-button-v3/index.js +1 -1
  58. package/dist/esm/v2/components/or-confirm-v3/index.js +2 -2
  59. package/dist/esm/v2/index.js +3 -3
  60. package/dist/esm/v3/{OrAvatar-ef88d31c.js → OrAvatar-53a4429d.js} +43 -16
  61. package/dist/esm/v3/{OrButton-bb6bf8a9.js → OrButton-f4b9ee51.js} +1 -5
  62. package/dist/esm/v3/{OrConfirm-5d56cbd3.js → OrConfirm-906427ef.js} +1 -1
  63. package/dist/esm/v3/components/index.js +3 -3
  64. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  65. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  66. package/dist/esm/v3/components/or-avatar-v3/index.js +2 -1
  67. package/dist/esm/v3/components/or-avatar-v3/props.d.ts +2 -1
  68. package/dist/esm/v3/components/or-avatar-v3/styles.d.ts +2 -0
  69. package/dist/esm/v3/components/or-button-v3/index.js +1 -1
  70. package/dist/esm/v3/components/or-confirm-v3/index.js +2 -2
  71. package/dist/esm/v3/index.js +3 -3
  72. package/package.json +3 -2
  73. package/src/components/or-avatar-v3/OrAvatar.stories3.ts +9 -7
  74. package/src/components/or-avatar-v3/OrAvatar.vue +22 -2
  75. package/src/components/or-avatar-v3/props.ts +1 -0
  76. package/src/components/or-avatar-v3/styles.ts +49 -11
  77. package/src/components/or-button-v3/styles.ts +0 -6
  78. package/src/components/or-menu-v3/OrMenu.stories3.ts +1 -1
@@ -1,9 +1,9 @@
1
1
  import { useToggle } from '@vueuse/core';
2
2
  import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, withModifiers, onBeforeMount, onBeforeUnmount, nextTick } from 'vue';
3
3
  import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-4d4329cd.js';
4
- import './OrIconButton-4bd33e3c.js';
4
+ import './OrIconButton-1581013c.js';
5
5
  import './OrLoader-c4bbef2f.js';
6
- import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
6
+ import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-f6f801ff.js';
7
7
  import { s as script$3 } from './OrLoader.vue_vue_type_script_lang-5405040c.js';
8
8
  import { s as styleInject } from './style-inject.es-4c6f2515.js';
9
9
  import './OrOverlay.vue_vue_type_script_lang-cb3aad0c.js';
@@ -2,6 +2,7 @@ import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
2
2
  import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
3
  import '@vueuse/core';
4
4
  import { h as hslToColorString, g as generateHslFromString } from './color-1f348774.js';
5
+ import { _ as __vue_component__$1 } from './OrIcon-5e394c62.js';
5
6
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
6
7
 
7
8
  var AvatarSize;
@@ -10,6 +11,7 @@ var AvatarSize;
10
11
  AvatarSize["L"] = "l";
11
12
  AvatarSize["M"] = "m";
12
13
  AvatarSize["S"] = "s";
14
+ AvatarSize["XS"] = "xs";
13
15
  })(AvatarSize || (AvatarSize = {}));
14
16
  var AvatarColor;
15
17
  (function (AvatarColor) {
@@ -34,24 +36,19 @@ const AvatarImage = [
34
36
  const AvatarRootSizes = {
35
37
  'xl': [
36
38
  // Box
37
- 'w-[80px]', 'h-[80px]',
38
- // Typography
39
- 'text-[32px]'],
39
+ 'w-[80px]', 'h-[80px]'],
40
40
  'l': [
41
41
  // Box
42
- 'w-[64px]', 'h-[64px]',
43
- // Typography
44
- 'text-[24px]'],
42
+ 'w-[64px]', 'h-[64px]'],
45
43
  'm': [
46
44
  // Box
47
- 'w-[40px]', 'h-[40px]',
48
- // Typography
49
- 'text-[16px]'],
45
+ 'w-[40px]', 'h-[40px]'],
50
46
  's': [
51
47
  // Box
52
- 'w-[32px]', 'h-[32px]',
53
- // Typography
54
- 'text-[16px]']
48
+ 'w-[32px]', 'h-[32px]'],
49
+ 'xs': [
50
+ // Box
51
+ 'w-[24px]', 'h-[24px]']
55
52
  };
56
53
  const AvatarRootColors = {
57
54
  [AvatarColor.blue]: [
@@ -73,9 +70,26 @@ const AvatarRootColors = {
73
70
  // Theme
74
71
  'text-white', 'dark:text-overlay-dark']
75
72
  };
73
+ const AvatarRootAbbreviationSizes = {
74
+ 'xl': ['typography-headline-1'],
75
+ 'l': ['typography-headline-1'],
76
+ 'm': ['typography-body-1-bold'],
77
+ 's': ['typography-body-1-bold'],
78
+ 'xs': ['typography-caption-semibold']
79
+ };
80
+ const AvatarRootIconSizes = {
81
+ 'xl': ['text-[40px]'],
82
+ 'l': ['text-[32px]'],
83
+ 'm': ['text-[20px]'],
84
+ 's': ['text-[16px]'],
85
+ 'xs': ['text-[16px]']
86
+ };
76
87
 
77
88
  var script = defineComponent({
78
89
  name: 'OrAvatar',
90
+ components: {
91
+ OrIcon: __vue_component__$1
92
+ },
79
93
  inheritAttrs: false,
80
94
  props: {
81
95
  src: {
@@ -86,6 +100,10 @@ var script = defineComponent({
86
100
  type: String,
87
101
  default: AvatarSize.M
88
102
  },
103
+ icon: {
104
+ type: String,
105
+ default: undefined
106
+ },
89
107
  color: {
90
108
  type: String,
91
109
  default: AvatarColor.auto,
@@ -101,9 +119,12 @@ var script = defineComponent({
101
119
  setup(props) {
102
120
  // Refs
103
121
  const root = ref();
122
+ const isIcon = computed(() => {
123
+ return !props.icon;
124
+ });
104
125
  // Styles
105
126
  const classAttribute = useClassAttribute();
106
- const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], classAttribute.value]);
127
+ const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size]), classAttribute.value]);
107
128
  const imageStyles = computed(() => [...AvatarImage]);
108
129
  // Effects
109
130
  watchPostEffect(() => {
@@ -136,13 +157,18 @@ var __vue_render__ = function () {
136
157
  ref: "root",
137
158
  class: _vm.rootStyles
138
159
  }, 'div', _vm.$attrs, false), [_vm._t("default", function () {
139
- return [_c('img', {
160
+ return [_vm.src ? _c('img', {
140
161
  class: _vm.imageStyles,
141
162
  attrs: {
142
163
  "src": _vm.src,
143
164
  "alt": ''
144
165
  }
145
- })];
166
+ }) : _vm.icon ? _c('or-icon', {
167
+ attrs: {
168
+ "icon": _vm.icon,
169
+ "size": "inherit"
170
+ }
171
+ }) : _vm._e()];
146
172
  })], 2);
147
173
  };
148
174
  var __vue_staticRenderFns__ = [];
@@ -29,8 +29,6 @@ const ButtonRoot = [
29
29
  'layout-inline-row justify-center',
30
30
  // Shape
31
31
  'rounded-md',
32
- // Sizing
33
- 'min-w-[96px]',
34
32
  // Interactivity
35
33
  'interactivity-auto',
36
34
  // Typography
@@ -49,9 +47,7 @@ const ButtonRootVariants = {
49
47
  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
50
48
  'link': [
51
49
  // Spacing
52
- 'gap-sm md:gap-xs',
53
- // Sizing
54
- 'min-w-[auto]']
50
+ 'gap-sm md:gap-xs']
55
51
  };
56
52
  const ButtonRootColors = {
57
53
  'primary-contained': [
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, ref, computed, watch } from 'vue-demi';
2
- import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-357e1e2c.js';
2
+ import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-357a5756.js';
3
3
  import { _ as __vue_component__$1 } from './OrOverlay-18ba2dc6.js';
4
4
  import { _ as __vue_component__$3 } from './OrInput-2f16a7ac.js';
5
5
  import { useMagicKeys, whenever } from '@vueuse/core';
@@ -1,11 +1,11 @@
1
1
  export { O as OR_AVATAR_SIZE, _ as OrAvatar } from '../OrAvatar-4824c57f.js';
2
- export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-0afdef36.js';
2
+ export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-3d155af3.js';
3
3
  export { _ as OrBottomSheetV3 } from '../OrBottomSheet-16c2e610.js';
4
4
  export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-2ca1c3d6.js';
5
5
  export { _ as OrButtonV2 } from '../OrButton-c4f9955b.js';
6
6
  export { _ as OrIconButton } from '../OrIconButton-014e86a7.js';
7
7
  export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from '../OrIconButton.vue_rollup-plugin-vue_script-9fb7b7ab.js';
8
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../OrButton-357e1e2c.js';
8
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../OrButton-357a5756.js';
9
9
  export { _ as OrCard } from '../OrCard-b7268256.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-f6b07557.js';
11
11
  export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-4f001551.js';
@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-41dd5f9b.js';
19
19
  export { _ as OrCollapse } from '../OrCollapse-4d892ca3.js';
20
20
  export { _ 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-75abefdd.js';
21
21
  export { _ as OrConfirm } from '../OrConfirm-d7112dd3.js';
22
- export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-ec7aef0e.js';
22
+ export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-b0b2e43c.js';
23
23
  export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-349df9b2.js';
24
24
  export { _ as OrError } from '../OrError-081130bb.js';
25
25
  export { _ as OrErrorTagV3 } from '../OrErrorTag-782dd714.js';
@@ -20,7 +20,7 @@ export declare const WithTextInSlot: StoryFn<import("vue").ComponentOptions<impo
20
20
  } | string[], {} & {}, {
21
21
  [x: number]: string;
22
22
  } | {}, true>)>;
23
- export declare const WithIconInSlot: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
23
+ export declare const WithIcon: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
24
24
  [x: string]: ((...args: any[]) => any) | null;
25
25
  } | string[], {} & {}, {
26
26
  [x: number]: string;
@@ -13,6 +13,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
13
13
  type: PropType<AvatarSize>;
14
14
  default: AvatarSize;
15
15
  };
16
+ icon: {
17
+ type: StringConstructor;
18
+ default: undefined;
19
+ };
16
20
  color: {
17
21
  type: PropType<AvatarColor>;
18
22
  default: AvatarColor;
@@ -32,6 +36,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
32
36
  type: PropType<AvatarSize>;
33
37
  default: AvatarSize;
34
38
  };
39
+ icon: {
40
+ type: StringConstructor;
41
+ default: undefined;
42
+ };
35
43
  color: {
36
44
  type: PropType<AvatarColor>;
37
45
  default: AvatarColor;
@@ -45,6 +53,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
45
53
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
46
54
  src: string;
47
55
  size: AvatarSize;
56
+ icon: string;
48
57
  color: AvatarColor;
49
58
  colorSalt: string;
50
59
  } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -54,11 +63,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
54
63
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
55
64
  src: string;
56
65
  size: AvatarSize;
66
+ icon: string;
57
67
  color: AvatarColor;
58
68
  colorSalt: string;
59
69
  } & {}, {
60
70
  src: string;
61
71
  size: AvatarSize;
72
+ icon: string;
62
73
  color: AvatarColor;
63
74
  colorSalt: string;
64
75
  }, true>);
@@ -1,6 +1,7 @@
1
- export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-0afdef36.js';
1
+ export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-3d155af3.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
5
5
  import '../../color-1f348774.js';
6
+ import '../../OrIcon-5e394c62.js';
6
7
  import '../../normalize-component-6e8e3d80.js';
@@ -2,7 +2,8 @@ export declare enum AvatarSize {
2
2
  XL = "xl",
3
3
  L = "l",
4
4
  M = "m",
5
- S = "s"
5
+ S = "s",
6
+ XS = "xs"
6
7
  }
7
8
  export declare enum AvatarColor {
8
9
  blue = "blue",
@@ -3,3 +3,5 @@ export declare const AvatarRoot: string[];
3
3
  export declare const AvatarImage: string[];
4
4
  export declare const AvatarRootSizes: Record<AvatarSize, string[]>;
5
5
  export declare const AvatarRootColors: Record<AvatarColor, string[]>;
6
+ export declare const AvatarRootAbbreviationSizes: Record<AvatarSize, string[]>;
7
+ export declare const AvatarRootIconSizes: Record<AvatarSize, string[]>;
@@ -1,4 +1,4 @@
1
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../../OrButton-357e1e2c.js';
1
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../../OrButton-357a5756.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
@@ -1,6 +1,6 @@
1
- export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-ec7aef0e.js';
1
+ export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-b0b2e43c.js';
2
2
  import 'vue-demi';
3
- import '../../OrButton-357e1e2c.js';
3
+ import '../../OrButton-357a5756.js';
4
4
  import '../../useClassAttribute-47fdb016.js';
5
5
  import '@vueuse/core';
6
6
  import '../../OrLoader-f857d55b.js';
@@ -1,11 +1,11 @@
1
1
  export { O as OR_AVATAR_SIZE, _ as OrAvatar } from './OrAvatar-4824c57f.js';
2
- export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-0afdef36.js';
2
+ export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from './OrAvatar-3d155af3.js';
3
3
  export { _ as OrBottomSheetV3 } from './OrBottomSheet-16c2e610.js';
4
4
  export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-2ca1c3d6.js';
5
5
  export { _ as OrButtonV2 } from './OrButton-c4f9955b.js';
6
6
  export { _ as OrIconButton } from './OrIconButton-014e86a7.js';
7
7
  export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from './OrIconButton.vue_rollup-plugin-vue_script-9fb7b7ab.js';
8
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-357e1e2c.js';
8
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-357a5756.js';
9
9
  export { _ as OrCard } from './OrCard-b7268256.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-f6b07557.js';
11
11
  export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-4f001551.js';
@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from './OrCode-41dd5f9b.js';
19
19
  export { _ as OrCollapse } from './OrCollapse-4d892ca3.js';
20
20
  export { _ 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-75abefdd.js';
21
21
  export { _ as OrConfirm } from './OrConfirm-d7112dd3.js';
22
- export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-ec7aef0e.js';
22
+ export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-b0b2e43c.js';
23
23
  export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-349df9b2.js';
24
24
  export { _ as OrError } from './OrError-081130bb.js';
25
25
  export { _ as OrErrorTagV3 } from './OrErrorTag-782dd714.js';
@@ -2,7 +2,8 @@ import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
2
2
  import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
3
  import '@vueuse/core';
4
4
  import { h as hslToColorString, g as generateHslFromString } from './color-1f348774.js';
5
- import { openBlock, createElementBlock, mergeProps, renderSlot, createElementVNode, normalizeClass } from 'vue';
5
+ import { s as script$1 } from './OrIcon-b195169c.js';
6
+ import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, normalizeClass, createBlock, createCommentVNode } from 'vue';
6
7
 
7
8
  var AvatarSize;
8
9
  (function (AvatarSize) {
@@ -10,6 +11,7 @@ var AvatarSize;
10
11
  AvatarSize["L"] = "l";
11
12
  AvatarSize["M"] = "m";
12
13
  AvatarSize["S"] = "s";
14
+ AvatarSize["XS"] = "xs";
13
15
  })(AvatarSize || (AvatarSize = {}));
14
16
  var AvatarColor;
15
17
  (function (AvatarColor) {
@@ -34,24 +36,19 @@ const AvatarImage = [
34
36
  const AvatarRootSizes = {
35
37
  'xl': [
36
38
  // Box
37
- 'w-[80px]', 'h-[80px]',
38
- // Typography
39
- 'text-[32px]'],
39
+ 'w-[80px]', 'h-[80px]'],
40
40
  'l': [
41
41
  // Box
42
- 'w-[64px]', 'h-[64px]',
43
- // Typography
44
- 'text-[24px]'],
42
+ 'w-[64px]', 'h-[64px]'],
45
43
  'm': [
46
44
  // Box
47
- 'w-[40px]', 'h-[40px]',
48
- // Typography
49
- 'text-[16px]'],
45
+ 'w-[40px]', 'h-[40px]'],
50
46
  's': [
51
47
  // Box
52
- 'w-[32px]', 'h-[32px]',
53
- // Typography
54
- 'text-[16px]']
48
+ 'w-[32px]', 'h-[32px]'],
49
+ 'xs': [
50
+ // Box
51
+ 'w-[24px]', 'h-[24px]']
55
52
  };
56
53
  const AvatarRootColors = {
57
54
  [AvatarColor.blue]: [
@@ -73,9 +70,26 @@ const AvatarRootColors = {
73
70
  // Theme
74
71
  'text-white', 'dark:text-overlay-dark']
75
72
  };
73
+ const AvatarRootAbbreviationSizes = {
74
+ 'xl': ['typography-headline-1'],
75
+ 'l': ['typography-headline-1'],
76
+ 'm': ['typography-body-1-bold'],
77
+ 's': ['typography-body-1-bold'],
78
+ 'xs': ['typography-caption-semibold']
79
+ };
80
+ const AvatarRootIconSizes = {
81
+ 'xl': ['text-[40px]'],
82
+ 'l': ['text-[32px]'],
83
+ 'm': ['text-[20px]'],
84
+ 's': ['text-[16px]'],
85
+ 'xs': ['text-[16px]']
86
+ };
76
87
 
77
88
  var script = defineComponent({
78
89
  name: 'OrAvatar',
90
+ components: {
91
+ OrIcon: script$1
92
+ },
79
93
  inheritAttrs: false,
80
94
  props: {
81
95
  src: {
@@ -86,6 +100,10 @@ var script = defineComponent({
86
100
  type: String,
87
101
  default: AvatarSize.M
88
102
  },
103
+ icon: {
104
+ type: String,
105
+ default: undefined
106
+ },
89
107
  color: {
90
108
  type: String,
91
109
  default: AvatarColor.auto,
@@ -101,9 +119,12 @@ var script = defineComponent({
101
119
  setup(props) {
102
120
  // Refs
103
121
  const root = ref();
122
+ const isIcon = computed(() => {
123
+ return !props.icon;
124
+ });
104
125
  // Styles
105
126
  const classAttribute = useClassAttribute();
106
- const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], classAttribute.value]);
127
+ const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size]), classAttribute.value]);
107
128
  const imageStyles = computed(() => [...AvatarImage]);
108
129
  // Effects
109
130
  watchPostEffect(() => {
@@ -126,15 +147,21 @@ var script = defineComponent({
126
147
 
127
148
  const _hoisted_1 = ["src"];
128
149
  function render(_ctx, _cache, $props, $setup, $data, $options) {
150
+ const _component_or_icon = resolveComponent("or-icon");
129
151
  return openBlock(), createElementBlock("div", mergeProps({
130
152
  ref: "root"
131
153
  }, _ctx.$attrs, {
132
154
  class: _ctx.rootStyles
133
- }), [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("img", {
155
+ }), [renderSlot(_ctx.$slots, "default", {}, () => [_ctx.src ? (openBlock(), createElementBlock("img", {
156
+ key: 0,
134
157
  class: normalizeClass(_ctx.imageStyles),
135
158
  src: _ctx.src,
136
159
  alt: ''
137
- }, null, 10 /* CLASS, PROPS */, _hoisted_1)])], 16 /* FULL_PROPS */);
160
+ }, null, 10 /* CLASS, PROPS */, _hoisted_1)) : _ctx.icon ? (openBlock(), createBlock(_component_or_icon, {
161
+ key: 1,
162
+ icon: _ctx.icon,
163
+ size: "inherit"
164
+ }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)])], 16 /* FULL_PROPS */);
138
165
  }
139
166
 
140
167
  script.render = render;
@@ -29,8 +29,6 @@ const ButtonRoot = [
29
29
  'layout-inline-row justify-center',
30
30
  // Shape
31
31
  'rounded-md',
32
- // Sizing
33
- 'min-w-[96px]',
34
32
  // Interactivity
35
33
  'interactivity-auto',
36
34
  // Typography
@@ -49,9 +47,7 @@ const ButtonRootVariants = {
49
47
  'px-md md:px-md', 'py-sm+ md:py-sm', 'gap-sm+ md:gap-sm'],
50
48
  'link': [
51
49
  // Spacing
52
- 'gap-sm md:gap-xs',
53
- // Sizing
54
- 'min-w-[auto]']
50
+ 'gap-sm md:gap-xs']
55
51
  };
56
52
  const ButtonRootColors = {
57
53
  'primary-contained': [
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, ref, computed, watch } from 'vue-demi';
2
- import { s as script$2, a as ButtonColor } from './OrButton-bb6bf8a9.js';
2
+ import { s as script$2, a as ButtonColor } from './OrButton-f4b9ee51.js';
3
3
  import { s as script$1 } from './OrOverlay-738a44d5.js';
4
4
  import { s as script$3 } from './OrInput-41691fb3.js';
5
5
  import { useMagicKeys, whenever } from '@vueuse/core';
@@ -1,9 +1,9 @@
1
1
  export { O as OR_AVATAR_SIZE, s as OrAvatar } from '../OrAvatar-2808a314.js';
2
- export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../OrAvatar-ef88d31c.js';
2
+ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../OrAvatar-53a4429d.js';
3
3
  export { s as OrBottomSheetV3 } from '../OrBottomSheet-62817aec.js';
4
4
  export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-fca9019a.js';
5
5
  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';
6
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-bb6bf8a9.js';
6
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-f4b9ee51.js';
7
7
  export { s as OrCard } from '../OrCard-e3a5aea4.js';
8
8
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-a5e326ef.js';
9
9
  export { C as CardCollectionView, s as OrCardCollectionV3 } from '../OrCardCollection-5a0febaf.js';
@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from '../OrCode-ee19a5e6.js';
16
16
  export { s as OrCollapse } from '../OrCollapse-445141ab.js';
17
17
  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';
18
18
  export { s as OrConfirm } from '../OrConfirm-f39bd784.js';
19
- export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-5d56cbd3.js';
19
+ export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-906427ef.js';
20
20
  export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-f2e08564.js';
21
21
  export { s as OrError } from '../OrError-f90296db.js';
22
22
  export { s as OrErrorTagV3 } from '../OrErrorTag-98252eef.js';
@@ -20,7 +20,7 @@ export declare const WithTextInSlot: StoryFn<import("vue").ComponentOptions<impo
20
20
  } | string[], {} & {}, {
21
21
  [x: number]: string;
22
22
  } | {}, true>)>;
23
- export declare const WithIconInSlot: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
23
+ export declare const WithIcon: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
24
24
  [x: string]: ((...args: any[]) => any) | null;
25
25
  } | string[], {} & {}, {
26
26
  [x: number]: string;
@@ -13,6 +13,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
13
13
  type: PropType<AvatarSize>;
14
14
  default: AvatarSize;
15
15
  };
16
+ icon: {
17
+ type: StringConstructor;
18
+ default: undefined;
19
+ };
16
20
  color: {
17
21
  type: PropType<AvatarColor>;
18
22
  default: AvatarColor;
@@ -32,6 +36,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
32
36
  type: PropType<AvatarSize>;
33
37
  default: AvatarSize;
34
38
  };
39
+ icon: {
40
+ type: StringConstructor;
41
+ default: undefined;
42
+ };
35
43
  color: {
36
44
  type: PropType<AvatarColor>;
37
45
  default: AvatarColor;
@@ -45,6 +53,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
45
53
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
46
54
  src: string;
47
55
  size: AvatarSize;
56
+ icon: string;
48
57
  color: AvatarColor;
49
58
  colorSalt: string;
50
59
  } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -54,11 +63,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
54
63
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
55
64
  src: string;
56
65
  size: AvatarSize;
66
+ icon: string;
57
67
  color: AvatarColor;
58
68
  colorSalt: string;
59
69
  } & {}, {
60
70
  src: string;
61
71
  size: AvatarSize;
72
+ icon: string;
62
73
  color: AvatarColor;
63
74
  colorSalt: string;
64
75
  }, true>);
@@ -1,6 +1,7 @@
1
- export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../../OrAvatar-ef88d31c.js';
1
+ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../../OrAvatar-53a4429d.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
5
5
  import '../../color-1f348774.js';
6
+ import '../../OrIcon-b195169c.js';
6
7
  import 'vue';
@@ -2,7 +2,8 @@ export declare enum AvatarSize {
2
2
  XL = "xl",
3
3
  L = "l",
4
4
  M = "m",
5
- S = "s"
5
+ S = "s",
6
+ XS = "xs"
6
7
  }
7
8
  export declare enum AvatarColor {
8
9
  blue = "blue",
@@ -3,3 +3,5 @@ export declare const AvatarRoot: string[];
3
3
  export declare const AvatarImage: string[];
4
4
  export declare const AvatarRootSizes: Record<AvatarSize, string[]>;
5
5
  export declare const AvatarRootColors: Record<AvatarColor, string[]>;
6
+ export declare const AvatarRootAbbreviationSizes: Record<AvatarSize, string[]>;
7
+ export declare const AvatarRootIconSizes: Record<AvatarSize, string[]>;
@@ -1,4 +1,4 @@
1
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../../OrButton-bb6bf8a9.js';
1
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../../OrButton-f4b9ee51.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
@@ -1,6 +1,6 @@
1
- export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-5d56cbd3.js';
1
+ export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-906427ef.js';
2
2
  import 'vue-demi';
3
- import '../../OrButton-bb6bf8a9.js';
3
+ import '../../OrButton-f4b9ee51.js';
4
4
  import '../../useClassAttribute-47fdb016.js';
5
5
  import '@vueuse/core';
6
6
  import '../../OrLoader-b3cf4231.js';
@@ -1,9 +1,9 @@
1
1
  export { O as OR_AVATAR_SIZE, s as OrAvatar } from './OrAvatar-2808a314.js';
2
- export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-ef88d31c.js';
2
+ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-53a4429d.js';
3
3
  export { s as OrBottomSheetV3 } from './OrBottomSheet-62817aec.js';
4
4
  export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-fca9019a.js';
5
5
  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';
6
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-bb6bf8a9.js';
6
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-f4b9ee51.js';
7
7
  export { s as OrCard } from './OrCard-e3a5aea4.js';
8
8
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a5e326ef.js';
9
9
  export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-5a0febaf.js';
@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-ee19a5e6.js';
16
16
  export { s as OrCollapse } from './OrCollapse-445141ab.js';
17
17
  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';
18
18
  export { s as OrConfirm } from './OrConfirm-f39bd784.js';
19
- export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-5d56cbd3.js';
19
+ export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-906427ef.js';
20
20
  export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-f2e08564.js';
21
21
  export { s as OrError } from './OrError-f90296db.js';
22
22
  export { s as OrErrorTagV3 } from './OrErrorTag-98252eef.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/ui-components",
3
- "version": "2.69.2-beta.2136.0",
3
+ "version": "2.69.2",
4
4
  "description": "Vue components library for v2/3",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/auto/index.js",
@@ -123,5 +123,6 @@
123
123
  "default": "./dist/bundled/v3/components/*/index.js"
124
124
  },
125
125
  "./package.json": "./package.json"
126
- }
126
+ },
127
+ "gitHead": "8994e9416726de3ed0135efbbf1ad8643e9af5a1"
127
128
  }