@onereach/ui-components 2.72.2-beta.2265.0 → 2.72.2-beta.2267.0

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

@@ -4,100 +4,28 @@ export const SidebarRoot: string[] = [
   // Position
   'relative',
 
-  // Layout
-  'flex',
-  'flex-row',
-  'shrink-0',
-
-  // Box
-  'min-w-0',
-  'h-auto',
-  'p-0',
-
-  // Theme
-  'bg-background',
-  'dark:bg-background-dark',
-];
-
-export const SidebarBar: string[] = [
-  // Position
-  'relative',
-
   // Layout
   'flex',
   'flex-col',
   'shrink-0',
-  'grow',
 
   // Box
   'min-h-0',
   'p-0',
-
-  // Theme
-  'text-on-background',
-  'dark:text-on-background-dark',
-
-  // Transition
-  'transition-[width]',
-];
-
-export const SidebarToolbar: string[] = [
-  // Position
-  'relative',
-
-  // Layout
-  'flex',
-  'flex-col',
-  'shrink-0',
-  'grow',
-  'overflow-auto',
-  'items-center',
-
-  // Sizing
-  'gap-md',
-
-  // Box
-  'min-h-0',
-  'min-w-xl',
-  'p-[6px]',
-  'py-md+',
-
-  // Theme
-  'text-outline',
-  'dark:text-outline-dark',
-];
-
-export const CollapsibleSidebarToolbar: string[] = [
-  'pt-[56px]',
 ];
 
-export const SidebarSides: Record<OrSidebarPlacement, string[]> = {
+export const SidebarRootSides: Record<OrSidebarPlacement, string[]> = {
   [OrSidebarPlacement.left]: [
     // Borders
     'border-r-[1px]',
     'border-r-solid',
-    'border-r-outline-variant dark:border-r-outline-variant-dark',
+    'border-r-secondary dark:border-r-secondary-dark',
   ],
   [OrSidebarPlacement.right]: [
     // Borders
     'border-l-[1px]',
     'border-l-solid',
-    'border-l-outline-variant dark:border-l-outline-variant-dark',
-  ],
-};
-
-export const SidebarToolbarSides: Record<OrSidebarPlacement, string[]> = {
-  [OrSidebarPlacement.left]: [
-    // Borders
-    'border-r-[1px]',
-    'border-r-solid',
-    'border-r-outline-variant dark:border-r-outline-variant-dark',
-  ],
-  [OrSidebarPlacement.right]: [
-    // Borders
-    'border-l-[1px]',
-    'border-l-solid',
-    'border-l-outline-variant dark:border-l-outline-variant-dark',
+    'border-l-secondary dark:border-l-secondary-dark',
   ],
 };
 
@@ -108,7 +36,7 @@ export const SidebarResize: string[] = [
   'z-[1]',
 
   // Box
-  'w-sm+',
+  'w-[12px]',
   'h-[100%]',
 
   // Cursor
@@ -122,7 +50,7 @@ export const SidebarResizeSides: Record<OrSidebarPlacement, string[]> = {
 
     // Borders
     'hover:border-r-2',
-    'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
+    'hover:border-r-primary hover:dark:border-r-primary-dark',
 
     // Transition
     'transition-[border-right]',
@@ -133,42 +61,23 @@ export const SidebarResizeSides: Record<OrSidebarPlacement, string[]> = {
 
     // Borders
     'hover:border-l-2',
-    'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
+    'hover:border-l-primary hover:dark:border-l-primary-dark',
 
     // Transition
     'transition-[border-left]',
   ],
 };
 
-export const SidebarCollapseButton: string[] = [
-  // Position
-  'absolute',
-  'top-md',
-  'inset-y-none',
-  'z-[1]',
-];
-
-export const SidebarCollapseButtonSides: Record<OrSidebarPlacement, string[]> = {
-  [OrSidebarPlacement.left]: [
-    // Position
-    '-right-[12px]',
-  ],
-  [OrSidebarPlacement.right]: [
-    // Position
-    '-left-[12px]',
-  ],
-};
-
 export const SidebarResizingSides: Record<OrSidebarPlacement, string[]> = {
   [OrSidebarPlacement.left]: [
     // Borders
     'border-r-2',
-    'border-r-primary-hover dark:border-r-primary-hover-dark',
+    'border-r-primary dark:border-r-primary-dark',
   ],
   [OrSidebarPlacement.right]: [
     // Borders
     'border-l-2',
-    'border-l-primary-hover dark:border-l-primary-hover-dark',
+    'border-l-primary dark:border-l-primary-dark',
   ],
 };
 
@@ -177,24 +86,14 @@ export const SidebarMain: string[] = [
   'flex',
   'flex-col',
   'grow',
-  'overflow-x-hidden',
 
   // Box
   'min-h-0',
 ];
 
 export const SidebarHeader: string[] = [
-  // Layout
-  'shrink-0',
-  'overflow-hidden',
-
   // Sizing
   'p-md',
-
-  // Typography
-  'typography-headline-2',
-  'whitespace-nowrap',
-  'text-ellipsis',
 ];
 
 export const SidebarContent: string[] = [
@@ -207,15 +106,11 @@ export const SidebarContent: string[] = [
 ];
 
 export const SidebarFooter: string[] = [
-  // Layout
-  'shrink-0',
-  'overflow-x-hidden',
-
   // Sizing
   'p-md',
 
   // Borders
   'border-t-[1px]',
   'border-t-solid',
-  'border-t-outline-variant dark:border-t-outline-variant-dark',
+  'border-t-secondary dark:border-t-secondary-dark',
 ];

package/dist/bundled/v2/OrSidebarCollapseButton-1161aef8.js

@@ -1,121 +0,0 @@
-import _ from 'lodash';
-import './index-fa6eb4ca.js';
-import { O as OrIconButton } from './OrIconButton-837d57f8.js';
-import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-var OrSidebarPlacement;
-(function (OrSidebarPlacement) {
-  OrSidebarPlacement["left"] = "left";
-  OrSidebarPlacement["right"] = "right";
-})(OrSidebarPlacement || (OrSidebarPlacement = {}));
-
-const CollapseButtonContainer = [
-// Box
-'w-[24px]', 'h-[24px]', 'rounded-full',
-// Theme
-'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
-const CollapseButton = [
-// Box
-'w-[24px]', 'h-[24px]', 'rounded-full',
-// Typography
-'!text-[16px]',
-// Borders
-'!border-[1px]', '!border-solid',
-// Theme
-'!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
-// Theme (hover)
-'hover:!text-primary hover:dark:!text-primary-dark', 'hover:!bg-primary-opacity-0-08 dark:hover:!bg-primary-opacity-0-08-dark', 'hover:!border-outline dark:hover:!border-outline-dark',
-// Theme (active)
-'active:!text-primary active:dark:!text-primary-dark', 'active:!bg-primary-opacity-0-12 dark:active:!bg-primary-opacity-0-12-dark', 'active:!border-primary dark:active:!border-primary-dark',
-// Theme (focus)
-'focus:!text-primary focus:dark:!text-primary-dark', 'focus:!bg-primary-opacity-0-12 dark:focus:!bg-primary-opacity-0-12-dark', 'focus:!border-outline dark:focus:!border-outline-dark',
-// Theme (disabled)
-'disabled:!text-on-disabled disabled:dark:!text-on-disabled-dark', 'disabled:!bg-background disabled:dark:!bg-background-dark', 'disabled:!border-outline-variant disabled:dark:!border-outline-variant-dark'];
-
-var script = defineComponent({
-  name: 'OrSidebarCollapseButton',
-  components: {
-    OrIconButton
-  },
-  props: {
-    /**
-     * Must be `true` if sidebar is collapsed.
-     */
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    side: {
-      type: String,
-      default: OrSidebarPlacement.right,
-      validator: value => _.includes(_.values(OrSidebarPlacement), value)
-    }
-  },
-  emits: ['update:modelValue'],
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const rootStyles = computed(() => ['or-sidebar-collapse-button', ...CollapseButtonContainer]);
-    const buttonStyles = computed(() => [...CollapseButton]);
-    const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
-    return {
-      root,
-      rootStyles,
-      buttonStyles,
-      icon
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles
-  }, [_c('or-icon-button', {
-    class: _vm.buttonStyles,
-    attrs: {
-      "icon": {
-        icon: _vm.icon,
-        size: 'inherit'
-      },
-      "color": "inherit"
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.$emit('update:modelValue', !_vm.modelValue);
-      }
-    }
-  })], 1);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-var OrSidebarCollapseButton = __vue_component__;
-
-export { OrSidebarPlacement as O, OrSidebarCollapseButton as a };

package/dist/bundled/v2/components/or-sidebar-v3/partials/index.d.ts

@@ -1 +0,0 @@
-export * from './or-sidebar-collapse-button';

package/dist/bundled/v2/components/or-sidebar-v3/partials/index.js

@@ -1,18 +0,0 @@
-export { a as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-1161aef8.js';
-import 'lodash';
-import '../../../index-fa6eb4ca.js';
-import 'vue';
-import '@vue/composition-api/dist/vue-composition-api.mjs';
-import '../../../OrIconButton-837d57f8.js';
-import '../../../OrIcon-458206aa.js';
-import '../../../normalize-component-6e8e3d80.js';
-import '../../../OrTooltip-b1f38647.js';
-import '@vueuse/core';
-import '../../../OrPopover-4e8acb7b.js';
-import '../../../floating-ui.dom.esm-83eba816.js';
-import '../../../OrBottomSheet-ddba20c1.js';
-import '../../../OrOverlay-efa7992e.js';
-import '../../../OrTeleport.vue2-e9ba3054.js';
-import 'portal-vue';
-import '../../../useElevation-aac032f4.js';
-import '../../../useResponsive-e13dfbb0.js';

package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts

@@ -1,12 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-declare const _default: Meta<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, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;
-export default _default;
-export declare const Default: 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, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;

package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts

@@ -1,53 +0,0 @@
-import { PropType } from 'vue-demi';
-import { OrSidebarPlacement } from '../../props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    buttonStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    /**
-     * Must be `true` if sidebar is collapsed.
-     */
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    side: {
-        type: PropType<OrSidebarPlacement>;
-        default: OrSidebarPlacement;
-        validator: (value?: any) => boolean;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    /**
-     * Must be `true` if sidebar is collapsed.
-     */
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    side: {
-        type: PropType<OrSidebarPlacement>;
-        default: OrSidebarPlacement;
-        validator: (value?: any) => boolean;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: boolean;
-    side: OrSidebarPlacement;
-} & {} & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    buttonStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    modelValue: boolean;
-    side: OrSidebarPlacement;
-} & {} & {
-    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-}, {
-    modelValue: boolean;
-    side: OrSidebarPlacement;
-}, true>);
-export default _default;

package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts

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

package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js

@@ -1,18 +0,0 @@
-export { a as OrSidebarCollapseButton } from '../../../../OrSidebarCollapseButton-1161aef8.js';
-import 'lodash';
-import '../../../../index-fa6eb4ca.js';
-import 'vue';
-import '@vue/composition-api/dist/vue-composition-api.mjs';
-import '../../../../OrIconButton-837d57f8.js';
-import '../../../../OrIcon-458206aa.js';
-import '../../../../normalize-component-6e8e3d80.js';
-import '../../../../OrTooltip-b1f38647.js';
-import '@vueuse/core';
-import '../../../../OrPopover-4e8acb7b.js';
-import '../../../../floating-ui.dom.esm-83eba816.js';
-import '../../../../OrBottomSheet-ddba20c1.js';
-import '../../../../OrOverlay-efa7992e.js';
-import '../../../../OrTeleport.vue2-e9ba3054.js';
-import 'portal-vue';
-import '../../../../useElevation-aac032f4.js';
-import '../../../../useResponsive-e13dfbb0.js';

package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const CollapseButtonContainer: string[];
-export declare const CollapseButton: string[];