@talex-touch/tuffex 0.3.3

package/dist/es/radio/src/TxRadioGroup.vue2.js

@@ -0,0 +1,789 @@
+import { defineComponent, toRefs, computed, ref, watch, provide, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, unref, normalizeClass, createCommentVNode, createBlock, renderSlot, normalizeStyle, withCtx, createElementVNode } from 'vue';
+import { hasWindow } from '../../utils/env.js';
+import '../../glass-surface/index.js';
+import _sfc_main$1 from '../../glass-surface/src/TxGlassSurface.vue.js';
+/* empty css                                          */
+
+const _hoisted_1 = ["aria-disabled"];
+const overscan = 0;
+const stiffnessDrag = 112;
+const dampingDrag = 9;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "TxRadioGroup" },
+  __name: "TxRadioGroup",
+  props: {
+    modelValue: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    type: { default: "button" },
+    direction: {},
+    indicatorVariant: { default: void 0 },
+    glass: { type: Boolean, default: false },
+    blur: { type: Boolean, default: false },
+    updateOnSettled: { type: Boolean },
+    stiffness: { default: 110 },
+    damping: { default: 12 },
+    blurAmount: { default: 1 },
+    elastic: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { disabled, type } = toRefs(props);
+    const resolvedIndicatorVariant = computed(() => {
+      const v = props.indicatorVariant;
+      if (v)
+        return v;
+      if (props.glass)
+        return "glass";
+      if (props.blur)
+        return "blur";
+      return "solid";
+    });
+    const useGlassIndicator = computed(() => type.value === "button" && resolvedIndicatorVariant.value === "glass");
+    const useBlurIndicator = computed(() => type.value === "button" && resolvedIndicatorVariant.value === "blur");
+    const resolvedDirection = computed(() => {
+      if (type.value === "button") {
+        return "row";
+      }
+      if (type.value === "standard") {
+        return props.direction ?? "row";
+      }
+      return props.direction ?? "column";
+    });
+    const updateModelOnSettled = computed(() => {
+      const enabled = props.updateOnSettled ?? (resolvedIndicatorVariant.value === "glass" || resolvedIndicatorVariant.value === "blur");
+      return enabled && type.value === "button";
+    });
+    const localModelValue = ref(props.modelValue);
+    const pendingModelValue = ref(null);
+    function emitModelValue(v) {
+      emit("update:modelValue", v);
+      emit("change", v);
+    }
+    function commitPendingModelValue() {
+      if (!updateModelOnSettled.value) {
+        return;
+      }
+      const pending = pendingModelValue.value;
+      if (pending == null) {
+        return;
+      }
+      if (pending === props.modelValue) {
+        pendingModelValue.value = null;
+        return;
+      }
+      pendingModelValue.value = null;
+      emitModelValue(pending);
+    }
+    watch(
+      updateModelOnSettled,
+      (enabled) => {
+        if (!enabled) {
+          pendingModelValue.value = null;
+          localModelValue.value = props.modelValue;
+          return;
+        }
+        pendingModelValue.value = null;
+        localModelValue.value = props.modelValue;
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (!updateModelOnSettled.value) {
+          return;
+        }
+        pendingModelValue.value = null;
+        localModelValue.value = v;
+      }
+    );
+    const model = computed({
+      get: () => updateModelOnSettled.value ? localModelValue.value : props.modelValue,
+      set: (v) => {
+        if (v == null) {
+          return;
+        }
+        if (!updateModelOnSettled.value) {
+          emitModelValue(v);
+          return;
+        }
+        if (localModelValue.value === v) {
+          return;
+        }
+        localModelValue.value = v;
+        pendingModelValue.value = v;
+      }
+    });
+    const groupRef = ref(null);
+    const indicatorVisible = ref(false);
+    const targetRect = ref({ width: 0, height: 0, x: 0, y: 0 });
+    const currentRect = ref({ width: 0, height: 0, x: 0, y: 0 });
+    const velocity = ref({ x: 0, y: 0, w: 0, h: 0 });
+    const impact = ref(0);
+    const impactAxis = ref("x");
+    const isDragging = ref(false);
+    const isAnimating = ref(false);
+    const motionPhase = ref("idle");
+    let motionPhaseTimer = null;
+    let indicatorRaf = null;
+    let motionRaf = null;
+    let motionLastTs = null;
+    let lastPointer = { x: 0, y: 0, ts: 0 };
+    let lastPointerVelocity = { x: 0};
+    const dragLockY = ref(null);
+    const motionActive = computed(() => isDragging.value || isAnimating.value);
+    const stiffnessIdle = computed(() => props.stiffness ?? 150);
+    const dampingIdle = computed(() => props.damping ?? 8);
+    const isDarkMode = ref(false);
+    let cleanupDarkMode;
+    function updateDarkMode() {
+      if (!hasWindow()) {
+        return;
+      }
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      isDarkMode.value = mediaQuery.matches;
+      const handler = (e) => {
+        isDarkMode.value = e.matches;
+      };
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    }
+    const outlineStyle = computed(() => {
+      if (!indicatorVisible.value) {
+        return { opacity: "0" };
+      }
+      if (motionActive.value) {
+        return { opacity: "0" };
+      }
+      const { width, height, x, y } = currentRect.value;
+      return {
+        opacity: "1",
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `translate3d(${x}px, ${y}px, 0)`
+      };
+    });
+    const glassWrapStyle = computed(() => {
+      if (!indicatorVisible.value) {
+        return { opacity: "0" };
+      }
+      const { width, height, x, y } = currentRect.value;
+      const v = velocity.value;
+      const speed = Math.hypot(v.x, v.y);
+      const imp = impact.value;
+      let stretchX = 1;
+      let stretchY = 1;
+      if (motionActive.value && speed > 3) {
+        const dragBoost = isDragging.value ? 1.8 : 1;
+        const stretch = Math.min(speed / 100, 0.6) * dragBoost;
+        stretchX = 1 - stretch * 0.35;
+        stretchY = 1 + stretch * 0.6;
+      }
+      if (imp > 0.01) {
+        const squash = imp * 0.7;
+        if (impactAxis.value === "x") {
+          stretchX = stretchX * (1 + squash * 0.5);
+          stretchY = stretchY * (1 - squash * 0.4);
+        } else {
+          stretchY = stretchY * (1 + squash * 0.5);
+          stretchX = stretchX * (1 - squash * 0.4);
+        }
+      }
+      const phaseScale = glassPhaseScale.value;
+      const baseScale = activeScale.value;
+      let scaleX = baseScale * phaseScale * stretchX;
+      let scaleY = baseScale * phaseScale * stretchY;
+      scaleX = Math.max(0, Math.min(2, scaleX));
+      scaleY = Math.max(0, Math.min(2, scaleY));
+      return {
+        opacity: `${glassOpacity.value}`,
+        width: `${width}px`,
+        height: `${height}px`,
+        filter: glassFilter.value,
+        transform: `translate3d(${x}px, ${y}px, 0) scale(${scaleX.toFixed(3)}, ${scaleY.toFixed(3)})`
+      };
+    });
+    const glassInnerStyle = computed(() => {
+      if (!indicatorVisible.value) {
+        return { opacity: "0" };
+      }
+      const v = velocity.value;
+      const speed = Math.hypot(v.x, v.y);
+      let scaleX = 1;
+      let scaleY = 1;
+      if (motionActive.value && speed > 50) {
+        const stretch = Math.min(speed / 400, 0.3);
+        scaleX = 1 + stretch * 0.5;
+        scaleY = 1 - stretch * 0.25;
+      }
+      if (impact.value > 0.01) {
+        const squash = impact.value * 0.6;
+        if (impactAxis.value === "x") {
+          scaleX = scaleX * (1 - squash * 0.5);
+          scaleY = scaleY * (1 + squash * 0.7);
+        } else {
+          scaleY = scaleY * (1 - squash * 0.5);
+          scaleX = scaleX * (1 + squash * 0.7);
+        }
+      }
+      scaleX = Math.max(0.5, Math.min(1.6, scaleX));
+      scaleY = Math.max(0.5, Math.min(1.6, scaleY));
+      return {
+        opacity: "1",
+        width: "100%",
+        height: "100%",
+        transform: `scale(${scaleX.toFixed(3)}, ${scaleY.toFixed(3)})`
+      };
+    });
+    const glassRadius = computed(() => 18);
+    const glassLook = computed(() => {
+      if (isDarkMode.value) {
+        return {
+          brightness: 8,
+          opacity: 0.6,
+          backgroundOpacity: 0.06,
+          saturation: 1.05
+        };
+      }
+      return {
+        brightness: 100,
+        opacity: 0.85,
+        backgroundOpacity: 0.02,
+        saturation: 1.15
+      };
+    });
+    const glassOpacity = computed(() => {
+      if (!indicatorVisible.value) {
+        return 0;
+      }
+      if (!motionActive.value) {
+        return 0;
+      }
+      if (motionPhase.value === "emerge") {
+        return 0.95;
+      }
+      if (motionPhase.value === "sink") {
+        return 0.28;
+      }
+      return 1;
+    });
+    const glassPhaseScale = computed(() => {
+      if (!motionActive.value) {
+        return 1;
+      }
+      if (motionPhase.value === "emerge") {
+        return 1.08;
+      }
+      if (motionPhase.value === "sink") {
+        return 0.97;
+      }
+      return 1;
+    });
+    const activeScale = computed(() => {
+      if (!indicatorVisible.value) {
+        return 1;
+      }
+      if (isDragging.value) {
+        return 1.08;
+      }
+      if (motionPhase.value === "emerge") {
+        return 1.06;
+      }
+      if (motionActive.value) {
+        return 1.03;
+      }
+      return 1;
+    });
+    const glassFilter = computed(() => {
+      const shadow = "drop-shadow(0 10px 20px rgba(0, 0, 0, 0.08))";
+      if (isDarkMode.value) {
+        return motionActive.value ? `${shadow} brightness(0.98)` : shadow;
+      }
+      return motionActive.value ? `${shadow} brightness(1.02)` : shadow;
+    });
+    const blurWrapStyle = computed(() => {
+      if (!indicatorVisible.value) {
+        return { opacity: "0" };
+      }
+      const { width, height, x, y } = currentRect.value;
+      const v = velocity.value;
+      const speed = Math.hypot(v.x, v.y);
+      const imp = impact.value;
+      let stretchX = 1;
+      let stretchY = 1;
+      if (props.elastic && motionActive.value && speed > 3) {
+        const dragBoost = isDragging.value ? 1.8 : 1;
+        const stretch = Math.min(speed / 100, 0.6) * dragBoost;
+        stretchX = 1 - stretch * 0.35;
+        stretchY = 1 + stretch * 0.6;
+      }
+      if (props.elastic && imp > 0.01) {
+        const squash = imp * 0.7;
+        if (impactAxis.value === "x") {
+          stretchX = stretchX * (1 + squash * 0.5);
+          stretchY = stretchY * (1 - squash * 0.4);
+        } else {
+          stretchY = stretchY * (1 + squash * 0.5);
+          stretchX = stretchX * (1 - squash * 0.4);
+        }
+      }
+      const phaseScale = glassPhaseScale.value;
+      const baseScale = activeScale.value;
+      let scaleX = baseScale * phaseScale * stretchX;
+      let scaleY = baseScale * phaseScale * stretchY;
+      scaleX = Math.max(0, Math.min(2, scaleX));
+      scaleY = Math.max(0, Math.min(2, scaleY));
+      const blurEnabled = motionActive.value;
+      const blurOpacity = blurEnabled ? 1 : 0;
+      const blurPx = blurEnabled ? props.blurAmount : 0;
+      return {
+        opacity: `${blurOpacity}`,
+        width: `${width}px`,
+        height: `${height}px`,
+        backdropFilter: blurEnabled ? `blur(${blurPx}px)` : "none",
+        WebkitBackdropFilter: blurEnabled ? `blur(${blurPx}px)` : "none",
+        transform: `translate3d(${x}px, ${y}px, 0) scale(${scaleX.toFixed(3)}, ${scaleY.toFixed(3)})`
+      };
+    });
+    const plainIndicatorStyle = computed(() => {
+      if (!indicatorVisible.value) {
+        return { opacity: "0" };
+      }
+      const { width, height, x, y } = currentRect.value;
+      const v = velocity.value;
+      const speed = Math.hypot(v.x, v.y);
+      const imp = impact.value;
+      let stretchX = 1;
+      let stretchY = 1;
+      if (props.elastic && motionActive.value && speed > 3) {
+        const dragBoost = isDragging.value ? 1.8 : 1;
+        const stretch = Math.min(speed / 100, 0.6) * dragBoost;
+        stretchX = 1 - stretch * 0.35;
+        stretchY = 1 + stretch * 0.6;
+      }
+      if (props.elastic && imp > 0.01) {
+        const squash = imp * 0.7;
+        if (impactAxis.value === "x") {
+          stretchX = stretchX * (1 + squash * 0.5);
+          stretchY = stretchY * (1 - squash * 0.4);
+        } else {
+          stretchY = stretchY * (1 + squash * 0.5);
+          stretchX = stretchX * (1 - squash * 0.4);
+        }
+      }
+      const phaseScale = props.elastic ? glassPhaseScale.value : 1;
+      const baseScale = activeScale.value;
+      let scaleX = baseScale * phaseScale * stretchX;
+      let scaleY = baseScale * phaseScale * stretchY;
+      scaleX = Math.max(0, Math.min(2, scaleX));
+      scaleY = Math.max(0, Math.min(2, scaleY));
+      return {
+        opacity: "1",
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `translate3d(${x}px, ${y}px, 0) scale(${scaleX.toFixed(3)}, ${scaleY.toFixed(3)})`
+      };
+    });
+    const hitStyle = computed(() => {
+      if (!indicatorVisible.value) {
+        return { opacity: "0" };
+      }
+      const { width, height, x, y } = currentRect.value;
+      return {
+        opacity: "0",
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `translate3d(${x}px, ${y}px, 0) scale(1.08)`
+      };
+    });
+    function stopMotion() {
+      if (motionRaf != null)
+        cancelAnimationFrame(motionRaf);
+      motionRaf = null;
+      motionLastTs = null;
+      isAnimating.value = false;
+    }
+    function cancelMotionRaf() {
+      if (motionRaf != null)
+        cancelAnimationFrame(motionRaf);
+      motionRaf = null;
+      motionLastTs = null;
+    }
+    function setMotionPhase(next, ttl = 0) {
+      motionPhase.value = next;
+      if (motionPhaseTimer != null) {
+        clearTimeout(motionPhaseTimer);
+        motionPhaseTimer = null;
+      }
+      if (ttl > 0) {
+        motionPhaseTimer = setTimeout(() => {
+          motionPhase.value = "idle";
+          motionPhaseTimer = null;
+        }, ttl);
+      }
+    }
+    function startMotion() {
+      if (motionRaf != null) {
+        return;
+      }
+      isAnimating.value = true;
+      if (!isDragging.value)
+        setMotionPhase("emerge", 170);
+      motionRaf = requestAnimationFrame(stepMotion);
+    }
+    function stepMotion(ts) {
+      if (motionLastTs == null)
+        motionLastTs = ts;
+      const dt = Math.min((ts - motionLastTs) / 1e3, 0.024);
+      motionLastTs = ts;
+      const t = targetRect.value;
+      const c = currentRect.value;
+      const v = velocity.value;
+      const dx = t.x - c.x;
+      const dy = t.y - c.y;
+      const dw = t.width - c.width;
+      const dh = t.height - c.height;
+      if (isDragging.value) {
+        v.x *= Math.exp(-dt * 6);
+        v.y *= Math.exp(-dt * 6);
+        v.w += (dw * stiffnessDrag * 1.12 - v.w * dampingDrag) * dt;
+        v.h += (dh * stiffnessDrag * 1.12 - v.h * dampingDrag) * dt;
+        velocity.value = { ...v };
+        impact.value *= Math.exp(-dt * 7.4);
+        motionRaf = requestAnimationFrame(stepMotion);
+        return;
+      }
+      if (!props.elastic) {
+        const alpha = 1 - Math.exp(-34 * dt);
+        const nx2 = c.x + dx * alpha;
+        const ny2 = c.y + dy * alpha;
+        const nw2 = c.width + dw * alpha;
+        const nh2 = c.height + dh * alpha;
+        currentRect.value = { x: nx2, y: ny2, width: nw2, height: nh2 };
+        velocity.value = {
+          x: (nx2 - c.x) / Math.max(dt, 1e-3),
+          y: (ny2 - c.y) / Math.max(dt, 1e-3),
+          w: (nw2 - c.width) / Math.max(dt, 1e-3),
+          h: (nh2 - c.height) / Math.max(dt, 1e-3)
+        };
+        impact.value = 0;
+        const settled2 = Math.abs(t.x - nx2) < 0.35 && Math.abs(t.y - ny2) < 0.35 && Math.abs(t.width - nw2) < 0.35 && Math.abs(t.height - nh2) < 0.35;
+        if (settled2) {
+          currentRect.value = { ...t };
+          velocity.value = { x: 0, y: 0, w: 0, h: 0 };
+          commitPendingModelValue();
+          cancelMotionRaf();
+          setMotionPhase("sink", 18);
+          setTimeout(() => {
+            isAnimating.value = false;
+          }, 18);
+          return;
+        }
+        motionRaf = requestAnimationFrame(stepMotion);
+        return;
+      }
+      const prevDx = dx + v.x * dt;
+      const prevDy = dy + v.y * dt;
+      const phaseStiffnessScale = motionPhase.value === "emerge" ? 0.62 : 1;
+      const springStiffness = stiffnessIdle.value * phaseStiffnessScale;
+      const springDamping = dampingIdle.value;
+      v.x += (dx * springStiffness - v.x * springDamping) * dt;
+      v.y += (dy * springStiffness - v.y * springDamping) * dt;
+      v.w += (dw * springStiffness * 1.12 - v.w * springDamping) * dt;
+      v.h += (dh * springStiffness * 1.12 - v.h * springDamping) * dt;
+      const nx = c.x + v.x * dt;
+      const ny = c.y + v.y * dt;
+      const nw = c.width + v.w * dt;
+      const nh = c.height + v.h * dt;
+      const nextDx = t.x - nx;
+      const nextDy = t.y - ny;
+      if (prevDx > 0 && nextDx < 0 || prevDx < 0 && nextDx > 0 || prevDy > 0 && nextDy < 0 || prevDy < 0 && nextDy > 0) {
+        const speed = Math.hypot(v.x, v.y);
+        if (speed > 30) {
+          impactAxis.value = Math.abs(v.x) >= Math.abs(v.y) ? "x" : "y";
+          impact.value = Math.min(1, Math.max(impact.value, speed / 300));
+        }
+      }
+      impact.value *= Math.exp(-dt * 4);
+      currentRect.value = { x: nx, y: ny, width: nw, height: nh };
+      velocity.value = { ...v };
+      const settled = Math.abs(nextDx) < 0.25 && Math.abs(nextDy) < 0.25 && Math.abs(dw) < 0.25 && Math.abs(dh) < 0.25 && Math.abs(v.x) < 8 && Math.abs(v.y) < 8 && Math.abs(v.w) < 8 && Math.abs(v.h) < 8;
+      if (settled) {
+        currentRect.value = { ...t };
+        velocity.value = { x: 0, y: 0, w: 0, h: 0 };
+        impact.value = 0;
+        commitPendingModelValue();
+        cancelMotionRaf();
+        setMotionPhase("sink", 32);
+        setTimeout(() => {
+          isAnimating.value = false;
+        }, 32);
+        return;
+      }
+      motionRaf = requestAnimationFrame(stepMotion);
+    }
+    function updateIndicator() {
+      if (type.value !== "button") {
+        return;
+      }
+      const root = groupRef.value;
+      if (!root) {
+        return;
+      }
+      const checked = root.querySelector(".tx-radio.tx-radio--button.is-checked");
+      if (!checked) {
+        indicatorVisible.value = false;
+        return;
+      }
+      const rootRect = root.getBoundingClientRect();
+      const rect = checked.getBoundingClientRect();
+      const left = rect.left - rootRect.left;
+      const top = rect.top - rootRect.top;
+      indicatorVisible.value = true;
+      const next = {
+        width: rect.width + overscan * 2,
+        height: rect.height + overscan * 2,
+        x: left - overscan,
+        y: top - overscan
+      };
+      targetRect.value = next;
+      if (!motionActive.value && currentRect.value.width === 0 && currentRect.value.height === 0) {
+        currentRect.value = next;
+      }
+      startMotion();
+    }
+    function queueUpdateIndicator() {
+      if (indicatorRaf != null)
+        cancelAnimationFrame(indicatorRaf);
+      indicatorRaf = requestAnimationFrame(() => {
+        indicatorRaf = null;
+        updateIndicator();
+      });
+    }
+    function onPointerMove(e) {
+      if (!isDragging.value) {
+        return;
+      }
+      const now = performance.now();
+      const dt = Math.max((now - lastPointer.ts) / 1e3, 1e-3);
+      lastPointerVelocity = {
+        x: (e.clientX - lastPointer.x) / dt,
+        y: (e.clientY - lastPointer.y) / dt
+      };
+      lastPointer = { x: e.clientX, y: e.clientY, ts: now };
+      const root = groupRef.value;
+      if (!root) {
+        return;
+      }
+      const r = root.getBoundingClientRect();
+      const width = currentRect.value.width || targetRect.value.width || 0;
+      const height = currentRect.value.height || targetRect.value.height || 0;
+      const maxX = Math.max(0, r.width - width);
+      const unclampedX = e.clientX - r.left - width / 2;
+      const px = Math.min(Math.max(unclampedX, 0), maxX);
+      const baseY = dragLockY.value ?? (currentRect.value.y || targetRect.value.y || 0);
+      const py = Math.min(Math.max(baseY, 0), Math.max(0, r.height - height));
+      const next = { x: px, y: py, width: Math.max(0, width), height: Math.max(0, height) };
+      targetRect.value = next;
+      currentRect.value = {
+        ...currentRect.value,
+        x: next.x,
+        y: next.y,
+        width: next.width,
+        height: next.height
+      };
+      velocity.value = {
+        ...velocity.value,
+        x: lastPointerVelocity.x,
+        y: 0
+      };
+      if ((px === 0 || px === maxX) && Math.abs(lastPointerVelocity.x) > 520) {
+        impactAxis.value = "x";
+        impact.value = Math.max(impact.value, 0.92);
+      }
+    }
+    function endDrag() {
+      if (!isDragging.value) {
+        return;
+      }
+      isDragging.value = false;
+      dragLockY.value = null;
+      const root = groupRef.value;
+      if (root) {
+        const currentX = currentRect.value.x + currentRect.value.width / 2;
+        const radios = root.querySelectorAll("button.tx-radio.tx-radio--button:not([disabled])");
+        let closest = null;
+        let minDist = Infinity;
+        const rootRect = root.getBoundingClientRect();
+        for (const radio of radios) {
+          const rect = radio.getBoundingClientRect();
+          const centerX = rect.left - rootRect.left + rect.width / 2;
+          const dist = Math.abs(centerX - currentX);
+          if (dist < minDist) {
+            minDist = dist;
+            closest = radio;
+          }
+        }
+        if (closest && closest.getAttribute("aria-checked") !== "true") {
+          closest.click();
+        }
+      }
+      const v = velocity.value;
+      velocity.value = {
+        ...v,
+        x: v.x + lastPointerVelocity.x * 0.14,
+        y: v.y
+      };
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+      queueUpdateIndicator();
+      startMotion();
+    }
+    function onPointerUp() {
+      endDrag();
+    }
+    function onPointerDown(e) {
+      if (type.value !== "button") {
+        return;
+      }
+      if (disabled.value) {
+        return;
+      }
+      if (e.button !== 0) {
+        return;
+      }
+      if (!indicatorVisible.value) {
+        return;
+      }
+      const target = e.currentTarget;
+      if (!target) {
+        return;
+      }
+      target.setPointerCapture?.(e.pointerId);
+      isDragging.value = true;
+      dragLockY.value = currentRect.value.y || targetRect.value.y || 0;
+      setMotionPhase("emerge", 110);
+      const now = performance.now();
+      lastPointer = { x: e.clientX, y: e.clientY, ts: now };
+      lastPointerVelocity = { x: 0, y: 0 };
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+      window.addEventListener("pointercancel", onPointerUp);
+      startMotion();
+    }
+    const ctx = {
+      model,
+      disabled: computed(() => disabled.value),
+      type: computed(() => type.value)
+    };
+    provide("tx-radio-group", ctx);
+    onMounted(async () => {
+      cleanupDarkMode = updateDarkMode();
+      await nextTick();
+      queueUpdateIndicator();
+      window.addEventListener("resize", queueUpdateIndicator);
+    });
+    onBeforeUnmount(() => {
+      if (indicatorRaf != null)
+        cancelAnimationFrame(indicatorRaf);
+      window.removeEventListener("resize", queueUpdateIndicator);
+      stopMotion();
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+      if (motionPhaseTimer != null)
+        clearTimeout(motionPhaseTimer);
+      cleanupDarkMode?.();
+    });
+    watch(
+      () => model.value,
+      async () => {
+        await nextTick();
+        queueUpdateIndicator();
+      },
+      { flush: "post" }
+    );
+    watch(
+      type,
+      async () => {
+        await nextTick();
+        queueUpdateIndicator();
+      },
+      { flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "groupRef",
+        ref: groupRef,
+        class: normalizeClass(["tx-radio-group", [
+          `tx-radio-group--${unref(type)}`,
+          `tx-radio-group--dir-${resolvedDirection.value}`,
+          `tx-radio-group--indicator-${resolvedIndicatorVariant.value}`,
+          { "is-motion": motionActive.value }
+        ]]),
+        role: "radiogroup",
+        "aria-disabled": unref(disabled)
+      }, [
+        unref(type) === "button" ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: "tx-radio-group__indicator-outline",
+          style: normalizeStyle(outlineStyle.value),
+          "aria-hidden": "true"
+        }, null, 4)) : createCommentVNode("", true),
+        useGlassIndicator.value && indicatorVisible.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
+          key: 1,
+          class: normalizeClass(["tx-radio-group__indicator-glass-wrap", { "is-active": motionActive.value, "is-sink": motionPhase.value === "sink", "is-emerge": motionPhase.value === "emerge" }]),
+          style: normalizeStyle(glassWrapStyle.value),
+          width: currentRect.value.width || 1,
+          height: currentRect.value.height || 1,
+          "border-radius": glassRadius.value,
+          "border-width": 8,
+          brightness: glassLook.value.brightness,
+          opacity: glassLook.value.opacity,
+          blur: 2,
+          displace: 0.25,
+          "background-opacity": glassLook.value.backgroundOpacity,
+          saturation: glassLook.value.saturation,
+          "distortion-scale": 2,
+          "red-offset": 0,
+          "green-offset": 4,
+          "blue-offset": 8,
+          "aria-hidden": "true"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: "tx-radio-group__indicator-glass-inner",
+              style: normalizeStyle(glassInnerStyle.value)
+            }, null, 4)
+          ]),
+          _: 1
+        }, 8, ["class", "style", "width", "height", "border-radius", "brightness", "opacity", "background-opacity", "saturation"])) : createCommentVNode("", true),
+        useBlurIndicator.value && indicatorVisible.value ? (openBlock(), createElementBlock("span", {
+          key: 2,
+          class: normalizeClass(["tx-radio-group__indicator-blur", { "is-active": motionActive.value }]),
+          style: normalizeStyle(blurWrapStyle.value),
+          "aria-hidden": "true"
+        }, null, 6)) : createCommentVNode("", true),
+        unref(type) === "button" && indicatorVisible.value ? (openBlock(), createElementBlock("span", {
+          key: 3,
+          class: normalizeClass(["tx-radio-group__indicator-plain", { "is-active": motionActive.value }]),
+          style: normalizeStyle(plainIndicatorStyle.value),
+          "aria-hidden": "true"
+        }, null, 6)) : createCommentVNode("", true),
+        unref(type) === "button" && indicatorVisible.value ? (openBlock(), createElementBlock("span", {
+          key: 4,
+          class: normalizeClass(["tx-radio-group__indicator-hit", { "is-dragging": isDragging.value }]),
+          style: normalizeStyle(hitStyle.value),
+          "aria-hidden": "true",
+          onPointerdown: onPointerDown
+        }, null, 38)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+
+export { _sfc_main as default };