@talex-touch/tuffex 0.3.3

package/dist/es/slider/src/TxSlider.vue.d.ts

@@ -0,0 +1,108 @@
+import { SliderProps } from './types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SliderProps>, {
+    modelValue: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    showValue: boolean;
+    showTooltip: boolean;
+    tooltipTrigger: string;
+    tooltipPlacement: string;
+    tooltipTilt: boolean;
+    tooltipTiltMaxDeg: number;
+    tooltipOffsetMaxPx: number;
+    tooltipAccelBoost: number;
+    tooltipSpringStiffness: number;
+    tooltipSpringDamping: number;
+    tooltipMotion: string;
+    tooltipMotionDuration: number;
+    tooltipMotionBlurPx: number;
+    tooltipDistortSkewDeg: number;
+    tooltipJelly: boolean;
+    tooltipJellyFrequency: number;
+    tooltipJellyDecay: number;
+    tooltipJellyRotateDeg: number;
+    tooltipJellySkewDeg: number;
+    tooltipJellySquash: number;
+    tooltipJellyTriggerAccel: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => void;
+    change: (value: number) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SliderProps>, {
+    modelValue: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    showValue: boolean;
+    showTooltip: boolean;
+    tooltipTrigger: string;
+    tooltipPlacement: string;
+    tooltipTilt: boolean;
+    tooltipTiltMaxDeg: number;
+    tooltipOffsetMaxPx: number;
+    tooltipAccelBoost: number;
+    tooltipSpringStiffness: number;
+    tooltipSpringDamping: number;
+    tooltipMotion: string;
+    tooltipMotionDuration: number;
+    tooltipMotionBlurPx: number;
+    tooltipDistortSkewDeg: number;
+    tooltipJelly: boolean;
+    tooltipJellyFrequency: number;
+    tooltipJellyDecay: number;
+    tooltipJellyRotateDeg: number;
+    tooltipJellySkewDeg: number;
+    tooltipJellySquash: number;
+    tooltipJellyTriggerAccel: number;
+}>>> & Readonly<{
+    onChange?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    max: number;
+    modelValue: number;
+    min: number;
+    step: number;
+    showValue: boolean;
+    showTooltip: boolean;
+    tooltipTrigger: "drag" | "hover" | "always";
+    tooltipPlacement: "top" | "bottom";
+    tooltipTilt: boolean;
+    tooltipTiltMaxDeg: number;
+    tooltipOffsetMaxPx: number;
+    tooltipAccelBoost: number;
+    tooltipSpringStiffness: number;
+    tooltipSpringDamping: number;
+    tooltipMotion: "blur" | "fade" | "none";
+    tooltipMotionDuration: number;
+    tooltipMotionBlurPx: number;
+    tooltipDistortSkewDeg: number;
+    tooltipJelly: boolean;
+    tooltipJellyFrequency: number;
+    tooltipJellyDecay: number;
+    tooltipJellyRotateDeg: number;
+    tooltipJellySkewDeg: number;
+    tooltipJellySquash: number;
+    tooltipJellyTriggerAccel: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/es/slider/src/TxSlider.vue.js

@@ -0,0 +1,534 @@
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, createBlock, normalizeStyle, Transition, withCtx, toDisplayString } from 'vue';
+
+const _hoisted_1 = {
+  class: "tx-slider__track",
+  "aria-hidden": "true"
+};
+const _hoisted_2 = ["data-motion"];
+const _hoisted_3 = ["data-motion"];
+const _hoisted_4 = ["min", "max", "step", "disabled", "value"];
+const _hoisted_5 = {
+  key: 0,
+  class: "tx-slider__value"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxSlider"
+  },
+  __name: "TxSlider",
+  props: {
+    modelValue: { default: 0 },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    disabled: { type: Boolean, default: false },
+    showValue: { type: Boolean, default: false },
+    formatValue: {},
+    showTooltip: { type: Boolean, default: true },
+    tooltipTrigger: { default: "drag" },
+    tooltipFormatter: {},
+    tooltipPlacement: { default: "top" },
+    tooltipTilt: { type: Boolean, default: false },
+    tooltipTiltMaxDeg: { default: 18 },
+    tooltipOffsetMaxPx: { default: 28 },
+    tooltipAccelBoost: { default: 0.65 },
+    tooltipSpringStiffness: { default: 320 },
+    tooltipSpringDamping: { default: 24 },
+    tooltipMotion: { default: "blur" },
+    tooltipMotionDuration: { default: 160 },
+    tooltipMotionBlurPx: { default: 10 },
+    tooltipDistortSkewDeg: { default: 8 },
+    tooltipJelly: { type: Boolean, default: true },
+    tooltipJellyFrequency: { default: 8.5 },
+    tooltipJellyDecay: { default: 10 },
+    tooltipJellyRotateDeg: { default: 10 },
+    tooltipJellySkewDeg: { default: 12 },
+    tooltipJellySquash: { default: 0.16 },
+    tooltipJellyTriggerAccel: { default: 2800 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputRef = ref(null);
+    const mainRef = ref(null);
+    const tooltipRef = ref(null);
+    const mainWidth = ref(0);
+    const thumbSizePx = ref(14);
+    const tooltipWidth = ref(0);
+    const dragging = ref(false);
+    const hovering = ref(false);
+    const lastInputTs = ref(null);
+    const lastInputValue = ref(null);
+    const velocity = ref(0);
+    const acceleration = ref(0);
+    const lastPointerTs = ref(null);
+    const lastPointerX = ref(null);
+    const pointerVelocity = ref(0);
+    const pointerAcceleration = ref(0);
+    const hadPointerMove = ref(false);
+    const tooltipTiltDeg = ref(0);
+    const tooltipOffsetX = ref(0);
+    const tooltipTargetTiltDeg = ref(0);
+    const tooltipTargetOffsetX = ref(0);
+    const tooltipTiltVel = ref(0);
+    const tooltipOffsetVel = ref(0);
+    const tooltipFollowX = ref(0);
+    const tooltipFollowVel = ref(0);
+    const tooltipTargetFollowX = ref(0);
+    const tooltipSquash = ref(0);
+    const tooltipSkewDeg = ref(0);
+    const tooltipJellyAmp = ref(0);
+    const tooltipJellyPhase = ref(0);
+    const tooltipJellyDir = ref(1);
+    const tooltipJellyWobble = ref(0);
+    let tooltipRafId = null;
+    let tooltipLastRafTs = null;
+    let resizeObserver = null;
+    let tooltipResizeObserver = null;
+    const clampedValue = computed(() => {
+      const v = Number.isFinite(props.modelValue) ? props.modelValue : props.min;
+      return Math.min(props.max, Math.max(props.min, v));
+    });
+    const percent = computed(() => {
+      const range = props.max - props.min;
+      if (range <= 0)
+        return 0;
+      return (clampedValue.value - props.min) / range * 100;
+    });
+    const thumbCenterPx = computed(() => {
+      if (mainWidth.value <= 0)
+        return 0;
+      const edge = thumbSizePx.value / 2;
+      const inner = Math.max(0, mainWidth.value - thumbSizePx.value);
+      return edge + inner * (percent.value / 100);
+    });
+    const fillWidthStyle = computed(() => {
+      if (mainWidth.value <= 0)
+        return { width: `${percent.value}%` };
+      return { width: `${thumbCenterPx.value}px` };
+    });
+    const displayValue = computed(() => {
+      return props.formatValue ? props.formatValue(clampedValue.value) : String(clampedValue.value);
+    });
+    const tooltipText = computed(() => {
+      if (props.tooltipFormatter)
+        return props.tooltipFormatter(clampedValue.value);
+      return displayValue.value;
+    });
+    const shouldShowTooltip = computed(() => {
+      if (!props.showTooltip)
+        return false;
+      if (props.disabled)
+        return false;
+      if (props.tooltipTrigger === "always")
+        return true;
+      if (props.tooltipTrigger === "hover")
+        return hovering.value || dragging.value;
+      return dragging.value;
+    });
+    const tooltipTransitionStyle = computed(() => {
+      const duration = Math.max(0, props.tooltipMotionDuration);
+      const blur = Math.max(0, props.tooltipMotionBlurPx);
+      return {
+        "--tx-slider-tooltip-motion-duration": `${duration}ms`,
+        "--tx-slider-tooltip-motion-blur": `${blur}px`
+      };
+    });
+    const tooltipStyle = computed(() => {
+      const baseX = props.tooltipTilt ? tooltipFollowX.value : thumbCenterPx.value;
+      const offsetX = props.tooltipTilt ? tooltipOffsetX.value : 0;
+      const baseRotate = props.tooltipTilt ? tooltipTiltDeg.value : 0;
+      const baseSquash = props.tooltipTilt ? tooltipSquash.value : 0;
+      const baseSkew = props.tooltipTilt ? tooltipSkewDeg.value : 0;
+      const wobble = props.tooltipTilt && props.tooltipJelly ? tooltipJellyWobble.value : 0;
+      const wobbleDir = props.tooltipTilt && props.tooltipJelly ? tooltipJellyDir.value : 1;
+      const wobbleRotate = wobble * wobbleDir * Math.max(0, props.tooltipJellyRotateDeg);
+      const wobbleSkew = wobble * wobbleDir * Math.max(0, props.tooltipJellySkewDeg);
+      const wobbleAbs = Math.abs(wobble);
+      const wobbleSquash = wobbleAbs * Math.max(0, props.tooltipJellySquash);
+      const rotate = baseRotate + wobbleRotate;
+      const skew = baseSkew + wobbleSkew;
+      const scaleX = 1 + baseSquash * 0.16 + wobbleSquash * 0.28;
+      const scaleY = 1 - baseSquash * 0.1 - wobbleSquash * 0.18;
+      const half = tooltipWidth.value > 0 ? tooltipWidth.value / 2 : 40;
+      const safe = 8;
+      const min = half + safe;
+      const max = Math.max(min, mainWidth.value - half - safe);
+      const clampedX = Math.min(max, Math.max(min, baseX + offsetX));
+      const y = props.tooltipPlacement === "bottom" ? 28 : -28;
+      const origin = props.tooltipPlacement === "bottom" ? "50% 0%" : "50% 100%";
+      const useMotion = props.tooltipMotion !== "none";
+      const transition = useMotion ? dragging.value ? "none" : "transform 0.3s ease" : dragging.value ? "opacity 0.12s ease" : "opacity 0.2s ease, transform 0.3s ease";
+      return {
+        left: `${clampedX}px`,
+        top: "50%",
+        transformOrigin: origin,
+        transform: `translateX(-50%) translateY(-50%) rotate(${rotate}deg) skewX(${skew}deg) scaleX(${scaleX}) scaleY(${scaleY}) translateY(${y}px)`,
+        transition
+      };
+    });
+    function refreshTooltipWidth() {
+      if (!tooltipRef.value)
+        return;
+      const w = tooltipRef.value.getBoundingClientRect().width;
+      if (Number.isFinite(w) && w > 0)
+        tooltipWidth.value = w;
+    }
+    function clamp01(v) {
+      return Math.min(1, Math.max(0, v));
+    }
+    function resetTooltipMotion() {
+      tooltipLastRafTs = null;
+      tooltipFollowX.value = thumbCenterPx.value;
+      tooltipFollowVel.value = 0;
+      tooltipTargetFollowX.value = thumbCenterPx.value;
+      tooltipTiltDeg.value = 0;
+      tooltipOffsetX.value = 0;
+      tooltipTargetTiltDeg.value = 0;
+      tooltipTargetOffsetX.value = 0;
+      tooltipTiltVel.value = 0;
+      tooltipOffsetVel.value = 0;
+      tooltipSquash.value = 0;
+      tooltipSkewDeg.value = 0;
+      tooltipJellyAmp.value = 0;
+      tooltipJellyPhase.value = 0;
+      tooltipJellyDir.value = 1;
+      tooltipJellyWobble.value = 0;
+    }
+    function triggerJelly(kick, dir) {
+      if (!props.tooltipTilt)
+        return;
+      if (!props.tooltipJelly)
+        return;
+      const k = clamp01(kick);
+      if (k <= 0)
+        return;
+      tooltipJellyDir.value = dir === 0 ? 1 : dir;
+      tooltipJellyAmp.value = Math.min(1, tooltipJellyAmp.value + k);
+      if (tooltipJellyAmp.value === k)
+        tooltipJellyPhase.value = 0;
+    }
+    function ensureTooltipRaf() {
+      if (tooltipRafId != null)
+        return;
+      tooltipLastRafTs = null;
+      tooltipRafId = window.requestAnimationFrame(function loop(ts) {
+        if (!shouldShowTooltip.value || !props.tooltipTilt) {
+          tooltipRafId = null;
+          tooltipLastRafTs = null;
+          return;
+        }
+        const last = tooltipLastRafTs ?? ts;
+        tooltipLastRafTs = ts;
+        const dt = clamp01((ts - last) / 1e3 / 0.032) * 0.032;
+        tooltipTargetFollowX.value = thumbCenterPx.value;
+        const k = Math.max(1, props.tooltipSpringStiffness);
+        const c = Math.max(0, props.tooltipSpringDamping);
+        {
+          const x = tooltipFollowX.value;
+          const v = tooltipFollowVel.value;
+          const a = -k * (x - tooltipTargetFollowX.value) - c * v;
+          const nv = v + a * dt;
+          const nx = x + nv * dt;
+          tooltipFollowVel.value = nv;
+          tooltipFollowX.value = nx;
+        }
+        {
+          const x = tooltipOffsetX.value;
+          const v = tooltipOffsetVel.value;
+          const a = -k * 1.1 * (x - tooltipTargetOffsetX.value) - c * 0.95 * v;
+          const nv = v + a * dt;
+          const nx = x + nv * dt;
+          tooltipOffsetVel.value = nv;
+          tooltipOffsetX.value = nx;
+        }
+        {
+          const x = tooltipTiltDeg.value;
+          const v = tooltipTiltVel.value;
+          const a = -k * 1.05 * (x - tooltipTargetTiltDeg.value) - c * 0.95 * v;
+          const nv = v + a * dt;
+          const nx = x + nv * dt;
+          tooltipTiltVel.value = nv;
+          tooltipTiltDeg.value = nx;
+        }
+        const speed = Math.abs(tooltipFollowVel.value) * 0.9 + Math.abs(tooltipOffsetVel.value) * 0.35;
+        tooltipSquash.value = clamp01(speed / 1600);
+        const maxSkew = Math.max(0, props.tooltipDistortSkewDeg);
+        const dir = tooltipFollowVel.value >= 0 ? 1 : -1;
+        tooltipSkewDeg.value = -dir * tooltipSquash.value * maxSkew;
+        if (props.tooltipJelly && tooltipJellyAmp.value > 8e-4) {
+          const freq = Math.max(0, props.tooltipJellyFrequency);
+          const decay = Math.max(0, props.tooltipJellyDecay);
+          const omega = 2 * Math.PI * freq;
+          tooltipJellyPhase.value += omega * dt;
+          tooltipJellyAmp.value *= Math.exp(-decay * dt);
+          tooltipJellyWobble.value = Math.sin(tooltipJellyPhase.value) * tooltipJellyAmp.value;
+        } else {
+          tooltipJellyAmp.value = 0;
+          tooltipJellyWobble.value = 0;
+        }
+        tooltipRafId = window.requestAnimationFrame(loop);
+      });
+    }
+    function setElasticTargets(dir, intensity) {
+      const t = clamp01(intensity);
+      tooltipTargetTiltDeg.value = -dir * t * props.tooltipTiltMaxDeg;
+      tooltipTargetOffsetX.value = -dir * t * props.tooltipOffsetMaxPx;
+    }
+    function onGlobalPointerMove(e) {
+      if (!dragging.value || !props.tooltipTilt)
+        return;
+      const now = performance.now();
+      const x = e.clientX;
+      if (lastPointerTs.value != null && lastPointerX.value != null) {
+        const dtMs = now - lastPointerTs.value;
+        const dx = x - lastPointerX.value;
+        if (dtMs > 0 && dtMs < 100 && Math.abs(dx) > 1) {
+          hadPointerMove.value = true;
+          const v = dx / (dtMs / 1e3);
+          const prevV = pointerVelocity.value;
+          pointerVelocity.value = v;
+          pointerAcceleration.value = (v - prevV) / dtMs * 1e3;
+          const absV = Math.abs(v);
+          const absA = Math.abs(pointerAcceleration.value);
+          if (absV > 20 || absA > 200) {
+            const dir = v >= 0 ? 1 : -1;
+            const intensity = clamp01(absV / 1200 + absA / 12e3 * props.tooltipAccelBoost);
+            setElasticTargets(dir, intensity);
+            if (props.tooltipJelly) {
+              const accelGate = Math.max(1, props.tooltipJellyTriggerAccel);
+              const kickA = clamp01(absA / accelGate);
+              const reversed = prevV !== 0 && v !== 0 && Math.sign(prevV) !== Math.sign(v);
+              const kick = reversed ? Math.max(0.55, kickA) : kickA;
+              if (kick > 0.08)
+                triggerJelly(kick, dir);
+            }
+            ensureTooltipRaf();
+          }
+        }
+      }
+      lastPointerTs.value = now;
+      lastPointerX.value = x;
+    }
+    function updateValue(next) {
+      const v = Math.min(props.max, Math.max(props.min, next));
+      emit("update:modelValue", v);
+    }
+    function onInput(e) {
+      const el = e.target;
+      const next = Number(el.value);
+      const now = performance.now();
+      const prevVelocity = velocity.value;
+      if (lastInputTs.value != null && lastInputValue.value != null) {
+        const dt = now - lastInputTs.value;
+        const dv = next - lastInputValue.value;
+        if (dt > 0) {
+          const perSec = dv / dt * 1e3;
+          const prevV = velocity.value;
+          velocity.value = perSec;
+          acceleration.value = (perSec - prevV) / dt * 1e3;
+        }
+      }
+      lastInputTs.value = now;
+      lastInputValue.value = next;
+      updateValue(next);
+      if (dragging.value && props.tooltipTilt) {
+        const v = velocity.value;
+        const a = acceleration.value;
+        const dir = v >= 0 ? 1 : -1;
+        const intensity = clamp01(Math.abs(v) / 260 + Math.abs(a) / 2400 * props.tooltipAccelBoost);
+        setElasticTargets(dir, intensity);
+        if (props.tooltipJelly) {
+          const accelGate = Math.max(1, props.tooltipJellyTriggerAccel);
+          const absA = Math.abs(a);
+          const kickA = clamp01(absA / accelGate);
+          const reversed = prevVelocity !== 0 && v !== 0 && Math.sign(prevVelocity) !== Math.sign(v);
+          const kick = reversed ? Math.max(0.55, kickA) : kickA;
+          if (kick > 0.08)
+            triggerJelly(kick, dir);
+        }
+        ensureTooltipRaf();
+      }
+    }
+    function onChange(e) {
+      const el = e.target;
+      emit("change", Number(el.value));
+    }
+    function refreshMetrics() {
+      if (!mainRef.value)
+        return;
+      const rect = mainRef.value.getBoundingClientRect();
+      mainWidth.value = rect.width;
+      const raw = getComputedStyle(mainRef.value).getPropertyValue("--tx-slider-thumb-size");
+      const size = Number.parseFloat(raw);
+      if (Number.isFinite(size) && size > 0)
+        thumbSizePx.value = size;
+    }
+    function startDragging(e) {
+      if (props.disabled)
+        return;
+      dragging.value = true;
+      refreshMetrics();
+      if (props.tooltipTilt) {
+        resetTooltipMotion();
+        ensureTooltipRaf();
+      }
+      lastPointerTs.value = performance.now();
+      lastPointerX.value = e.clientX;
+      pointerVelocity.value = 0;
+      pointerAcceleration.value = 0;
+      hadPointerMove.value = false;
+      window.addEventListener("pointermove", onGlobalPointerMove);
+    }
+    function stopDragging() {
+      if (!dragging.value)
+        return;
+      dragging.value = false;
+      window.removeEventListener("pointermove", onGlobalPointerMove);
+      lastPointerTs.value = null;
+      lastPointerX.value = null;
+      pointerVelocity.value = 0;
+      pointerAcceleration.value = 0;
+      hadPointerMove.value = false;
+      if (props.tooltipTilt) {
+        setElasticTargets(1, 0);
+        ensureTooltipRaf();
+      }
+    }
+    function onGlobalPointerUp() {
+      stopDragging();
+    }
+    watch(
+      () => props.modelValue,
+      () => {
+        if (inputRef.value) {
+          inputRef.value.value = String(clampedValue.value);
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => shouldShowTooltip.value,
+      async (v) => {
+        if (!v) {
+          tooltipWidth.value = 0;
+          if (tooltipRafId != null) {
+            cancelAnimationFrame(tooltipRafId);
+            tooltipRafId = null;
+          }
+          resetTooltipMotion();
+          if (tooltipResizeObserver && tooltipRef.value) {
+            tooltipResizeObserver.unobserve(tooltipRef.value);
+          }
+          return;
+        }
+        await nextTick();
+        refreshTooltipWidth();
+        if (props.tooltipTilt) {
+          resetTooltipMotion();
+          ensureTooltipRaf();
+        }
+        if (tooltipResizeObserver && tooltipRef.value) {
+          tooltipResizeObserver.observe(tooltipRef.value);
+        }
+      }
+    );
+    watch(tooltipText, async () => {
+      if (!shouldShowTooltip.value)
+        return;
+      await nextTick();
+      refreshTooltipWidth();
+    });
+    onMounted(() => {
+      refreshMetrics();
+      window.addEventListener("pointerup", onGlobalPointerUp);
+      if (typeof ResizeObserver !== "undefined" && mainRef.value) {
+        resizeObserver = new ResizeObserver(() => refreshMetrics());
+        resizeObserver.observe(mainRef.value);
+      }
+      if (typeof ResizeObserver !== "undefined") {
+        tooltipResizeObserver = new ResizeObserver(() => refreshTooltipWidth());
+      }
+    });
+    onBeforeUnmount(() => {
+      if (tooltipRafId != null) {
+        cancelAnimationFrame(tooltipRafId);
+        tooltipRafId = null;
+      }
+      tooltipLastRafTs = null;
+      window.removeEventListener("pointerup", onGlobalPointerUp);
+      window.removeEventListener("pointermove", onGlobalPointerMove);
+      if (resizeObserver && mainRef.value) {
+        resizeObserver.unobserve(mainRef.value);
+      }
+      resizeObserver = null;
+      if (tooltipResizeObserver && tooltipRef.value) {
+        tooltipResizeObserver.unobserve(tooltipRef.value);
+      }
+      tooltipResizeObserver = null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tx-slider", { "is-disabled": __props.disabled }])
+      }, [
+        createElementVNode("div", {
+          ref_key: "mainRef",
+          ref: mainRef,
+          class: "tx-slider__main",
+          onPointerenter: _cache[0] || (_cache[0] = ($event) => hovering.value = true),
+          onPointerleave: _cache[1] || (_cache[1] = ($event) => hovering.value = false)
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", {
+              class: "tx-slider__range",
+              style: normalizeStyle(fillWidthStyle.value)
+            }, null, 4)
+          ]),
+          props.tooltipMotion !== "none" ? (openBlock(), createBlock(Transition, {
+            key: 0,
+            name: "tx-slider-tooltip"
+          }, {
+            default: withCtx(() => [
+              shouldShowTooltip.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "tooltipRef",
+                ref: tooltipRef,
+                class: "tx-slider__tooltip",
+                "data-motion": props.tooltipMotion,
+                style: normalizeStyle([tooltipStyle.value, tooltipTransitionStyle.value])
+              }, toDisplayString(tooltipText.value), 13, _hoisted_2)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })) : shouldShowTooltip.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            ref_key: "tooltipRef",
+            ref: tooltipRef,
+            class: "tx-slider__tooltip",
+            "data-motion": props.tooltipMotion,
+            style: normalizeStyle([tooltipStyle.value, tooltipTransitionStyle.value])
+          }, toDisplayString(tooltipText.value), 13, _hoisted_3)) : createCommentVNode("", true),
+          createElementVNode("input", {
+            ref_key: "inputRef",
+            ref: inputRef,
+            class: "tx-slider__input",
+            type: "range",
+            min: __props.min,
+            max: __props.max,
+            step: __props.step,
+            disabled: __props.disabled,
+            value: clampedValue.value,
+            onPointerdown: startDragging,
+            onPointercancel: stopDragging,
+            onBlur: stopDragging,
+            onInput,
+            onChange
+          }, null, 40, _hoisted_4)
+        ], 544),
+        __props.showValue ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(displayValue.value), 1)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/slider/src/TxSlider.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from './TxSlider.vue.js';
+/* empty css              */
+
+
+
+export { _sfc_main as default };

package/dist/es/slider/src/types.d.ts

@@ -0,0 +1,34 @@
+export interface SliderProps {
+    modelValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+    showTooltip?: boolean;
+    tooltipTrigger?: 'drag' | 'hover' | 'always';
+    tooltipFormatter?: (value: number) => string;
+    tooltipPlacement?: 'top' | 'bottom';
+    tooltipTilt?: boolean;
+    tooltipTiltMaxDeg?: number;
+    tooltipOffsetMaxPx?: number;
+    tooltipAccelBoost?: number;
+    tooltipSpringStiffness?: number;
+    tooltipSpringDamping?: number;
+    tooltipMotion?: 'blur' | 'fade' | 'none';
+    tooltipMotionDuration?: number;
+    tooltipMotionBlurPx?: number;
+    tooltipDistortSkewDeg?: number;
+    tooltipJelly?: boolean;
+    tooltipJellyFrequency?: number;
+    tooltipJellyDecay?: number;
+    tooltipJellyRotateDeg?: number;
+    tooltipJellySkewDeg?: number;
+    tooltipJellySquash?: number;
+    tooltipJellyTriggerAccel?: number;
+}
+export interface SliderEmits {
+    (e: 'update:modelValue', value: number): void;
+    (e: 'change', value: number): void;
+}