@orvui/vue 0.0.0-stage → 0.1.1

package/dist/text-animation-BVFTj50V.js

@@ -0,0 +1,329 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { n as t, r as n } from "./ease-rIvCM4O3.js";
+import { t as r } from "./_plugin-vue_export-helper-Djzt4Yr7.js";
+import { t as i } from "./ActionSwapText-GBQfNPxd.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, mergeProps as p, normalizeStyle as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, watch as w, withCtx as T } from "vue";
+import { motion as E } from "motion-v";
+// src/motion/text-animation/src/reveal-sequence.ts
+function D(e, t) {
+	let n = 0;
+	return (typeof e == "string" ? [e] : e).map((e) => (e.match(/\S+\s*|\s+/g) ?? []).map((e) => (t === "word" ? [e] : Array.from(e)).map((e) => ({
+		text: e,
+		index: n++
+	}))));
+}
+function O(e, t) {
+	let n = e.length ? e : [
+		"#60a5fa",
+		"#818cf8",
+		"#c084fc",
+		"#fb7185",
+		"#fbbf24"
+	];
+	return `linear-gradient(90deg,${t} 0%,${t} calc(var(--chromatic-sweep) - 14%),${n.map((e, t) => {
+		let r = n.length === 1 ? 0 : 28 * t / (n.length - 1) - 14;
+		return `${e} calc(var(--chromatic-sweep) ${r < 0 ? "-" : "+"} ${Number(Math.abs(r).toFixed(2))}%)`;
+	}).join(",")},transparent calc(var(--chromatic-sweep) + 14%),transparent 100%)`;
+}
+// src/motion/text-animation/src/TextReveal.vue?vue&type=script&setup=true&lang.ts
+var k = {
+	key: 0,
+	class: "inline-block whitespace-pre"
+}, A = /* @__PURE__ */ f({
+	__name: "TextReveal",
+	props: {
+		text: {},
+		as: { default: "span" },
+		split: { default: "word" },
+		stagger: { default: .09 },
+		delay: { default: 0 },
+		blur: { default: 12 },
+		yOffset: { default: "40%" },
+		spring: {},
+		once: {
+			type: Boolean,
+			default: !0
+		},
+		whileInView: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(t) {
+		let r = t, i = e(), c = o(() => D(r.text, r.split)), u = o(() => i.value ? { opacity: 0 } : {
+			y: r.yOffset,
+			opacity: 0,
+			filter: `blur(${r.blur}px)`
+		}), f = o(() => i.value ? { opacity: 1 } : {
+			y: 0,
+			opacity: 1,
+			filter: "blur(0px)"
+		});
+		function m(e) {
+			let t = r.delay + e * r.stagger;
+			return i.value ? { opacity: {
+				duration: .25,
+				ease: n,
+				delay: t * .3
+			} } : {
+				y: {
+					type: "spring",
+					stiffness: r.spring?.stiffness ?? 140,
+					damping: r.spring?.damping ?? 26,
+					mass: r.spring?.mass ?? 1.2,
+					delay: t
+				},
+				opacity: {
+					duration: .7,
+					ease: n,
+					delay: t
+				},
+				filter: {
+					duration: .9,
+					ease: n,
+					delay: t
+				}
+			};
+		}
+		function h(e) {
+			return {
+				initial: u.value,
+				animate: r.whileInView ? void 0 : f.value,
+				whileInView: r.whileInView ? f.value : void 0,
+				inViewOptions: {
+					once: r.once,
+					amount: .4
+				},
+				transition: m(e)
+			};
+		}
+		return (e, n) => (_(), s(x(t.as), { class: "block" }, {
+			default: T(() => [(_(!0), l(a, null, y(c.value, (e, n) => (_(), l("span", {
+				key: n,
+				class: "block"
+			}, [(_(!0), l(a, null, y(e, (e, n) => (_(), l(a, { key: n }, [t.split === "char" ? (_(), l("span", k, [(_(!0), l(a, null, y(e, (e) => (_(), s(C(E).span, p({ key: e.index }, { ref_for: !0 }, h(e.index), { class: "inline-block whitespace-pre will-change-transform" }), {
+				default: T(() => [d(S(e.text), 1)]),
+				_: 2
+			}, 1040))), 128))])) : (_(), s(C(E).span, p({
+				key: 1,
+				ref_for: !0
+			}, h(e[0].index), { class: "inline-block whitespace-pre will-change-transform" }), {
+				default: T(() => [d(S(e[0].text), 1)]),
+				_: 2
+			}, 1040))], 64))), 128))]))), 128)), b(e.$slots, "default")]),
+			_: 3
+		}));
+	}
+}), j = { class: "inline-block whitespace-pre" }, M = { class: "sr-only" }, N = { "aria-hidden": "true" }, P = /* @__PURE__ */ f({
+	__name: "TextScramble",
+	props: {
+		text: {},
+		duration: {},
+		glyphs: { default: "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&@$?/" },
+		trigger: {}
+	},
+	setup(t) {
+		let n = t, r = v(n.text), i = e(), a = 0, o = !1, s = 0;
+		function c() {
+			++s, cancelAnimationFrame(a), a = 0;
+		}
+		function d() {
+			c();
+			let e = n.text;
+			if (!o || i.value || !n.glyphs.length) {
+				r.value = e;
+				return;
+			}
+			let t = s, l = n.duration ?? Math.min(760, Math.max(420, e.length * 32)), u = performance.now(), d = 0;
+			function f(i) {
+				if (o && t === s) {
+					if (i - u >= l) r.value = e, a = 0;
+					else {
+						if (i - d >= 40) {
+							d = i;
+							let t = Math.floor((i - u) / l * e.length), a = "";
+							for (let r = 0; r < e.length; r++) a += r < t || e[r] === " " ? e[r] : n.glyphs[Math.floor(Math.random() * n.glyphs.length)];
+							r.value = a;
+						}
+						a = requestAnimationFrame(f);
+					}
+				}
+			}
+			a = requestAnimationFrame(f);
+		}
+		return w([
+			() => n.text,
+			() => n.duration,
+			() => n.glyphs,
+			() => n.trigger,
+			i
+		], d), g(() => {
+			o = !0;
+		}), h(() => {
+			o = !1, c();
+		}), (e, n) => (_(), l("span", j, [u("span", M, S(t.text), 1), u("span", N, S(C(i) ? t.text : r.value), 1)]));
+	}
+}), F = /* @__PURE__ */ r(/* @__PURE__ */ f({
+	__name: "TextShimmer",
+	props: {
+		as: { default: "span" },
+		duration: { default: 2 },
+		spread: { default: 2 }
+	},
+	setup(t) {
+		let n = t, r = e(), i = o(() => ({
+			animationDuration: `${n.duration}s`,
+			animation: r.value ? "none" : `orvui-shimmer ${n.duration}s linear infinite`
+		}));
+		return (e, n) => (_(), s(x(t.as), {
+			class: "orvui-text-shimmer",
+			style: m(i.value)
+		}, {
+			default: T(() => [b(e.$slots, "default", {}, void 0, !0)]),
+			_: 3
+		}, 8, ["style"]));
+	}
+}), [["__scopeId", "data-v-7672e69e"]]), I = /* @__PURE__ */ f({
+	__name: "TextCascade",
+	props: { text: {} },
+	setup(e) {
+		let t = e, n = o(() => t.text);
+		return (e, t) => (_(), s(i, {
+			value: n.value,
+			animation: "cascade"
+		}, {
+			default: T(() => [d(S(n.value), 1)]),
+			_: 1
+		}, 8, ["value"]));
+	}
+}), L = { class: "whitespace-nowrap" }, R = {
+	key: 0,
+	class: "relative inline-grid"
+}, z = { class: "sr-only" }, B = /* @__PURE__ */ f({
+	__name: "ChromaticTextReveal",
+	props: {
+		prefix: {},
+		words: {},
+		colors: { default: () => [
+			"#60a5fa",
+			"#818cf8",
+			"#c084fc",
+			"#fb7185",
+			"#fbbf24"
+		] },
+		foregroundColor: { default: "var(--foreground)" },
+		duration: { default: 1.2 },
+		delay: { default: 0 },
+		pauseDuration: { default: .8 },
+		loop: {
+			type: Boolean,
+			default: !0
+		},
+		startOnView: {
+			type: Boolean,
+			default: !0
+		},
+		once: {
+			type: Boolean,
+			default: !0
+		},
+		inViewMargin: {}
+	},
+	setup(r) {
+		let i = r, f = v(null), p = v(0), b = v(!1), x = e(), D = o(() => i.words.length ? p.value % i.words.length : 0), k = o(() => i.words[D.value] ?? ""), A = o(() => Array.from(new Set(i.words))), j = o(() => !i.startOnView || b.value || x.value), M = o(() => O(i.colors, i.foregroundColor)), N = o(() => ({
+			"--chromatic-sweep": x.value ? { duration: 0 } : {
+				duration: i.duration,
+				delay: i.delay,
+				ease: t
+			},
+			opacity: {
+				duration: x.value ? 0 : .28,
+				ease: n
+			},
+			filter: {
+				duration: x.value ? 0 : .36,
+				ease: n
+			},
+			transform: {
+				duration: x.value ? 0 : .36,
+				ease: n
+			}
+		})), P = !1, F, I;
+		function B() {
+			clearTimeout(F), F = void 0;
+		}
+		function V() {
+			B(), !(!P || x.value || !j.value || i.words.length < 2 || !i.loop && D.value === i.words.length - 1) && (F = setTimeout(() => {
+				p.value = (p.value + 1) % i.words.length;
+			}, i.pauseDuration * 1e3));
+		}
+		function H() {
+			I?.disconnect(), P && f.value && i.startOnView && (typeof IntersectionObserver > "u" ? b.value = !0 : (I = new IntersectionObserver((e) => {
+				b.value = !!e[0]?.isIntersecting, b.value && i.once && I?.disconnect();
+			}, {
+				threshold: .4,
+				rootMargin: i.inViewMargin
+			}), I.observe(f.value)));
+		}
+		return w([
+			() => i.words,
+			() => i.loop,
+			() => i.pauseDuration,
+			x
+		], B), w([
+			() => i.startOnView,
+			() => i.once,
+			() => i.inViewMargin
+		], H), g(() => {
+			P = !0, H();
+		}), h(() => {
+			P = !1, B(), I?.disconnect();
+		}), (e, t) => (_(), l("span", {
+			ref_key: "root",
+			ref: f,
+			class: "inline-flex items-baseline"
+		}, [u("span", L, S(r.prefix) + S(r.words.length ? "\xA0" : ""), 1), r.words.length ? (_(), l("span", R, [
+			(_(!0), l(a, null, y(A.value, (e) => (_(), l("span", {
+				key: e,
+				"aria-hidden": "true",
+				class: "invisible col-start-1 row-start-1 whitespace-nowrap"
+			}, S(e), 1))), 128)),
+			(_(), s(C(E).span, {
+				key: `${k.value}-${D.value}`,
+				"aria-hidden": "true",
+				initial: !C(x) && {
+					opacity: .56,
+					filter: "blur(6px)",
+					transform: "translateY(5px)"
+				},
+				animate: {
+					"--chromatic-sweep": j.value ? "114%" : "-14%",
+					opacity: 1,
+					filter: "blur(0px)",
+					transform: "translateY(0px)"
+				},
+				transition: N.value,
+				onAnimationComplete: V,
+				class: "absolute start-0 top-0 whitespace-nowrap bg-clip-text text-transparent [background-image:var(--chromatic-gradient)] [contain:paint]",
+				style: m({
+					"--chromatic-sweep": C(x) ? "114%" : "-14%",
+					"--chromatic-gradient": M.value,
+					backgroundSize: "100% 100%",
+					backgroundRepeat: "no-repeat"
+				})
+			}, {
+				default: T(() => [d(S(k.value), 1)]),
+				_: 1
+			}, 8, [
+				"initial",
+				"animate",
+				"transition",
+				"style"
+			])),
+			u("span", z, S(k.value), 1)
+		])) : c("", !0)], 512));
+	}
+});
+export { A as a, P as i, I as n, F as r, B as t };
+
+//# sourceMappingURL=text-animation-BVFTj50V.js.map

package/dist/text-animation-BVFTj50V.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-animation-BVFTj50V.js","names":["_hoisted_1","_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_createElementBlock","_Fragment","_renderList","_unref","_mergeProps","_createTextVNode","_toDisplayString","_renderSlot","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_sfc_main","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeStyle","_withCtx","_renderSlot","_sfc_main","_openBlock","_createBlock","ActionSwapText","_withCtx","_createTextVNode","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_Fragment","_renderList","_createBlock","_unref","_normalizeStyle","_withCtx","_createTextVNode","_createCommentVNode","_sfc_main","useReducedMotion","EASE_IN_OUT","EASE_OUT","_plugin_vue_export_helper_default","ActionSwapText_default","revealSequence","ordinal","input","line","mode","chunk","chromaticGradient","palette","colors","foreground","offset","index","color","_hoisted_1$2","TextReveal_default","defineComponent","props","__props","reduced","sequence","computed","concealed","revealed","timing","delay","animation","openBlock","createBlock","resolveDynamicComponent","withCtx","createElementBlock","Fragment","renderList","lineIndex","wordIndex","word","unref","motion","mergeProps","unit","createTextVNode","toDisplayString","renderSlot","_ctx","_hoisted_1$1","_hoisted_2$1","_hoisted_3$1","TextScramble_default","display","ref","frame","mounted","revision","cancel","scramble","target","run","duration","started","painted","tick","now","locked","text","watch","onMounted","onBeforeUnmount","createElementVNode","TextShimmer_default","style","normalizeStyle","TextCascade_default","current","_hoisted_1","_hoisted_2","_hoisted_3","ChromaticTextReveal_default","root","cycle","intersecting","widths","visible","gradient","timer","observer","clear","next","observe","entries","sizing","createCommentVNode"],"sources":["../src/motion/text-animation/src/reveal-sequence.ts","../src/motion/text-animation/src/TextReveal.vue","../src/motion/text-animation/src/TextReveal.vue","../src/motion/text-animation/src/TextScramble.vue","../src/motion/text-animation/src/TextScramble.vue","../src/motion/text-animation/src/TextShimmer.vue","../src/motion/text-animation/src/TextShimmer.vue","../src/motion/text-animation/src/TextCascade.vue","../src/motion/text-animation/src/TextCascade.vue","../src/motion/text-animation/src/ChromaticTextReveal.vue","../src/motion/text-animation/src/ChromaticTextReveal.vue"],"sourcesContent":["export interface RevealUnit { text: string; index: number }\nexport function revealSequence(input: string | string[], mode: \"word\" | \"char\"): RevealUnit[][][] {\n  let ordinal = 0;\n  return (typeof input === \"string\" ? [input] : input).map(line => {\n    const chunks = line.match(/\\S+\\s*|\\s+/g) ?? [];\n    return chunks.map(chunk => (mode === \"word\" ? [chunk] : Array.from(chunk)).map(text => ({ text, index: ordinal++ })));\n  });\n}\nexport function chromaticGradient(colors: string[], foreground: string) {\n  const palette = colors.length ? colors : [\"#60a5fa\", \"#818cf8\", \"#c084fc\", \"#fb7185\", \"#fbbf24\"];\n  const stops = palette.map((color, index) => { const offset = palette.length === 1 ? 0 : 28 * index / (palette.length - 1) - 14; return `${color} calc(var(--chromatic-sweep) ${offset < 0 ? \"-\" : \"+\"} ${Number(Math.abs(offset).toFixed(2))}%)`; });\n  return `linear-gradient(90deg,${foreground} 0%,${foreground} calc(var(--chromatic-sweep) - 14%),${stops.join(\",\")},transparent calc(var(--chromatic-sweep) + 14%),transparent 100%)`;\n}\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { revealSequence } from \"./reveal-sequence\";\nconst props = withDefaults(defineProps<{ text: string | string[]; as?: string; split?: \"word\" | \"char\"; stagger?: number; delay?: number; blur?: number; yOffset?: string | number; spring?: { stiffness?: number; damping?: number; mass?: number }; once?: boolean; whileInView?: boolean }>(), { as: \"span\", split: \"word\", stagger: .09, delay: 0, blur: 12, yOffset: \"40%\", once: true, whileInView: false });\nconst reduced = useReducedMotion();\nconst sequence = computed(() => revealSequence(props.text, props.split));\nconst concealed = computed(() => reduced.value ? { opacity: 0 } : { y: props.yOffset, opacity: 0, filter: `blur(${props.blur}px)` });\nconst revealed = computed(() => reduced.value ? { opacity: 1 } : { y: 0, opacity: 1, filter: \"blur(0px)\" });\nfunction timing(index: number) { const delay = props.delay + index * props.stagger; return reduced.value ? { opacity: { duration: .25, ease: EASE_OUT, delay: delay * .3 } } : { y: { type: \"spring\" as const, stiffness: props.spring?.stiffness ?? 140, damping: props.spring?.damping ?? 26, mass: props.spring?.mass ?? 1.2, delay }, opacity: { duration: .7, ease: EASE_OUT, delay }, filter: { duration: .9, ease: EASE_OUT, delay } }; }\nfunction animation(index: number) { return { initial: concealed.value, animate: props.whileInView ? undefined : revealed.value, whileInView: props.whileInView ? revealed.value : undefined, inViewOptions: { once: props.once, amount: .4 }, transition: timing(index) }; }\n</script>\n<template><component :is=\"as\" class=\"block\"><span v-for=\"(line, lineIndex) in sequence\" :key=\"lineIndex\" class=\"block\"><template v-for=\"(word, wordIndex) in line\" :key=\"wordIndex\"><span v-if=\"split === 'char'\" class=\"inline-block whitespace-pre\"><motion.span v-for=\"unit in word\" :key=\"unit.index\" v-bind=\"animation(unit.index)\" class=\"inline-block whitespace-pre will-change-transform\">{{ unit.text }}</motion.span></span><motion.span v-else v-bind=\"animation(word[0].index)\" class=\"inline-block whitespace-pre will-change-transform\">{{ word[0].text }}</motion.span></template></span><slot /></component></template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { revealSequence } from \"./reveal-sequence\";\nconst props = withDefaults(defineProps<{ text: string | string[]; as?: string; split?: \"word\" | \"char\"; stagger?: number; delay?: number; blur?: number; yOffset?: string | number; spring?: { stiffness?: number; damping?: number; mass?: number }; once?: boolean; whileInView?: boolean }>(), { as: \"span\", split: \"word\", stagger: .09, delay: 0, blur: 12, yOffset: \"40%\", once: true, whileInView: false });\nconst reduced = useReducedMotion();\nconst sequence = computed(() => revealSequence(props.text, props.split));\nconst concealed = computed(() => reduced.value ? { opacity: 0 } : { y: props.yOffset, opacity: 0, filter: `blur(${props.blur}px)` });\nconst revealed = computed(() => reduced.value ? { opacity: 1 } : { y: 0, opacity: 1, filter: \"blur(0px)\" });\nfunction timing(index: number) { const delay = props.delay + index * props.stagger; return reduced.value ? { opacity: { duration: .25, ease: EASE_OUT, delay: delay * .3 } } : { y: { type: \"spring\" as const, stiffness: props.spring?.stiffness ?? 140, damping: props.spring?.damping ?? 26, mass: props.spring?.mass ?? 1.2, delay }, opacity: { duration: .7, ease: EASE_OUT, delay }, filter: { duration: .9, ease: EASE_OUT, delay } }; }\nfunction animation(index: number) { return { initial: concealed.value, animate: props.whileInView ? undefined : revealed.value, whileInView: props.whileInView ? revealed.value : undefined, inViewOptions: { once: props.once, amount: .4 }, transition: timing(index) }; }\n</script>\n<template><component :is=\"as\" class=\"block\"><span v-for=\"(line, lineIndex) in sequence\" :key=\"lineIndex\" class=\"block\"><template v-for=\"(word, wordIndex) in line\" :key=\"wordIndex\"><span v-if=\"split === 'char'\" class=\"inline-block whitespace-pre\"><motion.span v-for=\"unit in word\" :key=\"unit.index\" v-bind=\"animation(unit.index)\" class=\"inline-block whitespace-pre will-change-transform\">{{ unit.text }}</motion.span></span><motion.span v-else v-bind=\"animation(word[0].index)\" class=\"inline-block whitespace-pre will-change-transform\">{{ word[0].text }}</motion.span></template></span><slot /></component></template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nconst props = withDefaults(defineProps<{ text: string; duration?: number; glyphs?: string; trigger?: string | number }>(), { glyphs: \"ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&@$?/\" });\nconst display = ref(props.text);\nconst reduced = useReducedMotion();\nlet frame = 0;\nlet mounted = false;\nlet revision = 0;\nfunction cancel() { ++revision; cancelAnimationFrame(frame); frame = 0; }\nfunction scramble() {\n  cancel();\n  const target = props.text;\n  if (!mounted || reduced.value || !props.glyphs.length) { display.value = target; return; }\n  const run = revision;\n  const duration = props.duration ?? Math.min(760, Math.max(420, target.length * 32));\n  const started = performance.now();\n  let painted = 0;\n  function tick(now: number) {\n    if (!mounted || run !== revision) return;\n    if (now - started >= duration) { display.value = target; frame = 0; return; }\n    if (now - painted >= 40) { painted = now; const locked = Math.floor((now - started) / duration * target.length); let text = \"\"; for (let index = 0; index < target.length; index++) text += index < locked || target[index] === \" \" ? target[index] : props.glyphs[Math.floor(Math.random() * props.glyphs.length)]; display.value = text; }\n    frame = requestAnimationFrame(tick);\n  }\n  frame = requestAnimationFrame(tick);\n}\nwatch([() => props.text, () => props.duration, () => props.glyphs, () => props.trigger, reduced], scramble);\nonMounted(() => { mounted = true; });\nonBeforeUnmount(() => { mounted = false; cancel(); });\n</script>\n<template><span class=\"inline-block whitespace-pre\"><span class=\"sr-only\">{{ text }}</span><span aria-hidden=\"true\">{{ reduced ? text : display }}</span></span></template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nconst props = withDefaults(defineProps<{ text: string; duration?: number; glyphs?: string; trigger?: string | number }>(), { glyphs: \"ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&@$?/\" });\nconst display = ref(props.text);\nconst reduced = useReducedMotion();\nlet frame = 0;\nlet mounted = false;\nlet revision = 0;\nfunction cancel() { ++revision; cancelAnimationFrame(frame); frame = 0; }\nfunction scramble() {\n  cancel();\n  const target = props.text;\n  if (!mounted || reduced.value || !props.glyphs.length) { display.value = target; return; }\n  const run = revision;\n  const duration = props.duration ?? Math.min(760, Math.max(420, target.length * 32));\n  const started = performance.now();\n  let painted = 0;\n  function tick(now: number) {\n    if (!mounted || run !== revision) return;\n    if (now - started >= duration) { display.value = target; frame = 0; return; }\n    if (now - painted >= 40) { painted = now; const locked = Math.floor((now - started) / duration * target.length); let text = \"\"; for (let index = 0; index < target.length; index++) text += index < locked || target[index] === \" \" ? target[index] : props.glyphs[Math.floor(Math.random() * props.glyphs.length)]; display.value = text; }\n    frame = requestAnimationFrame(tick);\n  }\n  frame = requestAnimationFrame(tick);\n}\nwatch([() => props.text, () => props.duration, () => props.glyphs, () => props.trigger, reduced], scramble);\nonMounted(() => { mounted = true; });\nonBeforeUnmount(() => { mounted = false; cancel(); });\n</script>\n<template><span class=\"inline-block whitespace-pre\"><span class=\"sr-only\">{{ text }}</span><span aria-hidden=\"true\">{{ reduced ? text : display }}</span></span></template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nconst props = withDefaults(defineProps<{ as?: string; duration?: number; spread?: number }>(), { as: \"span\", duration: 2, spread: 2 });\nconst reduced = useReducedMotion();\nconst style = computed(() => ({ animationDuration: `${props.duration}s`, animation: reduced.value ? \"none\" : `orvui-shimmer ${props.duration}s linear infinite` }));\n</script>\n<template><component :is=\"as\" class=\"orvui-text-shimmer\" :style=\"style\"><slot /></component></template>\n<style scoped>\n.orvui-text-shimmer { background-image: linear-gradient(110deg, var(--muted-foreground) 30%, var(--foreground) 50%, var(--muted-foreground) 70%); background-size: 200% 100%; background-clip: text; color: transparent; animation: orvui-shimmer 2s linear infinite; }\n@keyframes orvui-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\n@media (prefers-reduced-motion: reduce) { .orvui-text-shimmer { animation: none !important; } }\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nconst props = withDefaults(defineProps<{ as?: string; duration?: number; spread?: number }>(), { as: \"span\", duration: 2, spread: 2 });\nconst reduced = useReducedMotion();\nconst style = computed(() => ({ animationDuration: `${props.duration}s`, animation: reduced.value ? \"none\" : `orvui-shimmer ${props.duration}s linear infinite` }));\n</script>\n<template><component :is=\"as\" class=\"orvui-text-shimmer\" :style=\"style\"><slot /></component></template>\n<style scoped>\n.orvui-text-shimmer { background-image: linear-gradient(110deg, var(--muted-foreground) 30%, var(--foreground) 50%, var(--muted-foreground) 70%); background-size: 200% 100%; background-clip: text; color: transparent; animation: orvui-shimmer 2s linear infinite; }\n@keyframes orvui-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\n@media (prefers-reduced-motion: reduce) { .orvui-text-shimmer { animation: none !important; } }\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ActionSwapText from \"../../action-swap/src/ActionSwapText.vue\";\nconst props = defineProps<{ text: string }>();\nconst current = computed(() => props.text);\n</script>\n<template><ActionSwapText :value=\"current\" animation=\"cascade\">{{ current }}</ActionSwapText></template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ActionSwapText from \"../../action-swap/src/ActionSwapText.vue\";\nconst props = defineProps<{ text: string }>();\nconst current = computed(() => props.text);\n</script>\n<template><ActionSwapText :value=\"current\" animation=\"cascade\">{{ current }}</ActionSwapText></template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch, type CSSProperties } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_IN_OUT, EASE_OUT } from \"../../../lib/ease\";\nimport { chromaticGradient } from \"./reveal-sequence\";\nconst props = withDefaults(defineProps<{ prefix: string; words: string[]; colors?: string[]; foregroundColor?: string; duration?: number; delay?: number; pauseDuration?: number; loop?: boolean; startOnView?: boolean; once?: boolean; inViewMargin?: string }>(), { colors: () => [\"#60a5fa\", \"#818cf8\", \"#c084fc\", \"#fb7185\", \"#fbbf24\"], foregroundColor: \"var(--foreground)\", duration: 1.2, delay: 0, pauseDuration: .8, loop: true, startOnView: true, once: true });\nconst root = ref<HTMLElement | null>(null);\nconst cycle = ref(0);\nconst intersecting = ref(false);\nconst reduced = useReducedMotion();\nconst index = computed(() => props.words.length ? cycle.value % props.words.length : 0);\nconst word = computed(() => props.words[index.value] ?? \"\");\nconst widths = computed(() => Array.from(new Set(props.words)));\nconst visible = computed(() => !props.startOnView || intersecting.value || reduced.value);\nconst gradient = computed(() => chromaticGradient(props.colors, props.foregroundColor));\nconst timing = computed(() => ({ \"--chromatic-sweep\": reduced.value ? { duration: 0 } : { duration: props.duration, delay: props.delay, ease: EASE_IN_OUT }, opacity: { duration: reduced.value ? 0 : .28, ease: EASE_OUT }, filter: { duration: reduced.value ? 0 : .36, ease: EASE_OUT }, transform: { duration: reduced.value ? 0 : .36, ease: EASE_OUT } }));\nlet mounted = false;\nlet timer: ReturnType<typeof setTimeout> | undefined;\nlet observer: IntersectionObserver | undefined;\nfunction clear() { clearTimeout(timer); timer = undefined; }\nfunction next() { clear(); if (!mounted || reduced.value || !visible.value || props.words.length < 2 || !props.loop && index.value === props.words.length - 1) return; timer = setTimeout(() => { cycle.value = (cycle.value + 1) % props.words.length; }, props.pauseDuration * 1000); }\nfunction observe() { observer?.disconnect(); if (!mounted || !root.value || !props.startOnView) return; if (typeof IntersectionObserver === \"undefined\") { intersecting.value = true; return; } observer = new IntersectionObserver(entries => { intersecting.value = !!entries[0]?.isIntersecting; if (intersecting.value && props.once) observer?.disconnect(); }, { threshold: .4, rootMargin: props.inViewMargin }); observer.observe(root.value); }\nwatch([() => props.words, () => props.loop, () => props.pauseDuration, reduced], clear);\nwatch([() => props.startOnView, () => props.once, () => props.inViewMargin], observe);\nonMounted(() => { mounted = true; observe(); });\nonBeforeUnmount(() => { mounted = false; clear(); observer?.disconnect(); });\n</script>\n<template>\n  <span ref=\"root\" class=\"inline-flex items-baseline\"><span class=\"whitespace-nowrap\">{{ prefix }}{{ words.length ? '\\u00a0' : '' }}</span><span v-if=\"words.length\" class=\"relative inline-grid\"><span v-for=\"sizing in widths\" :key=\"sizing\" aria-hidden=\"true\" class=\"invisible col-start-1 row-start-1 whitespace-nowrap\">{{ sizing }}</span><motion.span :key=\"`${word}-${index}`\" aria-hidden=\"true\" :initial=\"reduced ? false : { opacity: .56, filter: 'blur(6px)', transform: 'translateY(5px)' }\" :animate=\"{ '--chromatic-sweep': visible ? '114%' : '-14%', opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' }\" :transition=\"timing\" @animation-complete=\"next\" class=\"absolute start-0 top-0 whitespace-nowrap bg-clip-text text-transparent [background-image:var(--chromatic-gradient)] [contain:paint]\" :style=\"{ '--chromatic-sweep': reduced ? '114%' : '-14%', '--chromatic-gradient': gradient, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' } as CSSProperties\">{{ word }}</motion.span><span class=\"sr-only\">{{ word }}</span></span></span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch, type CSSProperties } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_IN_OUT, EASE_OUT } from \"../../../lib/ease\";\nimport { chromaticGradient } from \"./reveal-sequence\";\nconst props = withDefaults(defineProps<{ prefix: string; words: string[]; colors?: string[]; foregroundColor?: string; duration?: number; delay?: number; pauseDuration?: number; loop?: boolean; startOnView?: boolean; once?: boolean; inViewMargin?: string }>(), { colors: () => [\"#60a5fa\", \"#818cf8\", \"#c084fc\", \"#fb7185\", \"#fbbf24\"], foregroundColor: \"var(--foreground)\", duration: 1.2, delay: 0, pauseDuration: .8, loop: true, startOnView: true, once: true });\nconst root = ref<HTMLElement | null>(null);\nconst cycle = ref(0);\nconst intersecting = ref(false);\nconst reduced = useReducedMotion();\nconst index = computed(() => props.words.length ? cycle.value % props.words.length : 0);\nconst word = computed(() => props.words[index.value] ?? \"\");\nconst widths = computed(() => Array.from(new Set(props.words)));\nconst visible = computed(() => !props.startOnView || intersecting.value || reduced.value);\nconst gradient = computed(() => chromaticGradient(props.colors, props.foregroundColor));\nconst timing = computed(() => ({ \"--chromatic-sweep\": reduced.value ? { duration: 0 } : { duration: props.duration, delay: props.delay, ease: EASE_IN_OUT }, opacity: { duration: reduced.value ? 0 : .28, ease: EASE_OUT }, filter: { duration: reduced.value ? 0 : .36, ease: EASE_OUT }, transform: { duration: reduced.value ? 0 : .36, ease: EASE_OUT } }));\nlet mounted = false;\nlet timer: ReturnType<typeof setTimeout> | undefined;\nlet observer: IntersectionObserver | undefined;\nfunction clear() { clearTimeout(timer); timer = undefined; }\nfunction next() { clear(); if (!mounted || reduced.value || !visible.value || props.words.length < 2 || !props.loop && index.value === props.words.length - 1) return; timer = setTimeout(() => { cycle.value = (cycle.value + 1) % props.words.length; }, props.pauseDuration * 1000); }\nfunction observe() { observer?.disconnect(); if (!mounted || !root.value || !props.startOnView) return; if (typeof IntersectionObserver === \"undefined\") { intersecting.value = true; return; } observer = new IntersectionObserver(entries => { intersecting.value = !!entries[0]?.isIntersecting; if (intersecting.value && props.once) observer?.disconnect(); }, { threshold: .4, rootMargin: props.inViewMargin }); observer.observe(root.value); }\nwatch([() => props.words, () => props.loop, () => props.pauseDuration, reduced], clear);\nwatch([() => props.startOnView, () => props.once, () => props.inViewMargin], observe);\nonMounted(() => { mounted = true; observe(); });\nonBeforeUnmount(() => { mounted = false; clear(); observer?.disconnect(); });\n</script>\n<template>\n  <span ref=\"root\" class=\"inline-flex items-baseline\"><span class=\"whitespace-nowrap\">{{ prefix }}{{ words.length ? '\\u00a0' : '' }}</span><span v-if=\"words.length\" class=\"relative inline-grid\"><span v-for=\"sizing in widths\" :key=\"sizing\" aria-hidden=\"true\" class=\"invisible col-start-1 row-start-1 whitespace-nowrap\">{{ sizing }}</span><motion.span :key=\"`${word}-${index}`\" aria-hidden=\"true\" :initial=\"reduced ? false : { opacity: .56, filter: 'blur(6px)', transform: 'translateY(5px)' }\" :animate=\"{ '--chromatic-sweep': visible ? '114%' : '-14%', opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' }\" :transition=\"timing\" @animation-complete=\"next\" class=\"absolute start-0 top-0 whitespace-nowrap bg-clip-text text-transparent [background-image:var(--chromatic-gradient)] [contain:paint]\" :style=\"{ '--chromatic-sweep': reduced ? '114%' : '-14%', '--chromatic-gradient': gradient, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' } as CSSProperties\">{{ word }}</motion.span><span class=\"sr-only\">{{ word }}</span></span></span>\n</template>\n"],"mappings":"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"}

package/dist/theme/palettes.d.ts

@@ -0,0 +1,17 @@
+export type ColorTheme = "default" | "violet" | "blue" | "green" | "amber" | "blood-orange" | "rose" | "red" | "teal" | "indigo" | "lime";
+export type ThemeVars = Record<string, string>;
+export type Theme = {
+    name: string;
+    swatch: string;
+    light: ThemeVars;
+    dark: ThemeVars;
+};
+export declare const THEMES: Record<ColorTheme, Theme>;
+export declare const THEME_LIST: {
+    id: ColorTheme;
+    name: string;
+    swatch: string;
+}[];
+export declare function themeExportCss(id: ColorTheme): string;
+export declare function themesStylesheet(): string;
+//# sourceMappingURL=palettes.d.ts.map

package/dist/theme/palettes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../../src/theme/palettes.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC1I,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC/C,MAAM,MAAM,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AACxF,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,CAmwB5C,CAAC;AACF,eAAO,MAAM,UAAU;;;;GAA8G,CAAC;AAoBtI,wBAAgB,cAAc,CAAC,EAAE,EAAE,UAAU,GAAG,MAAM,CAGrD;AACD,wBAAgB,gBAAgB,IAAI,MAAM,CASzC"}

package/dist/theme/stylesheet.d.ts

@@ -0,0 +1,2 @@
+export declare function designSystemCss(): string;
+//# sourceMappingURL=stylesheet.d.ts.map

package/dist/theme/stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/theme/stylesheet.ts"],"names":[],"mappings":"AAIA,wBAAgB,eAAe,IAAI,MAAM,CASxC"}

package/dist/theme-toggle-Bmv1gxgq.js

@@ -0,0 +1,122 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { t } from "./utils-DIrLOK2M.js";
+import { t as n } from "./ActionSwapIcon-BWUn5TzV.js";
+import { computed as r, createBlock as i, createElementBlock as a, defineComponent as o, normalizeClass as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, unref as f, watch as p, withCtx as m } from "vue";
+import { Moon as h, Sun as g } from "lucide-vue-next";
+// src/motion/theme-toggle/src/useThemeToggle.ts
+var _ = {
+	"top-left": [0, 0],
+	"top-right": [100, 0],
+	"bottom-left": [0, 100],
+	"bottom-right": [100, 100],
+	center: [50, 50],
+	"bottom-up": [50, 100]
+}, v = 0;
+function y(t = {}) {
+	let n = d(!1), r = d(!1), i = e(), a;
+	l(() => {
+		r.value = !0;
+		let e = () => {
+			n.value = document.documentElement.classList.contains("dark");
+		};
+		e(), a = new MutationObserver(e), a.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		});
+	}), c(() => {
+		r.value = !1, a?.disconnect();
+	});
+	function o(e, r = !0) {
+		if (typeof document > "u") return;
+		let a = document.documentElement, o = ++v, s = e === "dark", c = () => {
+			o === v && delete a.dataset.orvuiVt;
+		};
+		if (a.classList.contains("dark") === s) {
+			n.value = s, c();
+			return;
+		}
+		let l = () => {
+			if (o === v) {
+				a.classList.toggle("dark", s), n.value = s;
+				try {
+					window.localStorage.setItem("orvui-theme", e);
+				} catch {}
+				window.dispatchEvent(new CustomEvent("orvui-theme-change", { detail: e }));
+			}
+		}, u = document.startViewTransition;
+		if (!r || i.value || typeof u != "function") {
+			c(), l();
+			return;
+		}
+		let d = t.variant ?? "rectangle", f = t.start ?? "bottom-up";
+		if (d === "rectangle") {
+			let [e, t] = _[f], n = f === "bottom-up" ? "100% 0 0 0" : `${t}% ${100 - e}% ${100 - t}% ${e}%`;
+			a.style.setProperty("--orvui-vt-from", `inset(${n})`), a.dataset.orvuiVt = "rect";
+		} else if (a.dataset.orvuiVt = d, d !== "blinds") {
+			let [e, t] = _[f];
+			a.style.setProperty("--orvui-vt-origin", `${e}% ${t}%`);
+		}
+		try {
+			u.call(document, l).finished.then(c, c);
+		} catch {
+			c(), l();
+		}
+	}
+	function s() {
+		o(n.value ? "light" : "dark");
+	}
+	return {
+		isDark: n,
+		mounted: r,
+		toggle: s,
+		applyTheme: o
+	};
+}
+// src/motion/theme-toggle/src/ThemeToggle.vue?vue&type=script&setup=true&lang.ts
+var b = ["aria-label"], x = /* @__PURE__ */ o({
+	__name: "ThemeToggle",
+	props: {
+		modelValue: {},
+		variant: { default: "rectangle" },
+		start: { default: "bottom-up" },
+		iconClassName: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(e, { emit: o }) {
+		let c = e, l = o, d = y(c), _ = r(() => d.mounted.value && d.isDark.value ? "Switch to light mode" : "Switch to dark mode");
+		p([() => c.modelValue, d.mounted], ([e, t], [, n]) => {
+			t && e !== void 0 && d.applyTheme(e, n);
+		}, { flush: "sync" });
+		function v() {
+			let e = (c.modelValue ?? (d.isDark.value ? "dark" : "light")) === "dark" ? "light" : "dark";
+			c.modelValue === void 0 && d.toggle(), l("update:modelValue", e), l("change", e);
+		}
+		return (r, o) => (u(), a("button", {
+			type: "button",
+			"aria-label": _.value,
+			onClick: v,
+			class: s(f(t)("flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", r.$attrs.class))
+		}, [f(d).mounted.value ? (u(), i(n, {
+			key: 0,
+			value: f(d).isDark.value ? "dark" : "light",
+			animation: "blur",
+			class: s(e.iconClassName)
+		}, {
+			default: m(() => [f(d).isDark.value ? (u(), i(f(g), {
+				key: 0,
+				class: s(e.iconClassName)
+			}, null, 8, ["class"])) : (u(), i(f(h), {
+				key: 1,
+				class: s(e.iconClassName)
+			}, null, 8, ["class"]))]),
+			_: 1
+		}, 8, ["value", "class"])) : (u(), a("span", {
+			key: 1,
+			class: s(e.iconClassName),
+			"aria-hidden": "true"
+		}, null, 2))], 10, b));
+	}
+});
+export { y as n, x as t };
+
+//# sourceMappingURL=theme-toggle-Bmv1gxgq.js.map

package/dist/theme-toggle-Bmv1gxgq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle-Bmv1gxgq.js","names":["$attrs","_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","ActionSwapIcon","_withCtx","_sfc_main","useReducedMotion","ActionSwapIcon_default","origins","currentTransition","useThemeToggle","isDark","ref","mounted","reduced","observer","onMounted","sync","onBeforeUnmount","applyTheme","root","request","dark","next","clearMarker","commit","nativeTransition","animated","variant","options","start","x","y","inset","toggle","_hoisted_1","ThemeToggle_default","defineComponent","__emit","props","__props","emit","theme","label","computed","requested","ready","previouslyReady","activate","openBlock","createElementBlock","normalizeClass","unref","cn","_ctx","createBlock","withCtx","Sun","Moon"],"sources":["../src/motion/theme-toggle/src/useThemeToggle.ts","../src/motion/theme-toggle/src/ThemeToggle.vue","../src/motion/theme-toggle/src/ThemeToggle.vue"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport \"../styles/theme.css\";\nexport type ThemeVariant = \"rectangle\" | \"circle\" | \"circle-blur\" | \"blinds\";\nexport type RectStart = \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" | \"center\" | \"bottom-up\";\n\nconst origins: Record<RectStart, [number, number]> = {\n  \"top-left\": [0, 0], \"top-right\": [100, 0], \"bottom-left\": [0, 100],\n  \"bottom-right\": [100, 100], center: [50, 50], \"bottom-up\": [50, 100],\n};\nlet currentTransition = 0;\nexport function useThemeToggle(options: { variant?: ThemeVariant; start?: RectStart } = {}) {\n  const isDark = ref(false), mounted = ref(false), reduced = useReducedMotion();\n  let observer: MutationObserver | undefined;\n  onMounted(() => {\n    mounted.value = true;\n    const sync = () => { isDark.value = document.documentElement.classList.contains(\"dark\"); };\n    sync();\n    observer = new MutationObserver(sync);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n  });\n  onBeforeUnmount(() => { mounted.value = false; observer?.disconnect(); });\n  function applyTheme(next: \"light\" | \"dark\", animated = true) {\n    if (typeof document === \"undefined\") return;\n    const root = document.documentElement;\n    const request = ++currentTransition;\n    const dark = next === \"dark\";\n    const clearMarker = () => { if (request === currentTransition) delete root.dataset.orvuiVt; };\n    if (root.classList.contains(\"dark\") === dark) {\n      isDark.value = dark;\n      clearMarker();\n      return;\n    }\n    const commit = () => {\n      if (request !== currentTransition) return;\n      root.classList.toggle(\"dark\", dark);\n      isDark.value = dark;\n      try {\n        window.localStorage.setItem(\"orvui-theme\", next);\n      } catch { /* A restricted storage area does not prevent changing appearance. */ }\n      window.dispatchEvent(new CustomEvent(\"orvui-theme-change\", { detail: next }));\n    };\n    const nativeTransition = document.startViewTransition;\n    if (!animated || reduced.value || typeof nativeTransition !== \"function\") {\n      clearMarker();\n      commit();\n      return;\n    }\n    const variant = options.variant ?? \"rectangle\", start = options.start ?? \"bottom-up\";\n    if (variant === \"rectangle\") {\n      const [x, y] = origins[start];\n      const inset = start === \"bottom-up\" ? \"100% 0 0 0\" : `${y}% ${100 - x}% ${100 - y}% ${x}%`;\n      root.style.setProperty(\"--orvui-vt-from\", `inset(${inset})`);\n      root.dataset.orvuiVt = \"rect\";\n    } else {\n      root.dataset.orvuiVt = variant;\n      if (variant !== \"blinds\") {\n        const [x, y] = origins[start];\n        root.style.setProperty(\"--orvui-vt-origin\", `${x}% ${y}%`);\n      }\n    }\n    try {\n      const transition = nativeTransition.call(document, commit);\n      void transition.finished.then(clearMarker, clearMarker);\n    } catch {\n      clearMarker();\n      commit();\n    }\n  }\n  function toggle() { applyTheme(isDark.value ? \"light\" : \"dark\"); }\n  return { isDark, mounted, toggle, applyTheme };\n}\n","<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport { cn } from \"../../../lib/utils\";\nimport { Moon, Sun } from \"lucide-vue-next\";\nimport ActionSwapIcon from \"../../action-swap/src/ActionSwapIcon.vue\";\nimport { useThemeToggle, type RectStart, type ThemeVariant } from \"./useThemeToggle\";\nconst props = withDefaults(defineProps<{\n  modelValue?: \"light\" | \"dark\"; variant?: ThemeVariant; start?: RectStart; iconClassName?: string;\n}>(), { variant: \"rectangle\", start: \"bottom-up\" });\nconst emit = defineEmits([\"update:modelValue\", \"change\"]);\nconst theme = useThemeToggle(props);\nconst label = computed(() => theme.mounted.value && theme.isDark.value ? \"Switch to light mode\" : \"Switch to dark mode\");\nwatch([() => props.modelValue, theme.mounted], ([requested, ready], [, previouslyReady]) => {\n  if (ready && requested !== undefined) theme.applyTheme(requested, previouslyReady);\n}, { flush: \"sync\" });\nfunction activate() {\n  const current = props.modelValue ?? (theme.isDark.value ? \"dark\" : \"light\");\n  const next = current === \"dark\" ? \"light\" : \"dark\";\n  if (props.modelValue === undefined) theme.toggle();\n  emit(\"update:modelValue\", next);\n  emit(\"change\", next);\n}\n</script>\n<template>\n  <button type=\"button\" :aria-label=\"label\" @click=\"activate\" :class=\"cn('flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', $attrs.class)\">\n    <ActionSwapIcon v-if=\"theme.mounted.value\" :value=\"theme.isDark.value ? 'dark' : 'light'\" animation=\"blur\" :class=\"iconClassName\">\n      <Sun v-if=\"theme.isDark.value\" :class=\"iconClassName\" /><Moon v-else :class=\"iconClassName\" />\n    </ActionSwapIcon>\n    <span v-else :class=\"iconClassName\" aria-hidden=\"true\" />\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport { cn } from \"../../../lib/utils\";\nimport { Moon, Sun } from \"lucide-vue-next\";\nimport ActionSwapIcon from \"../../action-swap/src/ActionSwapIcon.vue\";\nimport { useThemeToggle, type RectStart, type ThemeVariant } from \"./useThemeToggle\";\nconst props = withDefaults(defineProps<{\n  modelValue?: \"light\" | \"dark\"; variant?: ThemeVariant; start?: RectStart; iconClassName?: string;\n}>(), { variant: \"rectangle\", start: \"bottom-up\" });\nconst emit = defineEmits([\"update:modelValue\", \"change\"]);\nconst theme = useThemeToggle(props);\nconst label = computed(() => theme.mounted.value && theme.isDark.value ? \"Switch to light mode\" : \"Switch to dark mode\");\nwatch([() => props.modelValue, theme.mounted], ([requested, ready], [, previouslyReady]) => {\n  if (ready && requested !== undefined) theme.applyTheme(requested, previouslyReady);\n}, { flush: \"sync\" });\nfunction activate() {\n  const current = props.modelValue ?? (theme.isDark.value ? \"dark\" : \"light\");\n  const next = current === \"dark\" ? \"light\" : \"dark\";\n  if (props.modelValue === undefined) theme.toggle();\n  emit(\"update:modelValue\", next);\n  emit(\"change\", next);\n}\n</script>\n<template>\n  <button type=\"button\" :aria-label=\"label\" @click=\"activate\" :class=\"cn('flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', $attrs.class)\">\n    <ActionSwapIcon v-if=\"theme.mounted.value\" :value=\"theme.isDark.value ? 'dark' : 'light'\" animation=\"blur\" :class=\"iconClassName\">\n      <Sun v-if=\"theme.isDark.value\" :class=\"iconClassName\" /><Moon v-else :class=\"iconClassName\" />\n    </ActionSwapIcon>\n    <span v-else :class=\"iconClassName\" aria-hidden=\"true\" />\n  </button>\n</template>\n"],"mappings":"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"}

package/dist/tilt-card-nKtgNoGB.js

@@ -0,0 +1,50 @@
+import { a as e, s as t } from "./composables-BJ1sih_H.js";
+import { s as n } from "./ease-rIvCM4O3.js";
+import { computed as r, createBlock as i, createCommentVNode as a, defineComponent as o, normalizeStyle as s, openBlock as c, renderSlot as l, unref as u, watch as d, withCtx as f } from "vue";
+import { motion as p, useMotionTemplate as m, useMotionValue as h, useSpring as g } from "motion-v";
+// src/motion/tilt-card/src/TiltCard.vue
+var _ = /* @__PURE__ */ o({
+	__name: "TiltCard",
+	props: {
+		max: { default: 12 },
+		glare: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(o) {
+		let _ = o, v = t(), y = e("(hover: hover) and (pointer: fine)"), b = r(() => y.value && !v.value), x = h(0), S = h(0), C = h(50), w = h(50), T = g(x, n), E = g(S, n), D = m`perspective(1000px) rotateX(${T}deg) rotateY(${E}deg)`, O = m`radial-gradient(circle at ${C}% ${w}%, var(--foreground), transparent 50%)`;
+		function k() {
+			x.set(0), S.set(0);
+		}
+		function A(e) {
+			if (!b.value) return;
+			let t = e.currentTarget.getBoundingClientRect();
+			if (t.width <= 0 || t.height <= 0) return;
+			let n = (e.clientX - t.left) / t.width, r = (e.clientY - t.top) / t.height;
+			S.set((n - .5) * _.max), x.set((.5 - r) * _.max), C.set(100 * n), w.set(100 * r);
+		}
+		return d(b, (e) => {
+			e || (k(), T.jump(0), E.jump(0));
+		}), (e, t) => (c(), i(u(p).div, {
+			class: "relative overflow-hidden rounded-2xl will-change-transform",
+			style: s({
+				transform: D,
+				transformStyle: "preserve-3d"
+			}),
+			onMousemove: A,
+			onMouseleave: k
+		}, {
+			default: f(() => [l(e.$slots, "default"), o.glare && b.value ? (c(), i(u(p).div, {
+				key: 0,
+				"aria-hidden": "true",
+				style: s({ background: O }),
+				class: "pointer-events-none absolute inset-0 opacity-10"
+			}, null, 8, ["style"])) : a("", !0)]),
+			_: 3
+		}, 8, ["style"]));
+	}
+});
+export { _ as t };
+
+//# sourceMappingURL=tilt-card-nKtgNoGB.js.map

package/dist/tilt-card-nKtgNoGB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tilt-card-nKtgNoGB.js","names":["_openBlock","_createBlock","_unref","_normalizeStyle","_withCtx","_renderSlot","_createCommentVNode","_sfc_main","useMediaQuery","useReducedMotion","SPRING_MOUSE","TiltCard_default","defineComponent","props","__props","reduced","finePointer","enabled","computed","pitch","useMotionValue","yaw","lightX","lightY","rotationX","useSpring","rotationY","transform","lighting","reset","track","bounds","event","horizontal","vertical","watch","active","openBlock","createBlock","unref","motion","normalizeStyle","withCtx","renderSlot","_ctx","createCommentVNode"],"sources":["../src/motion/tilt-card/src/TiltCard.vue","../src/motion/tilt-card/src/TiltCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport { motion, useMotionTemplate, useMotionValue, useSpring } from \"motion-v\";\nimport { SPRING_MOUSE } from \"../../../lib/ease\";\nimport { useMediaQuery, useReducedMotion } from \"../../../lib/composables\";\n\nconst props = withDefaults(defineProps<{ max?: number; glare?: boolean }>(), { max: 12, glare: true });\nconst reduced = useReducedMotion();\nconst finePointer = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\nconst enabled = computed(() => finePointer.value && !reduced.value);\nconst pitch = useMotionValue(0), yaw = useMotionValue(0);\nconst lightX = useMotionValue(50), lightY = useMotionValue(50);\nconst rotationX = useSpring(pitch, SPRING_MOUSE), rotationY = useSpring(yaw, SPRING_MOUSE);\nconst transform = useMotionTemplate`perspective(1000px) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;\nconst lighting = useMotionTemplate`radial-gradient(circle at ${lightX}% ${lightY}%, var(--foreground), transparent 50%)`;\nfunction reset() { pitch.set(0); yaw.set(0); }\nfunction track(event: MouseEvent) {\n  if (!enabled.value) return;\n  const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect();\n  if (bounds.width <= 0 || bounds.height <= 0) return;\n  const horizontal = (event.clientX - bounds.left) / bounds.width;\n  const vertical = (event.clientY - bounds.top) / bounds.height;\n  yaw.set((horizontal - 0.5) * props.max);\n  pitch.set((0.5 - vertical) * props.max);\n  lightX.set(100 * horizontal);\n  lightY.set(100 * vertical);\n}\nwatch(enabled, active => { if (!active) { reset(); rotationX.jump(0); rotationY.jump(0); } });\n</script>\n\n<template>\n  <motion.div class=\"relative overflow-hidden rounded-2xl will-change-transform\"\n    :style=\"{ transform, transformStyle: 'preserve-3d' }\" @mousemove=\"track\" @mouseleave=\"reset\">\n    <slot />\n    <motion.div v-if=\"glare && enabled\" aria-hidden=\"true\" :style=\"{ background: lighting }\"\n      class=\"pointer-events-none absolute inset-0 opacity-10\" />\n  </motion.div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport { motion, useMotionTemplate, useMotionValue, useSpring } from \"motion-v\";\nimport { SPRING_MOUSE } from \"../../../lib/ease\";\nimport { useMediaQuery, useReducedMotion } from \"../../../lib/composables\";\n\nconst props = withDefaults(defineProps<{ max?: number; glare?: boolean }>(), { max: 12, glare: true });\nconst reduced = useReducedMotion();\nconst finePointer = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\nconst enabled = computed(() => finePointer.value && !reduced.value);\nconst pitch = useMotionValue(0), yaw = useMotionValue(0);\nconst lightX = useMotionValue(50), lightY = useMotionValue(50);\nconst rotationX = useSpring(pitch, SPRING_MOUSE), rotationY = useSpring(yaw, SPRING_MOUSE);\nconst transform = useMotionTemplate`perspective(1000px) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;\nconst lighting = useMotionTemplate`radial-gradient(circle at ${lightX}% ${lightY}%, var(--foreground), transparent 50%)`;\nfunction reset() { pitch.set(0); yaw.set(0); }\nfunction track(event: MouseEvent) {\n  if (!enabled.value) return;\n  const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect();\n  if (bounds.width <= 0 || bounds.height <= 0) return;\n  const horizontal = (event.clientX - bounds.left) / bounds.width;\n  const vertical = (event.clientY - bounds.top) / bounds.height;\n  yaw.set((horizontal - 0.5) * props.max);\n  pitch.set((0.5 - vertical) * props.max);\n  lightX.set(100 * horizontal);\n  lightY.set(100 * vertical);\n}\nwatch(enabled, active => { if (!active) { reset(); rotationX.jump(0); rotationY.jump(0); } });\n</script>\n\n<template>\n  <motion.div class=\"relative overflow-hidden rounded-2xl will-change-transform\"\n    :style=\"{ transform, transformStyle: 'preserve-3d' }\" @mousemove=\"track\" @mouseleave=\"reset\">\n    <slot />\n    <motion.div v-if=\"glare && enabled\" aria-hidden=\"true\" :style=\"{ background: lighting }\"\n      class=\"pointer-events-none absolute inset-0 opacity-10\" />\n  </motion.div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAMA,IAAMa,IAAQC,GACRC,IAAUN,EAAiB,GAC3BO,IAAcR,EAAc,oCAAoC,GAChES,IAAUC,QAAeF,EAAY,SAAS,CAACD,EAAQ,KAAK,GAC5DI,IAAQC,EAAe,CAAC,GAAGC,IAAMD,EAAe,CAAC,GACjDE,IAASF,EAAe,EAAE,GAAGG,IAASH,EAAe,EAAE,GACvDI,IAAYC,EAAUN,GAAOT,CAAY,GAAGgB,IAAYD,EAAUJ,GAAKX,CAAY,GACnFiB,IAAY,CAAiB,+BAA+BH,EAAU,eAAeE,EAAU,OAC/FE,IAAW,CAAiB,6BAA6BN,EAAO,IAAIC,EAAO;EACjF,SAASM,IAAQ;GAAgB,AAAdV,EAAM,IAAI,CAAC,GAAGE,EAAI,IAAI,CAAC;EAAG;EAC7C,SAASS,EAAM,GAAmB;GAChC,IAAI,CAACb,EAAQ,OAAO;GACpB,IAAMc,IAAUC,EAAM,cAA8B,sBAAsB;GAC1E,IAAID,EAAO,SAAS,KAAKA,EAAO,UAAU,GAAG;GAC7C,IAAME,KAAcD,EAAM,UAAUD,EAAO,QAAQA,EAAO,OACpDG,KAAYF,EAAM,UAAUD,EAAO,OAAOA,EAAO;GAIvD,AAHAV,EAAI,KAAKY,IAAa,MAAOpB,EAAM,GAAG,GACtCM,EAAM,KAAK,KAAMe,KAAYrB,EAAM,GAAG,GACtCS,EAAO,IAAI,MAAMW,CAAU,GAC3BV,EAAO,IAAI,MAAMW,CAAQ;EAC3B;E,OACAC,EAAMlB,IAAS,MAAU;GAAE,AAAKmB,MAAUP,EAAM,GAAGL,EAAU,KAAK,CAAC,GAAGE,EAAU,KAAK,CAAC;EAAK,CAAC,I,UAI1F1B,EAAA,GAAAC,EAKaC,EAAAsC,CAAA,CAAA,CAAA,KAAA;GALD,OAAM;GACf,OAAKrC,EAAA;IAAI;IAAS,gBAAA;GAAA,CAAA;GAAoC,aAAW2B;GAAQ,cAAYD;;GACtF,SAAAzB,QAAQ,CAARC,EAAQuC,EAAA,QAAA,SAAA,GACU9B,EAAA,SAASG,EAAA,SAA3BjB,EAAA,GAAAC,EAC4DC,EAAAsC,CAAA,CAAA,CAAA,KAAA;;IADxB,eAAY;IAAQ,OAAKrC,EAAA,EAAA,YAAgByB,EAAQ,CAAA;IACnF,OAAM"}