@orvui/vue 0.0.0-stage → 0.1.1

package/dist/notification-stack-DsRk7N8m.js

@@ -0,0 +1,209 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { o as t, r as n } from "./ease-rIvCM4O3.js";
+import { t as r } from "./utils-DIrLOK2M.js";
+import { t as i } from "./ActionSwapText-GBQfNPxd.js";
+import { t as a } from "./dismiss-Db0RZCUY.js";
+import { r as o, t as s } from "./shared-DAEawhBJ.js";
+import { Fragment as c, computed as l, createBlock as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, getCurrentInstance as g, h as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, withCtx as E } from "vue";
+import { motion as D } from "motion-v";
+import { ArrowUpRight as O, BellOff as k } from "lucide-vue-next";
+// src/blocks/notification-stack/src/use-stack-interaction.ts
+function A(e, t, n) {
+	let r = g(), i = /* @__PURE__ */ new Set(), o = S(!1), s = !1, c = null, u = l(() => e.value && o.value);
+	function d() {
+		o.value = !1, e.value = !1;
+	}
+	a(u, t, d, !0);
+	function f(t) {
+		t.pointerType !== "touch" && t.buttons === 0 ? (i.delete(t.pointerId), e.value = !0) : i.add(t.pointerId);
+	}
+	function p(e) {
+		!i.delete(e.pointerId) && e.pointerType !== "touch" && !s && d();
+	}
+	function m(t) {
+		c = {
+			type: t.pointerType,
+			expanded: e.value
+		};
+	}
+	function h() {
+		c = null;
+	}
+	function _() {
+		let t = c;
+		c = null, (t ? t.expanded : e.value) ? r?.vnode.props?.onViewAll ? n() : d() : (t && t.type !== "mouse" && (o.value = !0), e.value = !0);
+	}
+	function v() {
+		s = !0, e.value = !0;
+	}
+	function y(e) {
+		e.currentTarget.contains(e.relatedTarget) || (s = !1, d());
+	}
+	function x(e) {
+		h(), e.key === "Escape" && (e.preventDefault(), d());
+	}
+	return b(() => {
+		i.clear(), c = null;
+	}), {
+		enter: f,
+		leave: p,
+		start: m,
+		cancel: h,
+		activate: _,
+		focus: v,
+		blur: y,
+		keydown: x
+	};
+}
+// src/blocks/notification-stack/src/NotificationContent.vue
+var j = h({
+	props: {
+		item: {
+			type: Object,
+			required: !0
+		},
+		classNames: Object
+	},
+	setup(e) {
+		return () => {
+			let t = e.item, n = e.classNames, i = _("span", { class: r("min-w-0 text-sm font-medium leading-snug", n?.title) }, [_(s, { node: t.title })]), a = t.trailing ? _("span", { class: r("shrink-0 text-xs", n?.trailing) }, [_(s, { node: t.trailing })]) : null, o = _("span", { class: "flex min-w-0 items-start justify-between gap-3" }, [i, a]), c = t.description ? _("span", { class: r("text-xs leading-relaxed text-muted-foreground", n?.description) }, [_(s, { node: t.description })]) : null;
+			return _("span", { class: r("flex min-w-0 flex-col gap-1.5 py-4", n?.content) }, [o, c]);
+		};
+	}
+}), M = {
+	key: 0,
+	class: "flex w-full max-w-[22rem] items-center justify-center gap-2 rounded-3xl bg-muted/70 px-5 py-8 text-sm font-medium text-muted-foreground"
+}, N = {
+	"aria-hidden": "true",
+	class: "invisible block p-3"
+}, P = { class: "block" }, F = { class: "absolute inset-x-0 bottom-0 block p-3" }, I = { class: "flex items-center text-sm font-medium" }, L = {
+	key: 0,
+	class: "inline-flex items-center gap-1"
+}, R = /* @__PURE__ */ h({
+	__name: "NotificationStack",
+	props: {
+		items: {},
+		expanded: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultExpanded: {
+			type: Boolean,
+			default: !1
+		},
+		maxVisible: { default: 3 },
+		collapsedLabel: { default: "Notifications" },
+		expandedLabel: { default: "View all" },
+		emptyLabel: { default: "All caught up" },
+		classNames: {}
+	},
+	emits: [
+		"update:expanded",
+		"expandedChange",
+		"viewAll"
+	],
+	setup(a, { emit: s }) {
+		let h = a, g = s, _ = o(() => h.expanded, h.defaultExpanded, (e) => {
+			g("update:expanded", e), g("expandedChange", e);
+		}), b = e(), R = S(), z = l(() => h.items.slice(0, Math.max(1, h.maxVisible))), { enter: B, leave: V, start: H, cancel: U, activate: W, focus: G, blur: K, keydown: q } = A(_, R, () => g("viewAll"));
+		return (e, o) => z.value.length ? (x(), u(T(D).button, {
+			key: 1,
+			ref_key: "root",
+			ref: R,
+			type: "button",
+			initial: !1,
+			"aria-expanded": T(_),
+			"aria-label": T(_) ? `${a.items.length} notifications. ${a.expandedLabel}.` : `${a.items.length} notifications. Expand notifications.`,
+			class: "relative z-10 block w-full max-w-[22rem] cursor-pointer rounded-3xl text-left text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			onPointerenter: T(B),
+			onPointerleave: T(V),
+			onPointerdown: T(H),
+			onPointercancel: T(U),
+			onFocus: T(G),
+			onBlur: T(K),
+			onKeydown: T(q),
+			onClick: T(W)
+		}, {
+			default: E(() => [f("span", N, [f("span", P, [f("span", { class: v(T(r)("block rounded-2xl border border-transparent px-4", a.classNames?.card)) }, [m(j, {
+				item: z.value[0],
+				"class-names": a.classNames
+			}, null, 8, ["item", "class-names"])], 2)]), o[0] ||= f("span", { class: "mt-2 block h-9" }, null, -1)]), f("span", F, [
+				m(T(D).span, {
+					"aria-hidden": "true",
+					layout: "",
+					initial: !1,
+					transition: T(b) ? { duration: 0 } : {
+						duration: .26,
+						ease: T(n)
+					},
+					class: "absolute inset-0 rounded-3xl bg-muted"
+				}, null, 8, ["transition"]),
+				f("span", { class: v(T(r)("relative z-10 grid gap-1", !T(_) && "pb-2", a.classNames?.stack)) }, [(x(!0), d(c, null, C(z.value, (e, t) => (x(), u(T(D).span, {
+					key: e.id,
+					layout: "position",
+					initial: !1,
+					animate: {
+						y: T(_) ? 0 : t * 8,
+						clipPath: T(_) ? "inset(0px 0px round 16px)" : `inset(0px ${t * 12}px round 16px)`
+					},
+					transition: T(b) ? { duration: 0 } : {
+						duration: .32,
+						ease: T(n)
+					},
+					class: v(T(r)("block rounded-2xl border border-border/70 bg-background px-4", a.classNames?.card)),
+					style: y({
+						zIndex: z.value.length - t,
+						gridColumn: 1,
+						gridRow: T(_) ? t + 1 : 1
+					})
+				}, {
+					default: E(() => [f("span", { class: v(T(r)("block", t !== 0 && !T(_) ? "invisible" : "")) }, [m(j, {
+						item: e,
+						"class-names": a.classNames
+					}, null, 8, ["item", "class-names"])], 2)]),
+					_: 2
+				}, 1032, [
+					"animate",
+					"transition",
+					"class",
+					"style"
+				]))), 128))], 2),
+				m(T(D).span, {
+					layout: "position",
+					transition: T(b) ? { duration: 0 } : T(t),
+					class: v(T(r)("relative z-10 mt-2 flex min-h-9 items-center gap-2 px-1", a.classNames?.footer))
+				}, {
+					default: E(() => [f("span", { class: v(T(r)("grid size-7 shrink-0 place-items-center rounded-full bg-orange-600 text-xs font-medium text-white shadow-[inset_0_1px_2px_rgb(0_0_0/0.2),inset_0_-1px_0_rgb(255_255_255/0.16)] dark:bg-orange-500", a.classNames?.count)) }, w(a.items.length), 3), f("span", I, [m(T(i), {
+						value: T(_) ? "expanded" : "collapsed",
+						animation: "roll"
+					}, {
+						default: E(() => [T(_) ? (x(), d("span", L, [p(w(a.expandedLabel), 1), m(T(O), {
+							class: "size-4",
+							"aria-hidden": "true"
+						})])) : (x(), d(c, { key: 1 }, [p(w(a.collapsedLabel), 1)], 64))]),
+						_: 1
+					}, 8, ["value"])])]),
+					_: 1
+				}, 8, ["transition", "class"])
+			])]),
+			_: 1
+		}, 8, [
+			"aria-expanded",
+			"aria-label",
+			"onPointerenter",
+			"onPointerleave",
+			"onPointerdown",
+			"onPointercancel",
+			"onFocus",
+			"onBlur",
+			"onKeydown",
+			"onClick"
+		])) : (x(), d("div", M, [m(T(k), {
+			class: "h-4 w-4",
+			"aria-hidden": "true"
+		}), p(w(a.emptyLabel), 1)]));
+	}
+});
+export { R as t };
+
+//# sourceMappingURL=notification-stack-DsRk7N8m.js.map

package/dist/notification-stack-DsRk7N8m.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-stack-DsRk7N8m.js","names":["_sfc_main","_openBlock","_createElementBlock","_createVNode","_unref","_createTextVNode","_toDisplayString","_createBlock","_withCtx","_createElementVNode","_normalizeClass","NotificationContent","_Fragment","_renderList","_normalizeStyle","ActionSwapText","_sfc_main","useReducedMotion","SPRING_LAYOUT","EASE_OUT","cn","ActionSwapText_default","useBlockDismiss","useControllable","RenderNode","useStackInteraction","instance","getCurrentInstance","contacts","touchExpanded","ref","focused","activation","dismissOpen","computed","expanded","collapse","root","enter","event","leave","start","cancel","activate","gesture","viewAll","focus","blur","keydown","onBeforeUnmount","NotificationContent_default","defineComponent","content","props","styles","title","h","trailing","header","description","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","NotificationStack_default","__emit","__props","emit","value","reduce","visible","openBlock","createBlock","unref","motion","withCtx","createElementVNode","normalizeClass","createVNode","_cache","createElementBlock","Fragment","renderList","item","index","normalizeStyle","toDisplayString","createTextVNode","ArrowUpRight","BellOff"],"sources":["../src/blocks/notification-stack/src/use-stack-interaction.ts","../src/blocks/notification-stack/src/NotificationContent.vue","../src/blocks/notification-stack/src/NotificationContent.vue","../src/blocks/notification-stack/src/NotificationStack.vue","../src/blocks/notification-stack/src/NotificationStack.vue"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onBeforeUnmount,\n  ref,\n  type Ref,\n} from \"vue\";\nimport { useBlockDismiss } from \"../../dismiss\";\nexport function useStackInteraction(\n  expanded: Ref<boolean>,\n  root: Ref<unknown>,\n  viewAll: () => void,\n) {\n  const instance = getCurrentInstance();\n  const contacts = new Set<number>();\n  const touchExpanded = ref(false);\n  let focused = false;\n  let activation: { type: string; expanded: boolean } | null = null;\n  const dismissOpen = computed(() => expanded.value && touchExpanded.value);\n  function collapse() {\n    touchExpanded.value = false;\n    expanded.value = false;\n  }\n  useBlockDismiss(dismissOpen, root, collapse, true);\n  function enter(event: PointerEvent) {\n    if (event.pointerType !== \"touch\" && event.buttons === 0) {\n      contacts.delete(event.pointerId);\n      expanded.value = true;\n    } else contacts.add(event.pointerId);\n  }\n  function leave(event: PointerEvent) {\n    const contact = contacts.delete(event.pointerId);\n    if (!contact && event.pointerType !== \"touch\" && !focused) collapse();\n  }\n  function start(event: PointerEvent) {\n    activation = { type: event.pointerType, expanded: expanded.value };\n  }\n  function cancel() {\n    activation = null;\n  }\n  function activate() {\n    const gesture = activation;\n    activation = null;\n    const wasExpanded = gesture ? gesture.expanded : expanded.value;\n    if (!wasExpanded) {\n      if (gesture && gesture.type !== \"mouse\") touchExpanded.value = true;\n      expanded.value = true;\n    } else if (instance?.vnode.props?.onViewAll) viewAll();\n    else collapse();\n  }\n  function focus() {\n    focused = true;\n    expanded.value = true;\n  }\n  function blur(event: FocusEvent) {\n    if (\n      !(event.currentTarget as HTMLElement).contains(\n        event.relatedTarget as Node,\n      )\n    ) {\n      focused = false;\n      collapse();\n    }\n  }\n  function keydown(event: KeyboardEvent) {\n    cancel();\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      collapse();\n    }\n  }\n  onBeforeUnmount(() => {\n    contacts.clear();\n    activation = null;\n  });\n  return { enter, leave, start, cancel, activate, focus, blur, keydown };\n}\n","<script lang=\"ts\">\nimport { defineComponent, h, type PropType } from \"vue\";\nimport { cn } from \"../../../lib/utils\";\nimport { RenderNode } from \"../../shared\";\nimport type { NotificationStackItem } from \"./NotificationStack.vue\";\nimport type { NotificationStackClassNames } from \"./source-types\";\nexport default defineComponent({\n  props: {\n    item: { type: Object as PropType<NotificationStackItem>, required: true },\n    classNames: Object as PropType<NotificationStackClassNames>,\n  },\n  setup(props) {\n    return () => {\n      const content = props.item,\n        styles = props.classNames;\n      const title = h(\n        \"span\",\n        {\n          class: cn(\"min-w-0 text-sm font-medium leading-snug\", styles?.title),\n        },\n        [h(RenderNode, { node: content.title })],\n      );\n      const trailing = content.trailing\n        ? h(\"span\", { class: cn(\"shrink-0 text-xs\", styles?.trailing) }, [\n            h(RenderNode, { node: content.trailing }),\n          ])\n        : null;\n      const header = h(\n        \"span\",\n        { class: \"flex min-w-0 items-start justify-between gap-3\" },\n        [title, trailing],\n      );\n      const description = content.description\n        ? h(\n            \"span\",\n            {\n              class: cn(\n                \"text-xs leading-relaxed text-muted-foreground\",\n                styles?.description,\n              ),\n            },\n            [h(RenderNode, { node: content.description })],\n          )\n        : null;\n      return h(\n        \"span\",\n        { class: cn(\"flex min-w-0 flex-col gap-1.5 py-4\", styles?.content) },\n        [header, description],\n      );\n    };\n  },\n});\n</script>\n","<script lang=\"ts\">\nimport { defineComponent, h, type PropType } from \"vue\";\nimport { cn } from \"../../../lib/utils\";\nimport { RenderNode } from \"../../shared\";\nimport type { NotificationStackItem } from \"./NotificationStack.vue\";\nimport type { NotificationStackClassNames } from \"./source-types\";\nexport default defineComponent({\n  props: {\n    item: { type: Object as PropType<NotificationStackItem>, required: true },\n    classNames: Object as PropType<NotificationStackClassNames>,\n  },\n  setup(props) {\n    return () => {\n      const content = props.item,\n        styles = props.classNames;\n      const title = h(\n        \"span\",\n        {\n          class: cn(\"min-w-0 text-sm font-medium leading-snug\", styles?.title),\n        },\n        [h(RenderNode, { node: content.title })],\n      );\n      const trailing = content.trailing\n        ? h(\"span\", { class: cn(\"shrink-0 text-xs\", styles?.trailing) }, [\n            h(RenderNode, { node: content.trailing }),\n          ])\n        : null;\n      const header = h(\n        \"span\",\n        { class: \"flex min-w-0 items-start justify-between gap-3\" },\n        [title, trailing],\n      );\n      const description = content.description\n        ? h(\n            \"span\",\n            {\n              class: cn(\n                \"text-xs leading-relaxed text-muted-foreground\",\n                styles?.description,\n              ),\n            },\n            [h(RenderNode, { node: content.description })],\n          )\n        : null;\n      return h(\n        \"span\",\n        { class: cn(\"flex min-w-0 flex-col gap-1.5 py-4\", styles?.content) },\n        [header, description],\n      );\n    };\n  },\n});\n</script>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { ArrowUpRight, BellOff } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { ActionSwapText } from \"../../../motion/action-swap\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useControllable, type Content } from \"../../shared\";\nimport { useStackInteraction } from \"./use-stack-interaction\";\nimport NotificationContent from \"./NotificationContent.vue\";\nimport type { NotificationStackClassNames } from \"./source-types\";\nexport interface NotificationStackItem {\n  id: string;\n  title: Content;\n  description?: Content;\n  trailing?: Content;\n}\nconst props = withDefaults(\n  defineProps<{\n    items: NotificationStackItem[];\n    expanded?: boolean;\n    defaultExpanded?: boolean;\n    maxVisible?: number;\n    collapsedLabel?: string;\n    expandedLabel?: string;\n    emptyLabel?: string;\n    classNames?: NotificationStackClassNames;\n  }>(),\n  {\n    expanded: undefined,\n    defaultExpanded: false,\n    maxVisible: 3,\n    collapsedLabel: \"Notifications\",\n    expandedLabel: \"View all\",\n    emptyLabel: \"All caught up\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:expanded\": [expanded: boolean];\n  expandedChange: [expanded: boolean];\n  viewAll: [];\n}>();\nconst expanded = useControllable(\n  () => props.expanded,\n  props.defaultExpanded,\n  (value) => {\n    emit(\"update:expanded\", value);\n    emit(\"expandedChange\", value);\n  },\n);\nconst reduce = useReducedMotion(),\n  root = ref<unknown>();\nconst visible = computed(() =>\n  props.items.slice(0, Math.max(1, props.maxVisible)),\n);\nconst { enter, leave, start, cancel, activate, focus, blur, keydown } =\n  useStackInteraction(expanded, root, () => emit(\"viewAll\"));\n</script>\n<template>\n  <div\n    v-if=\"!visible.length\"\n    class=\"flex w-full max-w-[22rem] items-center justify-center gap-2 rounded-3xl bg-muted/70 px-5 py-8 text-sm font-medium text-muted-foreground\"\n  >\n    <BellOff class=\"h-4 w-4\" aria-hidden=\"true\" />{{ emptyLabel }}\n  </div>\n  <motion.button\n    v-else\n    ref=\"root\"\n    type=\"button\"\n    :initial=\"false\"\n    :aria-expanded=\"expanded\"\n    :aria-label=\"\n      expanded\n        ? `${items.length} notifications. ${expandedLabel}.`\n        : `${items.length} notifications. Expand notifications.`\n    \"\n    class=\"relative z-10 block w-full max-w-[22rem] cursor-pointer rounded-3xl text-left text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    @pointerenter=\"enter\"\n    @pointerleave=\"leave\"\n    @pointerdown=\"start\"\n    @pointercancel=\"cancel\"\n    @focus=\"focus\"\n    @blur=\"blur\"\n    @keydown=\"keydown\"\n    @click=\"activate\"\n  >\n    <span aria-hidden=\"true\" class=\"invisible block p-3\"\n      ><span class=\"block\"\n        ><span\n          :class=\"\n            cn(\n              'block rounded-2xl border border-transparent px-4',\n              classNames?.card,\n            )\n          \"\n          ><NotificationContent\n            :item=\"visible[0]\"\n            :class-names=\"classNames\" /></span></span\n      ><span class=\"mt-2 block h-9\"\n    /></span>\n    <span class=\"absolute inset-x-0 bottom-0 block p-3\">\n      <motion.span\n        aria-hidden=\"true\"\n        layout\n        :initial=\"false\"\n        :transition=\"\n          reduce ? { duration: 0 } : { duration: 0.26, ease: EASE_OUT }\n        \"\n        class=\"absolute inset-0 rounded-3xl bg-muted\"\n      />\n      <span\n        :class=\"\n          cn('relative z-10 grid gap-1', !expanded && 'pb-2', classNames?.stack)\n        \"\n        ><motion.span\n          v-for=\"(item, index) in visible\"\n          :key=\"item.id\"\n          layout=\"position\"\n          :initial=\"false\"\n          :animate=\"{\n            y: expanded ? 0 : index * 8,\n            clipPath: expanded\n              ? 'inset(0px 0px round 16px)'\n              : `inset(0px ${index * 12}px round 16px)`,\n          }\"\n          :transition=\"\n            reduce ? { duration: 0 } : { duration: 0.32, ease: EASE_OUT }\n          \"\n          :class=\"\n            cn(\n              'block rounded-2xl border border-border/70 bg-background px-4',\n              classNames?.card,\n            )\n          \"\n          :style=\"{\n            zIndex: visible.length - index,\n            gridColumn: 1,\n            gridRow: expanded ? index + 1 : 1,\n          }\"\n          ><span\n            :class=\"cn('block', index !== 0 && !expanded ? 'invisible' : '')\"\n            ><NotificationContent\n              :item=\"item\"\n              :class-names=\"classNames\" /></span></motion.span\n      ></span>\n      <motion.span\n        layout=\"position\"\n        :transition=\"reduce ? { duration: 0 } : SPRING_LAYOUT\"\n        :class=\"\n          cn(\n            'relative z-10 mt-2 flex min-h-9 items-center gap-2 px-1',\n            classNames?.footer,\n          )\n        \"\n        ><span\n          :class=\"\n            cn(\n              'grid size-7 shrink-0 place-items-center rounded-full bg-orange-600 text-xs font-medium text-white shadow-[inset_0_1px_2px_rgb(0_0_0/0.2),inset_0_-1px_0_rgb(255_255_255/0.16)] dark:bg-orange-500',\n              classNames?.count,\n            )\n          \"\n          >{{ items.length }}</span\n        ><span class=\"flex items-center text-sm font-medium\"\n          ><ActionSwapText\n            :value=\"expanded ? 'expanded' : 'collapsed'\"\n            animation=\"roll\"\n            ><span v-if=\"expanded\" class=\"inline-flex items-center gap-1\"\n              >{{ expandedLabel\n              }}<ArrowUpRight class=\"size-4\" aria-hidden=\"true\" /></span\n            ><template v-else>{{ collapsedLabel }}</template></ActionSwapText\n          ></span\n        ></motion.span\n      >\n    </span>\n  </motion.button>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { ArrowUpRight, BellOff } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { ActionSwapText } from \"../../../motion/action-swap\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useControllable, type Content } from \"../../shared\";\nimport { useStackInteraction } from \"./use-stack-interaction\";\nimport NotificationContent from \"./NotificationContent.vue\";\nimport type { NotificationStackClassNames } from \"./source-types\";\nexport interface NotificationStackItem {\n  id: string;\n  title: Content;\n  description?: Content;\n  trailing?: Content;\n}\nconst props = withDefaults(\n  defineProps<{\n    items: NotificationStackItem[];\n    expanded?: boolean;\n    defaultExpanded?: boolean;\n    maxVisible?: number;\n    collapsedLabel?: string;\n    expandedLabel?: string;\n    emptyLabel?: string;\n    classNames?: NotificationStackClassNames;\n  }>(),\n  {\n    expanded: undefined,\n    defaultExpanded: false,\n    maxVisible: 3,\n    collapsedLabel: \"Notifications\",\n    expandedLabel: \"View all\",\n    emptyLabel: \"All caught up\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:expanded\": [expanded: boolean];\n  expandedChange: [expanded: boolean];\n  viewAll: [];\n}>();\nconst expanded = useControllable(\n  () => props.expanded,\n  props.defaultExpanded,\n  (value) => {\n    emit(\"update:expanded\", value);\n    emit(\"expandedChange\", value);\n  },\n);\nconst reduce = useReducedMotion(),\n  root = ref<unknown>();\nconst visible = computed(() =>\n  props.items.slice(0, Math.max(1, props.maxVisible)),\n);\nconst { enter, leave, start, cancel, activate, focus, blur, keydown } =\n  useStackInteraction(expanded, root, () => emit(\"viewAll\"));\n</script>\n<template>\n  <div\n    v-if=\"!visible.length\"\n    class=\"flex w-full max-w-[22rem] items-center justify-center gap-2 rounded-3xl bg-muted/70 px-5 py-8 text-sm font-medium text-muted-foreground\"\n  >\n    <BellOff class=\"h-4 w-4\" aria-hidden=\"true\" />{{ emptyLabel }}\n  </div>\n  <motion.button\n    v-else\n    ref=\"root\"\n    type=\"button\"\n    :initial=\"false\"\n    :aria-expanded=\"expanded\"\n    :aria-label=\"\n      expanded\n        ? `${items.length} notifications. ${expandedLabel}.`\n        : `${items.length} notifications. Expand notifications.`\n    \"\n    class=\"relative z-10 block w-full max-w-[22rem] cursor-pointer rounded-3xl text-left text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    @pointerenter=\"enter\"\n    @pointerleave=\"leave\"\n    @pointerdown=\"start\"\n    @pointercancel=\"cancel\"\n    @focus=\"focus\"\n    @blur=\"blur\"\n    @keydown=\"keydown\"\n    @click=\"activate\"\n  >\n    <span aria-hidden=\"true\" class=\"invisible block p-3\"\n      ><span class=\"block\"\n        ><span\n          :class=\"\n            cn(\n              'block rounded-2xl border border-transparent px-4',\n              classNames?.card,\n            )\n          \"\n          ><NotificationContent\n            :item=\"visible[0]\"\n            :class-names=\"classNames\" /></span></span\n      ><span class=\"mt-2 block h-9\"\n    /></span>\n    <span class=\"absolute inset-x-0 bottom-0 block p-3\">\n      <motion.span\n        aria-hidden=\"true\"\n        layout\n        :initial=\"false\"\n        :transition=\"\n          reduce ? { duration: 0 } : { duration: 0.26, ease: EASE_OUT }\n        \"\n        class=\"absolute inset-0 rounded-3xl bg-muted\"\n      />\n      <span\n        :class=\"\n          cn('relative z-10 grid gap-1', !expanded && 'pb-2', classNames?.stack)\n        \"\n        ><motion.span\n          v-for=\"(item, index) in visible\"\n          :key=\"item.id\"\n          layout=\"position\"\n          :initial=\"false\"\n          :animate=\"{\n            y: expanded ? 0 : index * 8,\n            clipPath: expanded\n              ? 'inset(0px 0px round 16px)'\n              : `inset(0px ${index * 12}px round 16px)`,\n          }\"\n          :transition=\"\n            reduce ? { duration: 0 } : { duration: 0.32, ease: EASE_OUT }\n          \"\n          :class=\"\n            cn(\n              'block rounded-2xl border border-border/70 bg-background px-4',\n              classNames?.card,\n            )\n          \"\n          :style=\"{\n            zIndex: visible.length - index,\n            gridColumn: 1,\n            gridRow: expanded ? index + 1 : 1,\n          }\"\n          ><span\n            :class=\"cn('block', index !== 0 && !expanded ? 'invisible' : '')\"\n            ><NotificationContent\n              :item=\"item\"\n              :class-names=\"classNames\" /></span></motion.span\n      ></span>\n      <motion.span\n        layout=\"position\"\n        :transition=\"reduce ? { duration: 0 } : SPRING_LAYOUT\"\n        :class=\"\n          cn(\n            'relative z-10 mt-2 flex min-h-9 items-center gap-2 px-1',\n            classNames?.footer,\n          )\n        \"\n        ><span\n          :class=\"\n            cn(\n              'grid size-7 shrink-0 place-items-center rounded-full bg-orange-600 text-xs font-medium text-white shadow-[inset_0_1px_2px_rgb(0_0_0/0.2),inset_0_-1px_0_rgb(255_255_255/0.16)] dark:bg-orange-500',\n              classNames?.count,\n            )\n          \"\n          >{{ items.length }}</span\n        ><span class=\"flex items-center text-sm font-medium\"\n          ><ActionSwapText\n            :value=\"expanded ? 'expanded' : 'collapsed'\"\n            animation=\"roll\"\n            ><span v-if=\"expanded\" class=\"inline-flex items-center gap-1\"\n              >{{ expandedLabel\n              }}<ArrowUpRight class=\"size-4\" aria-hidden=\"true\" /></span\n            ><template v-else>{{ collapsedLabel }}</template></ActionSwapText\n          ></span\n        ></motion.span\n      >\n    </span>\n  </motion.button>\n</template>\n"],"mappings":"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"}

package/dist/number-Dz4iLJiS.js

@@ -0,0 +1,279 @@
+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 { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
+import { AnimatePresence as C, animate as w, motion as T } from "motion-v";
+// src/motion/number/src/view-gate.ts
+function E(e, t) {
+	let n = _(!t()), r = !1, i;
+	function a() {
+		r && !n.value && (i?.disconnect(), !t() || !e.value || typeof IntersectionObserver > "u" ? n.value = !0 : (i = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && (n.value = !0, i?.disconnect());
+		}, { threshold: .6 }), i.observe(e.value)));
+	}
+	return h(() => {
+		r = !0, a();
+	}), x(t, a), m(() => {
+		r = !1, i?.disconnect();
+	}), n;
+}
+// src/motion/number/src/AnimatedNumber.vue
+var D = /* @__PURE__ */ f({
+	__name: "AnimatedNumber",
+	props: {
+		value: {},
+		duration: { default: 1.2 },
+		format: {},
+		className: {},
+		startOnView: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(t) {
+		let r = t, i = _(null), a = _(0), o = _(!1), s = E(i, () => r.startOnView), l = e(), u;
+		return x([
+			() => r.value,
+			() => r.duration,
+			s,
+			l,
+			o
+		], () => {
+			u?.stop(), o.value && s.value && (l.value ? a.value = r.value : u = w(a.value, r.value, {
+				duration: r.duration,
+				ease: n,
+				onUpdate(e) {
+					a.value = e;
+				}
+			}));
+		}), h(() => {
+			o.value = !0;
+		}), m(() => {
+			o.value = !1, u?.stop();
+		}), (e, n) => (g(), c("span", {
+			ref_key: "element",
+			ref: i,
+			class: p(["tabular-nums", t.className])
+		}, y(t.format ? t.format(a.value) : Math.round(a.value).toLocaleString()), 3));
+	}
+}), O = ["data-direction"], k = { class: "sr-only" }, A = {
+	"aria-hidden": "true",
+	class: "inline-flex items-baseline"
+}, j = {
+	key: 0,
+	class: "inline-block w-[0.7ch]"
+}, M = { class: "invisible" }, N = { key: 0 }, P = /* @__PURE__ */ f({
+	__name: "DigitSwap",
+	props: {
+		value: {},
+		animationKey: {},
+		replayKey: {},
+		direction: { default: "up" },
+		duration: { default: .18 },
+		stagger: { default: .006 },
+		suffixLength: { default: 0 },
+		className: {},
+		glyphClassName: {},
+		suffixClassName: {},
+		suffix: {}
+	},
+	setup(t) {
+		let f = t, m = e(), h = a(() => String(f.value)), _ = a(() => Array.from(h.value, (e, t) => ({
+			character: e,
+			position: t
+		}))), x = a(() => Math.max(0, h.value.length - Math.max(0, f.suffixLength))), w = a(() => ({
+			direction: f.direction,
+			reduceMotion: m.value
+		}));
+		function E(e, t) {
+			let n = e, r = n.direction === "up" ? 1 : -1;
+			return {
+				opacity: 0,
+				transform: n.reduceMotion ? "none" : `translateY(${45 * r * (t ? -1 : 1)}%)`
+			};
+		}
+		let D = {
+			enter: (e) => E(e, !1),
+			visible: {
+				opacity: 1,
+				transform: "translateY(0%)"
+			},
+			exit: (e) => E(e, !0)
+		};
+		function P(e, t) {
+			return `glyph-${t}-${e}${(f.animationKey ?? f.replayKey) === void 0 ? "" : `-${f.animationKey ?? f.replayKey}`}`;
+		}
+		return (e, a) => (g(), c("span", {
+			"data-slot": "digit-swap",
+			"data-direction": t.direction,
+			class: p(["inline-flex items-baseline whitespace-nowrap", t.className])
+		}, [l("span", k, y(h.value) + y(t.suffix), 1), l("span", A, [(g(!0), c(i, null, v(_.value, (e) => (g(), c(i, { key: e.position }, [e.character === " " ? (g(), c("span", j)) : (g(), c("span", {
+			key: 1,
+			"data-slot": "digit-swap-glyph",
+			class: p(["relative inline-block h-[1.1em] shrink-0 leading-[1.1em] [clip-path:inset(0)]", /\d/.test(e.character) ? "w-[1ch] text-center" : void 0])
+		}, [l("span", M, y(e.character), 1), d(b(C), {
+			initial: !1,
+			custom: w.value
+		}, {
+			default: S(() => [(g(), o(b(T).span, {
+				key: P(e.character, e.position),
+				custom: w.value,
+				variants: D,
+				initial: "enter",
+				animate: "visible",
+				exit: "exit",
+				transition: {
+					duration: b(m) ? Math.min(t.duration, .12) : t.duration,
+					delay: b(m) ? 0 : e.position * t.stagger,
+					ease: b(n)
+				},
+				class: p(b(r)("absolute inset-0 flex items-center justify-center leading-none", t.glyphClassName, e.position >= x.value ? t.suffixClassName : void 0))
+			}, {
+				default: S(() => [u(y(e.character), 1)]),
+				_: 2
+			}, 1032, [
+				"custom",
+				"transition",
+				"class"
+			]))]),
+			_: 2
+		}, 1032, ["custom"])], 2))], 64))), 128)), t.suffix ? (g(), c("span", N, y(t.suffix), 1)) : s("", !0)])], 10, O));
+	}
+}), F = { class: "invisible" }, I = /* @__PURE__ */ f({
+	__name: "NumberTickerDigit",
+	props: {
+		digit: {},
+		delay: {},
+		duration: {},
+		blur: { type: Boolean },
+		className: {}
+	},
+	setup(r) {
+		let a = r, o = _(null), s = e(), u;
+		return x([
+			() => a.digit,
+			() => a.delay,
+			() => a.duration,
+			() => a.blur,
+			s,
+			o
+		], () => {
+			u?.stop();
+			let e = o.value;
+			e && (s.value || !a.blur || !Number.isFinite(a.digit) ? e.style.filter = "blur(0px)" : u = w(e, { filter: ["blur(10px)", "blur(0px)"] }, {
+				duration: Math.min(.32, a.duration * .75),
+				delay: a.delay,
+				ease: n
+			}));
+		}, { flush: "post" }), m(() => {
+			u?.stop(), o.value && (o.value.style.filter = "blur(0px)");
+		}), (e, a) => (g(), c("span", {
+			class: p(["relative inline-block text-center [clip-path:inset(0)]", r.className]),
+			style: {
+				height: "1.1em",
+				lineHeight: "1.1em",
+				width: "1ch"
+			}
+		}, [l("span", F, y(r.digit), 1), d(b(T).span, {
+			ref: (e) => o.value = b(t)(e),
+			initial: { y: 0 },
+			animate: { y: `-${r.digit * 1.1}em` },
+			transition: b(s) ? { duration: 0 } : {
+				duration: r.duration,
+				delay: r.delay,
+				ease: b(n)
+			},
+			class: "absolute inset-x-0 top-0 flex flex-col items-center will-change-[transform,filter]"
+		}, {
+			default: S(() => [(g(), c(i, null, v(10, (e) => l("span", {
+				key: e - 1,
+				class: "flex h-[1.1em] items-center justify-center leading-none"
+			}, y(e - 1), 1)), 64))]),
+			_: 1
+		}, 8, ["animate", "transition"])], 2));
+	}
+}), L = { class: "sr-only" }, R = {
+	"aria-hidden": "true",
+	class: "inline-flex items-baseline"
+}, z = { key: 0 }, B = {
+	key: 1,
+	class: "inline-block"
+}, V = { key: 1 }, H = /* @__PURE__ */ f({
+	__name: "NumberTicker",
+	props: {
+		value: {},
+		pad: {},
+		decimals: {},
+		decimalPlaces: {},
+		duration: { default: .9 },
+		stagger: { default: .04 },
+		startOnView: {
+			type: Boolean,
+			default: !0
+		},
+		prefix: {},
+		suffix: {},
+		blur: {
+			type: Boolean,
+			default: !1
+		},
+		className: {},
+		digitClassName: {},
+		locale: {
+			type: Boolean,
+			default: !1
+		},
+		format: {}
+	},
+	setup(e) {
+		let t = e, n = _(null), r = _(!1), u = _(!1), d = E(n, () => t.startOnView), f = a(() => {
+			let e = Math.max(0, Math.floor(t.decimals ?? t.decimalPlaces ?? 0)), n = Math.round(t.value * 10 ** e) / 10 ** e, r = t.format ? t.format(n) : t.locale ? n.toLocaleString(void 0, {
+				minimumFractionDigits: e,
+				maximumFractionDigits: e
+			}) : n.toFixed(e);
+			return t.pad ? r.padStart(t.pad, "0") : r;
+		}), S = a(() => Array.from(f.value, (e, t) => ({
+			character: e,
+			id: `g-${f.value.length - t - 1}`
+		}))), C;
+		return x([
+			d,
+			u,
+			() => t.duration,
+			() => t.stagger,
+			() => S.value.length
+		], () => {
+			clearTimeout(C), u.value && d.value && !r.value && (C = setTimeout(() => {
+				r.value = !0;
+			}, 1e3 * (t.duration + S.value.length * t.stagger)));
+		}), h(() => {
+			u.value = !0;
+		}), m(() => {
+			u.value = !1, clearTimeout(C);
+		}), (t, a) => (g(), c("span", {
+			ref_key: "element",
+			ref: n,
+			class: p(["inline-flex items-baseline tabular-nums", e.className])
+		}, [l("span", L, y((e.prefix ?? "") + f.value + (e.suffix ?? "")), 1), l("span", R, [
+			e.prefix ? (g(), c("span", z, y(e.prefix), 1)) : s("", !0),
+			(g(!0), c(i, null, v(S.value, (t, n) => (g(), c(i, { key: t.id }, [/\d/.test(t.character) ? (g(), o(I, {
+				key: 0,
+				digit: b(d) ? Number(t.character) : 0,
+				delay: r.value ? 0 : n * e.stagger,
+				duration: e.duration,
+				blur: e.blur,
+				"class-name": e.digitClassName
+			}, null, 8, [
+				"digit",
+				"delay",
+				"duration",
+				"blur",
+				"class-name"
+			])) : (g(), c("span", B, y(t.character), 1))], 64))), 128)),
+			e.suffix ? (g(), c("span", V, y(e.suffix), 1)) : s("", !0)
+		])], 2));
+	}
+});
+export { P as n, D as r, H as t };
+
+//# sourceMappingURL=number-Dz4iLJiS.js.map

package/dist/number-Dz4iLJiS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-Dz4iLJiS.js","names":["_openBlock","_createElementBlock","_normalizeClass","_toDisplayString","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_Fragment","_renderList","_createVNode","_unref","_withCtx","_createBlock","_createTextVNode","_createCommentVNode","_sfc_main","_hoisted_1","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_createVNode","_unref","_withCtx","_Fragment","_renderList","_sfc_main","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_createBlock","NumberTickerDigit","_unref","_sfc_main","useReducedMotion","EASE_OUT","cn","useNumberViewGate","ready","ref","startOnView","mounted","observer","arm","element","entries","entry","onMounted","watch","onBeforeUnmount","AnimatedNumber_default","defineComponent","props","__props","display","reduced","animation","animate","value","openBlock","createElementBlock","normalizeClass","toDisplayString","_hoisted_1$2","_hoisted_2$1","_hoisted_3$1","_hoisted_4$1","_hoisted_5$1","_hoisted_6","DigitSwap_default","text","computed","glyphs","suffixStart","context","hidden","state","data","sign","departing","poses","key","position","character","createElementVNode","Fragment","renderList","glyph","createVNode","unref","AnimatePresence","withCtx","createBlock","motion","createTextVNode","createCommentVNode","_hoisted_1$1","NumberTickerDigit_default","column","target","resolveElement","node","digitValue","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","NumberTicker_default","entered","places","rounded","formatted","index","timer"],"sources":["../src/motion/number/src/view-gate.ts","../src/motion/number/src/AnimatedNumber.vue","../src/motion/number/src/AnimatedNumber.vue","../src/motion/number/src/DigitSwap.vue","../src/motion/number/src/DigitSwap.vue","../src/motion/number/src/NumberTickerDigit.vue","../src/motion/number/src/NumberTickerDigit.vue","../src/motion/number/src/NumberTicker.vue","../src/motion/number/src/NumberTicker.vue"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref, watch, type Ref } from \"vue\";\n\n/** A one-shot viewport gate shared by the two number renderers. */\nexport function useNumberViewGate(element: Ref<HTMLElement | null>, startOnView: () => boolean) {\n  const ready = ref(!startOnView());\n  let mounted = false, observer: IntersectionObserver | undefined;\n  function arm() {\n    if (!mounted || ready.value) return;\n    observer?.disconnect();\n    if (!startOnView() || !element.value || typeof IntersectionObserver === \"undefined\") { ready.value = true; return; }\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) { ready.value = true; observer?.disconnect(); }\n    }, { threshold: 0.6 });\n    observer.observe(element.value);\n  }\n  onMounted(() => { mounted = true; arm(); });\n  watch(startOnView, arm);\n  onBeforeUnmount(() => { mounted = false; observer?.disconnect(); });\n  return ready;\n}\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { animate } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useNumberViewGate } from \"./view-gate\";\nimport type { AnimatedNumberProps } from \"./types\";\nconst props = withDefaults(defineProps<AnimatedNumberProps>(), { duration: 1.2, startOnView: true });\nconst element = ref<HTMLElement | null>(null), display = ref(0), mounted = ref(false);\nconst ready = useNumberViewGate(element, () => props.startOnView);\nconst reduced = useReducedMotion();\nlet animation: ReturnType<typeof animate> | undefined;\nwatch([() => props.value, () => props.duration, ready, reduced, mounted], () => {\n  animation?.stop();\n  if (!mounted.value || !ready.value) return;\n  if (reduced.value) { display.value = props.value; return; }\n  animation = animate(display.value, props.value, { duration: props.duration, ease: EASE_OUT, onUpdate(value) { display.value = value; } });\n});\nonMounted(() => { mounted.value = true; });\nonBeforeUnmount(() => { mounted.value = false; animation?.stop(); });\n</script>\n<template><span ref=\"element\" :class=\"['tabular-nums', className]\">{{ format ? format(display) : Math.round(display).toLocaleString() }}</span></template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { animate } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useNumberViewGate } from \"./view-gate\";\nimport type { AnimatedNumberProps } from \"./types\";\nconst props = withDefaults(defineProps<AnimatedNumberProps>(), { duration: 1.2, startOnView: true });\nconst element = ref<HTMLElement | null>(null), display = ref(0), mounted = ref(false);\nconst ready = useNumberViewGate(element, () => props.startOnView);\nconst reduced = useReducedMotion();\nlet animation: ReturnType<typeof animate> | undefined;\nwatch([() => props.value, () => props.duration, ready, reduced, mounted], () => {\n  animation?.stop();\n  if (!mounted.value || !ready.value) return;\n  if (reduced.value) { display.value = props.value; return; }\n  animation = animate(display.value, props.value, { duration: props.duration, ease: EASE_OUT, onUpdate(value) { display.value = value; } });\n});\nonMounted(() => { mounted.value = true; });\nonBeforeUnmount(() => { mounted.value = false; animation?.stop(); });\n</script>\n<template><span ref=\"element\" :class=\"['tabular-nums', className]\">{{ format ? format(display) : Math.round(display).toLocaleString() }}</span></template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport type { DigitSwapProps } from \"./types\";\nconst props = withDefaults(defineProps<DigitSwapProps>(), { direction: \"up\", duration: 0.18, stagger: 0.006, suffixLength: 0 });\nconst reduced = useReducedMotion(), text = computed(() => String(props.value));\nconst glyphs = computed(() => Array.from(text.value, (character, position) => ({ character, position })));\nconst suffixStart = computed(() => Math.max(0, text.value.length - Math.max(0, props.suffixLength)));\nconst context = computed(() => ({ direction: props.direction, reduceMotion: reduced.value }));\nfunction hidden(data: unknown, departing: boolean) {\n  const state = data as { direction: \"up\" | \"down\"; reduceMotion: boolean };\n  const sign = state.direction === \"up\" ? 1 : -1;\n  return { opacity: 0, transform: state.reduceMotion ? \"none\" : `translateY(${45 * sign * (departing ? -1 : 1)}%)` };\n}\nconst poses = { enter: (data: unknown) => hidden(data, false), visible: { opacity: 1, transform: \"translateY(0%)\" }, exit: (data: unknown) => hidden(data, true) };\nfunction key(character: string, position: number) { return `glyph-${position}-${character}${(props.animationKey ?? props.replayKey) === undefined ? \"\" : `-${props.animationKey ?? props.replayKey}`}`; }\n</script>\n<template>\n  <span data-slot=\"digit-swap\" :data-direction=\"direction\" :class=\"['inline-flex items-baseline whitespace-nowrap', className]\">\n    <span class=\"sr-only\">{{ text }}{{ suffix }}</span>\n    <span aria-hidden=\"true\" class=\"inline-flex items-baseline\">\n      <template v-for=\"glyph in glyphs\" :key=\"glyph.position\">\n        <span v-if=\"glyph.character === ' '\" class=\"inline-block w-[0.7ch]\" />\n        <span v-else data-slot=\"digit-swap-glyph\" class=\"relative inline-block h-[1.1em] shrink-0 leading-[1.1em] [clip-path:inset(0)]\" :class=\"/\\d/.test(glyph.character) ? 'w-[1ch] text-center' : undefined\">\n          <span class=\"invisible\">{{ glyph.character }}</span>\n          <AnimatePresence :initial=\"false\" :custom=\"context\">\n            <motion.span :key=\"key(glyph.character, glyph.position)\" :custom=\"context\" :variants=\"poses\" initial=\"enter\" animate=\"visible\" exit=\"exit\"\n              :transition=\"{ duration: reduced ? Math.min(duration, 0.12) : duration, delay: reduced ? 0 : glyph.position * stagger, ease: EASE_OUT }\"\n              :class=\"cn('absolute inset-0 flex items-center justify-center leading-none', glyphClassName, glyph.position >= suffixStart ? suffixClassName : undefined)\">{{ glyph.character }}</motion.span>\n          </AnimatePresence>\n        </span>\n      </template>\n      <span v-if=\"suffix\">{{ suffix }}</span>\n    </span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport type { DigitSwapProps } from \"./types\";\nconst props = withDefaults(defineProps<DigitSwapProps>(), { direction: \"up\", duration: 0.18, stagger: 0.006, suffixLength: 0 });\nconst reduced = useReducedMotion(), text = computed(() => String(props.value));\nconst glyphs = computed(() => Array.from(text.value, (character, position) => ({ character, position })));\nconst suffixStart = computed(() => Math.max(0, text.value.length - Math.max(0, props.suffixLength)));\nconst context = computed(() => ({ direction: props.direction, reduceMotion: reduced.value }));\nfunction hidden(data: unknown, departing: boolean) {\n  const state = data as { direction: \"up\" | \"down\"; reduceMotion: boolean };\n  const sign = state.direction === \"up\" ? 1 : -1;\n  return { opacity: 0, transform: state.reduceMotion ? \"none\" : `translateY(${45 * sign * (departing ? -1 : 1)}%)` };\n}\nconst poses = { enter: (data: unknown) => hidden(data, false), visible: { opacity: 1, transform: \"translateY(0%)\" }, exit: (data: unknown) => hidden(data, true) };\nfunction key(character: string, position: number) { return `glyph-${position}-${character}${(props.animationKey ?? props.replayKey) === undefined ? \"\" : `-${props.animationKey ?? props.replayKey}`}`; }\n</script>\n<template>\n  <span data-slot=\"digit-swap\" :data-direction=\"direction\" :class=\"['inline-flex items-baseline whitespace-nowrap', className]\">\n    <span class=\"sr-only\">{{ text }}{{ suffix }}</span>\n    <span aria-hidden=\"true\" class=\"inline-flex items-baseline\">\n      <template v-for=\"glyph in glyphs\" :key=\"glyph.position\">\n        <span v-if=\"glyph.character === ' '\" class=\"inline-block w-[0.7ch]\" />\n        <span v-else data-slot=\"digit-swap-glyph\" class=\"relative inline-block h-[1.1em] shrink-0 leading-[1.1em] [clip-path:inset(0)]\" :class=\"/\\d/.test(glyph.character) ? 'w-[1ch] text-center' : undefined\">\n          <span class=\"invisible\">{{ glyph.character }}</span>\n          <AnimatePresence :initial=\"false\" :custom=\"context\">\n            <motion.span :key=\"key(glyph.character, glyph.position)\" :custom=\"context\" :variants=\"poses\" initial=\"enter\" animate=\"visible\" exit=\"exit\"\n              :transition=\"{ duration: reduced ? Math.min(duration, 0.12) : duration, delay: reduced ? 0 : glyph.position * stagger, ease: EASE_OUT }\"\n              :class=\"cn('absolute inset-0 flex items-center justify-center leading-none', glyphClassName, glyph.position >= suffixStart ? suffixClassName : undefined)\">{{ glyph.character }}</motion.span>\n          </AnimatePresence>\n        </span>\n      </template>\n      <span v-if=\"suffix\">{{ suffix }}</span>\n    </span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watch } from \"vue\";\nimport { animate, motion } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { resolveElement, useReducedMotion } from \"../../../lib/composables\";\nconst props = defineProps<{ digit: number; delay: number; duration: number; blur: boolean; className?: string }>();\nconst column = ref<HTMLElement | null>(null), reduced = useReducedMotion();\nlet animation: ReturnType<typeof animate> | undefined;\nwatch([() => props.digit, () => props.delay, () => props.duration, () => props.blur, reduced, column], () => {\n  animation?.stop();\n  const target = column.value;\n  if (!target) return;\n  if (reduced.value || !props.blur || !Number.isFinite(props.digit)) { target.style.filter = \"blur(0px)\"; return; }\n  animation = animate(target, { filter: [\"blur(10px)\", \"blur(0px)\"] }, { duration: Math.min(0.32, props.duration * 0.75), delay: props.delay, ease: EASE_OUT });\n}, { flush: \"post\" });\nonBeforeUnmount(() => { animation?.stop(); if (column.value) column.value.style.filter = \"blur(0px)\"; });\n</script>\n<template>\n  <span :class=\"['relative inline-block text-center [clip-path:inset(0)]', className]\" :style=\"{ height: '1.1em', lineHeight: '1.1em', width: '1ch' }\">\n    <span class=\"invisible\">{{ digit }}</span>\n    <motion.span :ref=\"node => column = resolveElement<HTMLElement>(node)\" :initial=\"{ y: 0 }\" :animate=\"{ y: `-${digit * 1.1}em` }\"\n      :transition=\"reduced ? { duration: 0 } : { duration, delay, ease: EASE_OUT }\" class=\"absolute inset-x-0 top-0 flex flex-col items-center will-change-[transform,filter]\">\n      <span v-for=\"digitValue in 10\" :key=\"digitValue - 1\" class=\"flex h-[1.1em] items-center justify-center leading-none\">{{ digitValue - 1 }}</span>\n    </motion.span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watch } from \"vue\";\nimport { animate, motion } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { resolveElement, useReducedMotion } from \"../../../lib/composables\";\nconst props = defineProps<{ digit: number; delay: number; duration: number; blur: boolean; className?: string }>();\nconst column = ref<HTMLElement | null>(null), reduced = useReducedMotion();\nlet animation: ReturnType<typeof animate> | undefined;\nwatch([() => props.digit, () => props.delay, () => props.duration, () => props.blur, reduced, column], () => {\n  animation?.stop();\n  const target = column.value;\n  if (!target) return;\n  if (reduced.value || !props.blur || !Number.isFinite(props.digit)) { target.style.filter = \"blur(0px)\"; return; }\n  animation = animate(target, { filter: [\"blur(10px)\", \"blur(0px)\"] }, { duration: Math.min(0.32, props.duration * 0.75), delay: props.delay, ease: EASE_OUT });\n}, { flush: \"post\" });\nonBeforeUnmount(() => { animation?.stop(); if (column.value) column.value.style.filter = \"blur(0px)\"; });\n</script>\n<template>\n  <span :class=\"['relative inline-block text-center [clip-path:inset(0)]', className]\" :style=\"{ height: '1.1em', lineHeight: '1.1em', width: '1ch' }\">\n    <span class=\"invisible\">{{ digit }}</span>\n    <motion.span :ref=\"node => column = resolveElement<HTMLElement>(node)\" :initial=\"{ y: 0 }\" :animate=\"{ y: `-${digit * 1.1}em` }\"\n      :transition=\"reduced ? { duration: 0 } : { duration, delay, ease: EASE_OUT }\" class=\"absolute inset-x-0 top-0 flex flex-col items-center will-change-[transform,filter]\">\n      <span v-for=\"digitValue in 10\" :key=\"digitValue - 1\" class=\"flex h-[1.1em] items-center justify-center leading-none\">{{ digitValue - 1 }}</span>\n    </motion.span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport NumberTickerDigit from \"./NumberTickerDigit.vue\";\nimport { useNumberViewGate } from \"./view-gate\";\nimport type { NumberTickerProps } from \"./types\";\nconst props = withDefaults(defineProps<NumberTickerProps>(), { duration: 0.9, stagger: 0.04, startOnView: true, blur: false, locale: false });\nconst element = ref<HTMLElement | null>(null), entered = ref(false), mounted = ref(false);\nconst ready = useNumberViewGate(element, () => props.startOnView);\nconst text = computed(() => {\n  const places = Math.max(0, Math.floor(props.decimals ?? props.decimalPlaces ?? 0));\n  const rounded = Math.round(props.value * 10 ** places) / 10 ** places;\n  const formatted = props.format ? props.format(rounded) : props.locale\n    ? rounded.toLocaleString(undefined, { minimumFractionDigits: places, maximumFractionDigits: places })\n    : rounded.toFixed(places);\n  return props.pad ? formatted.padStart(props.pad, \"0\") : formatted;\n});\nconst glyphs = computed(() => Array.from(text.value, (character, index) => ({ character, id: `g-${text.value.length - index - 1}` })));\nlet timer: ReturnType<typeof setTimeout> | undefined;\nwatch([ready, mounted, () => props.duration, () => props.stagger, () => glyphs.value.length], () => {\n  clearTimeout(timer);\n  if (!mounted.value || !ready.value || entered.value) return;\n  timer = setTimeout(() => { entered.value = true; }, 1000 * (props.duration + glyphs.value.length * props.stagger));\n});\nonMounted(() => { mounted.value = true; });\nonBeforeUnmount(() => { mounted.value = false; clearTimeout(timer); });\n</script>\n<template>\n  <span ref=\"element\" :class=\"['inline-flex items-baseline tabular-nums', className]\">\n    <span class=\"sr-only\">{{ (prefix ?? '') + text + (suffix ?? '') }}</span>\n    <span aria-hidden=\"true\" class=\"inline-flex items-baseline\">\n      <span v-if=\"prefix\">{{ prefix }}</span>\n      <template v-for=\"(glyph, index) in glyphs\" :key=\"glyph.id\">\n        <NumberTickerDigit v-if=\"/\\d/.test(glyph.character)\" :digit=\"ready ? Number(glyph.character) : 0\"\n          :delay=\"entered ? 0 : index * stagger\" :duration=\"duration\" :blur=\"blur\" :class-name=\"digitClassName\" />\n        <span v-else class=\"inline-block\">{{ glyph.character }}</span>\n      </template>\n      <span v-if=\"suffix\">{{ suffix }}</span>\n    </span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport NumberTickerDigit from \"./NumberTickerDigit.vue\";\nimport { useNumberViewGate } from \"./view-gate\";\nimport type { NumberTickerProps } from \"./types\";\nconst props = withDefaults(defineProps<NumberTickerProps>(), { duration: 0.9, stagger: 0.04, startOnView: true, blur: false, locale: false });\nconst element = ref<HTMLElement | null>(null), entered = ref(false), mounted = ref(false);\nconst ready = useNumberViewGate(element, () => props.startOnView);\nconst text = computed(() => {\n  const places = Math.max(0, Math.floor(props.decimals ?? props.decimalPlaces ?? 0));\n  const rounded = Math.round(props.value * 10 ** places) / 10 ** places;\n  const formatted = props.format ? props.format(rounded) : props.locale\n    ? rounded.toLocaleString(undefined, { minimumFractionDigits: places, maximumFractionDigits: places })\n    : rounded.toFixed(places);\n  return props.pad ? formatted.padStart(props.pad, \"0\") : formatted;\n});\nconst glyphs = computed(() => Array.from(text.value, (character, index) => ({ character, id: `g-${text.value.length - index - 1}` })));\nlet timer: ReturnType<typeof setTimeout> | undefined;\nwatch([ready, mounted, () => props.duration, () => props.stagger, () => glyphs.value.length], () => {\n  clearTimeout(timer);\n  if (!mounted.value || !ready.value || entered.value) return;\n  timer = setTimeout(() => { entered.value = true; }, 1000 * (props.duration + glyphs.value.length * props.stagger));\n});\nonMounted(() => { mounted.value = true; });\nonBeforeUnmount(() => { mounted.value = false; clearTimeout(timer); });\n</script>\n<template>\n  <span ref=\"element\" :class=\"['inline-flex items-baseline tabular-nums', className]\">\n    <span class=\"sr-only\">{{ (prefix ?? '') + text + (suffix ?? '') }}</span>\n    <span aria-hidden=\"true\" class=\"inline-flex items-baseline\">\n      <span v-if=\"prefix\">{{ prefix }}</span>\n      <template v-for=\"(glyph, index) in glyphs\" :key=\"glyph.id\">\n        <NumberTickerDigit v-if=\"/\\d/.test(glyph.character)\" :digit=\"ready ? Number(glyph.character) : 0\"\n          :delay=\"entered ? 0 : index * stagger\" :duration=\"duration\" :blur=\"blur\" :class-name=\"digitClassName\" />\n        <span v-else class=\"inline-block\">{{ glyph.character }}</span>\n      </template>\n      <span v-if=\"suffix\">{{ suffix }}</span>\n    </span>\n  </span>\n</template>\n"],"mappings":"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"}