@onereach/ui-components 8.5.0 → 8.5.1-beta.3662.0

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

@@ -0,0 +1 @@
+export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonV3-3b06eb3c.js';

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

@@ -0,0 +1,6 @@
+export declare const SkeletonRoot: string[];
+export declare const SkeletonTextContainerRoot: string[];
+export declare const SkeletonCircle: string[];
+export declare const SkeletonRect: string[];
+export declare const SkeletonText: string[];
+export declare const SkeletonAnimated: string[];

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

@@ -0,0 +1 @@
+export { g as SkeletonAnimated, d as SkeletonCircle, e as SkeletonRect, S as SkeletonRoot, f as SkeletonText, c as SkeletonTextContainerRoot } from '../OrSkeletonV3-3b06eb3c.js';

package/dist/bundled/v3/components/OrSkeletonV3-3b06eb3c.js

@@ -0,0 +1,224 @@
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderList } from 'vue';
+import { r as range_1 } from './OrSkeleton-ae1ee1d4.js';
+import { defineComponent, ref, computed } from 'vue-demi';
+import { p as pxToRem } from './OrBottomSheetV3-199292db.js';
+
+const SkeletonRoot = [
+// Position
+'relative',
+// Layout
+'overflow-hidden',
+// Box
+'p-0',
+// Borders
+'border-0',
+// Theme
+'bg-skeletons-gradient', 'dark:bg-skeletons-gradient-dark',
+// Background
+'bg-repeat'];
+const SkeletonTextContainerRoot = [
+// Layout
+'flex', 'flex-col',
+// Box
+'h-auto'];
+const SkeletonCircle = [
+// Box
+'rounded-full'];
+const SkeletonRect = [
+// Box
+'rounded-md'];
+const SkeletonText = [
+// Box
+'w-full', 'rounded-md'];
+const SkeletonAnimated = [
+// Background
+'bg-[length:200%]',
+// Animation
+'animate-skeleton-loader'];
+
+var script$2 = defineComponent({
+  name: 'OrSkeletonCircle',
+  props: {
+    animated: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    size: {
+      type: [Number, String],
+      required: false,
+      default: 40
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-skeleton-v3', 'or-skeleton-circle', ...SkeletonRoot, ...SkeletonCircle, ...(props.animated ? SkeletonAnimated : [])]);
+    const rootStyle = computed(() => {
+      var _a;
+      const size = (_a = props.size) !== null && _a !== void 0 ? _a : 40; // 40px - medium OrAvatar
+      const sizeStyle = typeof size === 'number' ? pxToRem(size) : size;
+      return {
+        'width': sizeStyle,
+        'min-width': sizeStyle,
+        'height': sizeStyle,
+        'min-height': sizeStyle
+      };
+    });
+    return {
+      root,
+      rootStyles,
+      rootStyle
+    };
+  }
+});
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    style: normalizeStyle(_ctx.rootStyle)
+  }, null, 6 /* CLASS, STYLE */);
+}
+
+script$2.render = render$2;
+script$2.__file = "src/components/or-skeleton-v3/or-skeleton-circle-v3/OrSkeletonCircle.vue";
+
+var script$1 = defineComponent({
+  name: 'OrSkeletonRect',
+  props: {
+    animated: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '100%'
+    },
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 36
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-skeleton-v3', 'or-skeleton-rect', ...SkeletonRoot, ...SkeletonRect, ...(props.animated ? SkeletonAnimated : [])]);
+    const rootStyle = computed(() => {
+      var _a, _b;
+      const width = (_a = props.width) !== null && _a !== void 0 ? _a : '100%';
+      const height = (_b = props.height) !== null && _b !== void 0 ? _b : 36; // 36px - default OrInput height
+      return {
+        'width': typeof width === 'number' ? pxToRem(width) : width,
+        'height': typeof height === 'number' ? pxToRem(height) : height
+      };
+    });
+    return {
+      root,
+      rootStyles,
+      rootStyle
+    };
+  }
+});
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    style: normalizeStyle(_ctx.rootStyle)
+  }, null, 6 /* CLASS, STYLE */);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-skeleton-v3/or-skeleton-rect-v3/OrSkeletonRect.vue";
+
+var script = defineComponent({
+  name: 'OrSkeletonText',
+  props: {
+    animated: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    linesCount: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '100%'
+    },
+    fontSize: {
+      type: Number,
+      required: false,
+      default: 16
+    },
+    lineHeight: {
+      type: Number,
+      required: false,
+      default: 24
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const containerStyles = computed(() => ['or-skeleton-text-root', ...SkeletonTextContainerRoot]);
+    const containerStyle = computed(() => {
+      var _a;
+      const width = (_a = props.width) !== null && _a !== void 0 ? _a : '100%';
+      return {
+        'width': typeof width === 'number' ? pxToRem(width) : width
+      };
+    });
+    const rowStyles = computed(() => ['or-skeleton-v3', 'or-skeleton-text', ...SkeletonRoot, ...SkeletonText, ...(props.animated ? SkeletonAnimated : [])]);
+    const rowStyle = computed(() => {
+      var _a, _b;
+      const height = (_a = props.fontSize) !== null && _a !== void 0 ? _a : 16;
+      const margin = (((_b = props.lineHeight) !== null && _b !== void 0 ? _b : 24) - height) / 2;
+      return {
+        'height': typeof height === 'number' ? pxToRem(height) : height,
+        'margin': `${typeof margin === 'number' ? pxToRem(margin) : margin} 0`
+      };
+    });
+    // State
+    const lineKeys = computed(() => range_1(props.linesCount));
+    return {
+      root,
+      containerStyles,
+      containerStyle,
+      rowStyles,
+      rowStyle,
+      lineKeys
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.containerStyles),
+    style: normalizeStyle(_ctx.containerStyle)
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.lineKeys, key => {
+    return openBlock(), createElementBlock("div", {
+      key: key,
+      class: normalizeClass(_ctx.rowStyles),
+      style: normalizeStyle(_ctx.rowStyle)
+    }, null, 6 /* CLASS, STYLE */);
+  }), 128 /* KEYED_FRAGMENT */))], 6 /* CLASS, STYLE */);
+}
+
+script.render = render;
+script.__file = "src/components/or-skeleton-v3/or-skeleton-text-v3/OrSkeletonText.vue";
+
+export { SkeletonRoot as S, script$1 as a, script as b, SkeletonTextContainerRoot as c, SkeletonCircle as d, SkeletonRect as e, SkeletonText as f, SkeletonAnimated as g, script$2 as s };

package/dist/bundled/v3/components/OrSlider/OrSlider.js

@@ -0,0 +1,321 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createCommentVNode, renderSlot, createVNode, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, pushScopeId, popScopeId } from 'vue';
+import { s as styleInject } from '../OrAvatar-bfa6fd65.js';
+import { defineComponent, ref } from 'vue-demi';
+import { o as onClickOutside, a1 as useDraggable, ae as addClass, af as removeClass } from '../OrBottomSheetV3-199292db.js';
+import { OrIcon as script$1 } from '../OrIcon/index.js';
+
+var script = defineComponent({
+  name: 'OrSlider',
+  components: {
+    OrIcon: script$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: null,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 10
+    },
+    snapToSteps: {
+      type: Boolean,
+      default: false
+    },
+    showMarker: {
+      type: Boolean,
+      default: false
+    },
+    markerValue: {
+      type: Number,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props) {
+    const slider = ref(null);
+    const isActive = ref(false);
+    onClickOutside(slider, () => {
+      isActive.value = false;
+    });
+    return {
+      slider,
+      initialValue: props.modelValue,
+      isActive,
+      localValue: props.modelValue
+    };
+  },
+  computed: {
+    classes() {
+      return [{
+        'is-disabled': this.disabled
+      }, {
+        'is-active': this.isActive.valueOf()
+      }, {
+        'has-icon': this.hasIcon
+      }, {
+        'has-marker': this.showMarker
+      }];
+    },
+    hasIcon() {
+      return Boolean(this.$slots.icon) || Boolean(this.icon);
+    },
+    fillStyle() {
+      return {
+        transform: 'scaleX(' + this.relativeValue(this.localValue) + ')'
+      };
+    },
+    thumbStyle() {
+      return {
+        left: this.relativeValue(this.localValue) * 100 + '%'
+      };
+    },
+    markerText() {
+      // non-strict check also on undefined
+      return this.markerValue == null ? this.modelValue : this.markerValue;
+    },
+    snapPoints() {
+      const points = [];
+      let point = this.step * Math.ceil(this.moderatedMin / this.step);
+      while (point <= this.moderatedMax) {
+        points.push(point);
+        point += this.step;
+      }
+      return points;
+    },
+    moderatedMin() {
+      return this.max > this.min ? this.min : 0;
+    },
+    moderatedMax() {
+      return this.max > this.min ? this.max : 100;
+    }
+  },
+  watch: {
+    modelValue() {
+      this.setValue(this.modelValue);
+    }
+  },
+  mounted() {
+    useDraggable(this.$refs.thumb, {
+      onStart: (position, event) => this.onDragStart(event),
+      onMove: (position, event) => this.dragUpdate(event),
+      onEnd: this.onDragStop
+    });
+    const value = this.moderateValue(this.localValue ? this.localValue : 0);
+    this.setValue(value);
+  },
+  methods: {
+    focus() {
+      this.$el.focus();
+    },
+    reset() {
+      this.setValue(this.initialValue);
+    },
+    setValueWithSnap(value) {
+      value = this.moderateValue(value);
+      if (this.snapToSteps) {
+        value = this.getNearestSnapPoint(value);
+      }
+      this.setValue(value);
+    },
+    setValue(value) {
+      value = this.moderateValue(value);
+      if (value === this.localValue) {
+        return;
+      }
+      this.localValue = value;
+      this.$emit('update:modelValue', value);
+    },
+    incrementValue() {
+      this.setValueWithSnap(this.localValue + this.step);
+    },
+    decrementValue() {
+      this.setValueWithSnap(this.localValue - this.step);
+    },
+    getTrackOffset() {
+      let el = this.$refs.track;
+      let offset = el.offsetLeft;
+      while (el.offsetParent) {
+        el = el.offsetParent;
+        offset += el.offsetLeft;
+      }
+      return offset;
+    },
+    onDragStart(e) {
+      if (this.disabled) {
+        return;
+      }
+      if (!this.isActive) {
+        this.isActive = true;
+      }
+      addClass(document.body, 'or-slider--is-dragging');
+      this.dragUpdate(e);
+    },
+    dragUpdate(e) {
+      var _a;
+      const trackLength = (_a = this.$refs.track) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+      const relativeValue = (e.pageX - this.getTrackOffset()) / trackLength;
+      const value = this.moderateValue(this.moderatedMin + relativeValue * (this.moderatedMax - this.moderatedMin));
+      this.setValue(Math.round(value));
+    },
+    onDragStop() {
+      // todo find better solution! for smooth animation
+      setTimeout(() => this.isActive = false, 200);
+      if (this.snapToSteps && this.modelValue % this.step !== 0) {
+        this.setValueWithSnap(this.modelValue);
+      }
+      removeClass(document.body, 'or-slider--is-dragging');
+    },
+    getNearestSnapPoint(value) {
+      const previousSnapPoint = Math.floor(value / this.step) * this.step;
+      const nextSnapPoint = previousSnapPoint + this.step;
+      const midpoint = (previousSnapPoint + nextSnapPoint) / 2;
+      if (previousSnapPoint < this.moderatedMin) {
+        if (nextSnapPoint > this.moderatedMax) {
+          return value;
+        }
+        return nextSnapPoint;
+      }
+      if (value >= midpoint && nextSnapPoint <= this.moderatedMax) {
+        return nextSnapPoint;
+      }
+      return previousSnapPoint;
+    },
+    relativeValue(value) {
+      return (value - this.moderatedMin) / (this.moderatedMax - this.moderatedMin);
+    },
+    moderateValue(value) {
+      if (value < this.moderatedMin) {
+        return this.moderatedMin;
+      }
+      if (value > this.moderatedMax) {
+        return this.moderatedMax;
+      }
+      return value;
+    }
+  }
+});
+
+const _withScopeId = n => (pushScopeId("data-v-7f42d058"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["aria-valuemax", "aria-valuemin", "aria-valuenow", "tabindex"];
+const _hoisted_2 = ["name", "value"];
+const _hoisted_3 = {
+  key: 1,
+  class: "or-slider__icon"
+};
+const _hoisted_4 = {
+  class: "or-slider__track-background"
+};
+const _hoisted_5 = {
+  key: 0
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "or-slider__marker"
+};
+const _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  width: "36",
+  height: "36"
+}, [/*#__PURE__*/createElementVNode("path", {
+  d: "M11 .5c-1.7.2-3.4.9-4.7 2-1.1.9-2 2-2.5 3.2-1.2 2.4-1.2 5.1-.1 7.7 1.1 2.6 2.8 5 5.3 7.5 1.2 1.2 2.8 2.7 3 2.7 0 0 .3-.2.6-.5 3.2-2.7 5.6-5.6 7.1-8.5.8-1.5 1.1-2.6 1.3-3.8.2-1.4 0-2.9-.5-4.3-1.2-3.2-4.1-5.4-7.5-5.8-.5-.2-1.5-.2-2-.2z"
+})], -1 /* HOISTED */));
+const _hoisted_8 = {
+  class: "or-slider__marker-text"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_or_icon = resolveComponent("or-icon");
+  return openBlock(), createElementBlock("div", {
+    ref: "slider",
+    class: normalizeClass(["or-slider", _ctx.classes]),
+    role: "slider",
+    "aria-valuemax": _ctx.moderatedMax,
+    "aria-valuemin": _ctx.moderatedMin,
+    "aria-valuenow": _ctx.localValue,
+    tabindex: _ctx.disabled ? null : _ctx.tabindex || '0',
+    onFocus: _cache[2] || (_cache[2] = $event => _ctx.isActive = true),
+    onKeydown: [_cache[3] || (_cache[3] = withKeys(withModifiers(function () {
+      return _ctx.decrementValue && _ctx.decrementValue(...arguments);
+    }, ["prevent"]), ["down"])), _cache[4] || (_cache[4] = withKeys(withModifiers(function () {
+      return _ctx.decrementValue && _ctx.decrementValue(...arguments);
+    }, ["prevent"]), ["left"])), _cache[5] || (_cache[5] = withKeys(withModifiers(function () {
+      return _ctx.incrementValue && _ctx.incrementValue(...arguments);
+    }, ["prevent"]), ["right"])), _cache[6] || (_cache[6] = withKeys(withModifiers(function () {
+      return _ctx.incrementValue && _ctx.incrementValue(...arguments);
+    }, ["prevent"]), ["up"]))]
+  }, [_ctx.name ? (openBlock(), createElementBlock("input", {
+    key: 0,
+    class: "or-slider__hidden-input",
+    type: "hidden",
+    name: _ctx.name,
+    value: _ctx.modelValue
+  }, null, 8 /* PROPS */, _hoisted_2)) : createCommentVNode("v-if", true), _ctx.hasIcon ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_component_or_icon, {
+    icon: _ctx.icon,
+    color: "neutral-5"
+  }, null, 8 /* PROPS */, ["icon"])])])) : createCommentVNode("v-if", true), createElementVNode("div", {
+    ref: "track",
+    class: "or-slider__track",
+    onPointerdown: _cache[0] || (_cache[0] = function () {
+      return _ctx.onDragStart && _ctx.onDragStart(...arguments);
+    }),
+    onPointerup: _cache[1] || (_cache[1] = function () {
+      return _ctx.onDragStop && _ctx.onDragStop(...arguments);
+    })
+  }, [createElementVNode("div", _hoisted_4, [_ctx.snapToSteps ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.snapPoints, point => {
+    return openBlock(), createElementBlock("span", {
+      key: point,
+      class: "or-slider__snap-point",
+      style: normalizeStyle({
+        left: 100 * _ctx.relativeValue(point) + '%'
+      })
+    }, null, 4 /* STYLE */);
+  }), 128 /* KEYED_FRAGMENT */))])) : createCommentVNode("v-if", true)]), createElementVNode("div", {
+    class: "or-slider__track-fill",
+    style: normalizeStyle(_ctx.fillStyle)
+  }, null, 4 /* STYLE */), createElementVNode("div", {
+    ref: "thumb",
+    class: "or-slider__thumb",
+    style: normalizeStyle(_ctx.thumbStyle)
+  }, [_ctx.showMarker ? (openBlock(), createElementBlock("div", _hoisted_6, [_hoisted_7, createElementVNode("span", _hoisted_8, toDisplayString(_ctx.markerText), 1 /* TEXT */)])) : createCommentVNode("v-if", true)], 4 /* STYLE */)], 544 /* HYDRATE_EVENTS, NEED_PATCH */)], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1);
+}
+
+var css_248z$1 = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-7f42d058 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-7f42d058 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-slider[data-v-7f42d058] {\n  display: flex;\n  align-items: center;\n  outline: none;\n}\n.or-slider:not(.is-disabled).is-active:not(.has-marker) .or-slider__thumb[data-v-7f42d058]::before, .or-slider:not(.is-disabled).is-dragging:not(.has-marker) .or-slider__thumb[data-v-7f42d058]::before {\n  transform: scale(1);\n}\n.or-slider:not(.is-disabled).is-active .or-slider__marker[data-v-7f42d058], .or-slider:not(.is-disabled).is-dragging .or-slider__marker[data-v-7f42d058] {\n  opacity: 1;\n  transform: scale(1) translateY(-26px);\n}\n.or-slider:not(.is-disabled).is-active .or-slider__marker-text[data-v-7f42d058], .or-slider:not(.is-disabled).is-dragging .or-slider__marker-text[data-v-7f42d058] {\n  color: white;\n}\n.or-slider:not(.is-disabled).is-active .or-slider__snap-point[data-v-7f42d058], .or-slider:not(.is-disabled).is-dragging .or-slider__snap-point[data-v-7f42d058] {\n  opacity: 1;\n}\n.or-slider:not(.is-disabled).is-active .or-slider__icon[data-v-7f42d058] .or-icon, .or-slider:not(.is-disabled).is-dragging .or-slider__icon[data-v-7f42d058] .or-icon {\n  color: var(--c-primary);\n}\n.or-slider.is-disabled .or-slider__icon[data-v-7f42d058] {\n  opacity: 0.6;\n}\n.or-slider.is-disabled .or-slider__track[data-v-7f42d058] {\n  cursor: default;\n}\n.or-slider.is-disabled .or-slider__track-fill[data-v-7f42d058] {\n  background-color: transparent;\n}\n.or-slider.is-disabled .or-slider__thumb[data-v-7f42d058] {\n  background-color: #DDD;\n  border: var(--s-1) solid white;\n}\n.or-slider__icon[data-v-7f42d058] {\n  display: flex;\n  margin-right: var(--s-4);\n}\n.or-slider__track[data-v-7f42d058] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 18px;\n  margin: 0 auto;\n  cursor: pointer;\n}\n.or-slider__track-background[data-v-7f42d058],\n.or-slider__track-fill[data-v-7f42d058] {\n  position: absolute;\n  top: calc((18px - 3px) / 2);\n  left: 0;\n  display: block;\n  height: 3px;\n  content: \"\";\n}\n.or-slider__track-background[data-v-7f42d058] {\n  width: 100%;\n  background-color: var(--c-neutral-1-darken-5);\n}\n.or-slider__snap-point[data-v-7f42d058] {\n  position: absolute;\n  z-index: 1;\n  width: var(--s-1);\n  height: 3px;\n  background-color: var(--c-neutral-6);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.or-slider__track-fill[data-v-7f42d058] {\n  width: 100%;\n  background-color: var(--c-primary);\n  transform-origin: left;\n}\n.or-slider__thumb[data-v-7f42d058] {\n  position: relative;\n  left: 0;\n  z-index: 1;\n  display: block;\n  width: 14px;\n  height: 14px;\n  margin-left: calc(-14px / 2);\n  cursor: inherit;\n  background-color: var(--c-primary);\n  border-radius: 50%;\n}\n.or-slider__thumb[data-v-7f42d058]::before {\n  position: absolute;\n  display: block;\n  width: 36px;\n  height: 36px;\n  margin-top: calc((14px - 36px) / 2);\n  margin-left: calc((14px - 36px) / 2);\n  content: \"\";\n  background-color: rgba(33, 150, 243, 0.38);\n  border-radius: 50%;\n  transition: transform 0.2s ease;\n  transform: scale(0);\n  transform-origin: center;\n}\n.or-slider__marker[data-v-7f42d058] {\n  position: absolute;\n  width: 36px;\n  height: 36px;\n  margin-top: calc((14px - 36px) / 2);\n  margin-left: calc((14px - 36px) / 2);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  opacity: 0;\n  transition: all 0.2s ease;\n  transform: scale(0) translateY(0);\n}\n.or-slider__marker svg[data-v-7f42d058] {\n  width: 36px;\n  height: 36px;\n  fill: var(--c-primary);\n}\n.or-slider__marker-text[data-v-7f42d058] {\n  position: absolute;\n  top: var(--s-2);\n  left: 0;\n  width: 36px;\n  font-size: var(--fs-1);\n  font-weight: var(--fs-1);\n  color: var(--c-primary);\n  text-align: center;\n  transition: color 0.2s ease;\n}";
+styleInject(css_248z$1);
+
+var css_248z = ".or-slider--is-dragging {\n  touch-action: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-7f42d058";
+script.__file = "src/components/or-slider/OrSlider.vue";
+
+export { script as default };

package/dist/bundled/v3/components/OrSlider/OrSlider.vue.d.ts

@@ -0,0 +1,136 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: any;
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    tabindex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    snapToSteps: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMarker: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    markerValue: {
+        type: NumberConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    slider: import("vue-demi").Ref<HTMLElement | null>;
+    initialValue: any;
+    isActive: import("vue-demi").Ref<{
+        valueOf: () => boolean;
+    }>;
+    localValue: any;
+}, unknown, {
+    classes(): Record<string, boolean>[];
+    hasIcon(): boolean;
+    fillStyle(): Record<string, string>;
+    thumbStyle(): Record<string, string>;
+    markerText(): number;
+    snapPoints(): number[];
+    moderatedMin(): number;
+    moderatedMax(): number;
+}, {
+    focus(): void;
+    reset(): void;
+    setValueWithSnap(value: number): void;
+    setValue(value: number): void;
+    incrementValue(): void;
+    decrementValue(): void;
+    getTrackOffset(): number;
+    onDragStart(e: PointerEvent): void;
+    dragUpdate(e: PointerEvent): void;
+    onDragStop(): void;
+    getNearestSnapPoint(value: number): number;
+    relativeValue(value: number): number;
+    moderateValue(value: number): number;
+}, 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<{
+    modelValue: {
+        type: any;
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    tabindex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    snapToSteps: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMarker: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    markerValue: {
+        type: NumberConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    name: string;
+    modelValue: any;
+    tabindex: number;
+    icon: string;
+    min: number;
+    max: number;
+    step: number;
+    snapToSteps: boolean;
+    showMarker: boolean;
+    markerValue: number;
+    disabled: boolean;
+}>;
+export default _default;

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

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