@onereach/ui-components 8.7.1 → 8.7.2-beta.3689.0

package/dist/esm/v3/components/or-tabs-v3/OrTabs.vue.d.ts

@@ -2,14 +2,14 @@ import { PropType } from 'vue-demi';
 import { TabsVariant } from './props';
 import { TabsItem } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
-    items: {
-        type: PropType<TabsItem[]>;
-        required: true;
-    };
     modelValue: {
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    items: {
+        type: PropType<TabsItem[]>;
+        required: true;
+    };
     variant: {
         type: PropType<"default" | "fitted">;
         default: TabsVariant;
@@ -20,30 +20,35 @@ declare const _default: import("vue-demi").DefineComponent<{
     overflowTabRoot: import("vue-demi").ComputedRef<any>;
     overflowMenu: import("vue-demi").Ref<any>;
     overflowMenuRoot: import("vue-demi").ComputedRef<any>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
     containerStyles: import("vue-demi").ComputedRef<string[]>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
     contentStyles: import("vue-demi").ComputedRef<string[]>;
     tabs: {
         normal: {
             value: string | number;
             label: string;
+            invalid?: boolean | undefined;
+            disabled?: boolean | undefined;
         }[];
         hidden: {
             value: string | number;
             label: string;
+            invalid?: boolean | undefined;
+            disabled?: boolean | undefined;
         }[];
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | undefined>;
     activeTab: import("vue-demi").ComputedRef<TabsItem>;
+    selectTab: (tab: TabsItem) => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    items: {
-        type: PropType<TabsItem[]>;
-        required: true;
-    };
     modelValue: {
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    items: {
+        type: PropType<TabsItem[]>;
+        required: true;
+    };
     variant: {
         type: PropType<"default" | "fitted">;
         default: TabsVariant;

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

@@ -1,4 +1,4 @@
-export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-c68c8be3.js';
+export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-0cba48ef.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';
@@ -9,7 +9,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import '../../OrIcon-8f6c9c29.js';
 import 'vue';
-import '../../OrMenuItem-c5d2a427.js';
+import '../../OrMenuItem-77e47b3b.js';
 import '../../OrMenu-33d89df4.js';
 import '../../usePopoverState-b92c698b.js';
 import '../../OrPopover-062e78f6.js';
@@ -20,4 +20,4 @@ import '../../OrBottomSheet-e6c0b05f.js';
 import '../../OrOverlay-bd4f72c4.js';
 import '../../OrTeleport.vue3-bf77eed4.js';
 import '../../useTheme-0ef25778.js';
-import '../../OrTab-276ea81d.js';
+import '../../OrTab-1d7b8534.js';

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

@@ -1,5 +1,5 @@
 import { TabsVariant } from './props';
-export declare const TabsRoot: string[];
-export declare const TabsRootVariants: Record<TabsVariant, string[]>;
 export declare const TabsContainer: string[];
+export declare const Tabs: string[];
+export declare const TabsVariants: Record<TabsVariant, string[]>;
 export declare const TabsContent: string[];

package/dist/esm/v3/components/or-tabs-v3/types.d.ts

@@ -1,4 +1,6 @@
 export interface TabsItem {
     value: string | number;
     label: string;
+    invalid?: boolean;
+    disabled?: boolean;
 }

package/dist/esm/v3/components/or-time-format-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimeFormatV3 } from '../../OrTimeFormat-fc7a59f2.js';
+export { s as OrTimeFormatV3 } from '../../OrTimeFormat-26cfaafd.js';
 import 'vue-demi';
-import '../../OrDateTimePicker-eccf252e.js';
+import '../../OrDateTimePicker-b1ec68a8.js';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';
@@ -26,10 +26,10 @@ import '../../OrTeleport.vue3-bf77eed4.js';
 import '../../useTheme-0ef25778.js';
 import '../../OrInputBox-f0bac539.js';
 import '../../OrLabel-b826da04.js';
-import '../../OrDateTimePickerTimeSelect-bc9342dd.js';
+import '../../OrDateTimePickerTimeSelect-c97af8c7.js';
 import '../../getTimePlaceholder-13d5f743.js';
 import '../../OrButton-e5617bbe.js';
 import '../../OrLoader-b79022da.js';
-import '../../OrMenuItem-c5d2a427.js';
+import '../../OrMenuItem-77e47b3b.js';
 import '../../OrMenu-33d89df4.js';
 import '../../getCurrentDate-046a888d.js';

package/dist/esm/v3/components/or-time-picker-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-7e4a8000.js';
-import '../../OrDateTimePicker-eccf252e.js';
-import '../../OrDateTimePickerTimeSelect-bc9342dd.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-ebfff3ab.js';
+import '../../OrDateTimePicker-b1ec68a8.js';
+import '../../OrDateTimePickerTimeSelect-c97af8c7.js';
 export { D as TimePickerFormat } from '../../getTimePlaceholder-13d5f743.js';
 export { I as TimePickerSize } from '../../OrInputBox-f0bac539.js';
 import 'vue-demi';
@@ -31,5 +31,5 @@ import '../../useTheme-0ef25778.js';
 import '../../OrLabel-b826da04.js';
 import '../../OrButton-e5617bbe.js';
 import '../../OrLoader-b79022da.js';
-import '../../OrMenuItem-c5d2a427.js';
+import '../../OrMenuItem-77e47b3b.js';
 import '../../OrMenu-33d89df4.js';

package/dist/esm/v3/components/or-time-range-picker-v3/index.js

@@ -1,6 +1,6 @@
-export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-2d5a72ce.js';
-import '../../OrDateTimePicker-eccf252e.js';
-import '../../OrDateTimePickerTimeSelect-bc9342dd.js';
+export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-477cadab.js';
+import '../../OrDateTimePicker-b1ec68a8.js';
+import '../../OrDateTimePickerTimeSelect-c97af8c7.js';
 export { D as TimeRangePickerFormat } from '../../getTimePlaceholder-13d5f743.js';
 export { I as TimeRangePickerSize } from '../../OrInputBox-f0bac539.js';
 import 'vue-demi';
@@ -31,5 +31,5 @@ import '../../useTheme-0ef25778.js';
 import '../../OrLabel-b826da04.js';
 import '../../OrButton-e5617bbe.js';
 import '../../OrLoader-b79022da.js';
-import '../../OrMenuItem-c5d2a427.js';
+import '../../OrMenuItem-77e47b3b.js';
 import '../../OrMenu-33d89df4.js';

package/dist/esm/v3/index.js

@@ -8,7 +8,7 @@ export { s as OrButtonV2 } from './OrButton-130ad8d9.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrIconButton, s as OrIconButtonV2 } from './OrIconButton-287bb86a.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-8c81a2d5.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-8bbbbe26.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-549e5f80.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-ee23cedc.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-d6bf486e.js';
@@ -34,13 +34,13 @@ export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-8c818798.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-dccb7167.js';
 export { s as OrMenuV3 } from './OrMenu-33d89df4.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-062e78f6.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-8c9095ca.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-be607573.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-a16dcb30.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-88ba723e.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-36ba02e5.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-7b626917.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-c7570324.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-c8076fb8.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-eccf252e.js';
-export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-bc9342dd.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-b1ec68a8.js';
+export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-c97af8c7.js';
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-13d5f743.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
@@ -72,7 +72,7 @@ export { s as OrListV3 } from './OrList-69197fa9.js';
 export { s as OrListItem } from './OrListItem-2ed9a12f.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-d28a8ebf.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-b79022da.js';
-export { s as OrMenuItemV3 } from './OrMenuItem-c5d2a427.js';
+export { s as OrMenuItemV3 } from './OrMenuItem-77e47b3b.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-b2060770.js';
 export { M as ModalSize, s as OrModalV3 } from './OrModal-51eef18b.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-1b28dd4a.js';
@@ -81,7 +81,7 @@ export { s as OrNumberInput } from './OrNumberInput-e9dcdcbd.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-440ddf3e.js';
 export { s as OrOverlay } from './OrOverlay-451dce49.js';
 export { s as OrOverlayV3 } from './OrOverlay-bd4f72c4.js';
-export { s as OrPaginationV3 } from './OrPagination-4d9fa9a6.js';
+export { s as OrPaginationV3 } from './OrPagination-18243eb9.js';
 export { s as OrPassword } from './OrPassword-4494ac89.js';
 export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-aa2ea84b.js';
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-95907e02.js';
@@ -92,12 +92,12 @@ export { s as OrRadioV3 } from './OrRadio-50b0ead5.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-07ddbed1.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-f932d1c4.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-5dfd3f6d.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-995c5f4e.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-eda0097a.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-6413323a.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-6be79b4e.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-f656c471.js';
+export { s as OrSelectV3 } from './OrSelect-c837e550.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-3ce61658.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -108,16 +108,16 @@ export { s as OrSkeletonCircleV3 } from './OrSkeletonCircle-1eae069b.js';
 export { s as OrSkeletonRectV3 } from './OrSkeletonRect-ba5df861.js';
 export { s as OrSkeletonTextV3 } from './OrSkeletonText-3c3207d0.js';
 export { s as OrSlider } from './OrSlider-b7bd588e.js';
-export { s as OrSortingV3 } from './OrSorting-4cf454bb.js';
+export { s as OrSortingV3 } from './OrSorting-bfe2200c.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-95ea42e3.js';
 export { s as OrStepper } from './OrStepper-4943002c.js';
 export { s as OrSwitch } from './OrSwitch-fb864132.js';
 export { s as OrSwitchV3 } from './OrSwitch-a493c66d.js';
 export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
-export { s as OrTabV3 } from './OrTab-276ea81d.js';
+export { s as OrTabV3 } from './OrTab-1d7b8534.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-c68c8be3.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-0cba48ef.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
 export { s as OrTagInputV3 } from './OrTagInput-fb963f37.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-bb7cac42.js';
@@ -128,9 +128,9 @@ export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
 export { s as OrTextareaV3 } from './OrTextarea-e198e17e.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-cb6762c8.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-fc7a59f2.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-7e4a8000.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-2d5a72ce.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-26cfaafd.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-ebfff3ab.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-477cadab.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-49db948c.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.7.1",
+  "version": "8.7.2-beta.3689.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.3.0",
+    "@onereach/styles": "^6.3.1-beta.3689.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "996ecc67bb89c4261484128e0d31016022dd11bc"
+  }
 }

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -3,8 +3,8 @@
     ref="root"
     :class="rootStyles"
     :tabindex="!disabled ? 0 : null"
-    :selected="selected ? '' : null"
-    :disabled="disabled ? '' : null"
+    :selected="selected"
+    :disabled="disabled"
     @click="$emit('click', $event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"

package/src/components/or-menu-item-v3/styles.ts

@@ -24,6 +24,10 @@ export const MenuItemRoot: string[] = [
   'theme-foreground-outline',
   'dark:theme-foreground-outline-dark',
 
+  // Theme (selected)
+  'selected:theme-foreground-default',
+  'dark:selected:theme-foreground-default-dark',
+
   // Theme (hover)
   'hover:md:theme-foreground-default',
   'dark:hover:md:theme-foreground-default-dark',
@@ -31,7 +35,4 @@ export const MenuItemRoot: string[] = [
   // Theme (active)
   'active:theme-foreground-default',
   'dark:active:theme-foreground-default-dark',
-
-  // Theme (selected)
-  'selected:theme-foreground-default dark:selected:theme-foreground-default-dark',
 ];

package/src/components/or-tab-v3/OrTab.vue

@@ -2,8 +2,9 @@
   <div
     ref="root"
     :class="rootStyles"
-    :tabindex="0"
-    :selected="selected ? '' : null"
+    :selected="selected"
+    :invalid="invalid"
+    :disabled="disabled"
     @click="$emit('click', $event)"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
@@ -14,7 +15,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { TabRoot } from './styles';
+import { Tab } from './styles';
 
 export default defineComponent({
   name: 'OrTab',
@@ -24,6 +25,16 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -43,7 +54,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-tab-v3',
-      ...TabRoot,
+      ...Tab,
     ]);
 
     return {

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

@@ -1,9 +1,10 @@
-export const TabRoot: string[] = [
+export const Tab: string[] = [
   // Layout
   'layout-inline-row justify-center',
 
   // Spacing
   'py-[6px]',
+  'mb-[-1px]',
 
   // Interactivity
   'interactivity-click',
@@ -18,27 +19,44 @@ export const TabRoot: string[] = [
   'theme-border-underline',
 
   'theme-border-2-transparent',
-  'dark:theme-border-2-transparent',
+  'dark:theme-border-2-transparent-dark',
+
+  // Theme (selected)
+  'selected:theme-foreground-default',
+  'dark:selected:theme-foreground-default-dark',
+
+  'selected:theme-border-underline',
+
+  'selected:theme-border-2-current',
+  'dark:selected:theme-border-2-current-dark',
+
+  // Theme (invalid)
+  'invalid:theme-foreground-error',
+  'dark:invalid:theme-foreground-error-dark',
 
   // Theme (hover)
   'hover:md:theme-foreground-default',
   'dark:hover:md:theme-foreground-default-dark',
 
+  // Theme (hover, invalid)
+  'hover:invalid:md:theme-foreground-error-hover',
+  'dark:hover:invalid:md:theme-foreground-error-hover-dark',
+
   // Theme (active)
   'active:theme-foreground-default',
   'dark:active:theme-foreground-default-dark',
 
   'active:theme-border-underline',
 
-  'active:theme-border-2-current',
-  'dark:active:theme-border-2-current',
+  'active:enabled:theme-border-2-current',
+  'dark:active:enabled:theme-border-2-current-dark',
 
-  // Theme (selected)
-  'selected:theme-foreground-default',
-  'dark:selected:theme-foreground-default-dark',
+  // Theme (active, invalid)
+  'active:invalid:theme-foreground-error',
+  'dark:active:invalid:theme-foreground-error-dark',
 
-  'selected:theme-border-underline',
+  'active:invalid:theme-border-underline',
 
-  'selected:theme-border-2-current',
-  'dark:selected:theme-border-2-current',
+  'active:enabled:invalid:theme-border-2-current',
+  'dark:active:enabled:invalid:theme-border-2-current-dark',
 ];

package/src/components/or-tabs-v3/OrTabs.vue

@@ -9,7 +9,9 @@
         v-for="tab in tabs.normal"
         :key="tab.value"
         :selected="tab.value === proxyModelValue"
-        @click.stop="proxyModelValue = tab.value"
+        :invalid="tab.invalid"
+        :disabled="tab.disabled"
+        @click.stop="selectTab(tab)"
       >
         <slot
           name="tab"
@@ -38,13 +40,15 @@
           <OrMenuItem
             v-for="tab in tabs.hidden"
             :key="tab.value"
-            @click.stop="proxyModelValue = tab.value; overflowMenu && overflowMenu.close()"
+            :disabled="tab.disabled"
+            @click.stop="selectTab(tab); overflowMenu && overflowMenu.close()"
           >
             {{ tab.label }}
           </OrMenuItem>
         </OrMenu>
       </template>
     </div>
+
     <div :class="contentStyles">
       <slot :name="String(proxyModelValue)" />
     </div>
@@ -60,7 +64,7 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrTabV3 as OrTab } from '../or-tab-v3';
 import { TabsVariant } from './props';
-import { TabsContainer, TabsRoot, TabsRootVariants, TabsContent } from './styles';
+import { Tabs, TabsContainer, TabsContent, TabsVariants } from './styles';
 import { TabsItem } from './types';
 
 export default defineComponent({
@@ -81,16 +85,16 @@ export default defineComponent({
   },
 
   props: {
-    items: {
-      type: Array as PropType<TabsItem[]>,
-      required: true,
-    },
-
     modelValue: {
       type: [String, Number],
       default: undefined,
     },
 
+    items: {
+      type: Array as PropType<TabsItem[]>,
+      required: true,
+    },
+
     variant: {
       type: String as PropType<`${TabsVariant}`>,
       default: TabsVariant.Default,
@@ -116,16 +120,16 @@ export default defineComponent({
     const overflowMenuRoot = computed(() => overflowMenu.value?.root);
 
     // Styles
-    const rootStyles = computed(() => [
-      'or-tabs-v3',
-      ...TabsRoot,
-      ...TabsRootVariants[props.variant],
-    ]);
-
     const containerStyles = computed(() => [
       ...TabsContainer,
     ]);
 
+    const rootStyles = computed(() => [
+      'or-tabs-v3',
+      ...Tabs,
+      ...TabsVariants[props.variant],
+    ]);
+
     const contentStyles = computed(() => [
       ...TabsContent,
     ]);
@@ -141,6 +145,12 @@ export default defineComponent({
     const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
     // Methods
+    function selectTab(tab: TabsItem): void {
+      if (!tab.disabled) {
+        proxyModelValue.value = tab.value;
+      }
+    }
+
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 
@@ -206,12 +216,13 @@ export default defineComponent({
       overflowTabRoot,
       overflowMenu,
       overflowMenuRoot,
-      rootStyles,
       containerStyles,
+      rootStyles,
       contentStyles,
       tabs,
       proxyModelValue,
       activeTab,
+      selectTab,
     };
   },
 });

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

@@ -1,6 +1,17 @@
 import { TabsVariant } from './props';
 
-export const TabsRoot: string[] = [
+export const TabsContainer: string[] = [
+  // Layout
+  'layout-column',
+
+  // Box
+  'h-full',
+
+  // Spacing
+  'gap-lg',
+];
+
+export const Tabs: string[] = [
   // Layout
   'grid',
   'grid-flow-col',
@@ -20,7 +31,7 @@ export const TabsRoot: string[] = [
   'dark:theme-border-1-outline',
 ];
 
-export const TabsRootVariants: Record<TabsVariant, string[]> = {
+export const TabsVariants: Record<TabsVariant, string[]> = {
   'default': [
     // Layout
     'auto-cols-max',
@@ -32,17 +43,6 @@ export const TabsRootVariants: Record<TabsVariant, string[]> = {
   ],
 };
 
-export const TabsContainer: string[] = [
-  // Layout
-  'layout-column',
-
-  // Box
-  'h-full',
-
-  // Spacing
-  'gap-lg',
-];
-
 export const TabsContent: string[] = [
   // Layout
   'grow',

package/src/components/or-tabs-v3/types.ts

@@ -1,4 +1,7 @@
 export interface TabsItem {
   value: string | number;
   label: string;
+
+  invalid?: boolean;
+  disabled?: boolean;
 }