@orvui/vue 0.0.0-stage → 0.1.0

package/dist/donut-chart-D3aserbJ.js

@@ -0,0 +1,323 @@
+import { a as e, s as t } from "./composables-BJ1sih_H.js";
+import { o as n, r } from "./ease-rIvCM4O3.js";
+import { n as i } from "./number-Dz4iLJiS.js";
+import { a, i as o, n as s, t as c } from "./shared-BY_cwEzO.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, normalizeStyle as y, openBlock as b, provide as x, reactive as ee, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, watch as D, withCtx as O } from "vue";
+import { AnimatePresence as k, motion as A } from "motion-v";
+function j(e, t) {
+	let n = t * Math.PI / 180;
+	return [100 + e * Math.sin(n), 100 - e * Math.cos(n)];
+}
+function M(e, t, n) {
+	let r = j(e, t), i = j(e, n);
+	return `M ${r[0]} ${r[1]} A ${e} ${e} 0 ${+(n - t > 180)} 1 ${i[0]} ${i[1]}`;
+}
+function N(e, t) {
+	let n = [], r = 0;
+	for (let t of e) Number.isFinite(t.value) && t.value > 0 && (n.push(t), r += t.value);
+	let { radius: i, thickness: a, gap: o } = t, s = 0, c = o / 2 + a / (2 * i) * 180 / Math.PI, l = [];
+	for (let e of n) {
+		let t = r ? e.value / r : 0, a = s + t * 360, o;
+		if (n.length === 1) {
+			let e = j(i, 0), t = j(i, 180);
+			o = `M ${e[0]} ${e[1]} A ${i} ${i} 0 1 1 ${t[0]} ${t[1]} A ${i} ${i} 0 1 1 ${e[0]} ${e[1]}`;
+		} else {
+			let e = s + c;
+			o = M(i, e, Math.max(e + .01, a - c));
+		}
+		l.push({
+			...e,
+			share: t,
+			path: o
+		}), s = a;
+	}
+	return {
+		placed: l,
+		total: r
+	};
+}
+// src/charts/donut-chart/src/context.ts
+function P(n, r) {
+	let i = u(() => {
+		let e = n.thickness ?? 22;
+		return {
+			thickness: e,
+			radius: 92 - e / 2,
+			gap: n.gap ?? 3
+		};
+	}), a = u(() => N(n.segments, i.value)), s = u(() => a.value.placed.map((e) => e.id)), l = c(() => n.activeId, n.defaultActiveId ?? null, s, (e) => {
+		r("update:activeId", e), r("activeChange", e);
+	});
+	return ee({
+		placed: u(() => a.value.placed),
+		total: u(() => a.value.total),
+		radius: u(() => i.value.radius),
+		thickness: u(() => i.value.thickness),
+		active: l,
+		setActive(e) {
+			l.value = e;
+		},
+		select(e) {
+			r("select", e);
+		},
+		selectedId: u(() => n.selectedId ?? null),
+		formatValue: u(() => n.formatValue ?? o),
+		label: u(() => n.label ?? "Donut chart"),
+		reduce: t(),
+		canHover: e("(hover: hover)")
+	});
+}
+var F = s("DonutChart"), I = F.use, L = { class: "relative mx-auto aspect-square w-full max-w-64" }, R = ["aria-label"], z = ["r", "stroke-width"], B = [
+	"d",
+	"stroke-width",
+	"onPointerenter",
+	"onClick"
+], V = {
+	key: 0,
+	class: "pointer-events-none absolute inset-0 flex items-center justify-center text-center"
+}, H = /* @__PURE__ */ _({
+	__name: "DonutChartPlot",
+	setup(e) {
+		let t = I(), i = {
+			transformBox: "view-box",
+			transformOrigin: "100px 100px"
+		};
+		function a(e) {
+			return t.reduce ? { duration: 0 } : {
+				opacity: {
+					duration: .4,
+					delay: .15 + e * .06,
+					ease: r
+				},
+				scale: n
+			};
+		}
+		function o(e) {
+			t.canHover && t.setActive(e);
+		}
+		return (e, n) => (b(), p("div", L, [(b(), p("svg", {
+			class: "size-full overflow-visible",
+			viewBox: "0 0 200 200",
+			role: "img",
+			"aria-label": E(t).label
+		}, [
+			m("circle", {
+				class: "stroke-muted",
+				cx: "100",
+				cy: "100",
+				r: E(t).radius,
+				fill: "none",
+				"stroke-width": E(t).thickness,
+				opacity: "0.6"
+			}, null, 8, z),
+			g(E(A).g, {
+				style: i,
+				initial: !E(t).reduce && {
+					rotate: -90,
+					scale: .88,
+					opacity: 0
+				},
+				"while-in-view": {
+					rotate: 0,
+					scale: 1,
+					opacity: 1
+				},
+				"in-view-options": {
+					once: !0,
+					amount: .4
+				},
+				transition: {
+					duration: E(t).reduce ? 0 : .9,
+					ease: E(r)
+				}
+			}, {
+				default: O(() => [(b(!0), p(l, null, C(E(t).placed, (e, n) => (b(), d(E(A).path, {
+					key: e.id,
+					d: e.path,
+					stroke: e.color,
+					"stroke-width": E(t).thickness,
+					fill: "none",
+					"stroke-linecap": "round",
+					"pointer-events": "none",
+					"aria-hidden": "true",
+					style: i,
+					initial: !E(t).reduce && { opacity: 0 },
+					animate: {
+						opacity: E(t).active !== null && E(t).active !== e.id ? .3 : 1,
+						scale: E(t).active === e.id ? 1.05 : 1
+					},
+					transition: a(n)
+				}, null, 8, [
+					"d",
+					"stroke",
+					"stroke-width",
+					"initial",
+					"animate",
+					"transition"
+				]))), 128))]),
+				_: 1
+			}, 8, ["initial", "transition"]),
+			(b(!0), p(l, null, C(E(t).placed, (e) => (b(), p("path", {
+				key: e.id,
+				d: e.path,
+				class: "cursor-pointer",
+				fill: "none",
+				stroke: "transparent",
+				"stroke-linecap": "round",
+				"stroke-width": E(t).thickness + 8,
+				"pointer-events": "stroke",
+				onPointerenter: (t) => o(e.id),
+				onPointerleave: n[0] ||= (e) => o(null),
+				onClick: (n) => E(t).select(e.id)
+			}, null, 40, B))), 128))
+		], 8, R)), e.$slots.default ? (b(), p("div", V, [w(e.$slots, "default")])) : f("", !0)]));
+	}
+}), U = {
+	"aria-live": "polite",
+	class: "relative max-w-[56%]"
+}, W = { class: "text-2xl font-medium tracking-tight tabular-nums" }, G = { class: "relative mt-1 h-4 overflow-hidden" }, K = { class: "truncate" }, q = /* @__PURE__ */ _({
+	__name: "DonutChartCenter",
+	props: { totalLabel: { default: "Total" } },
+	setup(e) {
+		let t = I(), n = u(() => t.placed.find((e) => e.id === t.active) ?? null), a = u(() => n.value ? n.value.value : t.total), o = S("up");
+		D(a, (e, t) => {
+			o.value = e > t ? "up" : "down";
+		}, { flush: "sync" });
+		let s = u(() => n.value?.id ?? "total"), c = u(() => ({
+			opacity: 0,
+			y: t.reduce ? "0%" : "100%"
+		})), f = u(() => ({
+			opacity: 0,
+			y: t.reduce ? "0%" : "-100%"
+		}));
+		return (u, _) => (b(), p("div", U, [w(u.$slots, "default", {
+			segment: n.value,
+			total: E(t).total
+		}, () => [m("p", W, [g(E(i), {
+			value: E(t).formatValue(a.value),
+			direction: o.value
+		}, null, 8, ["value", "direction"])]), m("div", G, [g(E(k), {
+			initial: !1,
+			mode: "popLayout"
+		}, {
+			default: O(() => [(b(), d(E(A).p, {
+				key: s.value,
+				initial: c.value,
+				animate: {
+					opacity: 1,
+					y: "0%"
+				},
+				exit: f.value,
+				transition: {
+					duration: E(t).reduce ? .12 : .22,
+					ease: E(r)
+				},
+				class: "flex items-center justify-center gap-1.5 whitespace-nowrap text-xs leading-4 text-muted-foreground"
+			}, {
+				default: O(() => [n.value ? (b(), p(l, { key: 0 }, [m("span", {
+					"aria-hidden": "true",
+					class: "size-2 shrink-0 rounded-full",
+					style: y({ backgroundColor: n.value.color })
+				}, null, 4), m("span", K, T(n.value.name) + " · " + T((n.value.share * 100).toFixed(1)) + "%", 1)], 64)) : (b(), p(l, { key: 1 }, [h(T(e.totalLabel), 1)], 64))]),
+				_: 1
+			}, 8, [
+				"initial",
+				"exit",
+				"transition"
+			]))]),
+			_: 1
+		})])])]));
+	}
+}), J = {
+	"data-chart-keyboard": "",
+	class: "space-y-1"
+}, Y = [
+	"aria-pressed",
+	"onFocus",
+	"onPointerenter",
+	"onClick",
+	"onKeydown"
+], X = { class: "flex items-center gap-3" }, Z = { class: "min-w-0 flex-1 truncate text-sm font-medium" }, Q = { class: "shrink-0 text-right text-sm tabular-nums" }, te = { class: "font-medium" }, ne = { class: "ml-2 text-muted-foreground" }, re = {
+	key: 0,
+	class: "mt-0.5 block pl-5.5 text-xs text-muted-foreground"
+}, ie = {
+	"aria-hidden": "true",
+	class: "mt-2 ml-5.5 block h-1 overflow-hidden rounded-full bg-muted"
+}, $ = /* @__PURE__ */ _({
+	__name: "DonutChartLegend",
+	setup(e) {
+		let t = I();
+		function r(e) {
+			t.canHover && t.setActive(e);
+		}
+		return (e, i) => (b(), p("ul", J, [(b(!0), p(l, null, C(E(t).placed, (o, s) => (b(), p("li", { key: o.id }, [m("button", {
+			type: "button",
+			"data-chart-item": "",
+			"aria-pressed": E(t).selectedId === o.id,
+			class: v(["w-full rounded-xl px-3 py-2 text-left outline-none transition-colors duration-150 aria-pressed:ring-1 aria-pressed:ring-inset aria-pressed:ring-border focus-visible:ring-2 focus-visible:ring-ring aria-pressed:focus-visible:ring-2 aria-pressed:focus-visible:ring-ring", E(t).active === o.id ? "bg-muted" : "hover:bg-muted/60"]),
+			onFocus: (e) => E(t).setActive(o.id),
+			onBlur: i[0] ||= (e) => E(t).setActive(null),
+			onPointerenter: (e) => r(o.id),
+			onPointerleave: i[1] ||= (e) => r(null),
+			onClick: (e) => E(t).select(o.id),
+			onKeydown: (e) => E(a)(e, s, E(t).placed.length)
+		}, [
+			m("span", X, [
+				m("span", {
+					"aria-hidden": "true",
+					class: "size-2.5 shrink-0 rounded-full",
+					style: y({ backgroundColor: o.color })
+				}, null, 4),
+				m("span", Z, T(o.name), 1),
+				m("span", Q, [w(e.$slots, "value", { segment: o }, () => [m("span", te, T((o.share * 100).toFixed(1)) + "%", 1), m("span", ne, T(E(t).formatValue(o.value)), 1)])])
+			]),
+			e.$slots.detail ? (b(), p("span", re, [w(e.$slots, "detail", { segment: o })])) : f("", !0),
+			m("span", ie, [g(E(A).span, {
+				class: "block h-full origin-left rounded-full",
+				style: y({ backgroundColor: o.color }),
+				initial: !E(t).reduce && { scaleX: 0 },
+				animate: { scaleX: o.share },
+				transition: E(t).reduce ? { duration: 0 } : {
+					...E(n),
+					delay: .2 + s * .06
+				}
+			}, null, 8, [
+				"style",
+				"initial",
+				"animate",
+				"transition"
+			])])
+		], 42, Y)]))), 128))]));
+	}
+}), ae = ["aria-label"], oe = { class: "grid items-center gap-6 sm:grid-cols-[minmax(0,16rem)_1fr]" }, se = /* @__PURE__ */ _({
+	__name: "DonutChart",
+	props: {
+		segments: {},
+		thickness: {},
+		gap: {},
+		activeId: {},
+		defaultActiveId: {},
+		selectedId: {},
+		formatValue: { type: Function },
+		label: {},
+		className: {}
+	},
+	emits: [
+		"update:activeId",
+		"activeChange",
+		"select"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = P(n, t);
+		return x(F.key, r), (e, t) => (b(), p("section", {
+			class: v(["w-full", n.className]),
+			"aria-label": E(r).label
+		}, [w(e.$slots, "default", {}, () => [m("div", oe, [g(H, null, {
+			default: O(() => [g(q)]),
+			_: 1
+		}), g($)])])], 10, ae));
+	}
+});
+export { I as a, H as i, $ as n, q as r, se as t };
+
+//# sourceMappingURL=donut-chart-D3aserbJ.js.map

package/dist/donut-chart-D3aserbJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart-D3aserbJ.js","names":["$slots","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_unref","_createElementVNode","_createVNode","_withCtx","_Fragment","_renderList","_createBlock","_renderSlot","_createCommentVNode","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","_renderSlot","_unref","_createElementVNode","_createVNode","DigitSwap","_withCtx","_createBlock","_Fragment","_normalizeStyle","_toDisplayString","_createTextVNode","_sfc_main","$slots","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_Fragment","_renderList","_unref","_createElementVNode","_normalizeClass","_normalizeStyle","_toDisplayString","_renderSlot","_createCommentVNode","_createVNode","_sfc_main","emit","_openBlock","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createElementVNode","_createVNode","DonutChartPlot","_withCtx","DonutChartCenter","DonutChartLegend","_sfc_main","useMediaQuery","useReducedMotion","SPRING_LAYOUT","DigitSwap_default","formatNumber","context","activeSelection","coordinate","radians","angle","radius","arc","start","from","end","to","buildDonut","values","total","segment","segments","options","inset","gap","thickness","placed","share","nextAngle","path","opposite","startAngle","createDonutModel","dimensions","computed","props","geometry","identities","item","active","emit","id","reactive","donutContext","useDonutChart","_hoisted_1$3","_hoisted_2$3","_hoisted_3$2","_hoisted_4$2","_hoisted_5$1","DonutChartPlot_default","defineComponent","chart","transformOrigin","transition","index","EASE_OUT","hover","openBlock","createElementBlock","unref","createElementVNode","createVNode","motion","withCtx","Fragment","renderList","createBlock","_cache","_ctx","renderSlot","createCommentVNode","_hoisted_1$2","_hoisted_2$2","_hoisted_3$1","_hoisted_4$1","DonutChartCenter_default","value","direction","ref","next","previous","labelKey","slideIn","slideOut","AnimatePresence","normalizeStyle","toDisplayString","createTextVNode","__props","_hoisted_1$1","_hoisted_2$1","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","DonutChartLegend_default","normalizeClass","moveFocus","$event","_hoisted_1","_hoisted_2","DonutChart_default","__emit","provide"],"sources":["../src/charts/donut-chart/src/model.ts","../src/charts/donut-chart/src/context.ts","../src/charts/donut-chart/src/DonutChartPlot.vue","../src/charts/donut-chart/src/DonutChartPlot.vue","../src/charts/donut-chart/src/DonutChartCenter.vue","../src/charts/donut-chart/src/DonutChartCenter.vue","../src/charts/donut-chart/src/DonutChartLegend.vue","../src/charts/donut-chart/src/DonutChartLegend.vue","../src/charts/donut-chart/src/DonutChart.vue","../src/charts/donut-chart/src/DonutChart.vue"],"sourcesContent":["export interface DonutSegment {\n  id: string;\n  name: string;\n  color: string;\n  value: number;\n}\nexport type PlacedSegment = DonutSegment & { share: number; path: string };\nexport const DONUT_SIZE = 200;\n\ntype RingOptions = { radius: number; thickness: number; gap: number };\nfunction coordinate(radius: number, angle: number): [number, number] {\n  const radians = (angle * Math.PI) / 180;\n  return [\n    DONUT_SIZE / 2 + radius * Math.sin(radians),\n    DONUT_SIZE / 2 - radius * Math.cos(radians),\n  ];\n}\nfunction arc(radius: number, from: number, to: number) {\n  const start = coordinate(radius, from);\n  const end = coordinate(radius, to);\n  return `M ${start[0]} ${start[1]} A ${radius} ${radius} 0 ${to - from > 180 ? 1 : 0} 1 ${end[0]} ${end[1]}`;\n}\nexport function buildDonut(\n  segments: readonly DonutSegment[],\n  options: RingOptions,\n) {\n  const values: DonutSegment[] = [];\n  let total = 0;\n  for (const segment of segments) {\n    if (Number.isFinite(segment.value) && segment.value > 0) {\n      values.push(segment);\n      total += segment.value;\n    }\n  }\n  const { radius, thickness, gap } = options;\n  let angle = 0;\n  const inset = gap / 2 + ((thickness / (2 * radius)) * 180) / Math.PI;\n  const placed: PlacedSegment[] = [];\n  for (const segment of values) {\n    const share = total ? segment.value / total : 0;\n    const nextAngle = angle + share * 360;\n    let path: string;\n    if (values.length === 1) {\n      const start = coordinate(radius, 0);\n      const opposite = coordinate(radius, 180);\n      path = `M ${start[0]} ${start[1]} A ${radius} ${radius} 0 1 1 ${opposite[0]} ${opposite[1]} A ${radius} ${radius} 0 1 1 ${start[0]} ${start[1]}`;\n    } else {\n      const startAngle = angle + inset;\n      path = arc(\n        radius,\n        startAngle,\n        Math.max(startAngle + 0.01, nextAngle - inset),\n      );\n    }\n    placed.push({ ...segment, share, path });\n    angle = nextAngle;\n  }\n  return { placed, total };\n}\n","import { computed, reactive } from \"vue\";\nimport { useMediaQuery, useReducedMotion } from \"../../../lib/composables\";\nimport { activeSelection, context, formatNumber } from \"../../shared\";\nimport { buildDonut, type DonutSegment } from \"./model\";\nexport interface DonutChartProps {\n  segments: readonly DonutSegment[];\n  thickness?: number;\n  gap?: number;\n  activeId?: string | null;\n  defaultActiveId?: string | null;\n  selectedId?: string | null;\n  formatValue?: (value: number) => string;\n  label?: string;\n  className?: string;\n}\nexport function createDonutModel(\n  props: DonutChartProps,\n  emit: (event: any, ...args: any[]) => void,\n) {\n  const dimensions = computed(() => {\n    const thickness = props.thickness ?? 22;\n    return { thickness, radius: 92 - thickness / 2, gap: props.gap ?? 3 };\n  });\n  const geometry = computed(() => buildDonut(props.segments, dimensions.value));\n  const identities = computed(() =>\n    geometry.value.placed.map((item) => item.id),\n  );\n  const active = activeSelection(\n    () => props.activeId,\n    props.defaultActiveId ?? null,\n    identities,\n    (id) => {\n      emit(\"update:activeId\", id);\n      emit(\"activeChange\", id);\n    },\n  );\n  return reactive({\n    placed: computed(() => geometry.value.placed),\n    total: computed(() => geometry.value.total),\n    radius: computed(() => dimensions.value.radius),\n    thickness: computed(() => dimensions.value.thickness),\n    active,\n    setActive(id: string | null) {\n      active.value = id;\n    },\n    select(id: string) {\n      emit(\"select\", id);\n    },\n    selectedId: computed(() => props.selectedId ?? null),\n    formatValue: computed(() => props.formatValue ?? formatNumber),\n    label: computed(() => props.label ?? \"Donut chart\"),\n    reduce: useReducedMotion(),\n    canHover: useMediaQuery(\"(hover: hover)\"),\n  });\n}\nexport const donutContext =\n  context<ReturnType<typeof createDonutModel>>(\"DonutChart\");\nexport const useDonutChart = donutContext.use;\n","<script setup lang=\"ts\">\nimport { motion } from \"motion-v\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useDonutChart } from \"./context\";\nconst chart = useDonutChart();\nconst transformOrigin = {\n  transformBox: \"view-box\",\n  transformOrigin: \"100px 100px\",\n} as const;\nfunction transition(index: number) {\n  return chart.reduce\n    ? { duration: 0 }\n    : {\n        opacity: { duration: 0.4, delay: 0.15 + index * 0.06, ease: EASE_OUT },\n        scale: SPRING_LAYOUT,\n      };\n}\nfunction hover(id: string | null) {\n  if (chart.canHover) chart.setActive(id);\n}\n</script>\n\n<template>\n  <div class=\"relative mx-auto aspect-square w-full max-w-64\">\n    <svg\n      class=\"size-full overflow-visible\"\n      viewBox=\"0 0 200 200\"\n      role=\"img\"\n      :aria-label=\"chart.label\"\n    >\n      <circle\n        class=\"stroke-muted\"\n        cx=\"100\"\n        cy=\"100\"\n        :r=\"chart.radius\"\n        fill=\"none\"\n        :stroke-width=\"chart.thickness\"\n        opacity=\"0.6\"\n      />\n      <motion.g\n        :style=\"transformOrigin\"\n        :initial=\"\n          chart.reduce ? false : { rotate: -90, scale: 0.88, opacity: 0 }\n        \"\n        :while-in-view=\"{ rotate: 0, scale: 1, opacity: 1 }\"\n        :in-view-options=\"{ once: true, amount: 0.4 }\"\n        :transition=\"{ duration: chart.reduce ? 0 : 0.9, ease: EASE_OUT }\"\n      >\n        <motion.path\n          v-for=\"(segment, index) in chart.placed\"\n          :key=\"segment.id\"\n          :d=\"segment.path\"\n          :stroke=\"segment.color\"\n          :stroke-width=\"chart.thickness\"\n          fill=\"none\"\n          stroke-linecap=\"round\"\n          pointer-events=\"none\"\n          aria-hidden=\"true\"\n          :style=\"transformOrigin\"\n          :initial=\"chart.reduce ? false : { opacity: 0 }\"\n          :animate=\"{\n            opacity:\n              chart.active !== null && chart.active !== segment.id ? 0.3 : 1,\n            scale: chart.active === segment.id ? 1.05 : 1,\n          }\"\n          :transition=\"transition(index)\"\n        />\n      </motion.g>\n      <path\n        v-for=\"segment in chart.placed\"\n        :key=\"segment.id\"\n        :d=\"segment.path\"\n        class=\"cursor-pointer\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-linecap=\"round\"\n        :stroke-width=\"chart.thickness + 8\"\n        pointer-events=\"stroke\"\n        @pointerenter=\"hover(segment.id)\"\n        @pointerleave=\"hover(null)\"\n        @click=\"chart.select(segment.id)\"\n      />\n    </svg>\n    <div\n      v-if=\"$slots.default\"\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-center\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { motion } from \"motion-v\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useDonutChart } from \"./context\";\nconst chart = useDonutChart();\nconst transformOrigin = {\n  transformBox: \"view-box\",\n  transformOrigin: \"100px 100px\",\n} as const;\nfunction transition(index: number) {\n  return chart.reduce\n    ? { duration: 0 }\n    : {\n        opacity: { duration: 0.4, delay: 0.15 + index * 0.06, ease: EASE_OUT },\n        scale: SPRING_LAYOUT,\n      };\n}\nfunction hover(id: string | null) {\n  if (chart.canHover) chart.setActive(id);\n}\n</script>\n\n<template>\n  <div class=\"relative mx-auto aspect-square w-full max-w-64\">\n    <svg\n      class=\"size-full overflow-visible\"\n      viewBox=\"0 0 200 200\"\n      role=\"img\"\n      :aria-label=\"chart.label\"\n    >\n      <circle\n        class=\"stroke-muted\"\n        cx=\"100\"\n        cy=\"100\"\n        :r=\"chart.radius\"\n        fill=\"none\"\n        :stroke-width=\"chart.thickness\"\n        opacity=\"0.6\"\n      />\n      <motion.g\n        :style=\"transformOrigin\"\n        :initial=\"\n          chart.reduce ? false : { rotate: -90, scale: 0.88, opacity: 0 }\n        \"\n        :while-in-view=\"{ rotate: 0, scale: 1, opacity: 1 }\"\n        :in-view-options=\"{ once: true, amount: 0.4 }\"\n        :transition=\"{ duration: chart.reduce ? 0 : 0.9, ease: EASE_OUT }\"\n      >\n        <motion.path\n          v-for=\"(segment, index) in chart.placed\"\n          :key=\"segment.id\"\n          :d=\"segment.path\"\n          :stroke=\"segment.color\"\n          :stroke-width=\"chart.thickness\"\n          fill=\"none\"\n          stroke-linecap=\"round\"\n          pointer-events=\"none\"\n          aria-hidden=\"true\"\n          :style=\"transformOrigin\"\n          :initial=\"chart.reduce ? false : { opacity: 0 }\"\n          :animate=\"{\n            opacity:\n              chart.active !== null && chart.active !== segment.id ? 0.3 : 1,\n            scale: chart.active === segment.id ? 1.05 : 1,\n          }\"\n          :transition=\"transition(index)\"\n        />\n      </motion.g>\n      <path\n        v-for=\"segment in chart.placed\"\n        :key=\"segment.id\"\n        :d=\"segment.path\"\n        class=\"cursor-pointer\"\n        fill=\"none\"\n        stroke=\"transparent\"\n        stroke-linecap=\"round\"\n        :stroke-width=\"chart.thickness + 8\"\n        pointer-events=\"stroke\"\n        @pointerenter=\"hover(segment.id)\"\n        @pointerleave=\"hover(null)\"\n        @click=\"chart.select(segment.id)\"\n      />\n    </svg>\n    <div\n      v-if=\"$slots.default\"\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-center\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { DigitSwap } from \"../../../motion/number\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useDonutChart } from \"./context\";\nwithDefaults(defineProps<{ totalLabel?: string }>(), { totalLabel: \"Total\" });\nconst chart = useDonutChart();\nconst segment = computed(\n  () => chart.placed.find((item) => item.id === chart.active) ?? null,\n);\nconst value = computed(() =>\n  segment.value ? segment.value.value : chart.total,\n);\nconst direction = ref<\"up\" | \"down\">(\"up\");\nwatch(\n  value,\n  (next, previous) => {\n    direction.value = next > previous ? \"up\" : \"down\";\n  },\n  { flush: \"sync\" },\n);\nconst labelKey = computed(() => segment.value?.id ?? \"total\");\nconst slideIn = computed(() => ({\n  opacity: 0,\n  y: chart.reduce ? \"0%\" : \"100%\",\n}));\nconst slideOut = computed(() => ({\n  opacity: 0,\n  y: chart.reduce ? \"0%\" : \"-100%\",\n}));\n</script>\n\n<template>\n  <div aria-live=\"polite\" class=\"relative max-w-[56%]\">\n    <slot :segment=\"segment\" :total=\"chart.total\">\n      <p class=\"text-2xl font-medium tracking-tight tabular-nums\">\n        <DigitSwap :value=\"chart.formatValue(value)\" :direction=\"direction\" />\n      </p>\n      <div class=\"relative mt-1 h-4 overflow-hidden\">\n        <AnimatePresence :initial=\"false\" mode=\"popLayout\">\n          <motion.p\n            :key=\"labelKey\"\n            :initial=\"slideIn\"\n            :animate=\"{ opacity: 1, y: '0%' }\"\n            :exit=\"slideOut\"\n            :transition=\"{\n              duration: chart.reduce ? 0.12 : 0.22,\n              ease: EASE_OUT,\n            }\"\n            class=\"flex items-center justify-center gap-1.5 whitespace-nowrap text-xs leading-4 text-muted-foreground\"\n          >\n            <template v-if=\"segment\">\n              <span\n                aria-hidden=\"true\"\n                class=\"size-2 shrink-0 rounded-full\"\n                :style=\"{ backgroundColor: segment.color }\"\n              />\n              <span class=\"truncate\"\n                >{{ segment.name }} ·\n                {{ (segment.share * 100).toFixed(1) }}%</span\n              >\n            </template>\n            <template v-else>{{ totalLabel }}</template>\n          </motion.p>\n        </AnimatePresence>\n      </div>\n    </slot>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { DigitSwap } from \"../../../motion/number\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useDonutChart } from \"./context\";\nwithDefaults(defineProps<{ totalLabel?: string }>(), { totalLabel: \"Total\" });\nconst chart = useDonutChart();\nconst segment = computed(\n  () => chart.placed.find((item) => item.id === chart.active) ?? null,\n);\nconst value = computed(() =>\n  segment.value ? segment.value.value : chart.total,\n);\nconst direction = ref<\"up\" | \"down\">(\"up\");\nwatch(\n  value,\n  (next, previous) => {\n    direction.value = next > previous ? \"up\" : \"down\";\n  },\n  { flush: \"sync\" },\n);\nconst labelKey = computed(() => segment.value?.id ?? \"total\");\nconst slideIn = computed(() => ({\n  opacity: 0,\n  y: chart.reduce ? \"0%\" : \"100%\",\n}));\nconst slideOut = computed(() => ({\n  opacity: 0,\n  y: chart.reduce ? \"0%\" : \"-100%\",\n}));\n</script>\n\n<template>\n  <div aria-live=\"polite\" class=\"relative max-w-[56%]\">\n    <slot :segment=\"segment\" :total=\"chart.total\">\n      <p class=\"text-2xl font-medium tracking-tight tabular-nums\">\n        <DigitSwap :value=\"chart.formatValue(value)\" :direction=\"direction\" />\n      </p>\n      <div class=\"relative mt-1 h-4 overflow-hidden\">\n        <AnimatePresence :initial=\"false\" mode=\"popLayout\">\n          <motion.p\n            :key=\"labelKey\"\n            :initial=\"slideIn\"\n            :animate=\"{ opacity: 1, y: '0%' }\"\n            :exit=\"slideOut\"\n            :transition=\"{\n              duration: chart.reduce ? 0.12 : 0.22,\n              ease: EASE_OUT,\n            }\"\n            class=\"flex items-center justify-center gap-1.5 whitespace-nowrap text-xs leading-4 text-muted-foreground\"\n          >\n            <template v-if=\"segment\">\n              <span\n                aria-hidden=\"true\"\n                class=\"size-2 shrink-0 rounded-full\"\n                :style=\"{ backgroundColor: segment.color }\"\n              />\n              <span class=\"truncate\"\n                >{{ segment.name }} ·\n                {{ (segment.share * 100).toFixed(1) }}%</span\n              >\n            </template>\n            <template v-else>{{ totalLabel }}</template>\n          </motion.p>\n        </AnimatePresence>\n      </div>\n    </slot>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { motion } from \"motion-v\";\nimport { SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { moveFocus } from \"../../shared\";\nimport { useDonutChart } from \"./context\";\nconst chart = useDonutChart();\nfunction hover(id: string | null) {\n  if (chart.canHover) chart.setActive(id);\n}\n</script>\n\n<template>\n  <ul data-chart-keyboard class=\"space-y-1\">\n    <li v-for=\"(segment, index) in chart.placed\" :key=\"segment.id\">\n      <button\n        type=\"button\"\n        data-chart-item\n        :aria-pressed=\"chart.selectedId === segment.id\"\n        class=\"w-full rounded-xl px-3 py-2 text-left outline-none transition-colors duration-150 aria-pressed:ring-1 aria-pressed:ring-inset aria-pressed:ring-border focus-visible:ring-2 focus-visible:ring-ring aria-pressed:focus-visible:ring-2 aria-pressed:focus-visible:ring-ring\"\n        :class=\"chart.active === segment.id ? 'bg-muted' : 'hover:bg-muted/60'\"\n        @focus=\"chart.setActive(segment.id)\"\n        @blur=\"chart.setActive(null)\"\n        @pointerenter=\"hover(segment.id)\"\n        @pointerleave=\"hover(null)\"\n        @click=\"chart.select(segment.id)\"\n        @keydown=\"moveFocus($event, index, chart.placed.length)\"\n      >\n        <span class=\"flex items-center gap-3\">\n          <span\n            aria-hidden=\"true\"\n            class=\"size-2.5 shrink-0 rounded-full\"\n            :style=\"{ backgroundColor: segment.color }\"\n          />\n          <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">{{\n            segment.name\n          }}</span>\n          <span class=\"shrink-0 text-right text-sm tabular-nums\">\n            <slot name=\"value\" :segment=\"segment\">\n              <span class=\"font-medium\"\n                >{{ (segment.share * 100).toFixed(1) }}%</span\n              >\n              <span class=\"ml-2 text-muted-foreground\">{{\n                chart.formatValue(segment.value)\n              }}</span>\n            </slot>\n          </span>\n        </span>\n        <span\n          v-if=\"$slots.detail\"\n          class=\"mt-0.5 block pl-5.5 text-xs text-muted-foreground\"\n          ><slot name=\"detail\" :segment=\"segment\"\n        /></span>\n        <span\n          aria-hidden=\"true\"\n          class=\"mt-2 ml-5.5 block h-1 overflow-hidden rounded-full bg-muted\"\n        >\n          <motion.span\n            class=\"block h-full origin-left rounded-full\"\n            :style=\"{ backgroundColor: segment.color }\"\n            :initial=\"chart.reduce ? false : { scaleX: 0 }\"\n            :animate=\"{ scaleX: segment.share }\"\n            :transition=\"\n              chart.reduce\n                ? { duration: 0 }\n                : { ...SPRING_LAYOUT, delay: 0.2 + index * 0.06 }\n            \"\n          />\n        </span>\n      </button>\n    </li>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport { motion } from \"motion-v\";\nimport { SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { moveFocus } from \"../../shared\";\nimport { useDonutChart } from \"./context\";\nconst chart = useDonutChart();\nfunction hover(id: string | null) {\n  if (chart.canHover) chart.setActive(id);\n}\n</script>\n\n<template>\n  <ul data-chart-keyboard class=\"space-y-1\">\n    <li v-for=\"(segment, index) in chart.placed\" :key=\"segment.id\">\n      <button\n        type=\"button\"\n        data-chart-item\n        :aria-pressed=\"chart.selectedId === segment.id\"\n        class=\"w-full rounded-xl px-3 py-2 text-left outline-none transition-colors duration-150 aria-pressed:ring-1 aria-pressed:ring-inset aria-pressed:ring-border focus-visible:ring-2 focus-visible:ring-ring aria-pressed:focus-visible:ring-2 aria-pressed:focus-visible:ring-ring\"\n        :class=\"chart.active === segment.id ? 'bg-muted' : 'hover:bg-muted/60'\"\n        @focus=\"chart.setActive(segment.id)\"\n        @blur=\"chart.setActive(null)\"\n        @pointerenter=\"hover(segment.id)\"\n        @pointerleave=\"hover(null)\"\n        @click=\"chart.select(segment.id)\"\n        @keydown=\"moveFocus($event, index, chart.placed.length)\"\n      >\n        <span class=\"flex items-center gap-3\">\n          <span\n            aria-hidden=\"true\"\n            class=\"size-2.5 shrink-0 rounded-full\"\n            :style=\"{ backgroundColor: segment.color }\"\n          />\n          <span class=\"min-w-0 flex-1 truncate text-sm font-medium\">{{\n            segment.name\n          }}</span>\n          <span class=\"shrink-0 text-right text-sm tabular-nums\">\n            <slot name=\"value\" :segment=\"segment\">\n              <span class=\"font-medium\"\n                >{{ (segment.share * 100).toFixed(1) }}%</span\n              >\n              <span class=\"ml-2 text-muted-foreground\">{{\n                chart.formatValue(segment.value)\n              }}</span>\n            </slot>\n          </span>\n        </span>\n        <span\n          v-if=\"$slots.detail\"\n          class=\"mt-0.5 block pl-5.5 text-xs text-muted-foreground\"\n          ><slot name=\"detail\" :segment=\"segment\"\n        /></span>\n        <span\n          aria-hidden=\"true\"\n          class=\"mt-2 ml-5.5 block h-1 overflow-hidden rounded-full bg-muted\"\n        >\n          <motion.span\n            class=\"block h-full origin-left rounded-full\"\n            :style=\"{ backgroundColor: segment.color }\"\n            :initial=\"chart.reduce ? false : { scaleX: 0 }\"\n            :animate=\"{ scaleX: segment.share }\"\n            :transition=\"\n              chart.reduce\n                ? { duration: 0 }\n                : { ...SPRING_LAYOUT, delay: 0.2 + index * 0.06 }\n            \"\n          />\n        </span>\n      </button>\n    </li>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createDonutModel,\n  donutContext,\n  type DonutChartProps,\n} from \"./context\";\nimport DonutChartPlot from \"./DonutChartPlot.vue\";\nimport DonutChartCenter from \"./DonutChartCenter.vue\";\nimport DonutChartLegend from \"./DonutChartLegend.vue\";\nconst props = defineProps<DonutChartProps>();\nconst emit = defineEmits([\"update:activeId\", \"activeChange\", \"select\"]);\nconst chart = createDonutModel(props, emit);\nprovide(donutContext.key, chart);\n</script>\n\n<template>\n  <section :class=\"['w-full', props.className]\" :aria-label=\"chart.label\">\n    <slot>\n      <div class=\"grid items-center gap-6 sm:grid-cols-[minmax(0,16rem)_1fr]\">\n        <DonutChartPlot><DonutChartCenter /></DonutChartPlot>\n        <DonutChartLegend />\n      </div>\n    </slot>\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createDonutModel,\n  donutContext,\n  type DonutChartProps,\n} from \"./context\";\nimport DonutChartPlot from \"./DonutChartPlot.vue\";\nimport DonutChartCenter from \"./DonutChartCenter.vue\";\nimport DonutChartLegend from \"./DonutChartLegend.vue\";\nconst props = defineProps<DonutChartProps>();\nconst emit = defineEmits([\"update:activeId\", \"activeChange\", \"select\"]);\nconst chart = createDonutModel(props, emit);\nprovide(donutContext.key, chart);\n</script>\n\n<template>\n  <section :class=\"['w-full', props.className]\" :aria-label=\"chart.label\">\n    <slot>\n      <div class=\"grid items-center gap-6 sm:grid-cols-[minmax(0,16rem)_1fr]\">\n        <DonutChartPlot><DonutChartCenter /></DonutChartPlot>\n        <DonutChartLegend />\n      </div>\n    </slot>\n  </section>\n</template>\n"],"mappings":"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"}

package/dist/drawer-DLtDIIpa.js

@@ -0,0 +1,79 @@
+import { o as e, s as t, t as n } from "./composables-BJ1sih_H.js";
+import { c as r, r as i } from "./ease-rIvCM4O3.js";
+import { t as a } from "./utils-DIrLOK2M.js";
+import { t as o } from "./interactivity-fV41y350.js";
+import { Teleport as s, computed as c, createBlock as l, createCommentVNode as u, createVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, onMounted as h, openBlock as g, ref as _, renderSlot as v, unref as y, withCtx as b } from "vue";
+import { AnimatePresence as x, motion as S } from "motion-v";
+// src/motion/drawer/src/Drawer.vue
+var C = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	__name: "Drawer",
+	props: {
+		open: { type: Boolean },
+		side: { default: "right" },
+		ariaLabel: {},
+		dismissable: {
+			type: Boolean,
+			default: !0
+		},
+		backdropClassName: {}
+	},
+	emits: ["update:open"],
+	setup(f, { emit: C }) {
+		let w = f, T = C, E = c(() => w.open), D = _(!1), O = t(), k = _(null), A = _(null), j = c(() => O.value ? { opacity: 0 } : { x: w.side === "right" ? "100%" : "-100%" });
+		function M() {
+			w.dismissable && T("update:open", !1);
+		}
+		return e(E, k, M), o(E, [k, A], [k]), h(() => {
+			D.value = !0;
+		}), (e, t) => D.value ? (g(), l(s, {
+			key: 0,
+			to: "body"
+		}, [d(y(x), null, {
+			default: b(() => [f.open ? (g(), l(y(S).button, {
+				ref: (e) => A.value = y(n)(e),
+				key: "backdrop",
+				type: "button",
+				"aria-label": "Close",
+				tabindex: -1,
+				onClick: M,
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: {
+					duration: .25,
+					ease: y(i)
+				},
+				class: m(y(a)("fixed inset-0 z-50 h-full w-full cursor-default bg-black/40 backdrop-blur-sm", f.backdropClassName))
+			}, null, 8, ["transition", "class"])) : u("", !0), f.open ? (g(), l(y(S).div, p({
+				ref: (e) => k.value = y(n)(e),
+				key: "panel",
+				tabindex: -1,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": f.ariaLabel,
+				initial: j.value,
+				animate: y(O) ? { opacity: 1 } : { x: 0 },
+				exit: j.value,
+				transition: y(O) ? {
+					duration: .2,
+					ease: y(i)
+				} : y(r)
+			}, e.$attrs, { class: y(a)("fixed inset-y-0 z-50 flex w-80 max-w-[85vw] flex-col bg-background shadow-xl outline-none", f.side === "right" ? "right-0 border-l border-border" : "left-0 border-r border-border", e.$attrs.class) }), {
+				default: b(() => [v(e.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"aria-label",
+				"initial",
+				"animate",
+				"exit",
+				"transition",
+				"class"
+			])) : u("", !0)]),
+			_: 3
+		})])) : u("", !0);
+	}
+});
+export { C as t };
+
+//# sourceMappingURL=drawer-DLtDIIpa.js.map

package/dist/drawer-DLtDIIpa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-DLtDIIpa.js","names":["$attrs","_openBlock","_createBlock","_Teleport","_createVNode","_unref","_withCtx","_normalizeClass","_createCommentVNode","_mergeProps","_renderSlot","_sfc_main","useOverlay","useReducedMotion","resolveElement","SPRING_PANEL","EASE_OUT","cn","useExitInteractivity","Drawer_default","defineComponent","__emit","props","__props","emit","active","computed","mounted","ref","reduced","panel","backdrop","hidden","dismiss","onMounted","openBlock","createBlock","Teleport","createVNode","unref","AnimatePresence","withCtx","motion","node","normalizeClass","createCommentVNode","mergeProps","_ctx","renderSlot"],"sources":["../src/motion/drawer/src/Drawer.vue","../src/motion/drawer/src/Drawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed, onMounted, ref } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_PANEL } from \"../../../lib/ease\";\nimport { resolveElement, useOverlay, useReducedMotion } from \"../../../lib/composables\";\nimport { useExitInteractivity } from \"../../_overlay/interactivity\";\nconst props = withDefaults(defineProps<{ open: boolean; side?: \"left\" | \"right\"; ariaLabel?: string; dismissable?: boolean; backdropClassName?: string }>(), { side: \"right\", dismissable: true });\nconst emit = defineEmits<{ \"update:open\": [open: boolean] }>();\nconst active = computed(() => props.open), mounted = ref(false), reduced = useReducedMotion();\nconst panel = ref<HTMLElement | null>(null), backdrop = ref<HTMLElement | null>(null);\nconst hidden = computed(() => reduced.value ? { opacity: 0 } : { x: props.side === \"right\" ? \"100%\" : \"-100%\" });\nfunction dismiss() { if (props.dismissable) emit(\"update:open\", false); }\nuseOverlay(active, panel, dismiss);\nuseExitInteractivity(active, [panel, backdrop], [panel]);\nonMounted(() => { mounted.value = true; });\n</script>\n<template><Teleport v-if=\"mounted\" to=\"body\"><AnimatePresence>\n  <motion.button v-if=\"open\" :ref=\"node => backdrop = resolveElement<HTMLElement>(node)\" key=\"backdrop\" type=\"button\" aria-label=\"Close\" :tabindex=\"-1\" @click=\"dismiss\"\n    :initial=\"{ opacity: 0 }\" :animate=\"{ opacity: 1 }\" :exit=\"{ opacity: 0 }\" :transition=\"{ duration: 0.25, ease: EASE_OUT }\" :class=\"cn('fixed inset-0 z-50 h-full w-full cursor-default bg-black/40 backdrop-blur-sm', backdropClassName)\" />\n  <motion.div v-if=\"open\" :ref=\"node => panel = resolveElement<HTMLElement>(node)\" key=\"panel\" :tabindex=\"-1\" role=\"dialog\" aria-modal=\"true\" :aria-label=\"ariaLabel\"\n    :initial=\"hidden\" :animate=\"reduced ? { opacity: 1 } : { x: 0 }\" :exit=\"hidden\" :transition=\"reduced ? { duration: 0.2, ease: EASE_OUT } : SPRING_PANEL\" v-bind=\"$attrs\"\n    :class=\"cn('fixed inset-y-0 z-50 flex w-80 max-w-[85vw] flex-col bg-background shadow-xl outline-none', side === 'right' ? 'right-0 border-l border-border' : 'left-0 border-r border-border', $attrs.class as string)\"><slot /></motion.div>\n</AnimatePresence></Teleport></template>\n","<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed, onMounted, ref } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT, SPRING_PANEL } from \"../../../lib/ease\";\nimport { resolveElement, useOverlay, useReducedMotion } from \"../../../lib/composables\";\nimport { useExitInteractivity } from \"../../_overlay/interactivity\";\nconst props = withDefaults(defineProps<{ open: boolean; side?: \"left\" | \"right\"; ariaLabel?: string; dismissable?: boolean; backdropClassName?: string }>(), { side: \"right\", dismissable: true });\nconst emit = defineEmits<{ \"update:open\": [open: boolean] }>();\nconst active = computed(() => props.open), mounted = ref(false), reduced = useReducedMotion();\nconst panel = ref<HTMLElement | null>(null), backdrop = ref<HTMLElement | null>(null);\nconst hidden = computed(() => reduced.value ? { opacity: 0 } : { x: props.side === \"right\" ? \"100%\" : \"-100%\" });\nfunction dismiss() { if (props.dismissable) emit(\"update:open\", false); }\nuseOverlay(active, panel, dismiss);\nuseExitInteractivity(active, [panel, backdrop], [panel]);\nonMounted(() => { mounted.value = true; });\n</script>\n<template><Teleport v-if=\"mounted\" to=\"body\"><AnimatePresence>\n  <motion.button v-if=\"open\" :ref=\"node => backdrop = resolveElement<HTMLElement>(node)\" key=\"backdrop\" type=\"button\" aria-label=\"Close\" :tabindex=\"-1\" @click=\"dismiss\"\n    :initial=\"{ opacity: 0 }\" :animate=\"{ opacity: 1 }\" :exit=\"{ opacity: 0 }\" :transition=\"{ duration: 0.25, ease: EASE_OUT }\" :class=\"cn('fixed inset-0 z-50 h-full w-full cursor-default bg-black/40 backdrop-blur-sm', backdropClassName)\" />\n  <motion.div v-if=\"open\" :ref=\"node => panel = resolveElement<HTMLElement>(node)\" key=\"panel\" :tabindex=\"-1\" role=\"dialog\" aria-modal=\"true\" :aria-label=\"ariaLabel\"\n    :initial=\"hidden\" :animate=\"reduced ? { opacity: 1 } : { x: 0 }\" :exit=\"hidden\" :transition=\"reduced ? { duration: 0.2, ease: EASE_OUT } : SPRING_PANEL\" v-bind=\"$attrs\"\n    :class=\"cn('fixed inset-y-0 z-50 flex w-80 max-w-[85vw] flex-col bg-background shadow-xl outline-none', side === 'right' ? 'right-0 border-l border-border' : 'left-0 border-r border-border', $attrs.class as string)\"><slot /></motion.div>\n</AnimatePresence></Teleport></template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAQA,IAAMsB,IAAQC,GACRC,IAAOH,GACPI,IAASC,QAAeJ,EAAM,IAAI,GAAGK,IAAUC,EAAI,EAAK,GAAGC,IAAUhB,EAAiB,GACtFiB,IAAQF,EAAwB,IAAI,GAAGG,IAAWH,EAAwB,IAAI,GAC9EI,IAASN,QAAeG,EAAQ,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAGP,EAAM,SAAS,UAAU,SAAS,QAAQ,CAAC;EAC/G,SAASW,IAAU;GAAE,AAAIX,EAAM,eAAaE,EAAK,eAAe,EAAK;EAAG;E,OACxEZ,EAAWa,GAAQK,GAAOG,CAAO,GACjCf,EAAqBO,GAAQ,CAACK,GAAOC,CAAQ,GAAG,CAACD,CAAK,CAAC,GACvDI,QAAgB;GAAE,EAAQ,QAAQ;EAAM,CAAC,I,SAEfP,EAAA,SAAhB1B,EAAA,GAAAC,EAMmBC,GAAA;;GANM,IAAG;E,IAAOC,EAM3BC,EAAAmC,CAAA,GAAA,MAAA;GALhB,SAAAlC,QAC+O,CAD1NiB,EAAA,QAArBtB,EAAA,GAAAC,EAC+OG,EAAAqC,CAAA,CAAA,CAAA,QAAA;IADnN,MAAK,MAAQ,EAAA,QAAWrC,EAAAS,CAAA,CAAc,CAAc6B,CAAI;IAAG,KAAI;IAAW,MAAK;IAAS,cAAW;IAAS,UAAU;IAAK,SAAOV;IAC3J,SAAS,EAAA,SAAA,EAAA;IAAiB,SAAS,EAAA,SAAA,EAAA;IAAiB,MAAM,EAAA,SAAA,EAAA;IAAiB,YAAU;KAAA,UAAA;KAAA,MAA0B5B,EAAAW,CAAA;IAAQ;IAAK,OAAKT,EAAEF,EAAAY,CAAA,CAAE,CAAA,gFAAiFM,EAAA,iBAAiB,CAAA;G,mDACxNA,EAAA,QAAlBtB,EAAA,GAAAC,EAE+OG,EAAAqC,CAAA,CAAA,CAAA,KAF/OjC,EAE+O;IAFtN,MAAK,MAAQ,EAAA,QAAQJ,EAAAS,CAAA,CAAc,CAAc6B,CAAI;IAAG,KAAI;IAAS,UAAU;IAAI,MAAK;IAAS,cAAW;IAAQ,cAAYpB,EAAA;IACtJ,SAASS,EAAA;IAAS,SAAS3B,EAAAwB,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA,EAAA,GAAA,EAAA;IAA+B,MAAMG,EAAA;IAAS,YAAY3B,EAAAwB,CAAA,IAAO;KAAA,UAAA;KAAA,MAA0BxB,EAAAW,CAAA;IAAQ,IAAKX,EAAAU,CAAA;GAAsBf,GAAAA,EAAAA,QAAM,EACtK,OAAOK,EAAAY,CAAA,CAAE,CAAA,6FAA8FM,EAAA,SAAI,UAAA,mCAAA,iCAAmFvB,EAAAA,OAAO,KAAK,E;IAAa,SAAAM,QAAQ,CAARI,EAAQqC,EAAA,QAAA,SAAA,C"}

package/dist/dynamic-island-D_wBlujh.js

@@ -0,0 +1,169 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { r as t } from "./ease-rIvCM4O3.js";
+import { t as n } from "./shared-DAEawhBJ.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as l, mergeProps as u, nextTick as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, ref as g, renderSlot as _, toRef as v, unref as y, useSlots as b, watch as x, withCtx as S } from "vue";
+import { AnimatePresence as C, motion as w } from "motion-v";
+// src/blocks/dynamic-island/src/context.ts
+var T = Symbol("orvui-island");
+// src/blocks/dynamic-island/src/use-island-size.ts
+function E(e) {
+	let t = g(), n = g(null), i, a = !1, o = () => {
+		let e = t.value;
+		if (!e || a) return;
+		let r = e.offsetWidth, i = e.offsetHeight;
+		(r !== n.value?.width || i !== n.value?.height) && (n.value = {
+			width: r,
+			height: i
+		});
+	}, s = r(() => ({
+		width: `${n.value?.width ?? 126}px`,
+		height: `${n.value?.height ?? 37}px`
+	}));
+	return x(e, () => void d(o)), p(() => {
+		o(), t.value && typeof ResizeObserver < "u" && (i = new ResizeObserver(o), i.observe(t.value));
+	}), f(() => {
+		a = !0, i?.disconnect();
+	}), {
+		sizer: t,
+		target: s
+	};
+}
+// src/blocks/dynamic-island/src/IslandSlot.vue
+var D = /* @__PURE__ */ c({
+	__name: "IslandSlot",
+	setup(n) {
+		let a = e(), o = r(() => a.value ? {
+			opacity: 0,
+			filter: "blur(0px)"
+		} : {
+			opacity: 0,
+			scale: .9,
+			y: -8,
+			filter: "blur(5px)"
+		}), s = r(() => a.value ? {
+			opacity: 1,
+			filter: "blur(0px)"
+		} : {
+			opacity: 1,
+			scale: 1,
+			y: 0,
+			filter: "blur(0px)"
+		}), c = r(() => a.value ? {
+			opacity: 0,
+			filter: "blur(0px)",
+			transition: { duration: .1 }
+		} : {
+			opacity: 0,
+			scale: .9,
+			y: -6,
+			filter: "blur(0px)",
+			transition: {
+				duration: .08,
+				ease: t
+			}
+		});
+		return (e, t) => (m(), i(y(w).div, {
+			initial: o.value,
+			animate: s.value,
+			exit: c.value,
+			transition: y(a) ? { duration: .15 } : {
+				type: "spring",
+				duration: .8,
+				bounce: .35
+			},
+			style: { transformOrigin: "top center" },
+			class: "flex items-center justify-center"
+		}, {
+			default: S(() => [_(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"initial",
+			"animate",
+			"exit",
+			"transition"
+		]));
+	}
+}), O = /* @__PURE__ */ c({
+	__name: "DynamicIsland",
+	props: {
+		view: {},
+		compact: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] }
+	},
+	setup(t) {
+		let c = t, l = b(), u = v(c, "view");
+		h(T, u);
+		let d = e(), { sizer: f, target: p } = E(u), g = r(() => c.view === null && (c.compact || l.compact));
+		return (e, r) => (m(), i(y(w).div, {
+			role: "status",
+			"aria-live": "polite",
+			initial: u.value === null && {
+				width: "126px",
+				height: "37px"
+			},
+			animate: y(p),
+			transition: y(d) ? { duration: 0 } : {
+				type: "spring",
+				duration: .8,
+				bounce: .2
+			},
+			style: { borderRadius: "32px" },
+			class: "relative inline-flex items-start justify-center overflow-hidden bg-foreground text-background shadow-2xl"
+		}, {
+			default: S(() => [o("div", {
+				ref_key: "sizer",
+				ref: f,
+				class: "w-max"
+			}, [s(y(C), {
+				initial: !1,
+				mode: "popLayout",
+				as: "div",
+				class: "contents"
+			}, {
+				default: S(() => [g.value ? (m(), i(D, {
+					key: "compact",
+					class: "min-h-[37px] min-w-[126px] gap-2 px-4 py-1.5 text-xs font-medium"
+				}, {
+					default: S(() => [_(e.$slots, "compact", {}, () => [s(y(n), { node: t.compact }, null, 8, ["node"])])]),
+					_: 3
+				})) : a("", !0)]),
+				_: 3
+			}), _(e.$slots, "default")], 512)]),
+			_: 3
+		}, 8, [
+			"initial",
+			"animate",
+			"transition"
+		]));
+	}
+}), k = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "DynamicIslandView",
+	props: { id: {} },
+	setup(e) {
+		let t = e, n = l(T);
+		if (!n) throw Error("DynamicIslandView must be used inside <DynamicIsland>");
+		let o = r(() => n.value === t.id);
+		return (t, n) => (m(), i(y(C), {
+			initial: !1,
+			mode: "popLayout",
+			as: "div",
+			class: "contents"
+		}, {
+			default: S(() => [o.value ? (m(), i(D, u({ key: e.id }, t.$attrs, { class: "px-6 py-4" }), {
+				default: S(() => [_(t.$slots, "default")]),
+				_: 3
+			}, 16)) : a("", !0)]),
+			_: 3
+		}));
+	}
+});
+export { O as n, T as r, k as t };
+
+//# sourceMappingURL=dynamic-island-D_wBlujh.js.map