@onereach/ui-components 4.4.0-beta.2691.0 → 4.4.0

package/dist/esm/v3/components/or-tooltip-v3/OrTooltip.vue.d.ts

@@ -1,18 +1,6 @@
 import { PropType } from 'vue-demi';
 import { TooltipPlacement } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    popoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    open: () => void;
-    close: () => void;
-}> & import("@vue/composition-api").Data, {}, {}, {
+declare const _default: import("vue-demi").DefineComponent<{
     text: {
         type: StringConstructor;
         default: undefined;
@@ -21,7 +9,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<TooltipPlacement>;
         default: TooltipPlacement;
     };
-}, import("@vue/composition-api").ExtractPropTypes<{
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    popover: import("vue-demi").Ref<any>;
+    popoverRoot: import("vue-demi").ComputedRef<any>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    bodyStyles: import("vue-demi").ComputedRef<string[]>;
+    open: () => void;
+    close: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:state"[], "update:state", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: undefined;
@@ -30,30 +26,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<TooltipPlacement>;
         default: TooltipPlacement;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    text: string;
-    placement: TooltipPlacement;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-        [x: string]: ((...args: any[]) => any) | null;
-    } | string[], {} & {}, {
-        [x: number]: string;
-    } | {}, true> | undefined>;
-    popoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    bodyStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    open: () => void;
-    close: () => void;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    text: string;
-    placement: TooltipPlacement;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}>> & {
+    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
 }, {
     text: string;
     placement: TooltipPlacement;
-}, true>);
+}>;
 export default _default;

package/dist/esm/v3/directives/dropdown-close.d.ts

@@ -1,4 +1,6 @@
 import { DirectiveHook } from 'vue-demi';
 export declare const DropdownClose: {
-    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode<any, any, {
+        [key: string]: any;
+    }> | null, any>;
 };

package/dist/esm/v3/directives/dropdown-open.d.ts

@@ -1,4 +1,6 @@
 import { DirectiveHook } from 'vue-demi';
 export declare const DropdownOpen: {
-    [x: string]: DirectiveHook<any, import("vue-demi").VNode | null, any>;
+    [x: string]: DirectiveHook<any, import("vue-demi").VNode<any, any, {
+        [key: string]: any;
+    }> | null, any>;
 };

package/dist/esm/v3/hooks/useResponsive/useResponsive.d.ts

@@ -1,5 +1,5 @@
 declare function useResponsive(): {
-    isMobile: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("vue-demi").Ref<boolean>;
+    isDesktop: import("vue-demi").Ref<boolean>;
 };
 export default useResponsive;

package/dist/esm/v3/index.js

@@ -13,12 +13,14 @@ export { s as OrCarousel } from './OrCarousel-40f069d5.js';
 export { s as OrCarouselItem } from './OrCarouselItem-8c7ccd0f.js';
 export { s as OrCheckbox } from './OrCheckbox-ab457011.js';
 export { s as OrCheckboxV3 } from './OrCheckbox-56d7b6eb.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-c41a99ba.js';
+export { s as OrCheckboxTreeV3, f as flattenDeep } from './OrCheckboxTree-fa6288af.js';
 export { s as OrChip } from './OrChip-1b479371.js';
 export { s as OrChips } from './OrChips-544a35b3.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-48281fc0.js';
 export { s as OrCollapse } from './OrCollapse-2b31de04.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-ffaaf14f.js';
-export { s as OrConfirm } from './OrConfirm-1a94bdea.js';
+export { s as OrConfirm } from './OrConfirm-410da5b4.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-017b80b5.js';
 export { s as OrDatePickerV3 } from './OrDatePicker-09a6c970.js';
 export { I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-ba40bbdf.js';
@@ -28,7 +30,7 @@ export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
 export { s as OrErrorV3 } from './OrError-c01d0c29.js';
-export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-99ca7ed7.js';
+export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-c016d8fa.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-83cd7ed7.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-291c7653.js';
 export { s as OrHint } from './OrHint-1414c530.js';
@@ -38,7 +40,7 @@ export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-55d51a
 export { I as IconButtonSize, I as IconSize, a as IconVariant, s as OrIconV3 } from './OrIcon-62793572.js';
 export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3 } from './OrInlineInputBox-01fb2cb2.js';
 export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-9ed7d570.js';
-export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-4f4ecba4.js';
+export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-42d59fb9.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-f30d0580.js';
 export { s as OrInput } from './OrInput-53a32706.js';
 export { I as InputType, s as OrInputV3 } from './OrInput-de491b63.js';
@@ -66,14 +68,15 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-33cf7445.js';
 export { s as OrRadio } from './OrRadio-dfd0f0c9.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-5d1fe6fd.js';
 export { s as OrRadioV3 } from './OrRadio-a6c88f29.js';
 export { s as OrSearch } from './OrSearch-f4ad73db.js';
 export { s as OrSearchV3 } from './OrSearch-e15c7fd2.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-359fbf3a.js';
 export { s as OrSelect } from './OrSelect-6ff34196.js';
-export { s as OrSelectV3 } from './OrSelect-3dbddc6b.js';
+export { s as OrSelectV3 } from './OrSelect-046e8e36.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
-export { s as OrSidebarV3 } from './OrSidebar-bfd19c4c.js';
+export { s as OrSidebarV3 } from './OrSidebar-3f2502fb.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-63914891.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-1aa63444.js';
 export { s as OrSkeletonRect } from './OrSkeletonRect-813bc73a.js';
@@ -94,6 +97,7 @@ export { s as OrTabs } from './OrTabs-35a376a3.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-3d9c1a8b.js';
 export { s as OrTag } from './OrTag-2d9eacf8.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-6116c6e3.js';
+export { s as OrTagsV3 } from './OrTags-a082de82.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-d54c951d.js';
@@ -108,7 +112,6 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-a1332
 export { s as OrTooltip } from './OrTooltip-89ce98e8.js';
 export { s as OrTooltipContent } from './OrTooltipContent-37a5f562.js';
 export { s as OrTooltipV3 } from './OrTooltip-4bb0054a.js';
-export { s as OrRichTextEditorV3 } from './OrRichTextEditor-bdee1f41.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-b5a49746.js';
@@ -117,7 +120,6 @@ export { u as useResponsive } from './useResponsive-a02e95b7.js';
 export { u as useToggle } from './useToggle-c04fc920.js';
 export { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { R as RX_ABBREVIATION_FROM_STRING } from './color-40b7fe6b.js';
-export { f as flattenDeep } from './flattenDeep-fe0af413.js';
 import 'vue-demi';
 import 'lodash';
 import 'vue';
@@ -125,6 +127,7 @@ import './style-inject.es-4c6f2515.js';
 import '@vueuse/core';
 import '@splidejs/splide';
 import '@splidejs/splide/dist/css/splide.min.css';
+import './OrFormGroup-9f581536.js';
 import '@codemirror/state';
 import '@codemirror/view';
 import '@codemirror/commands';
@@ -147,29 +150,6 @@ import 'uuid';
 import 'sortablejs';
 import '@vueuse/integrations/useFocusTrap';
 import './styles-ed564e39.js';
-import 'prosemirror-markdown';
-import 'prosemirror-model';
-import 'marked';
-import '@tiptap/extension-paragraph';
-import '@tiptap/extension-bullet-list';
-import '@tiptap/extension-list-item';
-import '@tiptap/extension-ordered-list';
-import '@tiptap/extension-strike';
-import '@tiptap/extension-italic';
-import '@tiptap/extension-hard-break';
-import '@tiptap/extension-bold';
-import '@tiptap/extension-code-block';
-import '@tiptap/extension-blockquote';
-import '@tiptap/extension-link';
-import '@tiptap/extension-highlight';
-import '@tiptap/extension-underline';
-import '@tiptap/core';
-import '@tiptap/starter-kit';
-import '@tiptap/extension-heading';
-import '@tiptap/extension-placeholder';
-import './codemirrorView-be2c7423.js';
-import 'prosemirror-state';
-import 'prosemirror-commands';
 
 function getAbbreviation(text, limit) {
   var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.4.0-beta.2691.0",
+  "version": "4.4.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,25 +38,8 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.39.4-beta.2691.0",
+    "@onereach/styles": "^2.39.3",
     "@splidejs/splide": "4.0.6",
-    "@tiptap/core": "2.0.2",
-    "@tiptap/extension-blockquote": "2.0.2",
-    "@tiptap/extension-bold": "2.0.2",
-    "@tiptap/extension-bullet-list": "2.0.2",
-    "@tiptap/extension-code-block": "2.0.2",
-    "@tiptap/extension-hard-break": "2.0.2",
-    "@tiptap/extension-heading": "2.0.2",
-    "@tiptap/extension-highlight": "2.0.2",
-    "@tiptap/extension-italic": "2.0.2",
-    "@tiptap/extension-link": "2.0.2",
-    "@tiptap/extension-list-item": "2.0.2",
-    "@tiptap/extension-ordered-list": "2.0.2",
-    "@tiptap/extension-paragraph": "2.0.2",
-    "@tiptap/extension-placeholder": "2.0.2",
-    "@tiptap/extension-strike": "2.0.2",
-    "@tiptap/extension-underline": "2.0.2",
-    "@tiptap/starter-kit": "2.0.2",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
@@ -65,11 +48,8 @@
     "@vueuse/math": "9.5.0",
     "codemirror": "6.0.1",
     "focus-trap": "7.2.0",
-    "marked": "4.3.0",
-    "prosemirror-markdown": "^1.10.1",
     "sortablejs": "1.14.0",
-    "uuid": "8.3.2",
-    "vue-demi": "0.13.11"
+    "uuid": "8.3.2"
   },
   "devDependencies": {
     "@babel/preset-env": "7.18.10",
@@ -81,7 +61,6 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/vue3": "6.5.16",
     "@types/faker": "5.5.9",
-    "@types/marked": "4.0.8",
     "@vue/composition-api": "1.7.1",
     "faker": "5.5.3",
     "glob": "9.3.0",
@@ -174,5 +153,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "c6f802ac31216b1058a29daebdeca2c2b111eadb"
 }

package/src/components/index.ts

@@ -11,6 +11,8 @@ export * from './or-card-v3';
 export * from './or-carousel';
 export * from './or-checkbox';
 export * from './or-checkbox-v3';
+export * from './or-checkbox-group-v3';
+export * from './or-checkbox-tree-v3';
 export * from './or-chips';
 export * from './or-code';
 export * from './or-collapse';
@@ -64,6 +66,7 @@ export * from './or-progress';
 export * from './or-progress-v3';
 export * from './or-radio';
 export * from './or-radio-group';
+export * from './or-radio-group-v3';
 export * from './or-radio-v3';
 export * from './or-search';
 export * from './or-search-v3';
@@ -86,6 +89,7 @@ export * from './or-tabs';
 export * from './or-tabs-v3';
 export * from './or-tag';
 export * from './or-tag-v3';
+export * from './or-tags-v3';
 export * from './or-teleport';
 export * from './or-teleport-v3';
 export * from './or-text-v3';
@@ -97,4 +101,3 @@ export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';
 export * from './or-tooltip-v3';
-export * from './or-rich-text-editor-v3';

package/src/components/or-confirm/OrConfirm.vue

@@ -214,7 +214,7 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   gap: $s-4;
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 .confirmation-textbox {

package/src/components/or-expansion-panel-v3/styles.ts

@@ -6,7 +6,10 @@ export const ExpansionPanelRoot: string[] = [
 ];
 
 export const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]> = {
-  'default': [],
+  'default': [
+    // Spacing
+    'gap-sm',
+  ],
 
   'card': [
     // Shape

package/src/components/or-inline-text-edit/OrInlineTextEdit.vue

@@ -335,17 +335,17 @@ export default defineComponent({
   &-text {
     display: inline-flex;
     flex-direction: row;
-    justify-content: start;
+    justify-content: flex-start;
 
     &-start {
+      min-width: 0;
       overflow-x: hidden;
       text-overflow: ellipsis;
-      min-width: 0;
     }
 
     &:not(&-textarea) {
-      white-space: nowrap;
       overflow-x: hidden;
+      white-space: nowrap;
     }
 
     &-textarea {
@@ -360,16 +360,16 @@ export default defineComponent({
 
   &-input,
   &-text {
+    flex: 1 1 auto;
     min-width: 114px;
-    line-height: $lh-1;
     padding: $s-2 $s-3;
     font-family: inherit;
     font-size: $fs-1;
+    line-height: $lh-1;
     background-color: $c-neutral-0;
     border: none;
     border-radius: 4px;
     outline: none;
-    flex: 1 1 auto;
 
     @include transition(border-color, background-color, -webkit-box-shadow);
 
@@ -407,9 +407,9 @@ export default defineComponent({
       .or-icon-button-root {
         z-index: 1;
         ::v-deep .or-icon {
+          padding: $s-2 0;
           font-size: $s-4;
           line-height: $lh-1;
-          padding: $s-2 0;
         }
       }
     }

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

@@ -11,7 +11,7 @@ export const SidebarRoot: string[] = [
 
   // Box
   'min-w-0',
-  'h-auto',
+  'h-full',
   'p-0',
 
   // Theme

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

@@ -11,6 +11,7 @@
     <div class="truncate">
       <slot />
     </div>
+
     <template v-if="variant === 'reset'">
       <div :class="['layout-inline-row', 'm-[-4px] md:m-[-2px]']">
         <OrIconButton
@@ -39,12 +40,12 @@ export default defineComponent({
 
   props: {
     variant: {
-      type: String as PropType<TagVariant>,
+      type: String as PropType<`${TagVariant}`>,
       default: TagVariant.Tag,
     },
 
     color: {
-      type: String as PropType<TagColor | string>,
+      type: String as PropType<`${TagColor}` | string>,
       default: TagColor.Default,
     },
 

package/src/components/or-tags-v3/OrTags.docs.mdx

@@ -0,0 +1,7 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+```ts
+import { OrTagsV3 as OrTags } from '@onereach/ui-components';
+```
+
+<DocsPage />

package/src/components/or-tags-v3/OrTags.stories3.ts

@@ -0,0 +1,101 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import { OrTagV3 as OrTag } from '../or-tag-v3';
+import OrTagsDocs from './OrTags.docs.mdx';
+import OrTags from './OrTags.vue';
+
+export default {
+  title: 'Components/Tags',
+  component: OrTags,
+
+  argTypes: {
+    // Props
+    items: {
+      control: { type: 'object' },
+    },
+
+    tagProps: {
+      control: { type: 'object' },
+    },
+  },
+
+  parameters: {
+    docs: {
+      page: OrTagsDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A14&t=HsX22PSudRRma7wv-1',
+    },
+  },
+} as Meta<typeof OrTags>;
+
+const Template: StoryFn<typeof OrTags> = (args) => ({
+  components: {
+    OrTag,
+    OrTags,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: `
+    <OrTags v-bind="args" />
+  `,
+});
+
+export const Default = (() => {
+  const Story = Template.bind({});
+
+  Story.args = {
+    // Props
+    items: [
+      'Alfa',
+      'Bravo',
+      'Charlie',
+      'Delta',
+      'Echo',
+    ],
+  };
+
+  return Story;
+})();
+
+export const WithOverflow = (() => {
+  const Story = Template.bind({});
+
+  Story.args = {
+    // Props
+    items: [
+      'Alfa',
+      'Bravo',
+      'Charlie',
+      'Delta',
+      'Echo',
+      'Foxtrot',
+      'Golf',
+      'Hotel',
+      'India',
+      'Juliett',
+      'Kilo',
+      'Lima',
+      'Mike',
+      'November',
+      'Oscar',
+      'Papa',
+      'Quebec',
+      'Romeo',
+      'Sierra',
+      'Tango',
+      'Uniform',
+      'Victor',
+      'Whiskey',
+      'X-Ray',
+      'Yankee',
+      'Zulu',
+    ],
+  };
+
+  return Story;
+})();

package/src/components/or-tags-v3/OrTags.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <div
+      ref="container"
+      :class="containerStyles"
+    >
+      <OrTag
+        v-for="item in items"
+        v-bind="tagProps"
+        :key="item"
+      >
+        {{ item }}
+      </OrTag>
+    </div>
+
+    <template v-if="overflowItems.length > 0">
+      <OrButton
+        ref="overflowButton"
+        :class="overflowButtonStyles"
+        :type="'button'"
+        :variant="'link'"
+        :color="'inherit'"
+        @click.stop="overflowPopover.open()"
+      >
+        +{{ overflowItems.length }}
+      </OrButton>
+
+      <OrPopover
+        ref="overflowPopover"
+        :trigger="overflowButtonRoot"
+      >
+        <div :class="overflowPopoverStyles">
+          <OrTag
+            v-for="item in overflowItems"
+            v-bind="tagProps"
+            :key="item"
+          >
+            {{ item }}
+          </OrTag>
+        </div>
+      </OrPopover>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent, ref } from 'vue-demi';
+import { useOverflow } from '../../hooks';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
+import { OrTagV3 as OrTag } from '../or-tag-v3';
+import { Tags, TagsContainer, TagsOverflowButton, TagsOverflowPopover } from './styles';
+
+export default defineComponent({
+  name: 'OrTags',
+
+  components: {
+    OrButton,
+    OrPopover,
+    OrTag,
+  },
+
+  props: {
+    items: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+
+    tagProps: {
+      type: Object as PropType<InstanceType<typeof OrTag>['$props']>,
+      default: undefined,
+    },
+  },
+
+  setup(props) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const container = ref<HTMLElement>();
+
+    const overflowButton = ref<InstanceType<typeof OrButton>>();
+    const overflowButtonRoot = computed(() => overflowButton.value?.root);
+
+    const overflowPopover = ref<InstanceType<typeof OrPopover>>();
+    const overflowPopoverRoot = computed(() => overflowPopover.value?.root);
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-tags-v3',
+      ...Tags,
+    ]);
+
+    const containerStyles = computed(() => [
+      ...TagsContainer,
+    ]);
+
+    const overflowButtonStyles = computed(() => [
+      ...TagsOverflowButton,
+    ]);
+
+    const overflowPopoverStyles = computed(() => [
+      ...TagsOverflowPopover,
+    ]);
+
+    // State
+    const { innerItems } = useOverflow(container);
+
+    const overflowItems = computed(() => {
+      return props.items.slice(innerItems.value.length);
+    });
+
+    return {
+      root,
+      container,
+      overflowButton,
+      overflowButtonRoot,
+      overflowPopover,
+      overflowPopoverRoot,
+      rootStyles,
+      containerStyles,
+      overflowButtonStyles,
+      overflowPopoverStyles,
+      overflowItems,
+    };
+  },
+});
+</script>

package/src/components/or-tags-v3/index.ts

@@ -0,0 +1 @@
+export { default as OrTagsV3 } from './OrTags.vue';