@orvui/vue 0.0.0-stage → 0.1.0

package/dist/infinite-masonry-8d1lfqNh.js

@@ -0,0 +1,245 @@
+import { s as e, t } from "./composables-BJ1sih_H.js";
+import { c as n, r } from "./ease-rIvCM4O3.js";
+import { t as i } from "./utils-DIrLOK2M.js";
+import { t as a } from "./shared-DAEawhBJ.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, watch as T, watchEffect as E, withCtx as D } from "vue";
+import { motion as O } from "motion-v";
+import { AlertCircle as k, Inbox as A } from "lucide-vue-next";
+import { useVirtualizer as j } from "@tanstack/vue-virtual";
+// src/blocks/infinite-masonry/src/use-masonry.ts
+function M(n) {
+	let r = b(), i = b(), a = b(0), o = b(1), c = b(!1), l = e(), u = n.items.length, d = /* @__PURE__ */ new Set(), f = s(() => n.error !== void 0 && n.error !== null), p = s(() => f.value ? 1 : n.loading ? o.value : 0), m = j(s(() => ({
+		count: n.items.length + p.value,
+		useAnimationFrameWithResizeObserver: !0,
+		getScrollElement: () => r.value ?? null,
+		getItemKey: (e) => e < n.items.length ? n.getItemKey(n.items[e], e) : `masonry-tail-${e - n.items.length}`,
+		estimateSize: (e) => e < n.items.length ? n.estimateSize?.(n.items[e], e) ?? 240 : 144 + (e - n.items.length) % 3 * 36,
+		gap: n.gap,
+		lanes: o.value,
+		overscan: n.overscan * o.value
+	}))), h = s(() => m.value.getVirtualItems()), g = s(() => m.value.getTotalSize()), y = s(() => Math.max(0, (a.value - n.gap * (o.value - 1)) / o.value)), x = s(() => {
+		let e = (m.value.scrollOffset ?? 0) + (m.value.scrollRect?.height ?? 0), t = -1;
+		for (let n of h.value) n.start < e && (t = Math.max(t, n.index));
+		return t;
+	}), S, C = 0, w = !1, D = !1;
+	function O() {
+		if (!i.value || D) return;
+		let e = i.value.getBoundingClientRect().width, t = Math.min(n.maxColumns, Math.max(1, Math.floor((e + n.gap) / (n.minColumnWidth + n.gap))));
+		a.value = e, o.value = t;
+	}
+	function k(e) {
+		let n = t(e);
+		n && m.value.measureElement(n);
+	}
+	return T(() => n.loading, (e) => {
+		e || (w = !1);
+	}), E(() => {
+		!c.value || f.value || n.loading || !n.hasMore || w || x.value < Math.max(0, n.items.length - n.prefetch) || (w = !0, Promise.resolve(n.onLoadMore?.()).catch(() => {}).finally(() => {
+			w = !1;
+		}));
+	}, { flush: "post" }), T([
+		() => n.gap,
+		() => n.maxColumns,
+		() => n.minColumnWidth
+	], O), v(() => {
+		c.value = !0, O(), i.value && typeof ResizeObserver < "u" && (S = new ResizeObserver(() => {
+			cancelAnimationFrame(C), C = requestAnimationFrame(O);
+		}), S.observe(i.value));
+	}), _(() => {
+		D = !0, S?.disconnect(), cancelAnimationFrame(C);
+	}), {
+		root: r,
+		content: i,
+		reduce: l,
+		initialCount: u,
+		revealed: d,
+		hasError: f,
+		rows: h,
+		total: g,
+		columnWidth: y,
+		measure: k
+	};
+}
+// src/blocks/infinite-masonry/src/MasonryItemReveal.vue
+var N = /* @__PURE__ */ p({
+	__name: "MasonryItemReveal",
+	props: {
+		itemKey: {},
+		lane: {},
+		revealed: {},
+		animate: { type: Boolean }
+	},
+	setup(e) {
+		let t = e, i = t.animate && !t.revealed.has(t.itemKey), a = Math.min(t.lane, 3) * .04, o = {
+			y: {
+				...n,
+				delay: a
+			},
+			opacity: {
+				duration: .2,
+				ease: r,
+				delay: a
+			}
+		};
+		return v(() => t.revealed.add(t.itemKey)), (e, t) => (y(), c(w(O).div, {
+			initial: w(i) ? {
+				opacity: 0,
+				y: 12
+			} : !1,
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			transition: o
+		}, {
+			default: D(() => [S(e.$slots, "default")]),
+			_: 3
+		}, 8, ["initial"]));
+	}
+}), P = ["aria-label"], F = {
+	key: 1,
+	class: "flex h-full min-h-64 flex-col items-center justify-center px-6 text-center"
+}, I = ["aria-label", "aria-busy"], L = ["data-index"], R = {
+	key: 0,
+	class: "flex min-h-36 flex-col items-start justify-center rounded-2xl border border-destructive/30 bg-destructive/5 p-4"
+}, z = { class: "flex items-center gap-2 text-destructive" }, B = { class: "mt-2 text-xs leading-5 text-muted-foreground" }, V = {
+	key: 0,
+	class: "py-4 text-center text-xs text-muted-foreground"
+}, H = {
+	class: "sr-only",
+	"aria-live": "polite"
+}, U = /* @__PURE__ */ p({
+	__name: "InfiniteMasonry",
+	props: {
+		items: {},
+		getItemKey: {},
+		hasMore: { type: Boolean },
+		onLoadMore: {},
+		loading: { type: Boolean },
+		error: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: void 0
+		},
+		estimateSize: {},
+		minColumnWidth: { default: 208 },
+		maxColumns: { default: 4 },
+		gap: { default: 12 },
+		overscan: { default: 4 },
+		prefetch: { default: 3 },
+		animateItems: {
+			type: Boolean,
+			default: !0
+		},
+		ariaLabel: { default: "Infinite masonry feed" },
+		contentClassName: {},
+		itemClassName: {},
+		emptyState: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		endState: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] }
+	},
+	emits: ["retry"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, s = m(), p = () => !!s?.vnode.props?.onRetry, { root: _, content: v, reduce: b, initialCount: T, revealed: E, hasError: O, rows: j, total: U, columnWidth: W, measure: G } = M(n);
+		return (t, n) => !e.items.length && !e.hasMore && !e.loading && !w(O) ? (y(), u("section", {
+			key: 0,
+			"aria-label": e.ariaLabel,
+			class: "w-full overflow-hidden rounded-3xl border border-border bg-background"
+		}, [S(t.$slots, "empty", {}, () => [e.emptyState ? (y(), c(w(a), {
+			key: 0,
+			node: e.emptyState
+		}, null, 8, ["node"])) : (y(), u("div", F, [
+			f(w(A), {
+				class: "size-8 text-muted-foreground",
+				"aria-hidden": "true"
+			}),
+			n[1] ||= d("p", { class: "mt-3 text-sm font-medium text-foreground" }, "No items yet", -1),
+			n[2] ||= d("p", { class: "mt-1 max-w-xs text-xs leading-5 text-muted-foreground" }, " New items will appear here when they become available. ", -1)
+		]))])], 8, P)) : (y(), u("section", {
+			key: 1,
+			ref_key: "root",
+			ref: _,
+			"aria-label": e.ariaLabel,
+			"aria-busy": e.loading,
+			class: "w-full contain-[layout_paint] overflow-y-auto overscroll-none rounded-3xl border border-border bg-background p-3 [overflow-anchor:none] [scrollbar-gutter:stable]"
+		}, [
+			d("div", {
+				ref_key: "content",
+				ref: v,
+				class: h(w(i)("relative w-full", e.contentClassName)),
+				style: g({ height: w(U) + "px" })
+			}, [(y(!0), u(o, null, x(w(j), (s) => (y(), u("div", {
+				key: String(s.key),
+				ref_for: !0,
+				ref: w(G),
+				"data-index": s.index,
+				class: h(w(i)("absolute left-0 top-0 will-change-transform", s.index < e.items.length && e.itemClassName)),
+				style: g({
+					width: w(W) + "px",
+					transform: `translate3d(${s.lane * (w(W) + e.gap)}px, ${s.start}px, 0)`
+				})
+			}, [s.index >= e.items.length ? (y(), u(o, { key: 0 }, [w(O) ? (y(), u("div", R, [
+				d("div", z, [f(w(k), {
+					class: "size-4",
+					"aria-hidden": "true"
+				}), n[3] ||= d("p", { class: "text-sm font-medium" }, "Couldn't load more", -1)]),
+				d("div", B, [f(w(a), { node: e.error }, null, 8, ["node"])]),
+				p() ? (y(), u("button", {
+					key: 0,
+					type: "button",
+					class: "mt-3 min-h-10 rounded-full border border-border bg-background px-4 text-xs font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+					onClick: n[0] ||= (e) => r("retry")
+				}, " Try again ")) : l("", !0)
+			])) : S(t.$slots, "loading", { index: s.index - e.items.length }, () => [d("div", {
+				"aria-hidden": "true",
+				class: "animate-pulse rounded-2xl border border-border bg-card p-3",
+				style: g({ minHeight: 144 + (s.index - e.items.length) % 3 * 36 + "px" })
+			}, [...n[4] ||= [
+				d("div", { class: "h-3 w-2/3 rounded-full bg-muted" }, null, -1),
+				d("div", { class: "mt-3 h-2 w-full rounded-full bg-muted" }, null, -1),
+				d("div", { class: "mt-2 h-2 w-4/5 rounded-full bg-muted" }, null, -1)
+			]], 4)], void 0, 1)], 64)) : (y(), c(N, {
+				key: 1,
+				"item-key": s.key,
+				lane: s.lane,
+				revealed: w(E),
+				animate: e.animateItems && !w(b) && s.index >= w(T)
+			}, {
+				default: D(() => [S(t.$slots, "default", {
+					item: e.items[s.index],
+					index: s.index
+				})]),
+				_: 2
+			}, 1032, [
+				"item-key",
+				"lane",
+				"revealed",
+				"animate"
+			]))], 14, L))), 128))], 6),
+			!e.hasMore && e.items.length && (t.$slots.end || e.endState) ? (y(), u("div", V, [S(t.$slots, "end", {}, () => [f(w(a), { node: e.endState }, null, 8, ["node"])])])) : l("", !0),
+			d("span", H, C(e.loading ? "Loading more items" : null), 1)
+		], 8, I));
+	}
+});
+export { U as t };
+
+//# sourceMappingURL=infinite-masonry-8d1lfqNh.js.map

package/dist/infinite-masonry-8d1lfqNh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-masonry-8d1lfqNh.js","names":["_openBlock","_createBlock","_unref","_withCtx","_renderSlot","_sfc_main","$slots","_unref","_openBlock","_createElementBlock","_renderSlot","_createBlock","_createVNode","_createElementVNode","_normalizeClass","_normalizeStyle","_Fragment","_renderList","_createCommentVNode","MasonryItemReveal","_withCtx","_toDisplayString","_sfc_main","useReducedMotion","SPRING_PANEL","cn","RenderNode","useMasonry","root","ref","content","width","columns","mounted","reduce","initialCount","props","revealed","hasError","computed","tailCount","virtualizer","useVirtualizer","index","rows","total","columnWidth","lastVisible","bottom","last","row","resize","frame","pending","disposed","metrics","measured","count","measure","element","resolveElement","node","watch","value","watchEffect","onMounted","onBeforeUnmount","MasonryItemReveal_default","defineComponent","__props","enter","delay","transition","EASE_OUT","openBlock","createBlock","unref","motion","withCtx","renderSlot","_ctx","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","InfiniteMasonry_default","__emit","emit","instance","getCurrentInstance","hasRetry","createElementBlock","createVNode","Inbox","_cache","createElementVNode","normalizeClass","normalizeStyle","Fragment","renderList","AlertCircle","createCommentVNode","toDisplayString"],"sources":["../src/blocks/infinite-masonry/src/use-masonry.ts","../src/blocks/infinite-masonry/src/MasonryItemReveal.vue","../src/blocks/infinite-masonry/src/MasonryItemReveal.vue","../src/blocks/infinite-masonry/src/InfiniteMasonry.vue","../src/blocks/infinite-masonry/src/InfiniteMasonry.vue"],"sourcesContent":["import {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n  watchEffect,\n  type ComponentPublicInstance,\n} from \"vue\";\nimport { useVirtualizer } from \"@tanstack/vue-virtual\";\nimport { resolveElement, useReducedMotion } from \"../../../lib/composables\";\nimport type { Content } from \"../../shared\";\nexport interface MasonryOptions<T> {\n  items: readonly T[];\n  getItemKey: (item: T, index: number) => string | number | bigint;\n  hasMore: boolean;\n  onLoadMore?: () => void | Promise<void>;\n  loading?: boolean;\n  error?: Content;\n  estimateSize?: (item: T, index: number) => number;\n  minColumnWidth: number;\n  maxColumns: number;\n  gap: number;\n  overscan: number;\n  prefetch: number;\n}\nexport function useMasonry<T>(props: MasonryOptions<T>) {\n  const root = ref<HTMLElement>(),\n    content = ref<HTMLElement>(),\n    width = ref(0),\n    columns = ref(1),\n    mounted = ref(false),\n    reduce = useReducedMotion();\n  const initialCount = props.items.length,\n    revealed = new Set<string | number | bigint>();\n  const hasError = computed(\n      () => props.error !== undefined && props.error !== null,\n    ),\n    tailCount = computed(() =>\n      hasError.value ? 1 : props.loading ? columns.value : 0,\n    );\n  const virtualizer = useVirtualizer(\n    computed(() => ({\n      count: props.items.length + tailCount.value,\n      useAnimationFrameWithResizeObserver: true,\n      getScrollElement: () => root.value ?? null,\n      getItemKey: (index: number) =>\n        index < props.items.length\n          ? props.getItemKey(props.items[index]!, index)\n          : `masonry-tail-${index - props.items.length}`,\n      estimateSize: (index: number) =>\n        index < props.items.length\n          ? (props.estimateSize?.(props.items[index]!, index) ?? 240)\n          : 144 + ((index - props.items.length) % 3) * 36,\n      gap: props.gap,\n      lanes: columns.value,\n      overscan: props.overscan * columns.value,\n    })),\n  );\n  const rows = computed(() => virtualizer.value.getVirtualItems()),\n    total = computed(() => virtualizer.value.getTotalSize()),\n    columnWidth = computed(() =>\n      Math.max(\n        0,\n        (width.value - props.gap * (columns.value - 1)) / columns.value,\n      ),\n    );\n  const lastVisible = computed(() => {\n    const bottom =\n      (virtualizer.value.scrollOffset ?? 0) +\n      (virtualizer.value.scrollRect?.height ?? 0);\n    let last = -1;\n    for (const row of rows.value)\n      if (row.start < bottom) last = Math.max(last, row.index);\n    return last;\n  });\n  let resize: ResizeObserver | undefined,\n    frame = 0,\n    pending = false,\n    disposed = false;\n  function metrics() {\n    if (!content.value || disposed) return;\n    const measured = content.value.getBoundingClientRect().width;\n    const count = Math.min(\n      props.maxColumns,\n      Math.max(\n        1,\n        Math.floor((measured + props.gap) / (props.minColumnWidth + props.gap)),\n      ),\n    );\n    width.value = measured;\n    columns.value = count;\n  }\n  function measure(node: Element | ComponentPublicInstance | null) {\n    const element = resolveElement<HTMLElement>(node);\n    if (element) virtualizer.value.measureElement(element);\n  }\n  watch(\n    () => props.loading,\n    (value) => {\n      if (!value) pending = false;\n    },\n  );\n  watchEffect(\n    () => {\n      if (\n        !mounted.value ||\n        hasError.value ||\n        props.loading ||\n        !props.hasMore ||\n        pending ||\n        lastVisible.value < Math.max(0, props.items.length - props.prefetch)\n      )\n        return;\n      pending = true;\n      Promise.resolve(props.onLoadMore?.())\n        .catch(() => {})\n        .finally(() => {\n          pending = false;\n        });\n    },\n    { flush: \"post\" },\n  );\n  watch(\n    [() => props.gap, () => props.maxColumns, () => props.minColumnWidth],\n    metrics,\n  );\n  onMounted(() => {\n    mounted.value = true;\n    metrics();\n    if (content.value && typeof ResizeObserver !== \"undefined\") {\n      resize = new ResizeObserver(() => {\n        cancelAnimationFrame(frame);\n        frame = requestAnimationFrame(metrics);\n      });\n      resize.observe(content.value);\n    }\n  });\n  onBeforeUnmount(() => {\n    disposed = true;\n    resize?.disconnect();\n    cancelAnimationFrame(frame);\n  });\n  return {\n    root,\n    content,\n    reduce,\n    initialCount,\n    revealed,\n    hasError,\n    rows,\n    total,\n    columnWidth,\n    measure,\n  };\n}\n","<script setup lang=\"ts\">\nimport { onMounted } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { EASE_OUT, SPRING_PANEL } from \"../../../lib/ease\";\nconst props = defineProps<{\n  itemKey: string | number | bigint;\n  lane: number;\n  revealed: Set<string | number | bigint>;\n  animate: boolean;\n}>();\nconst enter = props.animate && !props.revealed.has(props.itemKey),\n  delay = Math.min(props.lane, 3) * 0.04;\nconst transition = {\n  y: { ...SPRING_PANEL, delay },\n  opacity: { duration: 0.2, ease: EASE_OUT, delay },\n};\nonMounted(() => props.revealed.add(props.itemKey));\n</script>\n<template>\n  <motion.div\n    :initial=\"enter ? { opacity: 0, y: 12 } : false\"\n    :animate=\"{ opacity: 1, y: 0 }\"\n    :transition=\"transition\"\n    ><slot\n  /></motion.div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { EASE_OUT, SPRING_PANEL } from \"../../../lib/ease\";\nconst props = defineProps<{\n  itemKey: string | number | bigint;\n  lane: number;\n  revealed: Set<string | number | bigint>;\n  animate: boolean;\n}>();\nconst enter = props.animate && !props.revealed.has(props.itemKey),\n  delay = Math.min(props.lane, 3) * 0.04;\nconst transition = {\n  y: { ...SPRING_PANEL, delay },\n  opacity: { duration: 0.2, ease: EASE_OUT, delay },\n};\nonMounted(() => props.revealed.add(props.itemKey));\n</script>\n<template>\n  <motion.div\n    :initial=\"enter ? { opacity: 0, y: 12 } : false\"\n    :animate=\"{ opacity: 1, y: 0 }\"\n    :transition=\"transition\"\n    ><slot\n  /></motion.div>\n</template>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { getCurrentInstance } from \"vue\";\nimport { AlertCircle, Inbox } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { RenderNode, type Content } from \"../../shared\";\nimport { useMasonry } from \"./use-masonry\";\nimport MasonryItemReveal from \"./MasonryItemReveal.vue\";\nconst props = withDefaults(\n  defineProps<{\n    items: readonly T[];\n    getItemKey: (item: T, index: number) => string | number | bigint;\n    hasMore: boolean;\n    onLoadMore?: () => void | Promise<void>;\n    loading?: boolean;\n    error?: Content;\n    estimateSize?: (item: T, index: number) => number;\n    minColumnWidth?: number;\n    maxColumns?: number;\n    gap?: number;\n    overscan?: number;\n    prefetch?: number;\n    animateItems?: boolean;\n    ariaLabel?: string;\n    contentClassName?: string;\n    itemClassName?: string;\n    emptyState?: Content;\n    endState?: Content;\n  }>(),\n  {\n    error: undefined,\n    minColumnWidth: 208,\n    maxColumns: 4,\n    gap: 12,\n    overscan: 4,\n    prefetch: 3,\n    animateItems: true,\n    ariaLabel: \"Infinite masonry feed\",\n  },\n);\nconst emit = defineEmits<{ retry: [] }>(),\n  instance = getCurrentInstance(),\n  hasRetry = () => !!instance?.vnode.props?.onRetry;\nconst {\n  root,\n  content,\n  reduce,\n  initialCount,\n  revealed,\n  hasError,\n  rows,\n  total,\n  columnWidth,\n  measure,\n} = useMasonry(props);\n</script>\n<template>\n  <section\n    v-if=\"!items.length && !hasMore && !loading && !hasError\"\n    :aria-label=\"ariaLabel\"\n    class=\"w-full overflow-hidden rounded-3xl border border-border bg-background\"\n  >\n    <slot name=\"empty\"\n      ><RenderNode v-if=\"emptyState\" :node=\"emptyState\" />\n      <div\n        v-else\n        class=\"flex h-full min-h-64 flex-col items-center justify-center px-6 text-center\"\n      >\n        <Inbox class=\"size-8 text-muted-foreground\" aria-hidden=\"true\" />\n        <p class=\"mt-3 text-sm font-medium text-foreground\">No items yet</p>\n        <p class=\"mt-1 max-w-xs text-xs leading-5 text-muted-foreground\">\n          New items will appear here when they become available.\n        </p>\n      </div></slot\n    >\n  </section>\n  <section\n    v-else\n    ref=\"root\"\n    :aria-label=\"ariaLabel\"\n    :aria-busy=\"loading\"\n    class=\"w-full contain-[layout_paint] overflow-y-auto overscroll-none rounded-3xl border border-border bg-background p-3 [overflow-anchor:none] [scrollbar-gutter:stable]\"\n  >\n    <div\n      ref=\"content\"\n      :class=\"cn('relative w-full', contentClassName)\"\n      :style=\"{ height: total + 'px' }\"\n    >\n      <div\n        v-for=\"row in rows\"\n        :key=\"String(row.key)\"\n        :ref=\"measure\"\n        :data-index=\"row.index\"\n        :class=\"\n          cn(\n            'absolute left-0 top-0 will-change-transform',\n            row.index < items.length && itemClassName,\n          )\n        \"\n        :style=\"{\n          width: columnWidth + 'px',\n          transform: `translate3d(${row.lane * (columnWidth + gap)}px, ${row.start}px, 0)`,\n        }\"\n      >\n        <template v-if=\"row.index >= items.length\"\n          ><div\n            v-if=\"hasError\"\n            class=\"flex min-h-36 flex-col items-start justify-center rounded-2xl border border-destructive/30 bg-destructive/5 p-4\"\n          >\n            <div class=\"flex items-center gap-2 text-destructive\">\n              <AlertCircle class=\"size-4\" aria-hidden=\"true\" />\n              <p class=\"text-sm font-medium\">Couldn't load more</p>\n            </div>\n            <div class=\"mt-2 text-xs leading-5 text-muted-foreground\">\n              <RenderNode :node=\"error\" />\n            </div>\n            <button\n              v-if=\"hasRetry()\"\n              type=\"button\"\n              class=\"mt-3 min-h-10 rounded-full border border-border bg-background px-4 text-xs font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n              @click=\"emit('retry')\"\n            >\n              Try again\n            </button>\n          </div>\n          <slot v-else name=\"loading\" :index=\"row.index - items.length\"\n            ><div\n              aria-hidden=\"true\"\n              class=\"animate-pulse rounded-2xl border border-border bg-card p-3\"\n              :style=\"{\n                minHeight: 144 + ((row.index - items.length) % 3) * 36 + 'px',\n              }\"\n            >\n              <div class=\"h-3 w-2/3 rounded-full bg-muted\" />\n              <div class=\"mt-3 h-2 w-full rounded-full bg-muted\" />\n              <div class=\"mt-2 h-2 w-4/5 rounded-full bg-muted\" /></div></slot\n        ></template>\n        <MasonryItemReveal\n          v-else\n          :item-key=\"row.key\"\n          :lane=\"row.lane\"\n          :revealed=\"revealed\"\n          :animate=\"animateItems && !reduce && row.index >= initialCount\"\n          ><slot :item=\"items[row.index]!\" :index=\"row.index\"\n        /></MasonryItemReveal>\n      </div>\n    </div>\n    <div\n      v-if=\"!hasMore && items.length && ($slots.end || endState)\"\n      class=\"py-4 text-center text-xs text-muted-foreground\"\n    >\n      <slot name=\"end\"><RenderNode :node=\"endState\" /></slot>\n    </div>\n    <span class=\"sr-only\" aria-live=\"polite\">{{\n      loading ? \"Loading more items\" : null\n    }}</span>\n  </section>\n</template>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { getCurrentInstance } from \"vue\";\nimport { AlertCircle, Inbox } from \"lucide-vue-next\";\nimport { cn } from \"../../../lib/utils\";\nimport { RenderNode, type Content } from \"../../shared\";\nimport { useMasonry } from \"./use-masonry\";\nimport MasonryItemReveal from \"./MasonryItemReveal.vue\";\nconst props = withDefaults(\n  defineProps<{\n    items: readonly T[];\n    getItemKey: (item: T, index: number) => string | number | bigint;\n    hasMore: boolean;\n    onLoadMore?: () => void | Promise<void>;\n    loading?: boolean;\n    error?: Content;\n    estimateSize?: (item: T, index: number) => number;\n    minColumnWidth?: number;\n    maxColumns?: number;\n    gap?: number;\n    overscan?: number;\n    prefetch?: number;\n    animateItems?: boolean;\n    ariaLabel?: string;\n    contentClassName?: string;\n    itemClassName?: string;\n    emptyState?: Content;\n    endState?: Content;\n  }>(),\n  {\n    error: undefined,\n    minColumnWidth: 208,\n    maxColumns: 4,\n    gap: 12,\n    overscan: 4,\n    prefetch: 3,\n    animateItems: true,\n    ariaLabel: \"Infinite masonry feed\",\n  },\n);\nconst emit = defineEmits<{ retry: [] }>(),\n  instance = getCurrentInstance(),\n  hasRetry = () => !!instance?.vnode.props?.onRetry;\nconst {\n  root,\n  content,\n  reduce,\n  initialCount,\n  revealed,\n  hasError,\n  rows,\n  total,\n  columnWidth,\n  measure,\n} = useMasonry(props);\n</script>\n<template>\n  <section\n    v-if=\"!items.length && !hasMore && !loading && !hasError\"\n    :aria-label=\"ariaLabel\"\n    class=\"w-full overflow-hidden rounded-3xl border border-border bg-background\"\n  >\n    <slot name=\"empty\"\n      ><RenderNode v-if=\"emptyState\" :node=\"emptyState\" />\n      <div\n        v-else\n        class=\"flex h-full min-h-64 flex-col items-center justify-center px-6 text-center\"\n      >\n        <Inbox class=\"size-8 text-muted-foreground\" aria-hidden=\"true\" />\n        <p class=\"mt-3 text-sm font-medium text-foreground\">No items yet</p>\n        <p class=\"mt-1 max-w-xs text-xs leading-5 text-muted-foreground\">\n          New items will appear here when they become available.\n        </p>\n      </div></slot\n    >\n  </section>\n  <section\n    v-else\n    ref=\"root\"\n    :aria-label=\"ariaLabel\"\n    :aria-busy=\"loading\"\n    class=\"w-full contain-[layout_paint] overflow-y-auto overscroll-none rounded-3xl border border-border bg-background p-3 [overflow-anchor:none] [scrollbar-gutter:stable]\"\n  >\n    <div\n      ref=\"content\"\n      :class=\"cn('relative w-full', contentClassName)\"\n      :style=\"{ height: total + 'px' }\"\n    >\n      <div\n        v-for=\"row in rows\"\n        :key=\"String(row.key)\"\n        :ref=\"measure\"\n        :data-index=\"row.index\"\n        :class=\"\n          cn(\n            'absolute left-0 top-0 will-change-transform',\n            row.index < items.length && itemClassName,\n          )\n        \"\n        :style=\"{\n          width: columnWidth + 'px',\n          transform: `translate3d(${row.lane * (columnWidth + gap)}px, ${row.start}px, 0)`,\n        }\"\n      >\n        <template v-if=\"row.index >= items.length\"\n          ><div\n            v-if=\"hasError\"\n            class=\"flex min-h-36 flex-col items-start justify-center rounded-2xl border border-destructive/30 bg-destructive/5 p-4\"\n          >\n            <div class=\"flex items-center gap-2 text-destructive\">\n              <AlertCircle class=\"size-4\" aria-hidden=\"true\" />\n              <p class=\"text-sm font-medium\">Couldn't load more</p>\n            </div>\n            <div class=\"mt-2 text-xs leading-5 text-muted-foreground\">\n              <RenderNode :node=\"error\" />\n            </div>\n            <button\n              v-if=\"hasRetry()\"\n              type=\"button\"\n              class=\"mt-3 min-h-10 rounded-full border border-border bg-background px-4 text-xs font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n              @click=\"emit('retry')\"\n            >\n              Try again\n            </button>\n          </div>\n          <slot v-else name=\"loading\" :index=\"row.index - items.length\"\n            ><div\n              aria-hidden=\"true\"\n              class=\"animate-pulse rounded-2xl border border-border bg-card p-3\"\n              :style=\"{\n                minHeight: 144 + ((row.index - items.length) % 3) * 36 + 'px',\n              }\"\n            >\n              <div class=\"h-3 w-2/3 rounded-full bg-muted\" />\n              <div class=\"mt-3 h-2 w-full rounded-full bg-muted\" />\n              <div class=\"mt-2 h-2 w-4/5 rounded-full bg-muted\" /></div></slot\n        ></template>\n        <MasonryItemReveal\n          v-else\n          :item-key=\"row.key\"\n          :lane=\"row.lane\"\n          :revealed=\"revealed\"\n          :animate=\"animateItems && !reduce && row.index >= initialCount\"\n          ><slot :item=\"items[row.index]!\" :index=\"row.index\"\n        /></MasonryItemReveal>\n      </div>\n    </div>\n    <div\n      v-if=\"!hasMore && items.length && ($slots.end || endState)\"\n      class=\"py-4 text-center text-xs text-muted-foreground\"\n    >\n      <slot name=\"end\"><RenderNode :node=\"endState\" /></slot>\n    </div>\n    <span class=\"sr-only\" aria-live=\"polite\">{{\n      loading ? \"Loading more items\" : null\n    }}</span>\n  </section>\n</template>\n"],"mappings":"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"}

package/dist/input-B17D4VP0.js

@@ -0,0 +1,164 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { n as t } from "./state-DWNDjqAL.js";
+import { t as n } from "./utils-DIrLOK2M.js";
+import { t as r } from "./RenderContent-CwtJ7hLl.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as S, useId as C, watch as w, withCtx as T } from "vue";
+import { AnimatePresence as E, animate as D, motion as O } from "motion-v";
+// src/motion/input/src/Input.vue?vue&type=script&setup=true&lang.ts
+var k = ["for"], A = ["data-state"], j = [
+	"id",
+	"type",
+	"value",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], M = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "Input",
+	props: {
+		modelValue: {},
+		defaultValue: { default: "" },
+		label: {},
+		error: { type: [String, Boolean] },
+		reserveErrorLine: { type: Boolean },
+		success: { type: Boolean },
+		disabled: { type: Boolean },
+		type: { default: "text" },
+		id: {},
+		leftIcon: {},
+		rightIcon: {},
+		classNames: {}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(d, { expose: M, emit: N }) {
+		let P = d, F = N, I = t(P, F, "modelValue", P.defaultValue), L = C(), R = S(), z = e(), B = i(() => P.id ?? L), V = v(!1), H = v(null), U = v(null), W = i(() => P.error ? "error" : P.success ? "success" : V.value ? "focused" : "idle"), G = i(() => [R["aria-describedby"], typeof P.error == "string" ? `${B.value}-error` : void 0].filter(Boolean).join(" ") || void 0), K, q = !1;
+		function J() {
+			K?.stop(), P.error && H.value && !z.value && (K = D(H.value, { x: [
+				0,
+				-6,
+				6,
+				-4,
+				4,
+				-2,
+				0
+			] }, { duration: .45 }));
+		}
+		function Y(e) {
+			e.defaultPrevented || P.disabled || (I.value = e.target.value, p(() => {
+				!q && U.value && U.value.value !== I.value && (U.value.value = I.value);
+			}));
+		}
+		function X(e) {
+			V.value = !0, F("focus", e);
+		}
+		function Z(e) {
+			V.value = !1, F("blur", e);
+		}
+		return w([() => !!P.error, z], J), g(J), h(() => {
+			q = !0, K?.stop();
+		}), M({
+			focus: () => U.value?.focus(),
+			input: U
+		}), (e, t) => (_(), s("div", { class: m(x(n)("flex flex-col gap-1.5", e.$attrs.class, d.classNames?.root)) }, [
+			d.label ? (_(), s("label", {
+				key: 0,
+				for: B.value,
+				class: m(x(n)("px-1 text-sm font-medium text-foreground", d.classNames?.label))
+			}, b(d.label), 11, k)) : o("", !0),
+			c("div", {
+				ref_key: "field",
+				ref: H,
+				"data-state": W.value,
+				class: m(x(n)("relative h-11 overflow-hidden rounded-full border transition-colors duration-200 border-border", V.value && !d.error && "border-foreground/40 ring-2 ring-ring/40", d.error && "border-destructive ring-2 ring-destructive/25", d.disabled && "opacity-60", d.classNames?.field))
+			}, [
+				e.$slots.leftIcon || d.leftIcon ? (_(), s("span", {
+					key: 0,
+					class: m(x(n)("pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-muted-foreground [&_svg]:h-4 [&_svg]:w-4", d.classNames?.leftIcon))
+				}, [y(e.$slots, "leftIcon", {}, () => [u(x(r), { node: d.leftIcon }, null, 8, ["node"])])], 2)) : o("", !0),
+				c("input", f({
+					ref_key: "input",
+					ref: U
+				}, {
+					...e.$attrs,
+					class: void 0
+				}, {
+					id: B.value,
+					type: d.type,
+					value: x(I),
+					disabled: d.disabled,
+					"aria-invalid": !!d.error || void 0,
+					"aria-describedby": G.value,
+					onInput: Y,
+					onFocus: X,
+					onBlur: Z,
+					class: x(n)("peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none placeholder:text-muted-foreground/75", e.$slots.leftIcon || d.leftIcon ? "pl-10" : "pl-3.5", e.$slots.rightIcon || d.rightIcon || d.success ? "pr-10" : "pr-3.5", d.disabled && "cursor-not-allowed", d.classNames?.input)
+				}), null, 16, j),
+				d.success ? (_(), a(x(O).svg, {
+					key: 1,
+					viewBox: "0 0 24 24",
+					fill: "none",
+					class: m(x(n)("absolute right-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-(--color-success)", d.classNames?.successIcon))
+				}, {
+					default: T(() => [u(x(O).path, {
+						d: "M5 12.5l4.5 4.5L19 7.5",
+						stroke: "currentColor",
+						"stroke-width": 2.5,
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round",
+						initial: { pathLength: +!!x(z) },
+						animate: { pathLength: 1 },
+						transition: {
+							duration: x(z) ? 0 : .35,
+							ease: "easeOut"
+						}
+					}, null, 8, ["initial", "transition"])]),
+					_: 1
+				}, 8, ["class"])) : e.$slots.rightIcon || d.rightIcon ? (_(), s("span", {
+					key: 2,
+					class: m(x(n)("absolute right-0 top-0 flex h-full items-center text-muted-foreground [&_button]:grid [&_button]:size-11 [&_button]:place-items-center [&_svg]:h-4 [&_svg]:w-4", d.classNames?.rightIcon))
+				}, [y(e.$slots, "rightIcon", {}, () => [u(x(r), { node: d.rightIcon }, null, 8, ["node"])])], 2)) : o("", !0)
+			], 10, A),
+			c("div", { class: m(d.reserveErrorLine ? "min-h-4" : "contents") }, [u(x(E), { initial: !1 }, {
+				default: T(() => [typeof d.error == "string" && d.error ? (_(), a(x(O).p, {
+					key: 0,
+					id: `${B.value}-error`,
+					role: "alert",
+					initial: x(z) ? { opacity: 0 } : {
+						opacity: 0,
+						y: -4,
+						filter: "blur(4px)"
+					},
+					animate: {
+						opacity: 1,
+						y: 0,
+						filter: "blur(0px)"
+					},
+					exit: x(z) ? { opacity: 0 } : {
+						opacity: 0,
+						y: -4,
+						filter: "blur(4px)"
+					},
+					transition: { duration: .2 },
+					class: m(x(n)("px-1 text-xs text-destructive", d.classNames?.errorMessage))
+				}, {
+					default: T(() => [l(b(d.error), 1)]),
+					_: 1
+				}, 8, [
+					"id",
+					"initial",
+					"exit",
+					"class"
+				])) : o("", !0)]),
+				_: 1
+			})], 2)
+		], 2));
+	}
+});
+export { M as t };
+
+//# sourceMappingURL=input-B17D4VP0.js.map

package/dist/input-B17D4VP0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-B17D4VP0.js","names":["$attrs","$slots","_openBlock","_createElementBlock","_normalizeClass","_unref","_toDisplayString","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RenderContent","_mergeProps","_createBlock","_withCtx","_createTextVNode","_sfc_main","useReducedMotion","useMotionState","cn","RenderContent_default","_hoisted_1","_hoisted_2","_hoisted_3","Input_default","defineComponent","__expose","__emit","props","__props","emit","value","generatedId","useId","attrs","useAttrs","reduced","controlId","computed","focused","ref","field","input","state","descriptionIds","feedback","disposed","errorFeedback","animate","edit","event","nextTick","focus","blur","watch","onMounted","onBeforeUnmount","openBlock","createElementBlock","normalizeClass","unref","_ctx","toDisplayString","createCommentVNode","createElementVNode","renderSlot","createVNode","mergeProps","createBlock","motion","withCtx","AnimatePresence","createTextVNode"],"sources":["../src/motion/input/src/Input.vue","../src/motion/input/src/Input.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId } from \"vue\";\nimport { AnimatePresence, animate, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport RenderContent from \"../../../lib/RenderContent\";\nimport { useMotionState } from \"../../state\";\nimport { watch } from \"vue\";\nexport interface InputProps {\n  modelValue?: string; defaultValue?: string; label?: string; error?: string | boolean; reserveErrorLine?: boolean;\n  success?: boolean; disabled?: boolean; type?: string; id?: string; leftIcon?: any; rightIcon?: any; classNames?: Record<string, string>;\n}\nconst props = withDefaults(defineProps<InputProps>(), { defaultValue: \"\", type: \"text\" });\nconst emit = defineEmits([\"update:modelValue\", \"change\", \"focus\", \"blur\"]);\nconst value = useMotionState(props, emit, \"modelValue\", props.defaultValue);\nconst generatedId = useId(), attrs = useAttrs(), reduced = useReducedMotion();\nconst controlId = computed(() => props.id ?? generatedId);\nconst focused = ref(false), field = ref<HTMLElement | null>(null), input = ref<HTMLInputElement | null>(null);\nconst state = computed(() => props.error ? \"error\" : props.success ? \"success\" : focused.value ? \"focused\" : \"idle\");\nconst descriptionIds = computed(() => [attrs[\"aria-describedby\"], typeof props.error === \"string\" ? `${controlId.value}-error` : undefined].filter(Boolean).join(\" \") || undefined);\nlet feedback: ReturnType<typeof animate> | undefined, disposed = false;\nfunction errorFeedback() {\n  feedback?.stop();\n  if (props.error && field.value && !reduced.value) feedback = animate(field.value, { x: [0, -6, 6, -4, 4, -2, 0] }, { duration: 0.45 });\n}\nfunction edit(event: Event) {\n  if (event.defaultPrevented || props.disabled) return;\n  value.value = (event.target as HTMLInputElement).value;\n  void nextTick(() => { if (!disposed && input.value && input.value.value !== value.value) input.value.value = value.value; });\n}\nfunction focus(event: FocusEvent) { focused.value = true; emit(\"focus\", event); }\nfunction blur(event: FocusEvent) { focused.value = false; emit(\"blur\", event); }\nwatch([() => !!props.error, reduced], errorFeedback);\nonMounted(errorFeedback);\nonBeforeUnmount(() => { disposed = true; feedback?.stop(); });\ndefineExpose({ focus: () => input.value?.focus(), input });\n</script>\n<template>\n  <div :class=\"cn('flex flex-col gap-1.5', $attrs.class, classNames?.root)\">\n    <label v-if=\"label\" :for=\"controlId\" :class=\"cn('px-1 text-sm font-medium text-foreground', classNames?.label)\">{{ label }}</label>\n    <div ref=\"field\" :data-state=\"state\" :class=\"cn('relative h-11 overflow-hidden rounded-full border transition-colors duration-200 border-border', focused && !error && 'border-foreground/40 ring-2 ring-ring/40', error && 'border-destructive ring-2 ring-destructive/25', disabled && 'opacity-60', classNames?.field)\">\n      <span v-if=\"$slots.leftIcon || leftIcon\" :class=\"cn('pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-muted-foreground [&_svg]:h-4 [&_svg]:w-4', classNames?.leftIcon)\"><slot name=\"leftIcon\"><RenderContent :node=\"leftIcon\" /></slot></span>\n      <input ref=\"input\" v-bind=\"{ ...$attrs, class: undefined }\" :id=\"controlId\" :type=\"type\" :value=\"value\" :disabled=\"disabled\" :aria-invalid=\"!!error || undefined\" :aria-describedby=\"descriptionIds\"\n        @input=\"edit\" @focus=\"focus\" @blur=\"blur\" :class=\"cn('peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none placeholder:text-muted-foreground/75', $slots.leftIcon || leftIcon ? 'pl-10' : 'pl-3.5', $slots.rightIcon || rightIcon || success ? 'pr-10' : 'pr-3.5', disabled && 'cursor-not-allowed', classNames?.input)\" />\n      <motion.svg v-if=\"success\" viewBox=\"0 0 24 24\" fill=\"none\" :class=\"cn('absolute right-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-(--color-success)', classNames?.successIcon)\">\n        <motion.path d=\"M5 12.5l4.5 4.5L19 7.5\" stroke=\"currentColor\" :stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          :initial=\"{ pathLength: reduced ? 1 : 0 }\" :animate=\"{ pathLength: 1 }\" :transition=\"{ duration: reduced ? 0 : 0.35, ease: 'easeOut' }\" />\n      </motion.svg>\n      <span v-else-if=\"$slots.rightIcon || rightIcon\" :class=\"cn('absolute right-0 top-0 flex h-full items-center text-muted-foreground [&_button]:grid [&_button]:size-11 [&_button]:place-items-center [&_svg]:h-4 [&_svg]:w-4', classNames?.rightIcon)\"><slot name=\"rightIcon\"><RenderContent :node=\"rightIcon\" /></slot></span>\n    </div>\n    <div :class=\"reserveErrorLine ? 'min-h-4' : 'contents'\"><AnimatePresence :initial=\"false\">\n      <motion.p v-if=\"typeof error === 'string' && error\" :id=\"`${controlId}-error`\" role=\"alert\"\n        :initial=\"reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: 'blur(4px)' }\" :animate=\"{ opacity: 1, y: 0, filter: 'blur(0px)' }\"\n        :exit=\"reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: 'blur(4px)' }\" :transition=\"{ duration: 0.2 }\" :class=\"cn('px-1 text-xs text-destructive', classNames?.errorMessage)\">{{ error }}</motion.p>\n    </AnimatePresence></div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId } from \"vue\";\nimport { AnimatePresence, animate, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport RenderContent from \"../../../lib/RenderContent\";\nimport { useMotionState } from \"../../state\";\nimport { watch } from \"vue\";\nexport interface InputProps {\n  modelValue?: string; defaultValue?: string; label?: string; error?: string | boolean; reserveErrorLine?: boolean;\n  success?: boolean; disabled?: boolean; type?: string; id?: string; leftIcon?: any; rightIcon?: any; classNames?: Record<string, string>;\n}\nconst props = withDefaults(defineProps<InputProps>(), { defaultValue: \"\", type: \"text\" });\nconst emit = defineEmits([\"update:modelValue\", \"change\", \"focus\", \"blur\"]);\nconst value = useMotionState(props, emit, \"modelValue\", props.defaultValue);\nconst generatedId = useId(), attrs = useAttrs(), reduced = useReducedMotion();\nconst controlId = computed(() => props.id ?? generatedId);\nconst focused = ref(false), field = ref<HTMLElement | null>(null), input = ref<HTMLInputElement | null>(null);\nconst state = computed(() => props.error ? \"error\" : props.success ? \"success\" : focused.value ? \"focused\" : \"idle\");\nconst descriptionIds = computed(() => [attrs[\"aria-describedby\"], typeof props.error === \"string\" ? `${controlId.value}-error` : undefined].filter(Boolean).join(\" \") || undefined);\nlet feedback: ReturnType<typeof animate> | undefined, disposed = false;\nfunction errorFeedback() {\n  feedback?.stop();\n  if (props.error && field.value && !reduced.value) feedback = animate(field.value, { x: [0, -6, 6, -4, 4, -2, 0] }, { duration: 0.45 });\n}\nfunction edit(event: Event) {\n  if (event.defaultPrevented || props.disabled) return;\n  value.value = (event.target as HTMLInputElement).value;\n  void nextTick(() => { if (!disposed && input.value && input.value.value !== value.value) input.value.value = value.value; });\n}\nfunction focus(event: FocusEvent) { focused.value = true; emit(\"focus\", event); }\nfunction blur(event: FocusEvent) { focused.value = false; emit(\"blur\", event); }\nwatch([() => !!props.error, reduced], errorFeedback);\nonMounted(errorFeedback);\nonBeforeUnmount(() => { disposed = true; feedback?.stop(); });\ndefineExpose({ focus: () => input.value?.focus(), input });\n</script>\n<template>\n  <div :class=\"cn('flex flex-col gap-1.5', $attrs.class, classNames?.root)\">\n    <label v-if=\"label\" :for=\"controlId\" :class=\"cn('px-1 text-sm font-medium text-foreground', classNames?.label)\">{{ label }}</label>\n    <div ref=\"field\" :data-state=\"state\" :class=\"cn('relative h-11 overflow-hidden rounded-full border transition-colors duration-200 border-border', focused && !error && 'border-foreground/40 ring-2 ring-ring/40', error && 'border-destructive ring-2 ring-destructive/25', disabled && 'opacity-60', classNames?.field)\">\n      <span v-if=\"$slots.leftIcon || leftIcon\" :class=\"cn('pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-muted-foreground [&_svg]:h-4 [&_svg]:w-4', classNames?.leftIcon)\"><slot name=\"leftIcon\"><RenderContent :node=\"leftIcon\" /></slot></span>\n      <input ref=\"input\" v-bind=\"{ ...$attrs, class: undefined }\" :id=\"controlId\" :type=\"type\" :value=\"value\" :disabled=\"disabled\" :aria-invalid=\"!!error || undefined\" :aria-describedby=\"descriptionIds\"\n        @input=\"edit\" @focus=\"focus\" @blur=\"blur\" :class=\"cn('peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none placeholder:text-muted-foreground/75', $slots.leftIcon || leftIcon ? 'pl-10' : 'pl-3.5', $slots.rightIcon || rightIcon || success ? 'pr-10' : 'pr-3.5', disabled && 'cursor-not-allowed', classNames?.input)\" />\n      <motion.svg v-if=\"success\" viewBox=\"0 0 24 24\" fill=\"none\" :class=\"cn('absolute right-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-(--color-success)', classNames?.successIcon)\">\n        <motion.path d=\"M5 12.5l4.5 4.5L19 7.5\" stroke=\"currentColor\" :stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          :initial=\"{ pathLength: reduced ? 1 : 0 }\" :animate=\"{ pathLength: 1 }\" :transition=\"{ duration: reduced ? 0 : 0.35, ease: 'easeOut' }\" />\n      </motion.svg>\n      <span v-else-if=\"$slots.rightIcon || rightIcon\" :class=\"cn('absolute right-0 top-0 flex h-full items-center text-muted-foreground [&_button]:grid [&_button]:size-11 [&_button]:place-items-center [&_svg]:h-4 [&_svg]:w-4', classNames?.rightIcon)\"><slot name=\"rightIcon\"><RenderContent :node=\"rightIcon\" /></slot></span>\n    </div>\n    <div :class=\"reserveErrorLine ? 'min-h-4' : 'contents'\"><AnimatePresence :initial=\"false\">\n      <motion.p v-if=\"typeof error === 'string' && error\" :id=\"`${controlId}-error`\" role=\"alert\"\n        :initial=\"reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: 'blur(4px)' }\" :animate=\"{ opacity: 1, y: 0, filter: 'blur(0px)' }\"\n        :exit=\"reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: 'blur(4px)' }\" :transition=\"{ duration: 0.2 }\" :class=\"cn('px-1 text-xs text-destructive', classNames?.errorMessage)\">{{ error }}</motion.p>\n    </AnimatePresence></div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/interactivity-fV41y350.js

@@ -0,0 +1,23 @@
+import { onBeforeUnmount as e, watch as t } from "vue";
+// src/motion/_overlay/interactivity.ts
+function n(n, r, i = []) {
+	let a = /* @__PURE__ */ new Map();
+	t([
+		n,
+		...r,
+		...i
+	], () => {
+		n.value ? (a.forEach((e, t) => {
+			t.style.pointerEvents = e.pointer, t.inert = e.inert;
+		}), a.clear()) : [...r, ...i].forEach((e) => {
+			let t = e.value;
+			t && (a.has(t) || a.set(t, {
+				pointer: t.style.pointerEvents,
+				inert: t.inert
+			}), r.includes(e) && (t.style.pointerEvents = "none"), i.includes(e) && (t.inert = !0));
+		});
+	}, { flush: "sync" }), e(() => a.clear());
+}
+export { n as t };
+
+//# sourceMappingURL=interactivity-fV41y350.js.map

package/dist/interactivity-fV41y350.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactivity-fV41y350.js","names":["useExitInteractivity","saved","watch","open","surfaces","inert","previous","element","reference","onBeforeUnmount"],"sources":["../src/motion/_overlay/interactivity.ts"],"sourcesContent":["import { onBeforeUnmount, watch, type Ref } from \"vue\";\n/** Exit animations retain DOM; their controls stop receiving input immediately. */\nexport function useExitInteractivity(open: Ref<boolean>, surfaces: Ref<HTMLElement | null>[], inert: Ref<HTMLElement | null>[] = []) {\n  const saved = new Map<HTMLElement, { pointer: string; inert: boolean }>();\n  watch([open, ...surfaces, ...inert], () => {\n    if (open.value) {\n      saved.forEach((previous, element) => { element.style.pointerEvents = previous.pointer; element.inert = previous.inert; });\n      saved.clear();\n      return;\n    }\n    [...surfaces, ...inert].forEach(reference => {\n      const element = reference.value;\n      if (!element) return;\n      if (!saved.has(element)) saved.set(element, { pointer: element.style.pointerEvents, inert: element.inert });\n      if (surfaces.includes(reference)) element.style.pointerEvents = \"none\";\n      if (inert.includes(reference)) element.inert = true;\n    });\n  }, { flush: \"sync\" });\n  onBeforeUnmount(() => saved.clear());\n}\n"],"mappings":";;AAEA,SAAgBA,EAAqB,GAAoB,GAAqC,IAAmC,CAAC,GAAG;CACnI,IAAMC,oBAAQ,IAAI,IAAsD;CAexE,AAdAC,EAAM;EAACC;EAAM,GAAGC;EAAU,GAAGC;CAAK,SAAS;EACzC,AAAIF,EAAK,SACPF,EAAM,SAAS,GAAU,MAAY;GAAkD,AAAhD,EAAQ,MAAM,gBAAgBK,EAAS,SAAS,EAAQ,QAAQA,EAAS;EAAO,CAAC,GACxHL,EAAM,MAAM,KAGd,CAAC,GAAGG,GAAU,GAAGC,CAAK,CAAC,CAAC,SAAQ,MAAa;GAC3C,IAAME,IAAUC,EAAU;GAC1B,AAAKD,MACAN,EAAM,IAAIM,CAAO,KAAGN,EAAM,IAAIM,GAAS;IAAE,SAASA,EAAQ,MAAM;IAAe,OAAOA,EAAQ;GAAM,CAAC,GACtGH,EAAS,SAASI,CAAS,MAAG,EAAQ,MAAM,gBAAgB,SAC5DH,EAAM,SAASG,CAAS,MAAG,EAAQ,QAAQ;EACjD,CAAC;CACH,GAAG,EAAE,OAAO,OAAO,CAAC,GACpBC,QAAsBR,EAAM,MAAM,CAAC;AACrC"}