@ansh-ui/vue 0.2.0

package/dist/chunk-Z7XOFKM4.cjs

@@ -0,0 +1,733 @@
+'use strict';
+
+var chunkPP6OYURM_cjs = require('./chunk-PP6OYURM.cjs');
+var chunk6732H4BQ_cjs = require('./chunk-6732H4BQ.cjs');
+var vue = require('vue');
+var core = require('@ansh-ui/core');
+var tokens = require('@ansh-ui/tokens');
+
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap",
+  borderWidth: "0"
+};
+var GradientText = vue.defineComponent({
+  name: "AnshGradientText",
+  props: {
+    text: { type: String, default: "" },
+    colors: {
+      type: [Array, String],
+      default: void 0
+    },
+    /** Gradient angle in degrees. */
+    angle: { type: Number, default: 100 },
+    /** Seconds per cycle. `0` holds a static gradient. */
+    duration: { type: Number, default: 0 },
+    /** Interpolated stops handed to CSS. More is smoother. */
+    stops: { type: Number, default: 16 },
+    as: { type: String, default: "span" }
+  },
+  setup(props, { slots }) {
+    const gradient = vue.computed(() => {
+      const palette = core.resolvePalette(props.colors);
+      const looped = props.duration > 0 ? [...palette, ...palette] : palette;
+      return core.createGradient(looped, { space: "oklab" }).toCss(`${props.angle}deg`, props.stops);
+    });
+    const animated = vue.computed(() => props.duration > 0 && !core.prefersReducedMotion());
+    return () => vue.h(
+      props.as,
+      {
+        style: {
+          backgroundImage: gradient.value,
+          backgroundSize: animated.value ? "200% 100%" : "100% 100%",
+          backgroundClip: "text",
+          WebkitBackgroundClip: "text",
+          color: "transparent",
+          WebkitTextFillColor: "transparent",
+          display: "inline-block",
+          ...animated.value ? { animation: `ansh-gradient-shift ${props.duration}s linear infinite` } : {}
+        }
+      },
+      [
+        slots.default?.() ?? props.text,
+        // The keyframes are injected inline so `<GradientText :duration="6" />` works with no
+        // stylesheet import. Identical rules from multiple instances are deduplicated by the
+        // browser, so this costs nothing at scale.
+        animated.value ? vue.h("style", {
+          innerHTML: "@keyframes ansh-gradient-shift{from{background-position:0% 50%}to{background-position:200% 50%}}"
+        }) : null
+      ]
+    );
+  }
+});
+var AnimatedText = vue.defineComponent({
+  name: "AnshAnimatedText",
+  props: {
+    text: { type: String, required: true },
+    /** Split granularity. */
+    by: { type: String, default: "chars" },
+    /** Seconds per unit. */
+    duration: { type: Number, default: 0.6 },
+    /** Seconds between units. */
+    each: { type: Number, default: 0.03 },
+    /** Where the reveal wave begins. */
+    from: { type: [String, Number], default: "first" },
+    easing: { type: [String, Function, Array], default: "cinematic" },
+    /** Distance each unit travels into place, in pixels. */
+    distance: { type: Number, default: 18 },
+    /** Starting blur in pixels — the "focus in" look. */
+    blur: { type: Number, default: 0 },
+    /** Starting rotation in degrees. */
+    rotate: { type: Number, default: 0 },
+    /** Clip each unit so it rises from behind a mask. */
+    mask: { type: Boolean, default: false },
+    /** Wait until scrolled into view. */
+    whenInView: { type: Boolean, default: true },
+    /** Replay every time it re-enters the viewport. */
+    repeat: { type: Boolean, default: false },
+    /** Seconds to wait before starting. */
+    delay: { type: Number, default: 0 },
+    as: { type: String, default: "span" }
+  },
+  emits: ["complete"],
+  setup(props, { emit }) {
+    const host = vue.ref(null);
+    const unitNodes = vue.ref([]);
+    const units = vue.computed(() => {
+      if (props.by === "words") {
+        return props.text.split(/(\s+)/).filter((token) => token.length > 0).map((token) => ({ text: token, space: /^\s+$/.test(token) }));
+      }
+      const graphemes = typeof Intl !== "undefined" && "Segmenter" in Intl ? Array.from(
+        new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(props.text),
+        (s) => s.segment
+      ) : Array.from(props.text);
+      return graphemes.map((character) => ({ text: character, space: /^\s$/.test(character) }));
+    });
+    let stopTicker = null;
+    let stopObserver = null;
+    vue.onMounted(() => {
+      const element = host.value;
+      if (!element) return;
+      if (core.prefersReducedMotion()) {
+        emit("complete");
+        return;
+      }
+      const ease = core.resolveEasing(props.easing);
+      const animatedUnits = units.value.filter((u) => !u.space);
+      const delayFor = core.stagger(animatedUnits.length, { each: props.each, from: props.from });
+      const targets = [];
+      let animationIndex = 0;
+      units.value.forEach((unit, i) => {
+        if (unit.space) return;
+        const node = unitNodes.value[i];
+        if (node) targets.push({ node, delay: props.delay + delayFor(animationIndex) });
+        animationIndex++;
+      });
+      const apply = (node, progress) => {
+        const eased = ease(progress);
+        const inverse = 1 - eased;
+        node.style.opacity = String(eased);
+        const parts = [`translate3d(0, ${(props.distance * inverse).toFixed(2)}px, 0)`];
+        if (props.rotate !== 0) parts.push(`rotate(${(props.rotate * inverse).toFixed(2)}deg)`);
+        node.style.transform = parts.join(" ");
+        if (props.blur > 0) {
+          const amount = props.blur * inverse;
+          node.style.filter = amount > 0.05 ? `blur(${amount.toFixed(2)}px)` : "";
+        }
+      };
+      const settle = (node) => {
+        node.style.opacity = "";
+        node.style.transform = "";
+        node.style.filter = "";
+        node.style.willChange = "";
+      };
+      const reset = () => {
+        for (const { node } of targets) apply(node, 0);
+      };
+      let elapsed = 0;
+      let running = false;
+      const start = () => {
+        if (running) return;
+        running = true;
+        elapsed = 0;
+        for (const { node } of targets) node.style.willChange = "opacity, transform";
+        reset();
+        stopTicker = core.getTicker().add(
+          ({ delta }) => {
+            elapsed += delta;
+            let allDone = true;
+            for (const target of targets) {
+              const local = elapsed - target.delay;
+              if (local < 0) {
+                allDone = false;
+                continue;
+              }
+              const progress = props.duration <= 0 ? 1 : local / props.duration;
+              if (progress >= 1) {
+                settle(target.node);
+                continue;
+              }
+              apply(target.node, progress);
+              allDone = false;
+            }
+            if (allDone) {
+              stopTicker?.();
+              stopTicker = null;
+              running = false;
+              emit("complete");
+            }
+          },
+          { phase: "write", name: "AnimatedText" }
+        );
+      };
+      reset();
+      if (!props.whenInView) {
+        start();
+        return;
+      }
+      stopObserver = core.observeIntersection(
+        element,
+        (entry) => {
+          if (entry.isIntersecting) {
+            start();
+          } else if (props.repeat) {
+            stopTicker?.();
+            stopTicker = null;
+            running = false;
+            reset();
+          }
+        },
+        { threshold: 0.2, rootMargin: "0px 0px -8% 0px" }
+      );
+    });
+    vue.onBeforeUnmount(() => {
+      stopObserver?.();
+      stopTicker?.();
+      stopObserver = null;
+      stopTicker = null;
+    });
+    return () => vue.h(props.as, { ref: host, style: { display: "inline-block" } }, [
+      // The accessible representation: the real string, unfragmented.
+      vue.h("span", { style: VISUALLY_HIDDEN }, props.text),
+      vue.h(
+        "span",
+        { "aria-hidden": "true" },
+        units.value.map((unit, i) => {
+          if (unit.space) return vue.h("span", {}, unit.text);
+          const inner = vue.h(
+            "span",
+            {
+              ref: (node) => {
+                unitNodes.value[i] = node ?? null;
+              },
+              style: { display: "inline-block" }
+            },
+            unit.text
+          );
+          return props.mask ? vue.h(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                overflow: "hidden",
+                // Without this, descenders (g, y, p) are clipped by the mask box.
+                verticalAlign: "top"
+              }
+            },
+            [inner]
+          ) : inner;
+        })
+      )
+    ]);
+  }
+});
+var DEFAULT_MOTION_CONFIG = {
+  reducedMotion: "auto",
+  timeScale: 1,
+  quality: null
+};
+var MotionConfigKey = /* @__PURE__ */ Symbol("ansh-motion-config");
+var MotionConfig = vue.defineComponent({
+  name: "AnshMotionConfig",
+  props: {
+    reducedMotion: { type: String, default: "auto" },
+    timeScale: { type: Number, default: 1 },
+    quality: { type: Number, default: null },
+    /**
+     * Pause every animation while the document is hidden. Default `true`.
+     *
+     * Leave this on. Animating a background tab burns battery and spins fans for output nobody can
+     * see, and it is the most common performance complaint about animation-heavy sites.
+     */
+    pauseWhenHidden: { type: Boolean, default: true },
+    pauseWhenBlurred: { type: Boolean, default: false },
+    respectBattery: { type: Boolean, default: true }
+  },
+  setup(props, { slots }) {
+    vue.watch(
+      () => props.reducedMotion,
+      (mode) => core.setReducedMotionMode(mode),
+      { immediate: true }
+    );
+    vue.watch(
+      () => props.timeScale,
+      (scale) => {
+        core.getTicker().timeScale = scale;
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props.quality,
+      (quality) => {
+        if (quality !== null) core.getTicker().lockQuality(quality);
+      },
+      { immediate: true }
+    );
+    let detach = null;
+    vue.watch(
+      () => [props.pauseWhenHidden, props.pauseWhenBlurred, props.respectBattery],
+      ([pauseWhenHidden, pauseWhenBlurred, respectBattery]) => {
+        detach?.();
+        detach = core.attachLifecycle(core.getTicker(), { pauseWhenHidden, pauseWhenBlurred, respectBattery });
+      },
+      { immediate: true }
+    );
+    vue.onBeforeUnmount(() => detach?.());
+    vue.provide(
+      MotionConfigKey,
+      vue.computed(() => ({
+        reducedMotion: props.reducedMotion,
+        timeScale: props.timeScale,
+        quality: props.quality
+      }))
+    );
+    return () => slots.default?.();
+  }
+});
+function useMotionConfig() {
+  return vue.inject(
+    MotionConfigKey,
+    vue.computed(() => DEFAULT_MOTION_CONFIG)
+  );
+}
+var DEFAULT_THEME = { theme: "system", resolved: "light", setTheme: () => {
+} };
+var ThemeKey = /* @__PURE__ */ Symbol("ansh-theme");
+var ThemeProvider = vue.defineComponent({
+  name: "AnshThemeProvider",
+  props: {
+    /** Initial setting. Default `'system'`. */
+    defaultTheme: { type: String, default: "system" },
+    /** Persist the choice under this `localStorage` key. Pass `null` to disable. */
+    storageKey: { type: String, default: "ansh-theme" }
+  },
+  setup(props, { slots }) {
+    const theme = vue.ref(props.defaultTheme);
+    const resolved = vue.ref("light");
+    const setTheme = (next) => {
+      theme.value = next;
+    };
+    let mediaQuery = null;
+    let onMediaChange = null;
+    const syncMedia = () => {
+      mediaQuery?.removeEventListener("change", onMediaChange);
+      mediaQuery = null;
+      onMediaChange = null;
+      if (theme.value !== "system" || typeof matchMedia !== "function") return;
+      mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+      onMediaChange = () => {
+        resolved.value = mediaQuery.matches ? "dark" : "light";
+      };
+      mediaQuery.addEventListener("change", onMediaChange);
+    };
+    vue.watch(
+      theme,
+      (next) => {
+        tokens.applyTheme(next);
+        resolved.value = tokens.resolveTheme();
+        syncMedia();
+        if (props.storageKey) {
+          try {
+            localStorage.setItem(props.storageKey, next);
+          } catch {
+          }
+        }
+      },
+      { flush: "post" }
+    );
+    if (typeof document !== "undefined") {
+      queueMicrotask(() => {
+        if (!props.storageKey) return;
+        try {
+          const stored = localStorage.getItem(props.storageKey);
+          if (stored === "light" || stored === "dark" || stored === "system") theme.value = stored;
+        } catch {
+        }
+      });
+      tokens.applyTheme(theme.value);
+      resolved.value = tokens.resolveTheme();
+      syncMedia();
+    }
+    vue.onBeforeUnmount(() => mediaQuery?.removeEventListener("change", onMediaChange));
+    vue.provide(
+      ThemeKey,
+      vue.computed(() => ({ theme: theme.value, resolved: resolved.value, setTheme }))
+    );
+    return () => slots.default?.();
+  }
+});
+function useTheme() {
+  return vue.inject(
+    ThemeKey,
+    vue.computed(() => DEFAULT_THEME)
+  );
+}
+function themeScript(storageKey = "ansh-theme") {
+  return `(function(){try{var t=localStorage.getItem(${JSON.stringify(storageKey)});if(t==='light'||t==='dark'){document.documentElement.setAttribute('data-theme',t)}}catch(e){}})()`;
+}
+var DEFAULTS = {
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: 0,
+  blur: 0
+};
+function applyValues(node, values) {
+  const transform = `translate3d(${values.x}px, ${values.y}px, 0) scale(${values.scale * values.scaleX}, ${values.scale * values.scaleY}) rotate(${values.rotate}deg)`;
+  node.style.transform = transform;
+  node.style.opacity = String(values.opacity);
+  node.style.filter = values.blur > 0 ? `blur(${values.blur}px)` : "";
+}
+function resolve(values, base) {
+  return { ...base, ...values };
+}
+function normalizeChildren(nodes) {
+  return (nodes ?? []).filter((node) => {
+    if (node.type === vue.Comment) return false;
+    if (node.type === vue.Text && typeof node.children === "string" && node.children.trim() === "") {
+      return false;
+    }
+    return true;
+  });
+}
+var Motion = vue.defineComponent({
+  name: "AnshMotion",
+  inheritAttrs: false,
+  props: {
+    as: { type: String, default: "div" },
+    /** Starting values. Applied before the first paint. */
+    initial: { type: Object, default: void 0 },
+    /** Target values. Changing these animates to the new target. */
+    animate: { type: Object, default: void 0 },
+    // Declared so it lands here rather than in `attrs`: `AnimatePresence` reads it off the vnode's
+    // props when the child is removed and swaps it into `animate`. Left undeclared, it would reach
+    // the DOM as an unknown `exit` attribute.
+    exit: { type: Object, default: void 0 },
+    transition: { type: Object, default: void 0 },
+    whileHover: { type: Object, default: void 0 },
+    whileTap: { type: Object, default: void 0 },
+    /** Animate to `animate` only once scrolled into view. */
+    whileInView: { type: Boolean, default: false },
+    /** Fraction visible before `whileInView` triggers. Default `0.2`. */
+    inViewAmount: { type: Number, default: 0.2 }
+  },
+  setup(props, { attrs, slots, expose }) {
+    const node = vue.ref(null);
+    let current = resolve(props.initial, DEFAULTS);
+    const start = chunkPP6OYURM_cjs.useAnimate();
+    expose({
+      get element() {
+        return node.value;
+      }
+    });
+    vue.onMounted(() => {
+      if (!node.value) return;
+      applyValues(node.value, current);
+      if (inView.value) runTo(resolve(props.animate, DEFAULTS));
+    });
+    const runTo = (next, options) => {
+      const element = node.value;
+      if (!element) return;
+      const from = { ...current };
+      const springOption = options?.spring ?? props.transition?.spring;
+      const animationOptions = {
+        ...(options?.delay ?? props.transition?.delay) !== void 0 ? { delay: options?.delay ?? props.transition?.delay ?? 0 } : null,
+        ...springOption ? {
+          spring: springOption === true ? core.springs.default : typeof springOption === "string" ? core.springs[springOption] : springOption
+        } : {
+          duration: options?.duration ?? props.transition?.duration ?? 0.4,
+          ...options?.easing ?? props.transition?.easing ? { easing: options?.easing ?? props.transition?.easing } : null
+        },
+        onUpdate: (t) => {
+          const frame = {};
+          for (const key of Object.keys(DEFAULTS)) {
+            frame[key] = from[key] + (next[key] - from[key]) * t;
+          }
+          current = frame;
+          applyValues(element, frame);
+        },
+        onComplete: () => {
+          current = next;
+          applyValues(element, next);
+        }
+      };
+      start(0, 1, animationOptions);
+    };
+    const inViewState = chunkPP6OYURM_cjs.useInView(node, { threshold: props.inViewAmount, once: true });
+    const inView = vue.computed(() => !props.whileInView || inViewState.value);
+    vue.watch(
+      [() => JSON.stringify(props.animate ?? null), inView],
+      ([, isInView]) => {
+        if (!isInView) return;
+        runTo(resolve(props.animate, DEFAULTS));
+      },
+      { flush: "post" }
+    );
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const interaction = {};
+      if (props.whileHover) {
+        interaction.onMouseenter = () => runTo(resolve({ ...props.animate, ...props.whileHover }, DEFAULTS));
+        interaction.onMouseleave = () => runTo(resolve(props.animate, DEFAULTS));
+      }
+      if (props.whileTap) {
+        interaction.onPointerdown = () => runTo(resolve({ ...props.animate, ...props.whileTap }, DEFAULTS), { duration: 0.12 });
+        interaction.onPointerup = () => runTo(resolve({ ...props.animate, ...props.whileHover }, DEFAULTS));
+      }
+      return vue.h(
+        props.as,
+        {
+          ref: node,
+          class: attrClass,
+          // `will-change` is set once, statically. Toggling it per animation causes the compositor
+          // to create and destroy a layer on every interaction, which is more expensive than the
+          // hint saves.
+          style: [{ willChange: "transform, opacity" }, attrStyle],
+          ...interaction,
+          ...restAttrs
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var AnimatePresence = vue.defineComponent({
+  name: "AnshAnimatePresence",
+  props: {
+    exitDuration: { type: Number, default: 0.35 }
+  },
+  setup(props, { slots }) {
+    const currentChildren = vue.computed(() => normalizeChildren(slots.default?.()));
+    const keyOf = (node) => String(node.key);
+    const keysSignature = vue.computed(() => currentChildren.value.map(keyOf).join("|"));
+    const rendered = vue.ref(currentChildren.value);
+    const timers = /* @__PURE__ */ new Map();
+    vue.watch(
+      [keysSignature, () => props.exitDuration],
+      () => {
+        const next = currentChildren.value;
+        const nextKeys = new Set(next.map(keyOf));
+        const departing = rendered.value.filter((node) => !nextKeys.has(keyOf(node)));
+        if (departing.length === 0) {
+          rendered.value = next;
+          return;
+        }
+        rendered.value = [...next, ...departing];
+        const delay = core.prefersReducedMotion() ? 0 : props.exitDuration * 1e3;
+        for (const node of departing) {
+          const key = keyOf(node);
+          const existing = timers.get(key);
+          if (existing !== void 0) clearTimeout(existing);
+          timers.set(
+            key,
+            setTimeout(() => {
+              rendered.value = rendered.value.filter((entry) => keyOf(entry) !== key);
+              timers.delete(key);
+            }, delay)
+          );
+        }
+      },
+      { flush: "post" }
+    );
+    vue.onScopeDispose(() => {
+      for (const timer of timers.values()) clearTimeout(timer);
+      timers.clear();
+    });
+    return () => {
+      const nextKeys = new Set(currentChildren.value.map(keyOf));
+      return rendered.value.map((node) => {
+        const leaving = !nextKeys.has(keyOf(node));
+        if (!leaving) return node;
+        const nodeProps = node.props ?? {};
+        return vue.cloneVNode(node, {
+          animate: nodeProps.exit ?? { opacity: 0, scale: 0.96 },
+          transition: { duration: props.exitDuration, ...nodeProps.transition }
+        });
+      });
+    };
+  }
+});
+var Draggable = vue.defineComponent({
+  name: "AnshDraggable",
+  inheritAttrs: false,
+  props: {
+    axis: { type: String, default: "both" },
+    bounds: {
+      type: Object,
+      default: void 0
+    },
+    snapBack: { type: Boolean, default: false },
+    momentum: { type: Boolean, default: void 0 }
+  },
+  emits: ["dragStart", "dragEnd"],
+  setup(props, { attrs, slots, emit, expose }) {
+    const node = vue.ref(null);
+    let offset = { x: 0, y: 0 };
+    const dragging = vue.ref(false);
+    const runAnimation = chunkPP6OYURM_cjs.useAnimate();
+    let stopMomentum = null;
+    vue.onScopeDispose(() => stopMomentum?.());
+    expose({
+      get element() {
+        return node.value;
+      },
+      get offset() {
+        return offset;
+      }
+    });
+    const clamp = (value) => ({
+      x: Math.min(
+        Math.max(value.x, props.bounds?.left ?? -Infinity),
+        props.bounds?.right ?? Infinity
+      ),
+      y: Math.min(
+        Math.max(value.y, props.bounds?.top ?? -Infinity),
+        props.bounds?.bottom ?? Infinity
+      )
+    });
+    const write = (value) => {
+      if (node.value) node.value.style.transform = `translate3d(${value.x}px, ${value.y}px, 0)`;
+    };
+    const onPointerdown = (event) => {
+      stopMomentum?.();
+      stopMomentum = null;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      dragging.value = true;
+      emit("dragStart");
+      const useMomentum = props.momentum ?? !props.snapBack;
+      const start = { x: event.clientX, y: event.clientY };
+      const origin = { ...offset };
+      const samples = [];
+      const onMove = (moveEvent) => {
+        const next = clamp({
+          x: props.axis === "y" ? origin.x : origin.x + (moveEvent.clientX - start.x),
+          y: props.axis === "x" ? origin.y : origin.y + (moveEvent.clientY - start.y)
+        });
+        offset = next;
+        write(next);
+        samples.push({ x: next.x, y: next.y, t: performance.now() });
+        if (samples.length > 5) samples.shift();
+      };
+      const onUp = () => {
+        dragging.value = false;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+        if (props.snapBack) {
+          runAnimation(0, 1, {
+            spring: core.springs.subtle,
+            onUpdate: (t) => {
+              const value = { x: offset.x * (1 - t), y: offset.y * (1 - t) };
+              write(value);
+            },
+            onComplete: () => {
+              offset = { x: 0, y: 0 };
+              write(offset);
+              emit("dragEnd", offset);
+            }
+          });
+          return;
+        }
+        if (useMomentum && samples.length >= 2) {
+          const first = samples[0];
+          const last = samples[samples.length - 1];
+          const elapsed = Math.max(1, last.t - first.t);
+          let velocity = {
+            x: (last.x - first.x) / elapsed * 1e3,
+            y: (last.y - first.y) / elapsed * 1e3
+          };
+          const decay = 0.95;
+          const stop = core.getTicker().add(
+            ({ delta }) => {
+              const factor = Math.pow(decay, delta * 60);
+              velocity = { x: velocity.x * factor, y: velocity.y * factor };
+              const next = clamp({
+                x: offset.x + velocity.x * delta,
+                y: offset.y + velocity.y * delta
+              });
+              offset = next;
+              write(next);
+              if (Math.hypot(velocity.x, velocity.y) < 8) {
+                stop();
+                stopMomentum = null;
+                emit("dragEnd", offset);
+              }
+            },
+            { phase: "write", name: "Draggable" }
+          );
+          stopMomentum = stop;
+          return;
+        }
+        emit("dragEnd", offset);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    };
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      return vue.h(
+        "div",
+        {
+          ref: node,
+          class: chunk6732H4BQ_cjs.cx(
+            "ansh-draggable",
+            dragging.value && "ansh-draggable--active",
+            attrClass
+          ),
+          style: [
+            {
+              touchAction: props.axis === "x" ? "pan-y" : props.axis === "y" ? "pan-x" : "none"
+            },
+            attrStyle
+          ],
+          onPointerdown,
+          ...restAttrs
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+exports.AnimatePresence = AnimatePresence;
+exports.AnimatedText = AnimatedText;
+exports.Draggable = Draggable;
+exports.GradientText = GradientText;
+exports.Motion = Motion;
+exports.MotionConfig = MotionConfig;
+exports.ThemeProvider = ThemeProvider;
+exports.themeScript = themeScript;
+exports.useMotionConfig = useMotionConfig;
+exports.useTheme = useTheme;
+//# sourceMappingURL=chunk-Z7XOFKM4.cjs.map
+//# sourceMappingURL=chunk-Z7XOFKM4.cjs.map