@orvui/vue 0.0.0-stage → 0.1.0

package/dist/expandable-control-jWQR_WG5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-control-jWQR_WG5.js","names":["$attrs","emit","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_renderSlot","_resolveDynamicComponent","_createTextVNode","_toDisplayString","_createCommentVNode","_sfc_main","$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_normalizeClass","_createTextVNode","_toDisplayString","_createElementVNode","_renderSlot","_resolveDynamicComponent","_sfc_main","useReducedMotion","cn","EXPAND_TRANSITION","ExpandableButton_default","defineComponent","__emit","props","__props","expanded","useMotionState","reduced","transition","computed","toggle","event","openBlock","createBlock","unref","motion","withCtx","createVNode","mergeProps","_ctx","renderSlot","resolveDynamicComponent","Plus","AnimatePresence","createTextVNode","toDisplayString","createCommentVNode","_hoisted_1","ExpandableChip_default","emit","trigger","ref","act","resolveElement","node","normalizeClass","createElementVNode","X"],"sources":["../src/motion/expandable-control/src/transition.ts","../src/motion/expandable-control/src/ExpandableButton.vue","../src/motion/expandable-control/src/ExpandableButton.vue","../src/motion/expandable-control/src/ExpandableChip.vue","../src/motion/expandable-control/src/ExpandableChip.vue"],"sourcesContent":["export const EXPAND_TRANSITION = { type: \"spring\" as const, stiffness: 220, damping: 17, mass: 0.85 };\n","<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { Plus } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useMotionState } from \"../../state\";\nimport { EXPAND_TRANSITION } from \"./transition\";\nconst props = withDefaults(defineProps<{\n  expanded?: boolean; defaultExpanded?: boolean; icon?: any; label?: string; disabled?: boolean; type?: \"button\" | \"submit\" | \"reset\";\n}>(), { expanded: undefined, defaultExpanded: false, label: \"Create new\", type: \"button\" });\nconst emit = defineEmits([\"update:expanded\"]);\nconst expanded = useMotionState(props, emit, \"expanded\", props.defaultExpanded), reduced = useReducedMotion();\nconst transition = computed(() => reduced.value ? { duration: 0 } : EXPAND_TRANSITION);\nfunction toggle(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) expanded.value = !expanded.value; }\n</script>\n<template>\n  <motion.span layout :transition=\"transition\" class=\"inline-flex\">\n    <motion.button v-bind=\"$attrs\" layout :type=\"type\" :aria-label=\"($attrs['aria-label'] as string) ?? label\" :aria-expanded=\"expanded\" :disabled=\"disabled\"\n      :class=\"cn('relative inline-flex h-11 min-w-11 items-center overflow-hidden rounded-full border border-border bg-transparent p-1 pr-1 text-sm font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', expanded && !disabled && 'border-primary/40', $attrs.class as string)\"\n      :style=\"{ borderRadius: '9999px' }\" @click=\"toggle\" :while-press=\"reduced || disabled ? undefined : { scale: 0.97 }\" :transition=\"transition\">\n      <motion.span layout=\"position\" class=\"grid size-9 shrink-0 place-items-center\" aria-hidden=\"true\" :transition=\"transition\"><slot name=\"icon\"><component :is=\"icon ?? Plus\" class=\"size-5\" /></slot></motion.span>\n      <AnimatePresence mode=\"popLayout\" :initial=\"false\">\n        <motion.span v-if=\"expanded\" key=\"label\" layout :initial=\"reduced ? { opacity: 0 } : { opacity: 0, filter: 'blur(4px)' }\"\n          :animate=\"reduced ? { opacity: 1 } : { opacity: 1, filter: 'blur(0px)' }\" :exit=\"reduced ? { opacity: 0 } : { opacity: 0, filter: 'blur(4px)' }\"\n          :transition=\"transition\" class=\"relative inline-flex w-max items-center whitespace-nowrap pr-3\" aria-hidden=\"true\"><slot>{{ label }}</slot></motion.span>\n      </AnimatePresence>\n    </motion.button>\n  </motion.span>\n</template>\n","<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { Plus } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useMotionState } from \"../../state\";\nimport { EXPAND_TRANSITION } from \"./transition\";\nconst props = withDefaults(defineProps<{\n  expanded?: boolean; defaultExpanded?: boolean; icon?: any; label?: string; disabled?: boolean; type?: \"button\" | \"submit\" | \"reset\";\n}>(), { expanded: undefined, defaultExpanded: false, label: \"Create new\", type: \"button\" });\nconst emit = defineEmits([\"update:expanded\"]);\nconst expanded = useMotionState(props, emit, \"expanded\", props.defaultExpanded), reduced = useReducedMotion();\nconst transition = computed(() => reduced.value ? { duration: 0 } : EXPAND_TRANSITION);\nfunction toggle(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) expanded.value = !expanded.value; }\n</script>\n<template>\n  <motion.span layout :transition=\"transition\" class=\"inline-flex\">\n    <motion.button v-bind=\"$attrs\" layout :type=\"type\" :aria-label=\"($attrs['aria-label'] as string) ?? label\" :aria-expanded=\"expanded\" :disabled=\"disabled\"\n      :class=\"cn('relative inline-flex h-11 min-w-11 items-center overflow-hidden rounded-full border border-border bg-transparent p-1 pr-1 text-sm font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', expanded && !disabled && 'border-primary/40', $attrs.class as string)\"\n      :style=\"{ borderRadius: '9999px' }\" @click=\"toggle\" :while-press=\"reduced || disabled ? undefined : { scale: 0.97 }\" :transition=\"transition\">\n      <motion.span layout=\"position\" class=\"grid size-9 shrink-0 place-items-center\" aria-hidden=\"true\" :transition=\"transition\"><slot name=\"icon\"><component :is=\"icon ?? Plus\" class=\"size-5\" /></slot></motion.span>\n      <AnimatePresence mode=\"popLayout\" :initial=\"false\">\n        <motion.span v-if=\"expanded\" key=\"label\" layout :initial=\"reduced ? { opacity: 0 } : { opacity: 0, filter: 'blur(4px)' }\"\n          :animate=\"reduced ? { opacity: 1 } : { opacity: 1, filter: 'blur(0px)' }\" :exit=\"reduced ? { opacity: 0 } : { opacity: 0, filter: 'blur(4px)' }\"\n          :transition=\"transition\" class=\"relative inline-flex w-max items-center whitespace-nowrap pr-3\" aria-hidden=\"true\"><slot>{{ label }}</slot></motion.span>\n      </AnimatePresence>\n    </motion.button>\n  </motion.span>\n</template>\n","<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { X } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { resolveElement, useReducedMotion } from \"../../../lib/composables\";\nimport { useMotionState } from \"../../state\";\nimport { EXPAND_TRANSITION } from \"./transition\";\nconst props = withDefaults(defineProps<{\n  expanded?: boolean; defaultExpanded?: boolean; label: string; actionIcon?: any; actionLabel?: string;\n  collapseOnAction?: boolean; disabled?: boolean; labelClassName?: string; actionClassName?: string;\n}>(), { expanded: undefined, defaultExpanded: false, actionLabel: \"Remove\", collapseOnAction: true });\nconst emit = defineEmits([\"update:expanded\", \"action\"]);\nconst expanded = useMotionState(props, emit, \"expanded\", props.defaultExpanded), reduced = useReducedMotion();\nconst trigger = ref<HTMLButtonElement | null>(null);\nconst transition = computed(() => reduced.value ? { duration: 0 } : EXPAND_TRANSITION);\nfunction toggle(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) expanded.value = !expanded.value; }\nfunction act(event: MouseEvent) {\n  if (props.disabled || !expanded.value || event.defaultPrevented) return;\n  emit(\"action\");\n  if (props.collapseOnAction) { expanded.value = false; trigger.value?.focus(); }\n}\n</script>\n<template>\n  <motion.span layout :transition=\"transition\" class=\"inline-flex\">\n    <motion.div v-bind=\"$attrs\" layout :transition=\"transition\" :style=\"{ borderRadius: '9999px' }\"\n      :class=\"cn('inline-flex h-10 items-center overflow-hidden rounded-full border border-border bg-transparent text-sm text-foreground has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring', expanded && !disabled && 'border-primary/40', $attrs.class as string)\">\n      <motion.button layout=\"position\" :ref=\"node => trigger = resolveElement<HTMLButtonElement>(node)\" type=\"button\" :aria-expanded=\"expanded\" :disabled=\"disabled\"\n        :class=\"cn('h-full whitespace-nowrap py-0 pl-3 font-medium outline-none disabled:pointer-events-none disabled:opacity-50', expanded ? 'pr-1' : 'pr-3', labelClassName)\" @click=\"toggle\" :transition=\"transition\">{{ label }}</motion.button>\n      <motion.span :class=\"cn('relative inline-flex h-10 shrink-0 items-center overflow-hidden', expanded ? 'w-8' : 'w-0')\" :aria-hidden=\"!expanded\" :initial=\"false\"\n        :animate=\"reduced ? { opacity: expanded ? 1 : 0 } : { opacity: expanded ? 1 : 0, filter: expanded ? 'blur(0px)' : 'blur(4px)' }\" :transition=\"transition\">\n        <motion.button type=\"button\" :aria-label=\"actionLabel\" :disabled=\"disabled || !expanded\"\n          :class=\"cn('flex h-10 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground disabled:pointer-events-none', disabled && 'opacity-50', actionClassName)\"\n          @click=\"act\" :while-press=\"reduced || disabled ? undefined : { scale: 0.97 }\" :transition=\"transition\">\n          <span aria-hidden=\"true\"><slot name=\"actionIcon\"><component :is=\"actionIcon ?? X\" class=\"size-3.5\" /></slot></span>\n        </motion.button>\n      </motion.span>\n    </motion.div>\n  </motion.span>\n</template>\n","<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { X } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { resolveElement, useReducedMotion } from \"../../../lib/composables\";\nimport { useMotionState } from \"../../state\";\nimport { EXPAND_TRANSITION } from \"./transition\";\nconst props = withDefaults(defineProps<{\n  expanded?: boolean; defaultExpanded?: boolean; label: string; actionIcon?: any; actionLabel?: string;\n  collapseOnAction?: boolean; disabled?: boolean; labelClassName?: string; actionClassName?: string;\n}>(), { expanded: undefined, defaultExpanded: false, actionLabel: \"Remove\", collapseOnAction: true });\nconst emit = defineEmits([\"update:expanded\", \"action\"]);\nconst expanded = useMotionState(props, emit, \"expanded\", props.defaultExpanded), reduced = useReducedMotion();\nconst trigger = ref<HTMLButtonElement | null>(null);\nconst transition = computed(() => reduced.value ? { duration: 0 } : EXPAND_TRANSITION);\nfunction toggle(event: MouseEvent) { if (!props.disabled && !event.defaultPrevented) expanded.value = !expanded.value; }\nfunction act(event: MouseEvent) {\n  if (props.disabled || !expanded.value || event.defaultPrevented) return;\n  emit(\"action\");\n  if (props.collapseOnAction) { expanded.value = false; trigger.value?.focus(); }\n}\n</script>\n<template>\n  <motion.span layout :transition=\"transition\" class=\"inline-flex\">\n    <motion.div v-bind=\"$attrs\" layout :transition=\"transition\" :style=\"{ borderRadius: '9999px' }\"\n      :class=\"cn('inline-flex h-10 items-center overflow-hidden rounded-full border border-border bg-transparent text-sm text-foreground has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring', expanded && !disabled && 'border-primary/40', $attrs.class as string)\">\n      <motion.button layout=\"position\" :ref=\"node => trigger = resolveElement<HTMLButtonElement>(node)\" type=\"button\" :aria-expanded=\"expanded\" :disabled=\"disabled\"\n        :class=\"cn('h-full whitespace-nowrap py-0 pl-3 font-medium outline-none disabled:pointer-events-none disabled:opacity-50', expanded ? 'pr-1' : 'pr-3', labelClassName)\" @click=\"toggle\" :transition=\"transition\">{{ label }}</motion.button>\n      <motion.span :class=\"cn('relative inline-flex h-10 shrink-0 items-center overflow-hidden', expanded ? 'w-8' : 'w-0')\" :aria-hidden=\"!expanded\" :initial=\"false\"\n        :animate=\"reduced ? { opacity: expanded ? 1 : 0 } : { opacity: expanded ? 1 : 0, filter: expanded ? 'blur(0px)' : 'blur(4px)' }\" :transition=\"transition\">\n        <motion.button type=\"button\" :aria-label=\"actionLabel\" :disabled=\"disabled || !expanded\"\n          :class=\"cn('flex h-10 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground disabled:pointer-events-none', disabled && 'opacity-50', actionClassName)\"\n          @click=\"act\" :while-press=\"reduced || disabled ? undefined : { scale: 0.97 }\" :transition=\"transition\">\n          <span aria-hidden=\"true\"><slot name=\"actionIcon\"><component :is=\"actionIcon ?? X\" class=\"size-3.5\" /></slot></span>\n        </motion.button>\n      </motion.span>\n    </motion.div>\n  </motion.span>\n</template>\n"],"mappings":"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"}

package/dist/expandable-tabs-D9b-6Mxy.js

@@ -0,0 +1,290 @@
+import { s as e, t } from "./composables-BJ1sih_H.js";
+import { r as n } from "./ease-rIvCM4O3.js";
+import { t as r } from "./utils-DIrLOK2M.js";
+import { t as i } from "./dismiss-Db0RZCUY.js";
+import { n as a, r as o, t as s } from "./shared-DAEawhBJ.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, mergeProps as _, nextTick as v, normalizeClass as y, onBeforeUnmount as b, onMounted as x, onUpdated as S, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, toRef as O, unref as k, useId as A, watch as j, withCtx as M } from "vue";
+import { AnimatePresence as N, motion as P } from "motion-v";
+// src/blocks/expandable-tabs/src/use-tab-measurements.ts
+function F(e, n) {
+	let r = w(null), i = w({}), a = /* @__PURE__ */ new Map(), o, s = /* @__PURE__ */ new Set(), c = !1, l = !1;
+	function u() {
+		if (!c) return;
+		if (n.value) {
+			let e = n.value.offsetWidth, t = n.value.offsetHeight;
+			(r.value?.width !== e || r.value?.height !== t) && (r.value = {
+				width: e,
+				height: t
+			});
+		}
+		let t = {};
+		for (let n of e.value) {
+			let e = a.get(n.id);
+			e && (t[n.id] = Math.ceil(e.offsetWidth));
+		}
+		let o = Object.keys(t);
+		(o.length !== Object.keys(i.value).length || o.some((e) => i.value[e] !== t[e])) && (i.value = t);
+	}
+	function d() {
+		if (!c) return;
+		let e = new Set(a.values());
+		n.value && e.add(n.value);
+		for (let t of s) e.has(t) || (o?.unobserve(t), s.delete(t));
+		for (let t of e) s.has(t) || (o?.observe(t), s.add(t));
+		u();
+	}
+	function f() {
+		c && !l && (l = !0, v(() => {
+			l = !1, d();
+		}));
+	}
+	function p(e, n) {
+		let r = t(n);
+		r ? a.set(e, r) : a.delete(e), f();
+	}
+	return j(e, f, { deep: !0 }), S(f), x(() => {
+		c = !0, typeof ResizeObserver < "u" && (o = new ResizeObserver(u)), d(), document.fonts?.ready.then(f);
+	}), b(() => {
+		c = !1, o?.disconnect(), s.clear(), a.clear();
+	}), {
+		size: r,
+		widths: i,
+		setLabel: p
+	};
+}
+// src/blocks/expandable-tabs/src/ExpandableTabs.vue?vue&type=script&setup=true&lang.ts
+var I = {
+	"aria-hidden": "true",
+	class: "pointer-events-none fixed left-0 top-0 -z-10 flex opacity-0"
+}, L = /* @__PURE__ */ g({
+	inheritAttrs: !1,
+	__name: "ExpandableTabs",
+	props: {
+		items: {},
+		modelValue: {},
+		defaultValue: { default: null },
+		classNames: {}
+	},
+	emits: ["update:modelValue", "valueChange"],
+	setup(t, { emit: g }) {
+		let v = t, b = g, x = o(() => v.modelValue, v.defaultValue, (e) => {
+			b("update:modelValue", e), b("valueChange", e);
+		}), S = l(() => v.items.find((e) => e.id === x.value) ?? null), j = e(), L = A(), R = w(), z = w(), { size: B, widths: V, setLabel: H } = F(O(v, "items"), z), U = l(() => ({
+			width: v.items.length * 32 + Math.max(0, v.items.length - 1) * 4 + 18,
+			height: 54
+		})), W = l(() => {
+			let e = S.value && B.value ? B.value : null;
+			return {
+				width: `${e ? Math.max(e.width + 2, U.value.width) : U.value.width}px`,
+				height: `${e ? Math.max(e.height + 2, U.value.height) : U.value.height}px`
+			};
+		}), G = l(() => j.value ? {
+			enter: {
+				opacity: 0,
+				filter: "blur(0px)"
+			},
+			center: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(0px)",
+				transition: {
+					duration: .08,
+					ease: n
+				}
+			}
+		} : {
+			enter: {
+				y: -8,
+				scale: .98,
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			center: {
+				y: 0,
+				scale: 1,
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				y: -6,
+				scale: .98,
+				opacity: 0,
+				filter: "blur(4px)",
+				transition: {
+					duration: .08,
+					ease: n
+				}
+			}
+		}), K = (e) => S.value?.id === e.id;
+		function q(e) {
+			x.value = K(e) ? null : e.id;
+		}
+		function J(e) {
+			let t = K(e);
+			return {
+				width: `${t ? V.value[e.id] ?? 0 : 0}px`,
+				opacity: +!!t,
+				marginLeft: `${t ? 7 : 0}px`,
+				filter: j.value || t ? "blur(0px)" : "blur(3px)"
+			};
+		}
+		return i(l(() => S.value !== null), R, () => {
+			x.value = null;
+		}), (e, i) => (C(), f(c, null, [h(k(P).div, _({
+			ref_key: "root",
+			ref: R
+		}, e.$attrs, {
+			initial: W.value,
+			animate: W.value,
+			transition: k(j) ? { duration: 0 } : {
+				type: "spring",
+				duration: .58,
+				bounce: .06
+			},
+			style: {
+				transformOrigin: "bottom center",
+				width: U.value.width + "px",
+				height: U.value.height + "px"
+			},
+			class: k(r)("relative overflow-hidden rounded-[26px] border border-border bg-card", t.classNames?.root)
+		}), {
+			default: M(() => [
+				p("div", {
+					ref_key: "sizer",
+					ref: z,
+					"aria-hidden": "true",
+					class: y(k(r)("pointer-events-none invisible absolute left-0 top-0 grid w-max px-2 pt-2", t.classNames?.panel)),
+					style: { paddingBottom: "56px" }
+				}, [(C(!0), f(c, null, T(t.items, (t) => (C(), f("div", {
+					key: t.id,
+					class: "col-start-1 row-start-1 w-max"
+				}, [E(e.$slots, "content", { item: t }, () => [h(k(s), { node: t.content }, null, 8, ["node"])])]))), 128))], 2),
+				p("div", {
+					class: y(k(r)("absolute left-0 right-0 top-0 z-10 overflow-hidden px-2 pt-2", t.classNames?.panel)),
+					style: { bottom: "56px" }
+				}, [h(k(N), {
+					initial: !1,
+					mode: "popLayout",
+					as: "div",
+					class: "contents"
+				}, {
+					default: M(() => [S.value ? (C(), u(k(P).div, {
+						key: S.value.id,
+						id: k(L) + "-panel",
+						role: "tabpanel",
+						"aria-labelledby": k(L) + "-" + S.value.id,
+						variants: G.value,
+						initial: "enter",
+						animate: "center",
+						exit: "exit",
+						transition: k(j) ? {
+							duration: .15,
+							ease: k(n)
+						} : {
+							type: "spring",
+							duration: .46,
+							bounce: .08
+						},
+						class: "w-max",
+						style: {
+							transformOrigin: "top center",
+							willChange: "transform, opacity, filter"
+						}
+					}, {
+						default: M(() => [E(e.$slots, "content", { item: S.value }, () => [h(k(s), { node: S.value.content }, null, 8, ["node"])])]),
+						_: 3
+					}, 8, [
+						"id",
+						"aria-labelledby",
+						"variants",
+						"transition"
+					])) : d("", !0)]),
+					_: 3
+				})], 2),
+				p("div", {
+					role: "tablist",
+					"aria-label": "Navigation tabs",
+					"aria-orientation": "horizontal",
+					style: { height: "52px" },
+					class: y(k(r)("absolute bottom-0 left-0 z-20 flex w-full items-center justify-between gap-1 p-2", t.classNames?.bar)),
+					onKeydown: i[0] ||= (e) => k(a)(e, e.currentTarget)
+				}, [(C(!0), f(c, null, T(t.items, (e) => (C(), u(k(P).button, {
+					key: e.id,
+					id: k(L) + "-" + e.id,
+					type: "button",
+					role: "tab",
+					"aria-selected": K(e),
+					"aria-label": e.label,
+					"aria-controls": k(L) + "-panel",
+					layout: !k(j) && "position",
+					animate: { width: (K(e) ? Math.max(32, 49 + (k(V)[e.id] ?? 0)) : 32) + "px" },
+					transition: k(j) ? { duration: 0 } : {
+						type: "spring",
+						duration: .46,
+						bounce: .04
+					},
+					class: y(k(r)("relative isolate flex h-9 min-w-8 shrink-0 items-center justify-center overflow-hidden rounded-[18px] px-2 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", K(e) && "min-w-0 justify-start pl-2.5 pr-4", K(e) ? "text-foreground" : "text-muted-foreground hover:text-foreground", t.classNames?.tab, K(e) && t.classNames?.activeTab)),
+					onClick: (t) => q(e)
+				}, {
+					default: M(() => [
+						K(e) ? (C(), f("span", {
+							key: 0,
+							class: y(k(r)("absolute inset-0 -z-10 rounded-[18px] bg-foreground/10", t.classNames?.pill))
+						}, null, 2)) : d("", !0),
+						p("span", { class: y(k(r)("grid shrink-0 place-items-center [&_svg]:size-4", t.classNames?.icon)) }, [h(k(s), { node: e.icon }, null, 8, ["node"])], 2),
+						h(k(P).span, {
+							"aria-hidden": "true",
+							initial: !1,
+							animate: J(e),
+							transition: k(j) ? { duration: 0 } : K(e) ? {
+								type: "spring",
+								duration: .38,
+								bounce: .03
+							} : {
+								duration: .16,
+								ease: k(n)
+							},
+							class: y(k(r)("inline-block overflow-hidden whitespace-nowrap", t.classNames?.label))
+						}, {
+							default: M(() => [m(D(e.label), 1)]),
+							_: 2
+						}, 1032, [
+							"animate",
+							"transition",
+							"class"
+						])
+					]),
+					_: 2
+				}, 1032, [
+					"id",
+					"aria-selected",
+					"aria-label",
+					"aria-controls",
+					"layout",
+					"animate",
+					"transition",
+					"class",
+					"onClick"
+				]))), 128))], 34)
+			]),
+			_: 3
+		}, 16, [
+			"initial",
+			"animate",
+			"transition",
+			"style",
+			"class"
+		]), p("div", I, [(C(!0), f(c, null, T(t.items, (e) => (C(), f("span", {
+			key: e.id,
+			ref_for: !0,
+			ref: (t) => k(H)(e.id, t),
+			class: y(k(r)("whitespace-nowrap text-sm font-medium leading-none", t.classNames?.label))
+		}, D(e.label), 3))), 128))])], 64));
+	}
+});
+export { L as t };
+
+//# sourceMappingURL=expandable-tabs-D9b-6Mxy.js.map

package/dist/expandable-tabs-D9b-6Mxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-tabs-D9b-6Mxy.js","names":["$attrs","_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_mergeProps","_withCtx","_createElementVNode","_normalizeClass","_renderList","_renderSlot","_createBlock","_createCommentVNode","_createTextVNode","_toDisplayString","_sfc_main","useReducedMotion","EASE_OUT","cn","useBlockDismiss","rove","useControllable","RenderNode","useTabMeasurements","size","ref","widths","labels","observer","observed","live","scheduled","measure","panel","width","height","next","item","items","label","keys","key","refresh","wanted","element","schedule","nextTick","setLabel","resolveElement","node","id","watch","onUpdated","onMounted","onBeforeUnmount","_hoisted_1","ExpandableTabs_default","defineComponent","__emit","props","__props","emit","selection","value","active","computed","reduce","useId","root","sizer","toRef","closed","dimensions","measured","variants","isActive","toggle","labelMotion","expanded","openBlock","createElementBlock","Fragment","createVNode","unref","motion","mergeProps","_ctx","withCtx","createElementVNode","normalizeClass","renderList","renderSlot","AnimatePresence","createBlock","createCommentVNode","_cache","$event","createTextVNode","toDisplayString"],"sources":["../src/blocks/expandable-tabs/src/use-tab-measurements.ts","../src/blocks/expandable-tabs/src/ExpandableTabs.vue","../src/blocks/expandable-tabs/src/ExpandableTabs.vue"],"sourcesContent":["import {\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  watch,\n  type ComponentPublicInstance,\n  type Ref,\n} from \"vue\";\nimport { resolveElement } from \"../../../lib/composables\";\n\nexport function useTabMeasurements(\n  items: Ref<readonly { id: string }[]>,\n  panel: Ref<HTMLDivElement | undefined>,\n) {\n  const size = ref<{ width: number; height: number } | null>(null);\n  const widths = ref<Record<string, number>>({});\n  const labels = new Map<string, HTMLSpanElement>();\n  let observer: ResizeObserver | undefined;\n  const observed = new Set<Element>();\n  let live = false;\n  let scheduled = false;\n  function measure() {\n    if (!live) return;\n    if (panel.value) {\n      const width = panel.value.offsetWidth,\n        height = panel.value.offsetHeight;\n      if (size.value?.width !== width || size.value?.height !== height)\n        size.value = { width, height };\n    }\n    const next: Record<string, number> = {};\n    for (const item of items.value) {\n      const label = labels.get(item.id);\n      if (label) next[item.id] = Math.ceil(label.offsetWidth);\n    }\n    const keys = Object.keys(next);\n    if (\n      keys.length !== Object.keys(widths.value).length ||\n      keys.some((key) => widths.value[key] !== next[key])\n    )\n      widths.value = next;\n  }\n  function refresh() {\n    if (!live) return;\n    const wanted = new Set<Element>(labels.values());\n    if (panel.value) wanted.add(panel.value);\n    for (const element of observed)\n      if (!wanted.has(element)) {\n        observer?.unobserve(element);\n        observed.delete(element);\n      }\n    for (const element of wanted)\n      if (!observed.has(element)) {\n        observer?.observe(element);\n        observed.add(element);\n      }\n    measure();\n  }\n  function schedule() {\n    if (!live || scheduled) return;\n    scheduled = true;\n    void nextTick(() => {\n      scheduled = false;\n      refresh();\n    });\n  }\n  function setLabel(\n    id: string,\n    node: Element | ComponentPublicInstance | null,\n  ) {\n    const element = resolveElement<HTMLSpanElement>(node);\n    if (element) labels.set(id, element);\n    else labels.delete(id);\n    schedule();\n  }\n  watch(items, schedule, { deep: true });\n  onUpdated(schedule);\n  onMounted(() => {\n    live = true;\n    if (typeof ResizeObserver !== \"undefined\")\n      observer = new ResizeObserver(measure);\n    refresh();\n    void document.fonts?.ready.then(schedule);\n  });\n  onBeforeUnmount(() => {\n    live = false;\n    observer?.disconnect();\n    observed.clear();\n    labels.clear();\n  });\n  return { size, widths, setLabel };\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, toRef, useId } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { RenderNode, useControllable, rove, type Content } from \"../../shared\";\nimport { useBlockDismiss } from \"../../dismiss\";\nimport { useTabMeasurements } from \"./use-tab-measurements\";\nimport type { ExpandableTabsClassNames } from \"./source-types\";\nexport interface ExpandableTabsItem {\n  id: string;\n  label: string;\n  icon: Content;\n  content: Content;\n}\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(\n  defineProps<{\n    items: ExpandableTabsItem[];\n    modelValue?: string | null;\n    defaultValue?: string | null;\n    classNames?: ExpandableTabsClassNames;\n  }>(),\n  { defaultValue: null },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string | null];\n  valueChange: [value: string | null];\n}>();\nconst selection = useControllable(\n  () => props.modelValue,\n  props.defaultValue,\n  (value) => {\n    emit(\"update:modelValue\", value);\n    emit(\"valueChange\", value);\n  },\n);\nconst active = computed(\n  () => props.items.find((item) => item.id === selection.value) ?? null,\n);\nconst reduce = useReducedMotion();\nconst id = useId();\nconst root = ref();\nconst sizer = ref<HTMLDivElement>();\nconst { size, widths, setLabel } = useTabMeasurements(\n  toRef(props, \"items\"),\n  sizer,\n);\nconst closed = computed(() => ({\n  width: props.items.length * 32 + Math.max(0, props.items.length - 1) * 4 + 18,\n  height: 54,\n}));\nconst dimensions = computed(() => {\n  const measured = active.value && size.value ? size.value : null;\n  return {\n    width: `${measured ? Math.max(measured.width + 2, closed.value.width) : closed.value.width}px`,\n    height: `${measured ? Math.max(measured.height + 2, closed.value.height) : closed.value.height}px`,\n  };\n});\nconst variants = computed(() =>\n  reduce.value\n    ? {\n        enter: { opacity: 0, filter: \"blur(0px)\" },\n        center: { opacity: 1, filter: \"blur(0px)\" },\n        exit: {\n          opacity: 0,\n          filter: \"blur(0px)\",\n          transition: { duration: 0.08, ease: EASE_OUT },\n        },\n      }\n    : {\n        enter: { y: -8, scale: 0.98, opacity: 0, filter: \"blur(4px)\" },\n        center: { y: 0, scale: 1, opacity: 1, filter: \"blur(0px)\" },\n        exit: {\n          y: -6,\n          scale: 0.98,\n          opacity: 0,\n          filter: \"blur(4px)\",\n          transition: { duration: 0.08, ease: EASE_OUT },\n        },\n      },\n);\nconst isActive = (item: ExpandableTabsItem) => active.value?.id === item.id;\nfunction toggle(item: ExpandableTabsItem) {\n  selection.value = isActive(item) ? null : item.id;\n}\nfunction labelMotion(item: ExpandableTabsItem) {\n  const expanded = isActive(item);\n  return {\n    width: `${expanded ? (widths.value[item.id] ?? 0) : 0}px`,\n    opacity: expanded ? 1 : 0,\n    marginLeft: `${expanded ? 7 : 0}px`,\n    filter: reduce.value || expanded ? \"blur(0px)\" : \"blur(3px)\",\n  };\n}\nuseBlockDismiss(\n  computed(() => active.value !== null),\n  root,\n  () => {\n    selection.value = null;\n  },\n);\n</script>\n\n<template>\n  <motion.div\n    ref=\"root\"\n    v-bind=\"$attrs\"\n    :initial=\"dimensions\"\n    :animate=\"dimensions\"\n    :transition=\"\n      reduce\n        ? { duration: 0 }\n        : { type: 'spring', duration: 0.58, bounce: 0.06 }\n    \"\n    :style=\"{\n      transformOrigin: 'bottom center',\n      width: closed.width + 'px',\n      height: closed.height + 'px',\n    }\"\n    :class=\"\n      cn(\n        'relative overflow-hidden rounded-[26px] border border-border bg-card',\n        classNames?.root,\n      )\n    \"\n  >\n    <div\n      ref=\"sizer\"\n      aria-hidden=\"true\"\n      :class=\"\n        cn(\n          'pointer-events-none invisible absolute left-0 top-0 grid w-max px-2 pt-2',\n          classNames?.panel,\n        )\n      \"\n      :style=\"{ paddingBottom: '56px' }\"\n    >\n      <div\n        v-for=\"item in items\"\n        :key=\"item.id\"\n        class=\"col-start-1 row-start-1 w-max\"\n      >\n        <slot name=\"content\" :item=\"item\"\n          ><RenderNode :node=\"item.content\"\n        /></slot>\n      </div>\n    </div>\n    <div\n      :class=\"\n        cn(\n          'absolute left-0 right-0 top-0 z-10 overflow-hidden px-2 pt-2',\n          classNames?.panel,\n        )\n      \"\n      :style=\"{ bottom: '56px' }\"\n    >\n      <AnimatePresence\n        :initial=\"false\"\n        mode=\"popLayout\"\n        as=\"div\"\n        class=\"contents\"\n      >\n        <motion.div\n          v-if=\"active\"\n          :key=\"active.id\"\n          :id=\"id + '-panel'\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"id + '-' + active.id\"\n          :variants=\"variants\"\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          :transition=\"\n            reduce\n              ? { duration: 0.15, ease: EASE_OUT }\n              : { type: 'spring', duration: 0.46, bounce: 0.08 }\n          \"\n          class=\"w-max\"\n          :style=\"{\n            transformOrigin: 'top center',\n            willChange: 'transform, opacity, filter',\n          }\"\n          ><slot name=\"content\" :item=\"active\"\n            ><RenderNode :node=\"active.content\" /></slot\n        ></motion.div>\n      </AnimatePresence>\n    </div>\n    <div\n      role=\"tablist\"\n      aria-label=\"Navigation tabs\"\n      aria-orientation=\"horizontal\"\n      :style=\"{ height: '52px' }\"\n      :class=\"\n        cn(\n          'absolute bottom-0 left-0 z-20 flex w-full items-center justify-between gap-1 p-2',\n          classNames?.bar,\n        )\n      \"\n      @keydown=\"rove($event, $event.currentTarget as HTMLElement)\"\n    >\n      <motion.button\n        v-for=\"item in items\"\n        :key=\"item.id\"\n        :id=\"id + '-' + item.id\"\n        type=\"button\"\n        role=\"tab\"\n        :aria-selected=\"isActive(item)\"\n        :aria-label=\"item.label\"\n        :aria-controls=\"id + '-panel'\"\n        :layout=\"reduce ? false : 'position'\"\n        :animate=\"{\n          width:\n            (isActive(item) ? Math.max(32, 49 + (widths[item.id] ?? 0)) : 32) +\n            'px',\n        }\"\n        :transition=\"\n          reduce\n            ? { duration: 0 }\n            : { type: 'spring', duration: 0.46, bounce: 0.04 }\n        \"\n        :class=\"\n          cn(\n            'relative isolate flex h-9 min-w-8 shrink-0 items-center justify-center overflow-hidden rounded-[18px] px-2 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n            isActive(item) && 'min-w-0 justify-start pl-2.5 pr-4',\n            isActive(item)\n              ? 'text-foreground'\n              : 'text-muted-foreground hover:text-foreground',\n            classNames?.tab,\n            isActive(item) && classNames?.activeTab,\n          )\n        \"\n        @click=\"toggle(item)\"\n      >\n        <span\n          v-if=\"isActive(item)\"\n          :class=\"\n            cn(\n              'absolute inset-0 -z-10 rounded-[18px] bg-foreground/10',\n              classNames?.pill,\n            )\n          \"\n        />\n        <span\n          :class=\"\n            cn(\n              'grid shrink-0 place-items-center [&_svg]:size-4',\n              classNames?.icon,\n            )\n          \"\n          ><RenderNode :node=\"item.icon\"\n        /></span>\n        <motion.span\n          aria-hidden=\"true\"\n          :initial=\"false\"\n          :animate=\"labelMotion(item)\"\n          :transition=\"\n            reduce\n              ? { duration: 0 }\n              : isActive(item)\n                ? { type: 'spring', duration: 0.38, bounce: 0.03 }\n                : { duration: 0.16, ease: EASE_OUT }\n          \"\n          :class=\"\n            cn(\n              'inline-block overflow-hidden whitespace-nowrap',\n              classNames?.label,\n            )\n          \"\n          >{{ item.label }}</motion.span\n        >\n      </motion.button>\n    </div>\n  </motion.div>\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none fixed left-0 top-0 -z-10 flex opacity-0\"\n  >\n    <span\n      v-for=\"item in items\"\n      :key=\"item.id\"\n      :ref=\"(node) => setLabel(item.id, node)\"\n      :class=\"\n        cn(\n          'whitespace-nowrap text-sm font-medium leading-none',\n          classNames?.label,\n        )\n      \"\n      >{{ item.label }}</span\n    >\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, toRef, useId } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { RenderNode, useControllable, rove, type Content } from \"../../shared\";\nimport { useBlockDismiss } from \"../../dismiss\";\nimport { useTabMeasurements } from \"./use-tab-measurements\";\nimport type { ExpandableTabsClassNames } from \"./source-types\";\nexport interface ExpandableTabsItem {\n  id: string;\n  label: string;\n  icon: Content;\n  content: Content;\n}\ndefineOptions({ inheritAttrs: false });\nconst props = withDefaults(\n  defineProps<{\n    items: ExpandableTabsItem[];\n    modelValue?: string | null;\n    defaultValue?: string | null;\n    classNames?: ExpandableTabsClassNames;\n  }>(),\n  { defaultValue: null },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string | null];\n  valueChange: [value: string | null];\n}>();\nconst selection = useControllable(\n  () => props.modelValue,\n  props.defaultValue,\n  (value) => {\n    emit(\"update:modelValue\", value);\n    emit(\"valueChange\", value);\n  },\n);\nconst active = computed(\n  () => props.items.find((item) => item.id === selection.value) ?? null,\n);\nconst reduce = useReducedMotion();\nconst id = useId();\nconst root = ref();\nconst sizer = ref<HTMLDivElement>();\nconst { size, widths, setLabel } = useTabMeasurements(\n  toRef(props, \"items\"),\n  sizer,\n);\nconst closed = computed(() => ({\n  width: props.items.length * 32 + Math.max(0, props.items.length - 1) * 4 + 18,\n  height: 54,\n}));\nconst dimensions = computed(() => {\n  const measured = active.value && size.value ? size.value : null;\n  return {\n    width: `${measured ? Math.max(measured.width + 2, closed.value.width) : closed.value.width}px`,\n    height: `${measured ? Math.max(measured.height + 2, closed.value.height) : closed.value.height}px`,\n  };\n});\nconst variants = computed(() =>\n  reduce.value\n    ? {\n        enter: { opacity: 0, filter: \"blur(0px)\" },\n        center: { opacity: 1, filter: \"blur(0px)\" },\n        exit: {\n          opacity: 0,\n          filter: \"blur(0px)\",\n          transition: { duration: 0.08, ease: EASE_OUT },\n        },\n      }\n    : {\n        enter: { y: -8, scale: 0.98, opacity: 0, filter: \"blur(4px)\" },\n        center: { y: 0, scale: 1, opacity: 1, filter: \"blur(0px)\" },\n        exit: {\n          y: -6,\n          scale: 0.98,\n          opacity: 0,\n          filter: \"blur(4px)\",\n          transition: { duration: 0.08, ease: EASE_OUT },\n        },\n      },\n);\nconst isActive = (item: ExpandableTabsItem) => active.value?.id === item.id;\nfunction toggle(item: ExpandableTabsItem) {\n  selection.value = isActive(item) ? null : item.id;\n}\nfunction labelMotion(item: ExpandableTabsItem) {\n  const expanded = isActive(item);\n  return {\n    width: `${expanded ? (widths.value[item.id] ?? 0) : 0}px`,\n    opacity: expanded ? 1 : 0,\n    marginLeft: `${expanded ? 7 : 0}px`,\n    filter: reduce.value || expanded ? \"blur(0px)\" : \"blur(3px)\",\n  };\n}\nuseBlockDismiss(\n  computed(() => active.value !== null),\n  root,\n  () => {\n    selection.value = null;\n  },\n);\n</script>\n\n<template>\n  <motion.div\n    ref=\"root\"\n    v-bind=\"$attrs\"\n    :initial=\"dimensions\"\n    :animate=\"dimensions\"\n    :transition=\"\n      reduce\n        ? { duration: 0 }\n        : { type: 'spring', duration: 0.58, bounce: 0.06 }\n    \"\n    :style=\"{\n      transformOrigin: 'bottom center',\n      width: closed.width + 'px',\n      height: closed.height + 'px',\n    }\"\n    :class=\"\n      cn(\n        'relative overflow-hidden rounded-[26px] border border-border bg-card',\n        classNames?.root,\n      )\n    \"\n  >\n    <div\n      ref=\"sizer\"\n      aria-hidden=\"true\"\n      :class=\"\n        cn(\n          'pointer-events-none invisible absolute left-0 top-0 grid w-max px-2 pt-2',\n          classNames?.panel,\n        )\n      \"\n      :style=\"{ paddingBottom: '56px' }\"\n    >\n      <div\n        v-for=\"item in items\"\n        :key=\"item.id\"\n        class=\"col-start-1 row-start-1 w-max\"\n      >\n        <slot name=\"content\" :item=\"item\"\n          ><RenderNode :node=\"item.content\"\n        /></slot>\n      </div>\n    </div>\n    <div\n      :class=\"\n        cn(\n          'absolute left-0 right-0 top-0 z-10 overflow-hidden px-2 pt-2',\n          classNames?.panel,\n        )\n      \"\n      :style=\"{ bottom: '56px' }\"\n    >\n      <AnimatePresence\n        :initial=\"false\"\n        mode=\"popLayout\"\n        as=\"div\"\n        class=\"contents\"\n      >\n        <motion.div\n          v-if=\"active\"\n          :key=\"active.id\"\n          :id=\"id + '-panel'\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"id + '-' + active.id\"\n          :variants=\"variants\"\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          :transition=\"\n            reduce\n              ? { duration: 0.15, ease: EASE_OUT }\n              : { type: 'spring', duration: 0.46, bounce: 0.08 }\n          \"\n          class=\"w-max\"\n          :style=\"{\n            transformOrigin: 'top center',\n            willChange: 'transform, opacity, filter',\n          }\"\n          ><slot name=\"content\" :item=\"active\"\n            ><RenderNode :node=\"active.content\" /></slot\n        ></motion.div>\n      </AnimatePresence>\n    </div>\n    <div\n      role=\"tablist\"\n      aria-label=\"Navigation tabs\"\n      aria-orientation=\"horizontal\"\n      :style=\"{ height: '52px' }\"\n      :class=\"\n        cn(\n          'absolute bottom-0 left-0 z-20 flex w-full items-center justify-between gap-1 p-2',\n          classNames?.bar,\n        )\n      \"\n      @keydown=\"rove($event, $event.currentTarget as HTMLElement)\"\n    >\n      <motion.button\n        v-for=\"item in items\"\n        :key=\"item.id\"\n        :id=\"id + '-' + item.id\"\n        type=\"button\"\n        role=\"tab\"\n        :aria-selected=\"isActive(item)\"\n        :aria-label=\"item.label\"\n        :aria-controls=\"id + '-panel'\"\n        :layout=\"reduce ? false : 'position'\"\n        :animate=\"{\n          width:\n            (isActive(item) ? Math.max(32, 49 + (widths[item.id] ?? 0)) : 32) +\n            'px',\n        }\"\n        :transition=\"\n          reduce\n            ? { duration: 0 }\n            : { type: 'spring', duration: 0.46, bounce: 0.04 }\n        \"\n        :class=\"\n          cn(\n            'relative isolate flex h-9 min-w-8 shrink-0 items-center justify-center overflow-hidden rounded-[18px] px-2 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n            isActive(item) && 'min-w-0 justify-start pl-2.5 pr-4',\n            isActive(item)\n              ? 'text-foreground'\n              : 'text-muted-foreground hover:text-foreground',\n            classNames?.tab,\n            isActive(item) && classNames?.activeTab,\n          )\n        \"\n        @click=\"toggle(item)\"\n      >\n        <span\n          v-if=\"isActive(item)\"\n          :class=\"\n            cn(\n              'absolute inset-0 -z-10 rounded-[18px] bg-foreground/10',\n              classNames?.pill,\n            )\n          \"\n        />\n        <span\n          :class=\"\n            cn(\n              'grid shrink-0 place-items-center [&_svg]:size-4',\n              classNames?.icon,\n            )\n          \"\n          ><RenderNode :node=\"item.icon\"\n        /></span>\n        <motion.span\n          aria-hidden=\"true\"\n          :initial=\"false\"\n          :animate=\"labelMotion(item)\"\n          :transition=\"\n            reduce\n              ? { duration: 0 }\n              : isActive(item)\n                ? { type: 'spring', duration: 0.38, bounce: 0.03 }\n                : { duration: 0.16, ease: EASE_OUT }\n          \"\n          :class=\"\n            cn(\n              'inline-block overflow-hidden whitespace-nowrap',\n              classNames?.label,\n            )\n          \"\n          >{{ item.label }}</motion.span\n        >\n      </motion.button>\n    </div>\n  </motion.div>\n  <div\n    aria-hidden=\"true\"\n    class=\"pointer-events-none fixed left-0 top-0 -z-10 flex opacity-0\"\n  >\n    <span\n      v-for=\"item in items\"\n      :key=\"item.id\"\n      :ref=\"(node) => setLabel(item.id, node)\"\n      :class=\"\n        cn(\n          'whitespace-nowrap text-sm font-medium leading-none',\n          classNames?.label,\n        )\n      \"\n      >{{ item.label }}</span\n    >\n  </div>\n</template>\n"],"mappings":"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"}