@onereach/ui-components 8.1.0-beta.3605.0 → 8.1.0

package/dist/esm/v3/components/or-resizeable-panel-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../../OrResizeablePanel-81a57c7a.js';
+export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../../OrResizeablePanel-3cc7cfbd.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';

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

@@ -1,6 +1,5 @@
-export { s as OrSidebarV3 } from '../../OrSidebar-8e0771d3.js';
-export { S as OrSidebarPlacement, S as SidebarPlacement } from '../../props-aedf339b.js';
-export { R as SidebarPadding } from '../../OrResizeablePanel-81a57c7a.js';
+export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from '../../OrSidebar-e799c79f.js';
+export { R as SidebarPadding } from '../../OrResizeablePanel-3cc7cfbd.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';

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

@@ -1,3 +1,3 @@
-export { s as OrTabV3 } from '../../OrTab-db771526.js';
+export { s as OrTabV3 } from '../../OrTab-276ea81d.js';
 import 'vue-demi';
 import 'vue';

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

@@ -1,4 +1,4 @@
-export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-0660d898.js';
+export { s as OrTabsV3, T as TabsVariant } from '../../OrTabs-03b959f6.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';
@@ -20,4 +20,4 @@ import '../../OrBottomSheet-375aa75c.js';
 import '../../OrOverlay-6269c33a.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-0ef25778.js';
-import '../../OrTab-db771526.js';
+import '../../OrTab-276ea81d.js';

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

@@ -1,6 +1,6 @@
-export { s as OrTimeFormatV3 } from '../../OrTimeFormat-360bca75.js';
+export { s as OrTimeFormatV3 } from '../../OrTimeFormat-1c8d49fb.js';
 import 'vue-demi';
-import '../../OrDateTimePicker-5a2b70e3.js';
+import '../../OrDateTimePicker-e4cee603.js';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import '../../dom-aecadd9a.js';
@@ -26,7 +26,7 @@ import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-0ef25778.js';
 import '../../OrInputBox-f0bac539.js';
 import '../../OrLabel-b826da04.js';
-import '../../OrDateTimePickerTimeSelect-2ecdc981.js';
+import '../../OrDateTimePickerTimeSelect-950549f6.js';
 import '../../getTimePlaceholder-13d5f743.js';
 import '../../OrButton-2e3a73fb.js';
 import '../../OrLoader-b79022da.js';

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

@@ -1,6 +1,6 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-95f72797.js';
-import '../../OrDateTimePicker-5a2b70e3.js';
-import '../../OrDateTimePickerTimeSelect-2ecdc981.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-f008a03b.js';
+import '../../OrDateTimePicker-e4cee603.js';
+import '../../OrDateTimePickerTimeSelect-950549f6.js';
 export { D as TimePickerFormat } from '../../getTimePlaceholder-13d5f743.js';
 export { I as TimePickerSize } from '../../OrInputBox-f0bac539.js';
 import 'vue-demi';

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

@@ -1,6 +1,6 @@
-export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-58946ad3.js';
-import '../../OrDateTimePicker-5a2b70e3.js';
-import '../../OrDateTimePickerTimeSelect-2ecdc981.js';
+export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-a4f2eb8d.js';
+import '../../OrDateTimePicker-e4cee603.js';
+import '../../OrDateTimePickerTimeSelect-950549f6.js';
 export { D as TimeRangePickerFormat } from '../../getTimePlaceholder-13d5f743.js';
 export { I as TimeRangePickerSize } from '../../OrInputBox-f0bac539.js';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -1,5 +1,5 @@
 export { O as OR_AVATAR_SIZE, s as OrAvatar } from './OrAvatar-c1b2339e.js';
-export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-495e5033.js';
+export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-c2d6f463.js';
 export { B as BottomSheetVariant, s as OrBottomSheetV3 } from './OrBottomSheet-375aa75c.js';
 export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from './OrButton-9118c20e.js';
 export { s as OrButtonV2 } from './OrButton-130ad8d9.js';
@@ -33,13 +33,13 @@ export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-7a91060e.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-c0ff35b6.js';
 export { s as OrMenuV3 } from './OrMenu-72844eb1.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-3b07d49e.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-8590fb19.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-4c5cc5c8.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-8504c6e3.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-b9ba9f89.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-934be120.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-71467fbf.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-3d15ae71.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-82b281c8.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-5a2b70e3.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-2ecdc981.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-e4cee603.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-950549f6.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';
@@ -88,7 +88,7 @@ export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-b4b6d364.js';
 export { s as OrRadioV3 } from './OrRadio-50b0ead5.js';
-export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-81a57c7a.js';
+export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-3cc7cfbd.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-0e867727.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
 export { s as OrSearchV3 } from './OrSearch-fe8137a0.js';
@@ -96,8 +96,7 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
 export { s as OrSelectV3 } from './OrSelect-d2790afa.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
-export { s as OrSidebarV3 } from './OrSidebar-8e0771d3.js';
-export { S as OrSidebarPlacement, S as SidebarPlacement } from './props-aedf339b.js';
+export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-e799c79f.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
 export { s as OrSkeletonRect } from './OrSkeletonRect-c694574e.js';
 export { s as OrSkeletonText } from './OrSkeletonText-9a800de4.js';
@@ -112,9 +111,9 @@ 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-db771526.js';
+export { s as OrTabV3 } from './OrTab-276ea81d.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-0660d898.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-03b959f6.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
 export { s as OrTagInputV3 } from './OrTagInput-bdbf9b9f.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-a37e8e69.js';
@@ -125,9 +124,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-360bca75.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-95f72797.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-58946ad3.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-1c8d49fb.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-f008a03b.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-a4f2eb8d.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-8dc3e248.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.1.0-beta.3605.0",
+  "version": "8.1.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.0.0",
+    "@onereach/styles": "^6.1.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -79,7 +79,7 @@
     "@vue/composition-api": "1.7.1",
     "glob": "9.3.0",
     "sass": "1.63.4",
-    "typescript": "4.9.5",
+    "typescript": "5.1.6",
     "vue": "2.6.14",
     "vue-template-compiler": "2.6.14",
     "vue2": "npm:vue@2.6.14",
@@ -118,13 +118,13 @@
       "types": "./dist/auto/components/or-*/index.d.ts",
       "default": "./dist/auto/components/or-*/index.js"
     },
-    "./v2/Or*": {
+    "./Or*": {
       "types": "./dist/bundled/v2/components/Or*/index.d.ts",
       "default": "./dist/bundled/v2/components/Or*/index.js"
     },
-    "./Or*": {
-      "types": "./dist/bundled/v3/components/Or*/index.d.ts",
-      "default": "./dist/bundled/v3/components/Or*/index.js"
+    "./Or*/": {
+      "types": "./dist/bundled/v2/components/Or*/",
+      "default": "./dist/bundled/v2/components/Or*/"
     },
     "./utils": {
       "types": "./dist/auto/utils/index.d.ts",
@@ -175,5 +175,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "6696e48f40c773c20e86f5d83ee6f31e10c71819"
 }

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

@@ -109,31 +109,46 @@ export const AvatarColors: Record<AvatarColor, string[]> = {
 
   [AvatarColor.Blue]: [
     // Theme
-    'theme-preset-1-primary',
-    'dark:theme-preset-1-primary-dark',
+    'theme-foreground-on-primary',
+    'dark:theme-foreground-on-primary-dark',
+
+    'theme-background-primary',
+    'dark:theme-background-primary-dark',
   ],
 
   [AvatarColor.Grey]: [
     // Theme
-    'theme-preset-1-secondary',
-    'dark:theme-preset-1-secondary-dark',
+    'theme-foreground-on-secondary',
+    'dark:theme-foreground-on-secondary-dark',
+
+    'theme-background-secondary',
+    'dark:theme-background-secondary-dark',
   ],
 
   [AvatarColor.Green]: [
     // Theme
-    'theme-preset-1-success',
-    'dark:theme-preset-1-success-dark',
+    'theme-foreground-on-success',
+    'dark:theme-foreground-on-success-dark',
+
+    'theme-background-success',
+    'dark:theme-background-success-dark',
   ],
 
   [AvatarColor.Yellow]: [
     // Theme
-    'theme-preset-1-warning',
-    'dark:theme-preset-1-warning-dark',
+    'theme-foreground-on-warning',
+    'dark:theme-foreground-on-warning-dark',
+
+    'theme-background-warning',
+    'dark:theme-background-warning-dark',
   ],
 
   [AvatarColor.Red]: [
     // Theme
-    'theme-preset-1-error',
-    'dark:theme-preset-1-error-dark',
+    'theme-foreground-on-error',
+    'dark:theme-foreground-on-error-dark',
+
+    'theme-background-error',
+    'dark:theme-background-error-dark',
   ],
 };

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-control/styles.ts

@@ -6,16 +6,16 @@ export const DateTimePickerDateControl: string[] = [
   'interactivity-click',
 
   // Theme (focus)
+  'focus-visible:theme-border-underline',
+
   'focus-visible:theme-border-2-inherit',
   'dark:focus-visible:theme-border-2-inherit-dark',
 
-  'focus-visible:theme-border-underline',
-
   // Theme (selected)
+  'selected:theme-border-underline',
+
   'selected:theme-border-2-inherit',
   'dark:selected:theme-border-2-inherit-dark',
-
-  'selected:theme-border-underline',
 ];
 
 export const DateTimePickerDateControlPlaceholder: string[] = [

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/styles.ts

@@ -12,8 +12,8 @@ export const DateTimePickerPopoverFooter: string[] = [
   'gap-md md:gap-sm',
 
   // Theme
+  'theme-border-overline',
+
   'theme-border-1-outline-variant',
   'dark:theme-border-1-outline-variant-dark',
-
-  'theme-border-overline',
 ];

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/styles.ts

@@ -6,16 +6,16 @@ export const DateTimePickerTimeControl: string[] = [
   'interactivity-click',
 
   // Theme (focus)
+  'focus-visible:theme-border-underline',
+
   'focus-visible:theme-border-2-inherit',
   'dark:focus-visible:theme-border-2-inherit-dark',
 
-  'focus-visible:theme-border-underline',
-
   // Theme (selected)
+  'selected:theme-border-underline',
+
   'selected:theme-border-2-inherit',
   'dark:selected:theme-border-2-inherit-dark',
-
-  'selected:theme-border-underline',
 ];
 
 export const DateTimePickerTimeControlPlaceholder: string[] = [

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

@@ -96,7 +96,7 @@ export const ResizeablePanelContentPlaceholderPlacements: Record<ResizeablePanel
 
 export const ResizeablePanelResizeBar: string[] = [
   // Position
-  'relative z-1',
+  'relative z-10',
 
   // Layout
   'shrink-0',
@@ -189,7 +189,7 @@ export const ResizeablePanelResizeBarPlacements: Record<ResizeablePanelPlacement
 
 export const ResizeablePanelCollapseButtonContainer: string[] = [
   // Position
-  'relative',
+  'relative z-10',
 
   // Box
   'w-fit',

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

@@ -79,10 +79,10 @@ export const SidebarFooter: string[] = [
   'overflow-hidden',
 
   // Theme
+  'theme-border-overline',
+
   'theme-border-1-outline-variant',
   'dark:theme-border-1-outline-variant-dark',
-
-  'theme-border-overline',
 ];
 
 export const SidebarFooterPaddings: Record<SidebarPadding, string[]> = {

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

@@ -15,11 +15,11 @@ export const TabRoot: string[] = [
   'theme-foreground-secondary',
   'dark:theme-foreground-secondary-dark',
 
+  'theme-border-underline',
+
   'theme-border-2-transparent',
   'dark:theme-border-2-transparent',
 
-  'theme-border-underline',
-
   // Theme (hover)
   'hover:md:theme-foreground-default',
   'dark:hover:md:theme-foreground-default-dark',
@@ -28,17 +28,17 @@ export const TabRoot: string[] = [
   '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:theme-border-underline',
-
   // 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',
-
-  'selected:theme-border-underline',
 ];

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

@@ -11,13 +11,19 @@
         :selected="tab.value === proxyModelValue"
         @click.stop="proxyModelValue = tab.value"
       >
-        {{ tab.label }}
+        <slot
+          name="tab"
+          :tab="tab"
+          :active-tab="activeTab"
+        >
+          {{ tab.label }}
+        </slot>
       </OrTab>
 
       <template v-if="tabs.hidden.length > 0">
         <OrTab
           ref="overflowTab"
-          @click.stop="overflowMenu.open()"
+          @click.stop="overflowMenu && overflowMenu.open()"
         >
           <OrIcon
             :icon="'more_horiz'"
@@ -32,7 +38,7 @@
           <OrMenuItem
             v-for="tab in tabs.hidden"
             :key="tab.value"
-            @click.stop="proxyModelValue = tab.value; overflowMenu.close()"
+            @click.stop="proxyModelValue = tab.value; overflowMenu && overflowMenu.close()"
           >
             {{ tab.label }}
           </OrMenuItem>

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

@@ -8,17 +8,16 @@ export const TabsRoot: string[] = [
   'items-center',
 
   // Box
-  'overflow-hidden',
-  'flex-shrink-0',
+  'shrink-0',
 
   // Spacing
   'gap-lg',
 
   // Theme
+  'theme-border-underline',
+
   'theme-border-1-outline',
   'dark:theme-border-1-outline',
-
-  'theme-border-underline',
 ];
 
 export const TabsRootVariants: Record<TabsVariant, string[]> = {
@@ -39,7 +38,6 @@ export const TabsContainer: string[] = [
 
   // Box
   'h-full',
-  'overflow-hidden',
 
   // Spacing
   'gap-lg',