@orvui/vue 0.0.0-stage → 0.1.0

package/dist/color-picker-oBOAYuFD.js

@@ -0,0 +1,1120 @@
+import { i as e, s as t, t as n } from "./composables-BJ1sih_H.js";
+import { a as r, l as i, o as a, r as o } from "./ease-rIvCM4O3.js";
+import { t as s } from "./utils-DIrLOK2M.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, h as _, inject as v, mergeProps as y, nextTick as b, normalizeClass as x, normalizeStyle as S, onBeforeUnmount as C, onMounted as w, openBlock as T, provide as E, ref as D, renderList as O, renderSlot as k, toDisplayString as A, unref as j, useId as ee, watch as M, withCtx as N, withKeys as P, withModifiers as te } from "vue";
+import { AnimatePresence as F, animate as I, motion as L, motionValue as R, useSpring as ne, useTransform as z, useVelocity as re } from "motion-v";
+import { Pipette as ie } from "lucide-vue-next";
+// src/motion/color-picker/src/color.ts
+function B(e) {
+	let t = e.v / 100, n = t * e.s / 100, r = (e.h % 360 + 360) % 360 / 60, i = n * (1 - Math.abs(r % 2 - 1)), a = r < 1 ? [
+		n,
+		i,
+		0
+	] : r < 2 ? [
+		i,
+		n,
+		0
+	] : r < 3 ? [
+		0,
+		n,
+		i
+	] : r < 4 ? [
+		0,
+		i,
+		n
+	] : r < 5 ? [
+		i,
+		0,
+		n
+	] : [
+		n,
+		0,
+		i
+	], o = t - n, [s, c, l] = a.map((e) => Math.round((e + o) * 255));
+	return {
+		r: s,
+		g: c,
+		b: l,
+		a: e.a
+	};
+}
+function V(e, t) {
+	let n = [
+		e.r,
+		e.g,
+		e.b
+	], r = Math.max(...n), i = r - Math.min(...n), a = t?.h ?? 0;
+	if (i > 0) {
+		let t = n.indexOf(r);
+		a = ([
+			(e.g - e.b) / i,
+			(e.b - e.r) / i + 2,
+			(e.r - e.g) / i + 4
+		][t] * 60 + 360) % 360;
+	}
+	return {
+		h: a,
+		s: r === 0 ? t?.s ?? 0 : 100 * i / r,
+		v: 100 * r / 255,
+		a: e.a
+	};
+}
+function H(e) {
+	let t = e.trim().replace(/^#/, "");
+	if (![
+		3,
+		4,
+		6,
+		8
+	].includes(t.length) || /[^0-9a-f]/i.test(t)) return null;
+	let n = (t.length < 5 ? Array.from(t, (e) => e.repeat(2)).join("") : t).match(/../g).map((e) => Number.parseInt(e, 16));
+	return {
+		r: n[0],
+		g: n[1],
+		b: n[2],
+		a: n.length === 4 ? Math.round(n[3] / 255 * 100) / 100 : 1
+	};
+}
+function U(e) {
+	let t = [
+		e.r,
+		e.g,
+		e.b
+	];
+	return e.a < 1 && t.push(e.a * 255), "#" + t.map((e) => Math.round(e).toString(16).padStart(2, "0")).join("");
+}
+function W(e) {
+	let t = e.v / 100, n = (t + t * (1 - e.s / 100)) / 2, r = Math.min(n, 1 - n);
+	return {
+		h: e.h,
+		s: r === 0 ? 0 : 100 * (t - n) / r,
+		l: 100 * n
+	};
+}
+function G(e, t, n, r, i) {
+	let a = n / 100, o = (1 - Math.abs(2 * a - 1)) * t / 100, s = a + o / 2;
+	return {
+		h: e,
+		s: s === 0 ? r.s : o / s * 100,
+		v: s * 100,
+		a: i
+	};
+}
+// src/motion/color-picker/src/context.ts
+var K = "repeating-conic-gradient(#d4d4d8 0% 25%, #fafafa 0% 50%) 0 0 / 8px 8px", q = {
+	type: "spring",
+	duration: .5,
+	bounce: .2
+};
+function J() {
+	let e = v("orvui-color-picker");
+	if (!e) throw Error("Color picker parts must be inside ColorPicker");
+	return e;
+}
+function Y(e) {
+	let n = t(), i = R(e.value), a = ne(i, r), o = z(a, (e) => `${e}%`);
+	return M([e, n], ([e, t]) => {
+		t ? (i.jump(e), a.jump(e)) : i.set(e);
+	}, { immediate: !0 }), C(() => {
+		o.destroy(), a.destroy(), i.destroy();
+	}), {
+		spring: a,
+		offset: o
+	};
+}
+function X(e, t, r) {
+	let i = D(null), a = D(null), o = D(!1), s, c = (e) => Math.min(1, Math.max(0, e));
+	function l(t) {
+		let r = n(i.value)?.getBoundingClientRect();
+		r?.width && r.height && e(c((t.clientX - r.left) / r.width), c((t.clientY - r.top) / r.height));
+	}
+	function u() {
+		let e = s;
+		if (s = void 0, o.value = !1, e) try {
+			e.element.releasePointerCapture(e.id);
+		} catch {}
+	}
+	function d(e) {
+		if (r.value || e.button !== 0 || s) return;
+		let t = e.currentTarget;
+		s = {
+			id: e.pointerId,
+			element: t
+		}, o.value = !0;
+		try {
+			t.setPointerCapture(e.pointerId);
+		} catch {}
+		a.value?.focus({ preventScroll: !0 }), l(e);
+	}
+	function f(e) {
+		!r.value && s?.id === e.pointerId && l(e);
+	}
+	function p(e) {
+		s?.id === e.pointerId && (u(), r.value || t());
+	}
+	return M(r, (e) => {
+		e && u();
+	}), C(u), {
+		rail: i,
+		thumb: a,
+		dragging: o,
+		down: d,
+		move: f,
+		end: p
+	};
+}
+function Z(e, t = 10) {
+	if (e.key === "Home") return "min";
+	if (e.key === "End") return "max";
+	let n = {
+		ArrowRight: ["x", 1],
+		ArrowLeft: ["x", -1],
+		ArrowUp: ["y", 1],
+		ArrowDown: ["y", -1],
+		PageUp: ["y", 1],
+		PageDown: ["y", -1]
+	}[e.key];
+	return n ? {
+		axis: n[0],
+		delta: n[1] * (e.shiftKey || e.key.startsWith("Page") ? t : 1)
+	} : null;
+}
+// src/motion/color-picker/src/ColorThumb.vue
+var ae = /* @__PURE__ */ g({
+	inheritAttrs: !1,
+	__name: "ColorThumb",
+	props: {
+		dragging: { type: Boolean },
+		color: {},
+		glide: {},
+		x: {},
+		y: {},
+		setThumb: { type: Function }
+	},
+	setup(e) {
+		let n = e, r = t(), a = re(n.glide), s = z(a, (e) => Math.max(-16, Math.min(16, -e * .04))), c = ne(s, i), f = l(() => n.dragging && !r.value);
+		return C(() => {
+			c.destroy(), s.destroy(), a.destroy();
+		}), (t, n) => (T(), u(j(L).div, {
+			class: "pointer-events-none absolute inset-0",
+			style: S(e.y ? {
+				x: e.x,
+				y: e.y
+			} : { x: e.x })
+		}, {
+			default: N(() => [p("div", y(t.$attrs, {
+				ref: (t) => e.setThumb?.(t),
+				class: ["absolute left-0 size-[18px] -translate-x-1/2 -translate-y-1/2 rounded-full outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground", e.y ? "top-0" : "top-1/2"]
+			}), [h(j(L).span, {
+				"aria-hidden": "true",
+				animate: { scale: f.value ? .78 : 1 },
+				transition: j(i),
+				class: "block size-full rounded-full border-[2px] border-white shadow-[0_0_0_1px_rgb(0_0_0/0.12),0_2px_6px_rgb(0_0_0/0.25)]",
+				style: S({ backgroundColor: e.color })
+			}, null, 8, [
+				"animate",
+				"transition",
+				"style"
+			]), h(j(F), null, {
+				default: N(() => [f.value ? (T(), u(j(L).span, {
+					key: 0,
+					"aria-hidden": "true",
+					"data-color-picker-loupe": "",
+					class: "pointer-events-none absolute bottom-[calc(100%+12px)] left-1/2 z-10 -ml-5 block size-10",
+					style: S({
+						rotate: j(c),
+						originX: .5,
+						originY: 1.3
+					}),
+					initial: {
+						opacity: 0,
+						scale: .3,
+						y: 16
+					},
+					animate: {
+						opacity: 1,
+						scale: 1,
+						y: 0,
+						transition: {
+							type: "spring",
+							stiffness: 520,
+							damping: 24,
+							mass: .6
+						}
+					},
+					exit: {
+						opacity: 0,
+						scale: .3,
+						y: 16,
+						transition: {
+							duration: .12,
+							ease: j(o)
+						}
+					}
+				}, {
+					default: N(() => [p("span", {
+						class: "absolute inset-0 -rotate-45 overflow-hidden rounded-[50%_50%_50%_0] border-[3px] border-white shadow-[0_0_0_1px_rgb(0_0_0/0.1),0_6px_16px_rgb(0_0_0/0.28)]",
+						style: S({ background: j(K) })
+					}, [p("span", {
+						class: "absolute inset-0",
+						style: S({ background: e.color })
+					}, null, 4)], 4)]),
+					_: 1
+				}, 8, ["style", "exit"])) : d("", !0)]),
+				_: 1
+			})], 16)]),
+			_: 1
+		}, 8, ["style"]));
+	}
+}), Q = /* @__PURE__ */ g({
+	__name: "ColorPickerArea",
+	props: { label: { default: "Saturation and brightness" } },
+	setup(e) {
+		let n = J(), r = v("orvui-color-morph", !1), i = t(), a = l(() => r && !i.value), s = X((e, t) => n.update({
+			s: e * 100,
+			v: 100 - t * 100
+		}), n.commit, n.disabled), c = s.rail, f = Y(l(() => n.hsva.value.s)), m = Y(l(() => 100 - n.hsva.value.v)), g = l(() => `rgb(${n.rgba.value.r} ${n.rgba.value.g} ${n.rgba.value.b})`);
+		function _(e) {
+			let t = Z(e);
+			t && !n.disabled.value && (e.preventDefault(), n.update(t === "min" ? { s: 0 } : t === "max" ? { s: 100 } : t.axis === "x" ? { s: n.hsva.value.s + t.delta } : { v: n.hsva.value.v + t.delta }), n.commit());
+		}
+		return (t, r) => (T(), u(j(L).div, {
+			ref_key: "rail",
+			ref: c,
+			"layout-id": a.value ? `${j(n).id}-chip` : void 0,
+			"layout-dependency": j(n).open.value,
+			transition: j(q),
+			class: x(["relative h-40 w-full touch-none select-none", j(n).disabled.value ? "cursor-not-allowed" : "cursor-crosshair"]),
+			style: S({
+				borderRadius: "12px",
+				background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${j(n).hsva.value.h} 100% 50%))`
+			}),
+			onPointerdown: j(s).down,
+			onPointermove: j(s).move,
+			onPointerup: j(s).end,
+			onPointercancel: j(s).end
+		}, {
+			default: N(() => [
+				a.value ? (T(), u(j(L).div, {
+					key: 0,
+					"aria-hidden": "true",
+					class: "pointer-events-none absolute inset-0 rounded-[inherit]",
+					style: S({ backgroundColor: j(n).hex.value }),
+					initial: { opacity: 1 },
+					animate: { opacity: 0 },
+					transition: {
+						duration: .4,
+						ease: j(o),
+						delay: .06
+					}
+				}, null, 8, ["style", "transition"])) : d("", !0),
+				r[0] ||= p("div", {
+					"aria-hidden": "true",
+					class: "pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-black/10 ring-inset"
+				}, null, -1),
+				h(j(L).div, {
+					class: "absolute inset-0",
+					initial: a.value ? { opacity: 0 } : !1,
+					animate: { opacity: 1 },
+					transition: {
+						duration: .2,
+						delay: .22
+					}
+				}, {
+					default: N(() => [h(ae, {
+						dragging: j(s).dragging.value,
+						color: g.value,
+						glide: j(f).spring,
+						x: j(f).offset,
+						y: j(m).offset,
+						"set-thumb": (e) => j(s).thumb.value = e,
+						role: "slider",
+						tabindex: j(n).disabled.value ? -1 : 0,
+						"aria-label": e.label,
+						"aria-roledescription": "2D slider",
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": Math.round(j(n).hsva.value.s),
+						"aria-valuetext": `Saturation ${Math.round(j(n).hsva.value.s)}%, brightness ${Math.round(j(n).hsva.value.v)}%`,
+						"aria-disabled": j(n).disabled.value || void 0,
+						onKeydown: _
+					}, null, 8, [
+						"dragging",
+						"color",
+						"glide",
+						"x",
+						"y",
+						"set-thumb",
+						"tabindex",
+						"aria-label",
+						"aria-valuenow",
+						"aria-valuetext",
+						"aria-disabled"
+					])]),
+					_: 1
+				}, 8, ["initial"])
+			]),
+			_: 1
+		}, 8, [
+			"layout-id",
+			"layout-dependency",
+			"transition",
+			"class",
+			"style",
+			"onPointerdown",
+			"onPointermove",
+			"onPointerup",
+			"onPointercancel"
+		]));
+	}
+}), oe = /* @__PURE__ */ g({
+	__name: "ChannelSlider",
+	props: {
+		value: {},
+		max: {},
+		label: {},
+		valueText: {},
+		background: {},
+		thumbColor: {}
+	},
+	emits: ["value"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = J(), a = X((e) => r("value", e * n.max), i.commit, i.disabled), o = a.rail, s = Y(l(() => n.value / n.max * 100));
+		function c(e) {
+			let t = Z(e);
+			!i.disabled.value && t && (e.preventDefault(), r("value", t === "min" ? 0 : t === "max" ? n.max : Math.round(n.value) + t.delta), i.commit());
+		}
+		return (t, n) => (T(), f("div", {
+			class: x(["relative h-3.5 w-full touch-none select-none rounded-full", j(i).disabled.value ? "cursor-not-allowed" : "cursor-pointer"]),
+			style: S({ background: e.background }),
+			onPointerdown: n[0] ||= (...e) => j(a).down && j(a).down(...e),
+			onPointermove: n[1] ||= (...e) => j(a).move && j(a).move(...e),
+			onPointerup: n[2] ||= (...e) => j(a).end && j(a).end(...e),
+			onPointercancel: n[3] ||= (...e) => j(a).end && j(a).end(...e)
+		}, [n[4] ||= p("div", {
+			"aria-hidden": "true",
+			class: "pointer-events-none absolute inset-0 rounded-full ring-1 ring-black/10 ring-inset"
+		}, null, -1), p("div", {
+			ref_key: "rail",
+			ref: o,
+			class: "absolute inset-y-0 right-[9px] left-[9px]"
+		}, [h(ae, {
+			dragging: j(a).dragging.value,
+			color: e.thumbColor,
+			glide: j(s).spring,
+			x: j(s).offset,
+			"set-thumb": (e) => j(a).thumb.value = e,
+			role: "slider",
+			tabindex: j(i).disabled.value ? -1 : 0,
+			"aria-label": e.label,
+			"aria-orientation": "horizontal",
+			"aria-valuemin": 0,
+			"aria-valuemax": e.max,
+			"aria-valuenow": Math.round(e.value),
+			"aria-valuetext": e.valueText,
+			"aria-disabled": j(i).disabled.value || void 0,
+			onKeydown: c
+		}, null, 8, [
+			"dragging",
+			"color",
+			"glide",
+			"x",
+			"set-thumb",
+			"tabindex",
+			"aria-label",
+			"aria-valuemax",
+			"aria-valuenow",
+			"aria-valuetext",
+			"aria-disabled"
+		])], 512)], 38));
+	}
+}), se = /* @__PURE__ */ g({
+	__name: "ColorPickerHue",
+	props: { label: { default: "Hue" } },
+	setup(e) {
+		let t = J();
+		function n(e) {
+			t.update({ h: e });
+		}
+		return (r, i) => (T(), u(oe, {
+			value: j(t).hsva.value.h,
+			max: 360,
+			label: e.label,
+			"value-text": `${Math.round(j(t).hsva.value.h)} degrees`,
+			background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+			"thumb-color": `hsl(${j(t).hsva.value.h} 100% 50%)`,
+			onValue: n
+		}, null, 8, [
+			"value",
+			"label",
+			"value-text",
+			"thumb-color"
+		]));
+	}
+}), ce = /* @__PURE__ */ g({
+	__name: "ColorPickerAlpha",
+	props: { label: { default: "Opacity" } },
+	setup(e) {
+		let t = J(), n = l(() => `${t.rgba.value.r} ${t.rgba.value.g} ${t.rgba.value.b}`);
+		function r(e) {
+			t.update({ a: Math.round(e) / 100 });
+		}
+		return (i, a) => j(t).alpha.value ? (T(), u(oe, {
+			key: 0,
+			value: j(t).hsva.value.a * 100,
+			max: 100,
+			label: e.label,
+			"value-text": `${Math.round(j(t).hsva.value.a * 100)}%`,
+			background: `linear-gradient(to right, rgb(${n.value} / 0), rgb(${n.value})), ${j(K)}`,
+			"thumb-color": `rgb(${n.value} / ${j(t).hsva.value.a})`,
+			onValue: r
+		}, null, 8, [
+			"value",
+			"label",
+			"value-text",
+			"background",
+			"thumb-color"
+		])) : d("", !0);
+	}
+}), le = [
+	"disabled",
+	"aria-label",
+	"value"
+], ue = /* @__PURE__ */ g({
+	inheritAttrs: !1,
+	__name: "ColorPickerHexInput",
+	setup(e) {
+		let n = J(), r = D(null), i = D(null), a = t(), o;
+		function s() {
+			if (r.value === null) return;
+			let e = H(r.value);
+			e ? (n.update(V(e, n.hsva.value)), n.commit()) : !a.value && i.value && (o?.stop(), o = I(i.value, { x: [
+				0,
+				-5,
+				5,
+				-3,
+				3,
+				0
+			] }, { duration: .3 })), r.value = null;
+		}
+		function c(e) {
+			let t = e.target.value.replace(/^#/, "");
+			if (r.value = t, t.length !== 6 && t.length !== 8) return;
+			let i = H(t);
+			i && n.update(V(i, n.hsva.value));
+		}
+		return C(() => o?.stop()), (e, t) => (T(), f("div", {
+			ref_key: "root",
+			ref: i,
+			class: x(["relative min-w-0 flex-1", e.$attrs.class])
+		}, [t[1] ||= p("span", {
+			"aria-hidden": "true",
+			class: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-sm text-muted-foreground"
+		}, "#", -1), p("input", y(e.$attrs, {
+			type: "text",
+			inputmode: "text",
+			autocomplete: "off",
+			spellcheck: !1,
+			maxlength: 9,
+			disabled: j(n).disabled.value,
+			"aria-label": String(e.$attrs["aria-label"] ?? "Hex color"),
+			value: r.value ?? j(n).hex.value.slice(1).toUpperCase(),
+			onInput: c,
+			onBlur: s,
+			onKeydown: [P(s, ["enter"]), t[0] ||= P(te((e) => r.value = null, ["prevent"]), ["esc"])],
+			class: "h-9 w-full min-w-0 rounded-lg border border-border bg-background pr-3 pl-6 font-mono text-sm uppercase tabular-nums text-foreground outline-none transition-colors focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed"
+		}), null, 16, le)], 2));
+	}
+}), de = /* @__PURE__ */ g({
+	__name: "ColorPickerSwatch",
+	setup(e) {
+		let t = J();
+		return (e, n) => (T(), f("span", {
+			"aria-hidden": "true",
+			class: "relative block size-9 shrink-0 overflow-hidden rounded-lg",
+			style: S({ background: j(K) })
+		}, [p("span", {
+			class: "absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] transition-colors duration-150",
+			style: S({ backgroundColor: j(t).hex.value })
+		}, null, 4)], 4));
+	}
+}), fe = ["disabled", "form"], pe = { class: "flex gap-2" }, me = [
+	"name",
+	"value",
+	"form"
+], he = /* @__PURE__ */ g({
+	__name: "ColorPicker",
+	props: {
+		modelValue: {},
+		value: {},
+		defaultValue: { default: "#3478f6" },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		alpha: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: { type: Boolean },
+		name: {},
+		form: {}
+	},
+	emits: [
+		"update:modelValue",
+		"valueChange",
+		"change",
+		"valueCommit",
+		"update:open",
+		"openChange"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = ee(), a = l(() => n.modelValue ?? n.value), o = D(a.value ?? n.defaultValue), s = D(V(H(o.value) ?? {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 1
+		})), c = D(n.defaultOpen), u = D(null), m = l({
+			get: () => n.open ?? c.value,
+			set: (e) => {
+				e !== m.value && (n.open === void 0 && (c.value = e), r("update:open", e), r("openChange", e));
+			}
+		});
+		function g() {
+			let e = a.value;
+			if (e === void 0 || e === o.value) return;
+			let t = H(e);
+			t && (s.value = V(t, s.value)), o.value = e;
+		}
+		M(a, g, { flush: "sync" }), M(o, g, { flush: "post" });
+		let _ = l(() => !n.alpha && s.value.a !== 1 ? {
+			...s.value,
+			a: 1
+		} : s.value), v = l(() => B(_.value)), y = l(() => U(v.value));
+		function b(e) {
+			if (n.disabled) return;
+			let t = {
+				h: 360,
+				s: 100,
+				v: 100,
+				a: 1
+			}, i = Object.fromEntries(Object.keys(t).map((n) => [n, Math.min(t[n], Math.max(0, Number.isFinite(e[n]) ? e[n] : s.value[n]))]));
+			n.alpha || (i.a = 1);
+			let a = U(B(i)), c = a !== y.value;
+			s.value = i, o.value = a, c && (r("update:modelValue", a), r("valueChange", a), r("change", a));
+		}
+		function S() {
+			n.disabled || r("valueCommit", y.value);
+		}
+		function C(e) {
+			let t = H(e);
+			t && (b(V(t, s.value)), S());
+		}
+		return E("orvui-color-picker", {
+			id: i,
+			hsva: _,
+			rgba: v,
+			hex: y,
+			open: m,
+			anchor: u,
+			alpha: l(() => n.alpha),
+			disabled: l(() => n.disabled),
+			update: b,
+			setColor: C,
+			commit: S
+		}), (t, n) => (T(), f("fieldset", {
+			disabled: e.disabled,
+			form: e.form,
+			class: x(["relative flex w-full min-w-0 max-w-72 flex-col gap-3 border-0 p-0 has-[>[data-color-picker-trigger]]:w-fit has-[>[data-color-picker-trigger]]:self-start", e.disabled && "opacity-50"])
+		}, [k(t.$slots, "default", {
+			hex: y.value,
+			hsva: _.value,
+			setColor: C
+		}, () => [
+			h(Q),
+			h(se),
+			h(ce),
+			p("div", pe, [h(de), h(ue)])
+		]), e.name ? (T(), f("input", {
+			key: 0,
+			type: "hidden",
+			name: e.name,
+			value: y.value,
+			form: e.form
+		}, null, 8, me)) : d("", !0)], 10, fe));
+	}
+}), ge = { class: "flex min-w-0 flex-1 gap-1.5" }, _e = [
+	"disabled",
+	"aria-label",
+	"value",
+	"onInput",
+	"onBlur",
+	"onKeydown"
+], ve = {
+	"aria-hidden": "true",
+	class: "text-[11px] font-medium text-muted-foreground"
+}, ye = /* @__PURE__ */ g({
+	__name: "ColorPickerChannels",
+	props: { format: { default: "rgb" } },
+	setup(e) {
+		let t = e, n = J(), r = l(() => {
+			let e = n.hsva.value, r = n.rgba.value, i = W(e), a = (t.format === "hsl" ? [
+				[
+					"h",
+					"Hue",
+					360
+				],
+				[
+					"s",
+					"Saturation",
+					100
+				],
+				[
+					"l",
+					"Lightness",
+					100
+				]
+			] : [
+				[
+					"r",
+					"Red",
+					255
+				],
+				[
+					"g",
+					"Green",
+					255
+				],
+				[
+					"b",
+					"Blue",
+					255
+				]
+			]).map(([n, a, o]) => ({
+				key: n,
+				short: n.toUpperCase(),
+				name: a,
+				max: o,
+				value: t.format === "hsl" ? i[n] : r[n],
+				set: (a) => t.format === "hsl" ? G(n === "h" ? a : i.h, n === "s" ? a : i.s, n === "l" ? a : i.l, e, e.a) : V({
+					...r,
+					[n]: a
+				}, e)
+			}));
+			return n.alpha.value && a.push({
+				key: "a",
+				short: "A",
+				name: "Opacity percent",
+				max: 100,
+				value: e.a * 100,
+				set: (t) => ({
+					...e,
+					a: t / 100
+				})
+			}), a;
+		}), i = D({});
+		M(() => t.format, () => {
+			i.value = {};
+		});
+		let a = (e, t) => Math.min(e.max, Math.max(0, t));
+		function o(e, t) {
+			let r = t.target.value.replace(/\D/g, "").slice(0, 3);
+			i.value[e.key] = r, r && n.update(e.set(a(e, Number(r))));
+		}
+		function s(e) {
+			i.value[e.key] !== void 0 && n.commit(), delete i.value[e.key];
+		}
+		function u(e, t) {
+			let r = t.key === "ArrowUp" ? 1 : t.key === "ArrowDown" ? -1 : 0;
+			r && !n.disabled.value ? (t.preventDefault(), delete i.value[e.key], n.update(e.set(a(e, Math.round(e.value) + r * (t.shiftKey ? 10 : 1)))), n.commit()) : t.key === "Enter" && s(e);
+		}
+		return (t, a) => (T(), f("div", ge, [(T(!0), f(c, null, O(r.value, (t) => (T(), f("label", {
+			key: e.format + "-" + t.key,
+			class: "flex min-w-0 flex-1 flex-col items-center gap-1"
+		}, [p("input", {
+			type: "text",
+			inputmode: "numeric",
+			autocomplete: "off",
+			disabled: j(n).disabled.value,
+			"aria-label": t.name,
+			value: i.value[t.key] ?? String(Math.round(t.value)),
+			onInput: (e) => o(t, e),
+			onBlur: (e) => s(t),
+			onKeydown: (e) => u(t, e),
+			class: "h-9 w-full min-w-0 rounded-lg border border-border bg-background px-1 text-center text-xs text-foreground outline-none focus:border-foreground/40 focus:ring-2 focus:ring-ring/40 disabled:opacity-50"
+		}, null, 40, _e), p("span", ve, A(t.short), 1)]))), 128))]));
+	}
+}), be = /* @__PURE__ */ g({
+	__name: "ColorPickerEyeDropper",
+	setup(e) {
+		let n = J(), r = t(), a = D(!1), o, s = !1;
+		w(() => {
+			a.value = "EyeDropper" in window;
+		});
+		async function c(e) {
+			if (e.defaultPrevented || n.disabled.value || !a.value) return;
+			o?.abort();
+			let t = new AbortController();
+			o = t;
+			try {
+				let e = await new window.EyeDropper().open({ signal: t.signal });
+				if (s || t.signal.aborted) return;
+				let r = H(e.sRGBHex);
+				r && (n.update(V({
+					...r,
+					a: n.hsva.value.a
+				}, n.hsva.value)), n.commit());
+			} catch {}
+		}
+		return C(() => {
+			s = !0, o?.abort();
+		}), (e, t) => a.value ? (T(), u(j(L).button, {
+			key: 0,
+			type: "button",
+			"aria-label": "Pick a color from your screen",
+			disabled: j(n).disabled.value,
+			"while-press": j(r) || j(n).disabled.value ? void 0 : { scale: .92 },
+			transition: j(i),
+			onClick: c,
+			class: "inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed"
+		}, {
+			default: N(() => [k(e.$slots, "default", {}, () => [h(j(ie), {
+				"aria-hidden": "true",
+				class: "size-4"
+			})])]),
+			_: 3
+		}, 8, [
+			"disabled",
+			"while-press",
+			"transition"
+		])) : d("", !0);
+	}
+});
+// src/motion/color-picker/src/preset-motion.ts
+function xe() {
+	let e;
+	return (t, n) => {
+		let r = n.x - t.x, i = n.y - t.y, a = Math.abs(r) >= Math.abs(i), o = (a ? r : i) < 0 ? .3 : -.3, s = -i * o, c = r * o, l = Math.sign(a ? c : s);
+		return e === void 0 && l !== 0 ? e = l : l !== 0 && e !== l && (s = -s, c = -c), (e) => {
+			let n = 2 * e * (1 - e);
+			return {
+				x: t.x + r * e + s * n,
+				y: t.y + i * e + c * n
+			};
+		};
+	};
+}
+// src/motion/color-picker/src/ColorPickerPresets.vue
+var Se = /* @__PURE__ */ g({
+	__name: "ColorPickerPresets",
+	setup(e) {
+		let n = J(), r = t(), i = D(null), o = D(!1), s = R(0), c = R(0), l = R(30), p = R(30), m = /* @__PURE__ */ new Map(), h = xe(), g, _, v = !1, y = 0;
+		function x() {
+			let e = i.value, t = [...m].find(([, e]) => e === n.hex.value)?.[0];
+			if (!e || !t || v) {
+				o.value = !1;
+				return;
+			}
+			let u = -3, d = -3;
+			for (let n = t; n && n !== e; n = n.offsetParent) u += n.offsetLeft, d += n.offsetTop;
+			if (g?.stop(), l.set(t.offsetWidth + 6), p.set(t.offsetHeight + 6), !o.value || r.value) s.jump(u), c.jump(d);
+			else {
+				let e = h({
+					x: s.get(),
+					y: c.get()
+				}, {
+					x: u,
+					y: d
+				});
+				g = I(0, 1, {
+					...a,
+					onUpdate: (t) => {
+						let n = e(t);
+						s.set(n.x), c.set(n.y);
+					},
+					onComplete: () => {
+						v || (s.set(u), c.set(d));
+					}
+				});
+			}
+			o.value = !0;
+		}
+		async function O() {
+			let e = ++y;
+			await b(), !v && e === y && x();
+		}
+		return E("orvui-color-presets", { register(e, t) {
+			return m.set(e, t), O(), () => {
+				m.delete(e), O();
+			};
+		} }), M([n.hex, r], O), w(() => {
+			i.value && typeof ResizeObserver < "u" && (_ = new ResizeObserver(x), _.observe(i.value)), O();
+		}), C(() => {
+			v = !0, ++y, _?.disconnect(), g?.stop();
+			for (let e of [
+				s,
+				c,
+				l,
+				p
+			]) e.destroy();
+		}), (e, t) => (T(), f("div", {
+			ref_key: "root",
+			ref: i,
+			class: "relative flex flex-wrap gap-2"
+		}, [o.value ? (T(), u(j(L).span, {
+			key: 0,
+			"aria-hidden": "true",
+			"data-color-picker-preset-ring": "",
+			class: "pointer-events-none absolute left-0 top-0 rounded-full border-2 border-foreground/70",
+			style: S({
+				x: j(s),
+				y: j(c),
+				width: j(l),
+				height: j(p)
+			})
+		}, null, 8, ["style"])) : d("", !0), k(e.$slots, "default")], 512));
+	}
+}), Ce = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute -inset-[3px] rounded-full border-2 border-foreground/70"
+}, we = /* @__PURE__ */ g({
+	__name: "ColorPickerPreset",
+	props: {
+		value: {},
+		label: {}
+	},
+	setup(e) {
+		let r = e, a = J(), o = t(), s = D(null), c = l(() => H(r.value)), m = l(() => c.value ? U(c.value) : r.value), h = l(() => a.hex.value === m.value), g = v("orvui-color-presets", null), _;
+		function y() {
+			_?.(), _ = void 0;
+			let e = n(s.value);
+			g && e && (_ = g.register(e, m.value));
+		}
+		w(y), M(m, y), C(() => _?.());
+		function b() {
+			c.value && !a.disabled.value && a.setColor(r.value);
+		}
+		return (t, n) => (T(), u(j(L).button, {
+			ref_key: "root",
+			ref: s,
+			type: "button",
+			disabled: j(a).disabled.value,
+			"aria-label": e.label ?? m.value,
+			"aria-pressed": h.value,
+			"while-press": j(o) || j(a).disabled.value ? void 0 : { scale: .88 },
+			transition: j(i),
+			onClick: b,
+			class: "relative size-6 shrink-0 rounded-full outline-none focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-foreground disabled:cursor-not-allowed"
+		}, {
+			default: N(() => [h.value && !j(g) ? (T(), f("span", Ce)) : d("", !0), p("span", {
+				"aria-hidden": "true",
+				class: "absolute inset-0 overflow-hidden rounded-full",
+				style: S({ background: j(K) })
+			}, [p("span", {
+				class: "absolute inset-0 rounded-full shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)]",
+				style: S({ backgroundColor: m.value })
+			}, null, 4)], 4)]),
+			_: 1
+		}, 8, [
+			"disabled",
+			"aria-label",
+			"aria-pressed",
+			"while-press",
+			"transition"
+		]));
+	}
+}), Te = [
+	"disabled",
+	"aria-expanded",
+	"aria-controls"
+], Ee = {
+	"aria-hidden": "true",
+	class: "relative size-6 shrink-0"
+}, De = /* @__PURE__ */ g({
+	__name: "ColorPickerTrigger",
+	setup(e) {
+		let n = J(), r = n.anchor, i = t(), o = D(null), s = D(null), c = l(() => n.hex.value.slice(7)), g;
+		function _() {
+			o.value && (s.value = o.value.offsetWidth);
+		}
+		w(() => {
+			_(), o.value && typeof ResizeObserver < "u" && (g = new ResizeObserver(_), g.observe(o.value));
+		}), C(() => g?.disconnect());
+		function v() {
+			n.disabled.value || (n.open.value = !n.open.value);
+		}
+		return (e, t) => (T(), f("button", {
+			ref_key: "anchor",
+			ref: r,
+			type: "button",
+			"data-color-picker-trigger": "",
+			disabled: j(n).disabled.value,
+			"aria-haspopup": "dialog",
+			"aria-expanded": j(n).open.value,
+			"aria-controls": j(n).open.value ? `${j(n).id}-content` : void 0,
+			onClick: v,
+			class: "inline-flex h-10 w-fit items-center gap-2.5 rounded-xl border border-border bg-background pr-3.5 pl-2.5 text-sm text-foreground outline-none transition-colors hover:border-foreground/20 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed"
+		}, [p("span", Ee, [t[0] ||= p("span", { class: "absolute inset-0 rounded-md border border-dashed border-foreground/20" }, null, -1), j(n).open.value ? d("", !0) : (T(), u(j(L).span, {
+			key: 0,
+			"layout-id": j(i) ? void 0 : `${j(n).id}-chip`,
+			transition: j(q),
+			class: "absolute inset-0 overflow-hidden",
+			style: S({
+				borderRadius: "6px",
+				background: j(K)
+			})
+		}, {
+			default: N(() => [p("span", {
+				class: "absolute inset-0 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)]",
+				style: S({
+					backgroundColor: j(n).hex.value,
+					borderRadius: "6px"
+				})
+			}, null, 4)]),
+			_: 1
+		}, 8, [
+			"layout-id",
+			"transition",
+			"style"
+		]))]), k(e.$slots, "default", {}, () => [h(j(L).span, {
+			class: "relative inline-flex overflow-hidden",
+			initial: !1,
+			animate: { width: s.value ?? "auto" },
+			transition: j(i) ? { duration: 0 } : j(a)
+		}, {
+			default: N(() => [p("span", {
+				ref_key: "text",
+				ref: o,
+				class: "relative inline-flex shrink-0 whitespace-nowrap font-mono uppercase tabular-nums"
+			}, [m(A(j(n).hex.value.slice(0, 7)), 1), h(j(F), {
+				mode: "popLayout",
+				initial: !1
+			}, {
+				default: N(() => [c.value ? (T(), u(j(L).span, {
+					key: "alpha",
+					class: "text-muted-foreground",
+					initial: {
+						opacity: 0,
+						x: j(i) ? 0 : -4,
+						filter: j(i) ? "blur(0px)" : "blur(3px)"
+					},
+					animate: {
+						opacity: 1,
+						x: 0,
+						filter: "blur(0px)"
+					},
+					exit: {
+						opacity: 0,
+						filter: j(i) ? "blur(0px)" : "blur(3px)",
+						transition: { duration: .12 }
+					},
+					transition: j(a)
+				}, {
+					default: N(() => [m(A(c.value), 1)]),
+					_: 1
+				}, 8, [
+					"initial",
+					"exit",
+					"transition"
+				])) : d("", !0)]),
+				_: 1
+			})], 512)]),
+			_: 1
+		}, 8, ["animate", "transition"])])], 8, Te));
+	}
+}), $ = (e) => e.flatMap((e) => e.type === c ? $(e.children) : [e]), Oe = g({
+	inheritAttrs: !1,
+	props: { align: {
+		type: String,
+		default: "start"
+	} },
+	setup(r, { attrs: i, slots: c }) {
+		let l = J(), u = t(), d = D(null), f = e(l.open, d);
+		E("orvui-color-morph", !0);
+		let p = !1, m = 0, h = () => n(d.value);
+		function g() {
+			let e = h();
+			if (!e || !l.open.value) return;
+			e.style.marginLeft = "0px";
+			let t = e.getBoundingClientRect(), n = e.ownerDocument.documentElement.clientWidth - 8, r = Math.min(0, n - t.right);
+			t.left + r < 8 && (r = 8 - t.left), e.style.marginLeft = `${r}px`;
+		}
+		let v = (e) => {
+			l.open.value && e.target instanceof Node && !f.containsHigher(e.target) && !h()?.contains(e.target) && !l.anchor.value?.contains(e.target) && (l.open.value = !1);
+		}, y = (e) => {
+			f.claimEscape(e) && (l.open.value = !1);
+		};
+		M(l.open, async (e, t) => {
+			let n = ++m, r = h();
+			if (r && (r.inert = !e, r.style.pointerEvents = e ? "auto" : "none"), await b(), !(p || n !== m)) {
+				if (e) g(), t !== void 0 && h()?.querySelector("[role=\"slider\"]:not([aria-disabled]),input:not(:disabled),button:not(:disabled)")?.focus({ preventScroll: !0 });
+				else {
+					let e = document.activeElement;
+					(!e || e === document.body || h()?.contains(e)) && l.anchor.value?.focus({ preventScroll: !0 });
+				}
+			}
+		}, { flush: "post" }), w(() => {
+			document.addEventListener("pointerdown", v), document.addEventListener("keydown", y), window.addEventListener("resize", g), b(() => {
+				p || g();
+			});
+		}), C(() => {
+			p = !0, ++m, document.removeEventListener("pointerdown", v), document.removeEventListener("keydown", y), window.removeEventListener("resize", g);
+		});
+		function x() {
+			let e = 0;
+			return $(c.default?.() ?? []).map((t, n) => {
+				if (t.type === Q) return t;
+				let r = .1 + ++e * .035;
+				return _(L.div, {
+					key: t.key ?? n,
+					initial: u.value ? { opacity: 0 } : {
+						opacity: 0,
+						y: -6,
+						filter: "blur(4px)"
+					},
+					animate: u.value ? { opacity: 1 } : {
+						opacity: 1,
+						y: 0,
+						filter: "blur(0px)"
+					},
+					exit: {
+						opacity: 0,
+						transition: { duration: .1 }
+					},
+					transition: {
+						...a,
+						delay: r
+					}
+				}, () => t);
+			});
+		}
+		return () => _(F, null, { default: () => l.open.value ? [_(L.div, {
+			...i,
+			ref: d,
+			id: `${l.id}-content`,
+			role: "dialog",
+			"aria-label": String(i["aria-label"] ?? "Color picker"),
+			inert: !l.open.value,
+			class: s("absolute top-full z-50 mt-2 flex w-72 flex-col gap-3 p-3", r.align === "end" ? "right-0" : "left-0", i.class)
+		}, () => [_(L.div, {
+			"aria-hidden": !0,
+			class: "absolute inset-0 -z-10 rounded-2xl border border-border bg-background shadow-[0_12px_32px_-8px_rgb(0_0_0/0.25)]",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: {
+				duration: .16,
+				ease: o,
+				delay: .1
+			}
+		}), ...x()])] : [] });
+	}
+}), ke = () => J();
+export { B as _, Se as a, he as c, ce as d, se as f, W as g, G as h, we as i, de as l, U as m, Oe as n, be as o, Q as p, De as r, ye as s, ke as t, ue as u, H as v, V as y };
+
+//# sourceMappingURL=color-picker-oBOAYuFD.js.map