@onereach/ui-components 8.5.2-beta.3673.0 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.5.2-beta.3673.0",
+  "version": "8.6.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.2.0",
+    "@onereach/styles": "^6.3.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -62,9 +62,9 @@
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
     "@types/uuid": "8.3.1",
-    "@vueuse/core": "9.13.0",
-    "@vueuse/integrations": "9.13.0",
-    "@vueuse/math": "9.13.0",
+    "@vueuse/core": "9.5.0",
+    "@vueuse/integrations": "9.5.0",
+    "@vueuse/math": "9.5.0",
     "codemirror": "6.0.1",
     "focus-trap": "7.2.0",
     "prosemirror-markdown": "1.10.1",
@@ -176,5 +176,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "95513429e82f5ddbca6ae7cda9cf5c92d7616aae"
 }

package/src/components/index.ts

@@ -91,7 +91,6 @@ export * from './or-skeleton-v3';
 export * from './or-slider';
 export * from './or-slider-v3';
 export * from './or-sorting-v3';
-export * from './or-status-v3';
 export * from './or-stepper';
 export * from './or-switch';
 export * from './or-switch-v3';

package/src/components/or-button-group-v3/styles.ts

@@ -16,6 +16,12 @@ export const ButtonGroupVariants: Record<ButtonGroupVariant, string[]> = {
   ],
 
   [ButtonGroupVariant.Outlined]: [
+    // Position
+    'relative',
+
+    // Position (active, children)
+    'active:children:z-10',
+
     // Spacing
     '[&:not(:first-child)]:children:ml-[-1px]',
   ],

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -41,7 +41,7 @@ import { computed, defineComponent, PropType, reactive, ref, toRef } from 'vue-d
 import { useControlAttributes, useIdAttribute, useProxyModelValue } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
-import { CheckboxControl, CheckboxControlHandle, CheckboxRoot } from './styles';
+import { Checkbox, CheckboxControl, CheckboxControlHandle } from './styles';
 
 export default defineComponent({
   name: 'OrCheckbox',
@@ -115,7 +115,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-checkbox-v3',
-      ...CheckboxRoot,
+      ...Checkbox,
     ]);
 
     const controlStyles = computed(() => [

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

@@ -1,4 +1,4 @@
-export const CheckboxRoot: string[] = [
+export const Checkbox: string[] = [
   // Layout
   'layout-row',
 
@@ -33,10 +33,6 @@ export const CheckboxControl: string[] = [
   'theme-border-1-outline',
   'dark:theme-border-1-outline-dark',
 
-  // Theme (focus)
-  'focus-visible:theme-outline-2-primary',
-  'dark:focus-visible:theme-outline-2-primary-dark',
-
   // Theme (checked)
   'checked:theme-preset-1-primary',
   'dark:checked:theme-preset-1-primary-dark',
@@ -45,6 +41,9 @@ export const CheckboxControl: string[] = [
   'indeterminate:theme-preset-1-primary',
   'dark:indeterminate:theme-preset-1-primary-dark',
 
+  // Theme (focus)
+  'focus-visible:theme-outline-2-primary',
+  'dark:focus-visible:theme-outline-2-primary-dark',
 ];
 
 export const CheckboxControlHandle: string[] = [

package/dist/bundled/v2/components/OrStatusV3/OrStatus.js

@@ -1,2 +0,0 @@
-export { _ as default } from '../OrStatusV3-df677c6d.js';
-import '../OrAvatar-394ee178.js';

package/dist/bundled/v2/components/OrStatusV3/OrStatus.vue.d.ts

@@ -1,55 +0,0 @@
-import { formatTimeAgo } from '@vueuse/core';
-import { PropType } from 'vue-demi';
-import { StatusSize, StatusVariant } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    indicatorStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    timestampStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    formatTimeAgo: typeof formatTimeAgo;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    variant: {
-        type: PropType<"neutral" | "disabled" | "success" | "warning" | "error">;
-        default: StatusVariant;
-    };
-    size: {
-        type: PropType<"m" | "s">;
-        default: StatusSize;
-    };
-    timestamp: {
-        type: DateConstructor;
-        default: undefined;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    variant: {
-        type: PropType<"neutral" | "disabled" | "success" | "warning" | "error">;
-        default: StatusVariant;
-    };
-    size: {
-        type: PropType<"m" | "s">;
-        default: StatusSize;
-    };
-    timestamp: {
-        type: DateConstructor;
-        default: undefined;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    variant: "neutral" | "disabled" | "success" | "warning" | "error";
-    size: "m" | "s";
-    timestamp: Date;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    indicatorStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    timestampStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    formatTimeAgo: typeof formatTimeAgo;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    variant: "neutral" | "disabled" | "success" | "warning" | "error";
-    size: "m" | "s";
-    timestamp: Date;
-} & {}, {
-    variant: "neutral" | "disabled" | "success" | "warning" | "error";
-    size: "m" | "s";
-    timestamp: Date;
-}, true>);
-export default _default;

package/dist/bundled/v2/components/OrStatusV3/index.d.ts

@@ -1,2 +0,0 @@
-export { default as OrStatusV3 } from './OrStatus.vue';
-export * from './props';

package/dist/bundled/v2/components/OrStatusV3/index.js

@@ -1 +0,0 @@
-export { _ as OrStatusV3, a as StatusSize, S as StatusVariant } from '../OrStatusV3-df677c6d.js';

package/dist/bundled/v2/components/OrStatusV3/props.d.ts

@@ -1,11 +0,0 @@
-export declare enum StatusVariant {
-    Neutral = "neutral",
-    Disabled = "disabled",
-    Success = "success",
-    Warning = "warning",
-    Error = "error"
-}
-export declare enum StatusSize {
-    M = "m",
-    S = "s"
-}

package/dist/bundled/v2/components/OrStatusV3/props.js

@@ -1 +0,0 @@
-export { a as StatusSize, S as StatusVariant } from '../OrStatusV3-df677c6d.js';

package/dist/bundled/v2/components/OrStatusV3/styles.d.ts

@@ -1,7 +0,0 @@
-import { StatusSize, StatusVariant } from './props';
-export declare const Status: string[];
-export declare const StatusVariants: Record<StatusVariant, string[]>;
-export declare const StatusSizes: Record<StatusSize, string[]>;
-export declare const StatusIndicator: string[];
-export declare const StatusIndicatorVariants: Record<StatusVariant, string[]>;
-export declare const StatusTimestamp: string[];

package/dist/bundled/v2/components/OrStatusV3/styles.js

@@ -1 +0,0 @@
-export { b as Status, e as StatusIndicator, f as StatusIndicatorVariants, d as StatusSizes, g as StatusTimestamp, c as StatusVariants } from '../OrStatusV3-df677c6d.js';

package/dist/bundled/v2/components/OrStatusV3-df677c6d.js

@@ -1,152 +0,0 @@
-import { ag as formatTimeAgo } from './OrBottomSheetV3-0774c9ec.js';
-import { defineComponent, ref, computed } from 'vue-demi';
-import { n as normalizeComponent } from './OrAvatar-394ee178.js';
-
-var StatusVariant;
-(function (StatusVariant) {
-  StatusVariant["Neutral"] = "neutral";
-  StatusVariant["Disabled"] = "disabled";
-  StatusVariant["Success"] = "success";
-  StatusVariant["Warning"] = "warning";
-  StatusVariant["Error"] = "error";
-})(StatusVariant || (StatusVariant = {}));
-var StatusSize;
-(function (StatusSize) {
-  StatusSize["M"] = "m";
-  StatusSize["S"] = "s";
-})(StatusSize || (StatusSize = {}));
-
-const Status = [
-// Layout
-'layout-inline-row',
-// Spacing
-'gap-sm'];
-const StatusVariants = {
-  [StatusVariant.Neutral]: [
-  // Theme
-  'theme-foreground-default', 'dark:theme-foreground-default-dark'],
-  [StatusVariant.Disabled]: [
-  // Theme
-  'theme-foreground-outline', 'dark:theme-foreground-outline-dark'],
-  [StatusVariant.Success]: [
-  // Theme
-  'theme-foreground-success', 'dark:theme-foreground-success-dark'],
-  [StatusVariant.Warning]: [
-  // Theme
-  'theme-foreground-warning', 'dark:theme-foreground-warning-dark'],
-  [StatusVariant.Error]: [
-  // Theme
-  'theme-foreground-error', 'dark:theme-foreground-error-dark']
-};
-const StatusSizes = {
-  [StatusSize.M]: [
-  // Typography
-  'typography-body-2-regular'],
-  [StatusSize.S]: [
-  // Typography
-  'typography-caption-regular']
-};
-const StatusIndicator = [
-// Layout
-'shrink-0',
-// Box
-'w-[10px] md:w-[8px]', 'h-[10px] md:h-[8px]',
-// Shape
-'rounded-full'];
-const StatusIndicatorVariants = {
-  [StatusVariant.Neutral]: [
-  // Theme
-  'theme-background-primary', 'dark:theme-background-primary-dark'],
-  [StatusVariant.Disabled]: [
-  // Theme
-  'theme-background-current', 'dark:theme-background-current-dark'],
-  [StatusVariant.Success]: [
-  // Theme
-  'theme-background-success-hover', 'dark:theme-background-success-hover-dark'],
-  [StatusVariant.Warning]: [
-  // Theme
-  'theme-background-warning-hover', 'dark:theme-background-warning-hover-dark'],
-  [StatusVariant.Error]: [
-  // Theme
-  'theme-background-error-hover', 'dark:theme-background-error-hover-dark']
-};
-const StatusTimestamp = [
-// Layout
-'shrink-0',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-
-var script = defineComponent({
-  props: {
-    variant: {
-      type: String,
-      default: StatusVariant.Neutral
-    },
-    size: {
-      type: String,
-      default: StatusSize.M
-    },
-    timestamp: {
-      type: Date,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-status-v3', ...Status, ...StatusVariants[props.variant], ...StatusSizes[props.size]]);
-    const indicatorStyles = computed(() => [...StatusIndicator, ...StatusIndicatorVariants[props.variant]]);
-    const timestampStyles = computed(() => [...StatusTimestamp]);
-    return {
-      root,
-      rootStyles,
-      indicatorStyles,
-      timestampStyles,
-      formatTimeAgo
-    };
-  }
-});
-
-/* 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('div', {
-    class: _vm.indicatorStyles
-  }), _vm._v(" "), _c('span', {
-    class: ['truncate']
-  }, [_vm._t("default")], 2), _vm._v(" "), _vm.timestamp ? [_c('span', {
-    class: _vm.timestampStyles
-  }, [_vm._v("\n      (" + _vm._s(_vm.formatTimeAgo(_vm.timestamp)) + ")\n    ")])] : _vm._e()], 2);
-};
-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);
-
-export { StatusVariant as S, __vue_component__ as _, StatusSize as a, Status as b, StatusVariants as c, StatusSizes as d, StatusIndicator as e, StatusIndicatorVariants as f, StatusTimestamp as g };

package/dist/bundled/v3/components/OrStatusV3/OrStatus.js

@@ -1 +0,0 @@
-export { s as default } from '../OrStatusV3-3ab0294c.js';

package/dist/bundled/v3/components/OrStatusV3/OrStatus.vue.d.ts

@@ -1,41 +0,0 @@
-import { formatTimeAgo } from '@vueuse/core';
-import { PropType } from 'vue-demi';
-import { StatusSize, StatusVariant } from './props';
-declare const _default: import("vue-demi").DefineComponent<{
-    variant: {
-        type: PropType<"neutral" | "disabled" | "success" | "warning" | "error">;
-        default: StatusVariant;
-    };
-    size: {
-        type: PropType<"m" | "s">;
-        default: StatusSize;
-    };
-    timestamp: {
-        type: DateConstructor;
-        default: undefined;
-    };
-}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-    indicatorStyles: import("vue-demi").ComputedRef<string[]>;
-    timestampStyles: import("vue-demi").ComputedRef<string[]>;
-    formatTimeAgo: typeof formatTimeAgo;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    variant: {
-        type: PropType<"neutral" | "disabled" | "success" | "warning" | "error">;
-        default: StatusVariant;
-    };
-    size: {
-        type: PropType<"m" | "s">;
-        default: StatusSize;
-    };
-    timestamp: {
-        type: DateConstructor;
-        default: undefined;
-    };
-}>>, {
-    variant: "neutral" | "disabled" | "success" | "warning" | "error";
-    size: "m" | "s";
-    timestamp: Date;
-}>;
-export default _default;

package/dist/bundled/v3/components/OrStatusV3/index.d.ts

@@ -1,2 +0,0 @@
-export { default as OrStatusV3 } from './OrStatus.vue';
-export * from './props';

package/dist/bundled/v3/components/OrStatusV3/index.js

@@ -1 +0,0 @@
-export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from '../OrStatusV3-3ab0294c.js';

package/dist/bundled/v3/components/OrStatusV3/props.d.ts

@@ -1,11 +0,0 @@
-export declare enum StatusVariant {
-    Neutral = "neutral",
-    Disabled = "disabled",
-    Success = "success",
-    Warning = "warning",
-    Error = "error"
-}
-export declare enum StatusSize {
-    M = "m",
-    S = "s"
-}

package/dist/bundled/v3/components/OrStatusV3/props.js

@@ -1 +0,0 @@
-export { a as StatusSize, S as StatusVariant } from '../OrStatusV3-3ab0294c.js';

package/dist/bundled/v3/components/OrStatusV3/styles.d.ts

@@ -1,7 +0,0 @@
-import { StatusSize, StatusVariant } from './props';
-export declare const Status: string[];
-export declare const StatusVariants: Record<StatusVariant, string[]>;
-export declare const StatusSizes: Record<StatusSize, string[]>;
-export declare const StatusIndicator: string[];
-export declare const StatusIndicatorVariants: Record<StatusVariant, string[]>;
-export declare const StatusTimestamp: string[];

package/dist/bundled/v3/components/OrStatusV3/styles.js

@@ -1 +0,0 @@
-export { b as Status, e as StatusIndicator, f as StatusIndicatorVariants, d as StatusSizes, g as StatusTimestamp, c as StatusVariants } from '../OrStatusV3-3ab0294c.js';

package/dist/bundled/v3/components/OrStatusV3-3ab0294c.js

@@ -1,130 +0,0 @@
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode } from 'vue';
-import { ag as formatTimeAgo } from './OrBottomSheetV3-d9cb62e3.js';
-import { defineComponent, ref, computed } from 'vue-demi';
-
-var StatusVariant;
-(function (StatusVariant) {
-  StatusVariant["Neutral"] = "neutral";
-  StatusVariant["Disabled"] = "disabled";
-  StatusVariant["Success"] = "success";
-  StatusVariant["Warning"] = "warning";
-  StatusVariant["Error"] = "error";
-})(StatusVariant || (StatusVariant = {}));
-var StatusSize;
-(function (StatusSize) {
-  StatusSize["M"] = "m";
-  StatusSize["S"] = "s";
-})(StatusSize || (StatusSize = {}));
-
-const Status = [
-// Layout
-'layout-inline-row',
-// Spacing
-'gap-sm'];
-const StatusVariants = {
-  [StatusVariant.Neutral]: [
-  // Theme
-  'theme-foreground-default', 'dark:theme-foreground-default-dark'],
-  [StatusVariant.Disabled]: [
-  // Theme
-  'theme-foreground-outline', 'dark:theme-foreground-outline-dark'],
-  [StatusVariant.Success]: [
-  // Theme
-  'theme-foreground-success', 'dark:theme-foreground-success-dark'],
-  [StatusVariant.Warning]: [
-  // Theme
-  'theme-foreground-warning', 'dark:theme-foreground-warning-dark'],
-  [StatusVariant.Error]: [
-  // Theme
-  'theme-foreground-error', 'dark:theme-foreground-error-dark']
-};
-const StatusSizes = {
-  [StatusSize.M]: [
-  // Typography
-  'typography-body-2-regular'],
-  [StatusSize.S]: [
-  // Typography
-  'typography-caption-regular']
-};
-const StatusIndicator = [
-// Layout
-'shrink-0',
-// Box
-'w-[10px] md:w-[8px]', 'h-[10px] md:h-[8px]',
-// Shape
-'rounded-full'];
-const StatusIndicatorVariants = {
-  [StatusVariant.Neutral]: [
-  // Theme
-  'theme-background-primary', 'dark:theme-background-primary-dark'],
-  [StatusVariant.Disabled]: [
-  // Theme
-  'theme-background-current', 'dark:theme-background-current-dark'],
-  [StatusVariant.Success]: [
-  // Theme
-  'theme-background-success-hover', 'dark:theme-background-success-hover-dark'],
-  [StatusVariant.Warning]: [
-  // Theme
-  'theme-background-warning-hover', 'dark:theme-background-warning-hover-dark'],
-  [StatusVariant.Error]: [
-  // Theme
-  'theme-background-error-hover', 'dark:theme-background-error-hover-dark']
-};
-const StatusTimestamp = [
-// Layout
-'shrink-0',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-
-var script = defineComponent({
-  props: {
-    variant: {
-      type: String,
-      default: StatusVariant.Neutral
-    },
-    size: {
-      type: String,
-      default: StatusSize.M
-    },
-    timestamp: {
-      type: Date,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-status-v3', ...Status, ...StatusVariants[props.variant], ...StatusSizes[props.size]]);
-    const indicatorStyles = computed(() => [...StatusIndicator, ...StatusIndicatorVariants[props.variant]]);
-    const timestampStyles = computed(() => [...StatusTimestamp]);
-    return {
-      root,
-      rootStyles,
-      indicatorStyles,
-      timestampStyles,
-      formatTimeAgo
-    };
-  }
-});
-
-const _hoisted_1 = {
-  class: /*#__PURE__*/normalizeClass(['truncate'])
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.indicatorStyles)
-  }, null, 2 /* CLASS */), createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), _ctx.timestamp ? (openBlock(), createElementBlock("span", {
-    key: 0,
-    class: normalizeClass(_ctx.timestampStyles)
-  }, " (" + toDisplayString(_ctx.formatTimeAgo(_ctx.timestamp)) + ") ", 3 /* TEXT, CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-status-v3/OrStatus.vue";
-
-export { StatusVariant as S, StatusSize as a, Status as b, StatusVariants as c, StatusSizes as d, StatusIndicator as e, StatusIndicatorVariants as f, StatusTimestamp as g, script as s };