@onereach/ui-components 2.74.7 → 2.74.8-beta.2332.0

package/dist/esm/v3/components/index.js

@@ -6,17 +6,17 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-eab948fb.js';
 export { s as OrCard } from '../OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-e6a77cab.js';
-export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-3374f65b.js';
+export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-3c92ed8c.js';
 export { s as OrCardV3 } from '../OrCard-cd6af82e.js';
 export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem-9071b02e.js';
 export { s as OrCheckbox } from '../OrCheckbox-d402975a.js';
-export { s as OrCheckboxV3 } from '../OrCheckbox-16c1e2f4.js';
+export { s as OrCheckboxV3 } from '../OrCheckbox-a8388252.js';
 export { s as OrChip, a as OrChips } from '../OrChips-39d4be17.js';
 export { s as OrCode, O as OrCodeLanguages } from '../OrCode-9d6b10da.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-53890a6e.js';
 export { s as OrConfirm } from '../OrConfirm-02ae9c60.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-dbf267cd.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-0b2f052d.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-63f22d1b.js';
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-0025b17c.js';
@@ -34,8 +34,8 @@ export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3
 export { I as InlineInputType, s as OrInlineInputV3 } from '../OrInlineInput-6c4fe7ff.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from '../OrInlineTextEdit-941f784a.js';
 export { s as OrInlineTextareaV3 } from '../OrInlineTextarea-3cd956d9.js';
-export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from '../OrInputBox-2467d7e4.js';
-export { I as InputType, s as OrInputV3 } from '../OrInput-0c07888f.js';
+export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from '../OrInputBox-e0a2492e.js';
+export { I as InputType, s as OrInputV3 } from '../OrInput-650339f2.js';
 export { s as OrInput } from '../OrInput-81125804.js';
 export { s as OrLabel } from '../OrLabel-876f8729.js';
 export { L as LabelVariant, s as OrLabelV3 } from '../OrLabel-f700f9fb.js';
@@ -63,10 +63,10 @@ export { s as OrRadio } from '../OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from '../OrRadio-97fb105f.js';
 export { s as OrSearch } from '../OrSearch-06c13e14.js';
-export { s as OrSearchV3 } from '../OrSearch-e1cc559b.js';
+export { s as OrSearchV3 } from '../OrSearch-05669128.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-880b4911.js';
 export { s as OrSelect } from '../OrSelect-5c6f0ff8.js';
-export { s as OrSelectV3 } from '../OrSelect-b06bf2d8.js';
+export { s as OrSelectV3 } from '../OrSelect-3a88b14b.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from '../OrSidebar-0a32cc49.js';
 export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-647d2c50.js';
@@ -83,12 +83,12 @@ export { s as OrTabV3 } from '../OrTab-d3785ea4.js';
 export { s as OrTabs } from '../OrTabs-d3812c11.js';
 export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-9949f87b.js';
 export { s as OrTag } from '../OrTag-909a5dc9.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-f66c6142.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-b58a561b.js';
 export { s as OrTeleport } from '../OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from '../OrText-6b4f7cd1.js';
 export { s as OrTextarea } from '../OrTextarea-1f5c3be1.js';
-export { s as OrTextareaV3 } from '../OrTextarea-42d21f77.js';
+export { s as OrTextareaV3 } from '../OrTextarea-162d56d8.js';
 export { s as OrTextbox, T as TextboxTypes } from '../OrTextbox-2a3c67fb.js';
 export { s as OrToast, a as OrToastContainer } from '../OrToastContainer-a3da18a0.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from '../useToast-4fbe0e5a.js';

package/dist/esm/v3/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-3374f65b.js';
+export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-3c92ed8c.js';
 import 'vue-demi';
 import '../../OrButton-eab948fb.js';
 import '../../OrLoader-3a918ce9.js';
@@ -16,12 +16,12 @@ import '../../OrOverlay-55f6cf9c.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../OrMenuItem-de91aded.js';
 import '../../OrMenu-345930d5.js';
-import '../../OrSearch-e1cc559b.js';
-import '../../OrInput-0c07888f.js';
+import '../../OrSearch-05669128.js';
+import '../../OrInput-650339f2.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrError-19198748.js';
 import '../../OrHint-6863124f.js';
-import '../../OrInputBox-2467d7e4.js';
+import '../../OrInputBox-e0a2492e.js';
 import '../../OrLabel-f700f9fb.js';
 import '../../style-inject.es-4c6f2515.js';

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

@@ -1,4 +1,4 @@
-export { s as OrCheckboxV3 } from '../../OrCheckbox-16c1e2f4.js';
+export { s as OrCheckboxV3 } from '../../OrCheckbox-a8388252.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';

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

@@ -1,11 +1,11 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-dbf267cd.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-0b2f052d.js';
 import '@vueuse/core';
 import '@vueuse/math';
 import 'vue-demi';
 import '../../OrButton-eab948fb.js';
 import '../../OrLoader-3a918ce9.js';
 import 'vue';
-import '../../OrInput-0c07888f.js';
+import '../../OrInput-650339f2.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../useValidationAttributes-d1abbe34.js';
@@ -20,6 +20,6 @@ import '../../useElevation-92fce12c.js';
 import '../../OrBottomSheet-9c291056.js';
 import '../../OrOverlay-55f6cf9c.js';
 import '../../OrTeleport.vue3-8099178c.js';
-import '../../OrInputBox-2467d7e4.js';
+import '../../OrInputBox-e0a2492e.js';
 import '../../OrLabel-f700f9fb.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/components/or-input-box-v3/index.js

@@ -1,3 +1,3 @@
-export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from '../../OrInputBox-2467d7e4.js';
+export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from '../../OrInputBox-e0a2492e.js';
 import 'vue-demi';
 import 'vue';

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

@@ -1,5 +1,5 @@
-export { I as InputType, s as OrInputV3 } from '../../OrInput-0c07888f.js';
-export { a as InputSize } from '../../OrInputBox-2467d7e4.js';
+export { I as InputType, s as OrInputV3 } from '../../OrInput-650339f2.js';
+export { a as InputSize } from '../../OrInputBox-e0a2492e.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';

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

@@ -1,8 +1,8 @@
-export { s as OrSearchV3 } from '../../OrSearch-e1cc559b.js';
-export { a as SearchSize } from '../../OrInputBox-2467d7e4.js';
+export { s as OrSearchV3 } from '../../OrSearch-05669128.js';
+export { a as SearchSize } from '../../OrInputBox-e0a2492e.js';
 import '@vueuse/core';
 import 'vue-demi';
-import '../../OrInput-0c07888f.js';
+import '../../OrInput-650339f2.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../useValidationAttributes-d1abbe34.js';

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

@@ -1,10 +1,10 @@
-export { s as OrSelectV3 } from '../../OrSelect-b06bf2d8.js';
-export { a as SelectSize } from '../../OrInputBox-2467d7e4.js';
+export { s as OrSelectV3 } from '../../OrSelect-3a88b14b.js';
+export { a as SelectSize } from '../../OrInputBox-e0a2492e.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';
 import '../../useOverflow-af6161c8.js';
 import '@vueuse/core';
-import '../../OrCheckbox-16c1e2f4.js';
+import '../../OrCheckbox-a8388252.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../OrLabel-f700f9fb.js';
 import 'vue';
@@ -13,7 +13,7 @@ import '../../OrError-19198748.js';
 import '../../OrExpansionPanel-541cc4c1.js';
 import '../../OrIcon-ea40e58c.js';
 import '../../OrHint-6863124f.js';
-import '../../OrInput-0c07888f.js';
+import '../../OrInput-650339f2.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrIconButton-2a9a6627.js';
@@ -26,4 +26,4 @@ import '../../OrOverlay-55f6cf9c.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../OrLoader-3a918ce9.js';
 import '../../OrMenuItem-de91aded.js';
-import '../../OrTag-f66c6142.js';
+import '../../OrTag-b58a561b.js';

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

@@ -1,4 +1,4 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-f66c6142.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-b58a561b.js';
 import 'vue-demi';
 import '../../OrIconButton-2a9a6627.js';
 import '../../OrIcon-ea40e58c.js';

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

@@ -1,5 +1,5 @@
-export { s as OrTextareaV3 } from '../../OrTextarea-42d21f77.js';
-export { a as TextareaSize } from '../../OrInputBox-2467d7e4.js';
+export { s as OrTextareaV3 } from '../../OrTextarea-162d56d8.js';
+export { a as TextareaSize } from '../../OrInputBox-e0a2492e.js';
 import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -6,17 +6,17 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-eab948fb.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-e6a77cab.js';
-export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-3374f65b.js';
+export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-3c92ed8c.js';
 export { s as OrCardV3 } from './OrCard-cd6af82e.js';
 export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem-9071b02e.js';
 export { s as OrCheckbox } from './OrCheckbox-d402975a.js';
-export { s as OrCheckboxV3 } from './OrCheckbox-16c1e2f4.js';
+export { s as OrCheckboxV3 } from './OrCheckbox-a8388252.js';
 export { s as OrChip, a as OrChips } from './OrChips-39d4be17.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-9d6b10da.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-53890a6e.js';
 export { s as OrConfirm } from './OrConfirm-02ae9c60.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-dbf267cd.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-0b2f052d.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-63f22d1b.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-0025b17c.js';
@@ -34,8 +34,8 @@ export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3
 export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-6c4fe7ff.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-941f784a.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-3cd956d9.js';
-export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-2467d7e4.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-0c07888f.js';
+export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-e0a2492e.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-650339f2.js';
 export { s as OrInput } from './OrInput-81125804.js';
 export { s as OrLabel } from './OrLabel-876f8729.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-f700f9fb.js';
@@ -63,10 +63,10 @@ export { s as OrRadio } from './OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-97fb105f.js';
 export { s as OrSearch } from './OrSearch-06c13e14.js';
-export { s as OrSearchV3 } from './OrSearch-e1cc559b.js';
+export { s as OrSearchV3 } from './OrSearch-05669128.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-880b4911.js';
 export { s as OrSelect } from './OrSelect-5c6f0ff8.js';
-export { s as OrSelectV3 } from './OrSelect-b06bf2d8.js';
+export { s as OrSelectV3 } from './OrSelect-3a88b14b.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { s as OrSidebarV3 } from './OrSidebar-0a32cc49.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-647d2c50.js';
@@ -83,12 +83,12 @@ export { s as OrTabV3 } from './OrTab-d3785ea4.js';
 export { s as OrTabs } from './OrTabs-d3812c11.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-9949f87b.js';
 export { s as OrTag } from './OrTag-909a5dc9.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-f66c6142.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-b58a561b.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-6b4f7cd1.js';
 export { s as OrTextarea } from './OrTextarea-1f5c3be1.js';
-export { s as OrTextareaV3 } from './OrTextarea-42d21f77.js';
+export { s as OrTextareaV3 } from './OrTextarea-162d56d8.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-2a3c67fb.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-a3da18a0.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.74.7",
+  "version": "2.74.8-beta.2332.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,6 +124,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "b344373f5540271f4452361508dac013a569910f"
+  }
 }

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

@@ -9,6 +9,7 @@ export const CheckboxRoot: string[] = [
 export const CheckboxControl: string[] = [
   // Layout
   'layout-row justify-center',
+  'shrink-0',
 
   // Box
   'w-md+ md:w-md',

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

@@ -12,6 +12,10 @@ export const InputBoxRoot: string[] = [
 
   // Theme (children)
   'children:outline-none',
+
+  //Typography
+  'truncate',
+  'min-w-0',
 ];
 
 export const InputBoxRootVariants: Record<InputBoxVariant, string[]> = {

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -330,3 +330,22 @@ WithGroups.args = {
   // Props
   groupByFunction: (option: SelectOption) => (option.value as string).length,
 };
+
+export const WithLongStrings = Template.bind({});
+
+WithLongStrings.args = {
+  ...Default.args,
+
+  options: Array.from<string, SelectOption>([
+    'AlfaAlfaAlfaAlfaAlfaA lfaAlfaAlfaAlfaAlfaAlfaAlf  lfaAlfaAlfaAlfaAlfaAlfaAlf aAlfaAlfaAlfaAlfaAlfaAlfaAlfaAlfaAlfaAlfa',
+    'Bravo',
+    'Charlie',
+    'Delta',
+    'Echo',
+  ], (item) => ({
+    value: item.toLowerCase().replace(/\s/g, ''),
+    label: item,
+  })),
+
+  placeholder: 'Wery Wery Wery WeryWeryWeryWery Wery Wery long placeholder',
+};

package/src/components/or-select-v3/OrSelect.vue

@@ -66,7 +66,9 @@
               name="valueTemplate"
               :model="proxyModelValue"
             >
-              {{ selection.label }}
+              <span class="truncate">
+                {{ selection.label }}
+              </span>
             </slot>
           </template>
 

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

@@ -27,6 +27,9 @@ export const SelectPlaceholder: string[] = [
 
   // Interactivity
   'select-none',
+
+  // Typography
+  'truncate',
 ];
 
 export const SelectDropdown: string[] = [

package/src/components/or-tag-v3/OrTag.vue

@@ -8,8 +8,9 @@
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
   >
-    <slot />
-
+    <div class="truncate">
+      <slot />
+    </div>
     <template v-if="variant === 'reset'">
       <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
         <OrIconButton

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

@@ -5,7 +5,7 @@ export const TagRoot: string[] = [
   'layout-inline-row',
 
   // Box
-  'max-w-fit',
+  'max-w-full',
 
   // Shape
   'rounded-full',