@orvui/vue 0.0.0-stage → 0.1.1

package/dist/otp-input-CHNtAMa9.js

@@ -0,0 +1,324 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { r as t } from "./ease-rIvCM4O3.js";
+import { t as n } from "./utils-DIrLOK2M.js";
+import { Fragment as r, 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, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useId as S, watch as C, withCtx as w } from "vue";
+import { AnimatePresence as T, animate as E, motion as D } from "motion-v";
+// src/blocks/otp-input/src/use-otp-fields.ts
+function O(e) {
+	let t = i(() => Number.isFinite(e.length()) ? Math.max(1, Math.floor(e.length())) : 1), n = (e) => e.replace(/\D/g, "").slice(0, t.value), r = (e) => {
+		let r = n(e);
+		return Array.from({ length: t.value }, (e, t) => r[t] ?? "");
+	}, a = v(r(e.value() ?? e.initial)), o = v(0), s = v("");
+	function c(e) {
+		s.value = e === s.value ? e + "\xA0" : e;
+	}
+	function l(n) {
+		let r = a.value, i = n.map((e, t) => e === r[t] ? -1 : t).filter((e) => e >= 0), o = `${n.filter(Boolean).length} of ${t.value} digits entered.`;
+		if (i.length === 1) {
+			let t = n[i[0]];
+			c(t ? `${e.masked() ? "Digit" : t}. ${o}` : `Deleted. ${o}`);
+		} else i.length && c(o);
+		a.value = n;
+		let s = n.join("");
+		e.changed(s), !r.every(Boolean) && n.every(Boolean) && e.completed(s);
+	}
+	function u(e) {
+		let n = e.replace(/\D/g, "");
+		if (!n) return;
+		let r = a.value.slice(), i = Math.min(t.value, o.value + n.length);
+		for (let e = o.value; e < i; e++) r[e] = n[e - o.value];
+		l(r), o.value = Math.min(t.value - 1, i);
+	}
+	function d(e) {
+		let t = e && !a.value[o.value] ? o.value - 1 : o.value;
+		if (t < 0) return;
+		let n = a.value.slice();
+		n[t] = "", l(n), o.value = t;
+	}
+	function f(n) {
+		let r = {
+			ArrowLeft: o.value - 1,
+			ArrowRight: o.value + 1,
+			Home: 0,
+			End: t.value - 1
+		};
+		if (!(n in r)) return !1;
+		o.value = Math.max(0, Math.min(t.value - 1, r[n]));
+		let i = a.value[o.value];
+		return c(`${i ? e.masked() ? "Filled" : i : "Empty"}, digit ${o.value + 1} of ${t.value}.`), !0;
+	}
+	function p(e) {
+		let i = n(e);
+		i && (l(r(i)), o.value = Math.min(i.length, t.value - 1));
+	}
+	return C([e.value, t], ([e]) => {
+		e !== void 0 && n(e) !== a.value.join("") ? a.value = r(e) : a.value.length !== t.value && (a.value = Array.from({ length: t.value }, (e, t) => a.value[t] ?? "")), o.value = Math.min(o.value, t.value - 1);
+	}), {
+		count: t,
+		fields: a,
+		cursor: o,
+		announcement: s,
+		insert: u,
+		erase: d,
+		navigate: f,
+		replace: p
+	};
+}
+// src/blocks/otp-input/src/OTPInput.vue?vue&type=script&setup=true&lang.ts
+var k = ["data-status"], A = ["for"], j = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"maxlength"
+], M = ["data-active", "data-filled"], N = {
+	width: "20",
+	height: "20",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": 3,
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, P = {
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	class: "sr-only"
+}, F = ["id"], I = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "OTPInput",
+	props: {
+		length: { default: 6 },
+		modelValue: {},
+		value: {},
+		defaultValue: { default: "" },
+		label: {},
+		hint: {},
+		successMessage: {},
+		errorMessage: {},
+		status: { default: "idle" },
+		mask: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		autoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: "One-time passcode" },
+		className: {}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"complete"
+	],
+	setup(d, { emit: I }) {
+		let L = d, R = I, z = O({
+			length: () => L.length,
+			value: () => L.modelValue ?? L.value,
+			initial: L.defaultValue,
+			masked: () => L.mask,
+			changed(e) {
+				R("update:modelValue", e), R("change", e);
+			},
+			completed(e) {
+				R("complete", e);
+			}
+		}), { count: B, fields: V, cursor: H, announcement: U } = z, W = S(), G = v(), K = v(), q = v(!1), J = e(), Y = i(() => L.status === "success" ? L.successMessage : L.status === "error" ? L.errorMessage : L.hint), X = i(() => L.status === "success" ? "text-emerald-500" : L.status === "error" ? "text-destructive" : "text-muted-foreground");
+		function Z(e, t) {
+			return n(L.status === "success" ? "border-emerald-500/60 text-foreground" : L.status === "error" ? "border-destructive/60 text-foreground" : e ? "border-border-strong text-foreground" : "border-border text-muted-foreground", q.value && H.value === t && L.status === "idle" && "border-foreground", L.disabled && "opacity-50");
+		}
+		function Q(e) {
+			L.disabled || e.metaKey || e.altKey || e.ctrlKey || (/^[0-9]$/.test(e.key) ? (e.preventDefault(), z.insert(e.key)) : e.key === "Backspace" || e.key === "Delete" ? (e.preventDefault(), z.erase(e.key === "Backspace")) : z.navigate(e.key) && e.preventDefault());
+		}
+		function ee(e) {
+			if (L.disabled) return;
+			e.preventDefault();
+			let t = Array.from(K.value?.children ?? []).findIndex((t) => e.clientX < t.getBoundingClientRect().right), n = V.value.indexOf("");
+			H.value = Math.min(t < 0 ? B.value - 1 : t, n < 0 ? B.value - 1 : n), G.value?.focus();
+		}
+		function te(e) {
+			let t = e.target, n = t.value;
+			t.value = "", L.disabled || z.replace(n);
+		}
+		function ne(e) {
+			L.disabled || (e.preventDefault(), z.insert(e.clipboardData?.getData("text") ?? ""));
+		}
+		let $;
+		return C(() => L.status, (e) => {
+			e === "error" && !J.value && K.value && ($?.stop(), $ = E(K.value, { x: [
+				0,
+				-5,
+				5,
+				-3,
+				3,
+				-1,
+				0
+			] }, {
+				duration: .45,
+				ease: t
+			}));
+		}), g(() => {
+			L.autoFocus && G.value?.focus();
+		}), h(() => $?.stop()), (e, i) => (_(), s("div", {
+			class: p(x(n)("inline-flex flex-col gap-2", d.className, e.$attrs.class)),
+			style: m(e.$attrs.style),
+			"data-status": d.status
+		}, [
+			d.label ? (_(), s("label", {
+				key: 0,
+				for: x(W) + "-input",
+				class: "text-sm font-medium text-foreground"
+			}, b(d.label), 9, A)) : o("", !0),
+			c("fieldset", {
+				class: "relative m-0 inline-flex w-max border-0 p-0",
+				onMousedown: ee
+			}, [
+				c("input", f({
+					ref_key: "input",
+					ref: G
+				}, {
+					...e.$attrs,
+					class: void 0,
+					style: void 0
+				}, {
+					id: x(W) + "-input",
+					inputmode: "numeric",
+					autocomplete: "one-time-code",
+					disabled: d.disabled,
+					"aria-label": d.ariaLabel,
+					"aria-invalid": d.status === "error",
+					"aria-describedby": Y.value ? x(W) + "-hint" : void 0,
+					value: "",
+					maxlength: x(B),
+					onKeydown: Q,
+					onInput: te,
+					onPaste: ne,
+					onFocus: i[0] ||= (e) => q.value = !0,
+					onBlur: i[1] ||= (e) => q.value = !1,
+					class: "absolute inset-0 z-20 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed"
+				}), null, 16, j),
+				c("div", {
+					ref_key: "strip",
+					ref: K,
+					class: "flex items-center gap-2"
+				}, [(_(!0), s(r, null, y(x(V), (e, r) => (_(), s("div", {
+					key: x(W) + "-" + r,
+					"data-active": q.value && r === x(H),
+					"data-filled": e !== "",
+					class: p(x(n)("relative grid h-14 w-12 place-items-center overflow-hidden rounded-xl border text-xl font-semibold tabular-nums transition-colors duration-200", Z(e, r)))
+				}, [q.value && r === x(H) && d.status !== "success" ? (_(), a(x(D).span, {
+					key: 0,
+					"aria-hidden": "true",
+					animate: x(J) ? void 0 : { opacity: [
+						1,
+						1,
+						0,
+						0
+					] },
+					transition: x(J) ? void 0 : {
+						duration: 1,
+						repeat: Infinity,
+						ease: "linear"
+					},
+					class: p(x(n)("pointer-events-none absolute top-1/2 h-6 w-px -translate-y-1/2 bg-foreground", e ? "right-3" : "left-1/2 -translate-x-1/2"))
+				}, null, 8, [
+					"animate",
+					"transition",
+					"class"
+				])) : o("", !0), u(x(T), { initial: !1 }, {
+					default: w(() => [e ? (_(), a(x(D).span, {
+						key: e,
+						class: "absolute inset-0 grid place-items-center leading-none",
+						initial: x(J) ? { opacity: 0 } : {
+							y: 14,
+							opacity: 0,
+							filter: "blur(4px)"
+						},
+						animate: x(J) ? { opacity: 1 } : {
+							y: 0,
+							opacity: 1,
+							filter: "blur(0px)"
+						},
+						exit: x(J) ? { opacity: 0 } : {
+							y: -14,
+							opacity: 0,
+							filter: "blur(4px)"
+						},
+						transition: x(J) ? { duration: 0 } : {
+							duration: .22,
+							ease: x(t)
+						}
+					}, {
+						default: w(() => [l(b(d.mask ? "•" : e), 1)]),
+						_: 2
+					}, 1032, [
+						"initial",
+						"animate",
+						"exit",
+						"transition"
+					])) : o("", !0)]),
+					_: 2
+				}, 1024)], 10, M))), 128))], 512),
+				u(x(T), null, {
+					default: w(() => [d.status === "success" ? (_(), a(x(D).span, {
+						key: 0,
+						"aria-hidden": "true",
+						class: "pointer-events-none absolute -right-7 top-1/2 -translate-y-1/2 text-emerald-500",
+						initial: x(J) ? { opacity: 0 } : {
+							scale: .6,
+							opacity: 0
+						},
+						animate: x(J) ? { opacity: 1 } : {
+							scale: 1,
+							opacity: 1
+						},
+						exit: x(J) ? { opacity: 0 } : {
+							scale: .6,
+							opacity: 0
+						},
+						transition: x(J) ? { duration: 0 } : {
+							type: "spring",
+							stiffness: 500,
+							damping: 28
+						}
+					}, {
+						default: w(() => [(_(), s("svg", N, [i[2] ||= c("title", null, "Verified", -1), u(x(D).path, {
+							d: "M5 13l4 4L19 7",
+							initial: { pathLength: +!!x(J) },
+							animate: { pathLength: 1 },
+							transition: x(J) ? { duration: 0 } : {
+								duration: .35,
+								ease: x(t),
+								delay: .1
+							}
+						}, null, 8, ["initial", "transition"])]))]),
+						_: 1
+					}, 8, [
+						"initial",
+						"animate",
+						"exit",
+						"transition"
+					])) : o("", !0)]),
+					_: 1
+				})
+			], 32),
+			c("span", P, b(x(U)), 1),
+			Y.value ? (_(), s("p", {
+				key: 1,
+				id: x(W) + "-hint",
+				"aria-live": "polite",
+				class: p(x(n)("text-sm", X.value))
+			}, b(Y.value), 11, F)) : o("", !0)
+		], 14, k));
+	}
+});
+export { I as t };
+
+//# sourceMappingURL=otp-input-CHNtAMa9.js.map

package/dist/otp-input-CHNtAMa9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-CHNtAMa9.js","names":["$attrs","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_toDisplayString","_createCommentVNode","_createElementVNode","_mergeProps","_Fragment","_renderList","_createBlock","_createVNode","_withCtx","_createTextVNode","_sfc_main","useReducedMotion","EASE_OUT","cn","useOtpFields","count","computed","options","digits","value","spread","clean","index","fields","ref","cursor","announcement","announce","publish","previous","changes","next","progress","replacement","insert","addition","end","erase","backwards","navigate","positions","key","replace","watch","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","OTPInput_default","defineComponent","__emit","props","__props","emit","editor","id","useId","input","strip","focused","reduce","message","messageTone","tone","keydown","event","pointer","position","element","firstEmpty","autofill","field","paste","feedback","status","animate","onMounted","onBeforeUnmount","openBlock","createElementBlock","normalizeClass","unref","_ctx","normalizeStyle","toDisplayString","createCommentVNode","createElementVNode","mergeProps","_cache","Fragment","renderList","digit","createBlock","motion","createVNode","AnimatePresence","withCtx","createTextVNode"],"sources":["../src/blocks/otp-input/src/use-otp-fields.ts","../src/blocks/otp-input/src/OTPInput.vue","../src/blocks/otp-input/src/OTPInput.vue"],"sourcesContent":["import { computed, ref, watch } from \"vue\";\n\ntype Options = {\n  length: () => number;\n  value: () => string | undefined;\n  initial: string;\n  masked: () => boolean;\n  changed: (value: string) => void;\n  completed: (value: string) => void;\n};\n\nexport function useOtpFields(options: Options) {\n  const count = computed(() =>\n    Number.isFinite(options.length())\n      ? Math.max(1, Math.floor(options.length()))\n      : 1,\n  );\n  const digits = (value: string) =>\n    value.replace(/\\D/g, \"\").slice(0, count.value);\n  const spread = (value: string) => {\n    const clean = digits(value);\n    return Array.from(\n      { length: count.value },\n      (_, index) => clean[index] ?? \"\",\n    );\n  };\n  const fields = ref(spread(options.value() ?? options.initial));\n  const cursor = ref(0);\n  const announcement = ref(\"\");\n  function announce(value: string) {\n    announcement.value =\n      value === announcement.value ? value + \"\\u00a0\" : value;\n  }\n  function publish(next: string[]) {\n    const previous = fields.value;\n    const changes = next\n      .map((value, index) => (value !== previous[index] ? index : -1))\n      .filter((index) => index >= 0);\n    const progress = `${next.filter(Boolean).length} of ${count.value} digits entered.`;\n    if (changes.length === 1) {\n      const replacement = next[changes[0]];\n      announce(\n        replacement\n          ? `${options.masked() ? \"Digit\" : replacement}. ${progress}`\n          : `Deleted. ${progress}`,\n      );\n    } else if (changes.length) announce(progress);\n    fields.value = next;\n    const value = next.join(\"\");\n    options.changed(value);\n    if (!previous.every(Boolean) && next.every(Boolean))\n      options.completed(value);\n  }\n  function insert(value: string) {\n    const addition = value.replace(/\\D/g, \"\");\n    if (!addition) return;\n    const next = fields.value.slice();\n    const end = Math.min(count.value, cursor.value + addition.length);\n    for (let index = cursor.value; index < end; index++)\n      next[index] = addition[index - cursor.value];\n    publish(next);\n    cursor.value = Math.min(count.value - 1, end);\n  }\n  function erase(backwards: boolean) {\n    const index =\n      backwards && !fields.value[cursor.value]\n        ? cursor.value - 1\n        : cursor.value;\n    if (index < 0) return;\n    const next = fields.value.slice();\n    next[index] = \"\";\n    publish(next);\n    cursor.value = index;\n  }\n  function navigate(key: string) {\n    const positions: Record<string, number> = {\n      ArrowLeft: cursor.value - 1,\n      ArrowRight: cursor.value + 1,\n      Home: 0,\n      End: count.value - 1,\n    };\n    if (!(key in positions)) return false;\n    cursor.value = Math.max(0, Math.min(count.value - 1, positions[key]));\n    const value = fields.value[cursor.value];\n    announce(\n      `${value ? (options.masked() ? \"Filled\" : value) : \"Empty\"}, digit ${cursor.value + 1} of ${count.value}.`,\n    );\n    return true;\n  }\n  function replace(value: string) {\n    const clean = digits(value);\n    if (!clean) return;\n    publish(spread(clean));\n    cursor.value = Math.min(clean.length, count.value - 1);\n  }\n  watch([options.value, count], ([value]) => {\n    if (value !== undefined && digits(value) !== fields.value.join(\"\"))\n      fields.value = spread(value);\n    else if (fields.value.length !== count.value)\n      fields.value = Array.from(\n        { length: count.value },\n        (_, index) => fields.value[index] ?? \"\",\n      );\n    cursor.value = Math.min(cursor.value, count.value - 1);\n  });\n  return {\n    count,\n    fields,\n    cursor,\n    announcement,\n    insert,\n    erase,\n    navigate,\n    replace,\n  };\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, watch, onMounted, onBeforeUnmount, useId } from \"vue\";\nimport { motion, AnimatePresence, animate } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport { useOtpFields } from \"./use-otp-fields\";\ndefineOptions({ inheritAttrs: false });\nexport type OTPStatus = \"idle\" | \"error\" | \"success\";\nconst props = withDefaults(\n  defineProps<{\n    length?: number;\n    modelValue?: string;\n    value?: string;\n    defaultValue?: string;\n    label?: string;\n    hint?: string;\n    successMessage?: string;\n    errorMessage?: string;\n    status?: OTPStatus;\n    mask?: boolean;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    ariaLabel?: string;\n    className?: string;\n  }>(),\n  {\n    length: 6,\n    defaultValue: \"\",\n    status: \"idle\",\n    mask: false,\n    disabled: false,\n    autoFocus: false,\n    ariaLabel: \"One-time passcode\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string];\n  change: [value: string];\n  complete: [value: string];\n}>();\nconst editor = useOtpFields({\n  length: () => props.length,\n  value: () => props.modelValue ?? props.value,\n  initial: props.defaultValue,\n  masked: () => props.mask,\n  changed(value) {\n    emit(\"update:modelValue\", value);\n    emit(\"change\", value);\n  },\n  completed(value) {\n    emit(\"complete\", value);\n  },\n});\nconst { count, fields, cursor, announcement } = editor;\nconst id = useId();\nconst input = ref<HTMLInputElement>();\nconst strip = ref<HTMLDivElement>();\nconst focused = ref(false);\nconst reduce = useReducedMotion();\nconst message = computed(() =>\n  props.status === \"success\"\n    ? props.successMessage\n    : props.status === \"error\"\n      ? props.errorMessage\n      : props.hint,\n);\nconst messageTone = computed(() =>\n  props.status === \"success\"\n    ? \"text-emerald-500\"\n    : props.status === \"error\"\n      ? \"text-destructive\"\n      : \"text-muted-foreground\",\n);\nfunction tone(value: string, index: number) {\n  return cn(\n    props.status === \"success\"\n      ? \"border-emerald-500/60 text-foreground\"\n      : props.status === \"error\"\n        ? \"border-destructive/60 text-foreground\"\n        : value\n          ? \"border-border-strong text-foreground\"\n          : \"border-border text-muted-foreground\",\n    focused.value &&\n      cursor.value === index &&\n      props.status === \"idle\" &&\n      \"border-foreground\",\n    props.disabled && \"opacity-50\",\n  );\n}\nfunction keydown(event: KeyboardEvent) {\n  if (props.disabled || event.metaKey || event.altKey || event.ctrlKey) return;\n  if (/^[0-9]$/.test(event.key)) {\n    event.preventDefault();\n    editor.insert(event.key);\n    return;\n  }\n  if (event.key === \"Backspace\" || event.key === \"Delete\") {\n    event.preventDefault();\n    editor.erase(event.key === \"Backspace\");\n    return;\n  }\n  if (editor.navigate(event.key)) event.preventDefault();\n}\nfunction pointer(event: MouseEvent) {\n  if (props.disabled) return;\n  event.preventDefault();\n  const children = Array.from(strip.value?.children ?? []);\n  const position = children.findIndex(\n    (element) => event.clientX < element.getBoundingClientRect().right,\n  );\n  const firstEmpty = fields.value.indexOf(\"\");\n  cursor.value = Math.min(\n    position < 0 ? count.value - 1 : position,\n    firstEmpty < 0 ? count.value - 1 : firstEmpty,\n  );\n  input.value?.focus();\n}\nfunction autofill(event: Event) {\n  const field = event.target as HTMLInputElement;\n  const value = field.value;\n  field.value = \"\";\n  if (!props.disabled) editor.replace(value);\n}\nfunction paste(event: ClipboardEvent) {\n  if (props.disabled) return;\n  event.preventDefault();\n  editor.insert(event.clipboardData?.getData(\"text\") ?? \"\");\n}\nlet feedback: ReturnType<typeof animate> | undefined;\nwatch(\n  () => props.status,\n  (status) => {\n    if (status !== \"error\" || reduce.value || !strip.value) return;\n    feedback?.stop();\n    feedback = animate(\n      strip.value,\n      { x: [0, -5, 5, -3, 3, -1, 0] },\n      { duration: 0.45, ease: EASE_OUT },\n    );\n  },\n);\nonMounted(() => {\n  if (props.autoFocus) input.value?.focus();\n});\nonBeforeUnmount(() => feedback?.stop());\n</script>\n\n<template>\n  <div\n    :class=\"cn('inline-flex flex-col gap-2', className, $attrs.class as string)\"\n    :style=\"$attrs.style as any\"\n    :data-status=\"status\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id + '-input'\"\n      class=\"text-sm font-medium text-foreground\"\n      >{{ label }}</label\n    >\n    <fieldset\n      class=\"relative m-0 inline-flex w-max border-0 p-0\"\n      @mousedown=\"pointer\"\n    >\n      <input\n        ref=\"input\"\n        v-bind=\"{ ...$attrs, class: undefined, style: undefined }\"\n        :id=\"id + '-input'\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        :disabled=\"disabled\"\n        :aria-label=\"ariaLabel\"\n        :aria-invalid=\"status === 'error'\"\n        :aria-describedby=\"message ? id + '-hint' : undefined\"\n        value=\"\"\n        :maxlength=\"count\"\n        @keydown=\"keydown\"\n        @input=\"autofill\"\n        @paste=\"paste\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n        class=\"absolute inset-0 z-20 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed\"\n      />\n      <div ref=\"strip\" class=\"flex items-center gap-2\">\n        <div\n          v-for=\"(digit, index) in fields\"\n          :key=\"id + '-' + index\"\n          :data-active=\"focused && index === cursor\"\n          :data-filled=\"digit !== ''\"\n          :class=\"\n            cn(\n              'relative grid h-14 w-12 place-items-center overflow-hidden rounded-xl border text-xl font-semibold tabular-nums transition-colors duration-200',\n              tone(digit, index),\n            )\n          \"\n        >\n          <motion.span\n            v-if=\"focused && index === cursor && status !== 'success'\"\n            aria-hidden=\"true\"\n            :animate=\"reduce ? undefined : { opacity: [1, 1, 0, 0] }\"\n            :transition=\"\n              reduce\n                ? undefined\n                : { duration: 1, repeat: Infinity, ease: 'linear' }\n            \"\n            :class=\"\n              cn(\n                'pointer-events-none absolute top-1/2 h-6 w-px -translate-y-1/2 bg-foreground',\n                digit ? 'right-3' : 'left-1/2 -translate-x-1/2',\n              )\n            \"\n          />\n          <AnimatePresence :initial=\"false\">\n            <motion.span\n              v-if=\"digit\"\n              :key=\"digit\"\n              class=\"absolute inset-0 grid place-items-center leading-none\"\n              :initial=\"\n                reduce\n                  ? { opacity: 0 }\n                  : { y: 14, opacity: 0, filter: 'blur(4px)' }\n              \"\n              :animate=\"\n                reduce\n                  ? { opacity: 1 }\n                  : { y: 0, opacity: 1, filter: 'blur(0px)' }\n              \"\n              :exit=\"\n                reduce\n                  ? { opacity: 0 }\n                  : { y: -14, opacity: 0, filter: 'blur(4px)' }\n              \"\n              :transition=\"\n                reduce ? { duration: 0 } : { duration: 0.22, ease: EASE_OUT }\n              \"\n              >{{ mask ? \"•\" : digit }}</motion.span\n            >\n          </AnimatePresence>\n        </div>\n      </div>\n      <AnimatePresence>\n        <motion.span\n          v-if=\"status === 'success'\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute -right-7 top-1/2 -translate-y-1/2 text-emerald-500\"\n          :initial=\"reduce ? { opacity: 0 } : { scale: 0.6, opacity: 0 }\"\n          :animate=\"reduce ? { opacity: 1 } : { scale: 1, opacity: 1 }\"\n          :exit=\"reduce ? { opacity: 0 } : { scale: 0.6, opacity: 0 }\"\n          :transition=\"\n            reduce\n              ? { duration: 0 }\n              : { type: 'spring', stiffness: 500, damping: 28 }\n          \"\n        >\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            :stroke-width=\"3\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <title>Verified</title>\n            <motion.path\n              d=\"M5 13l4 4L19 7\"\n              :initial=\"{ pathLength: reduce ? 1 : 0 }\"\n              :animate=\"{ pathLength: 1 }\"\n              :transition=\"\n                reduce\n                  ? { duration: 0 }\n                  : { duration: 0.35, ease: EASE_OUT, delay: 0.1 }\n              \"\n            />\n          </svg>\n        </motion.span>\n      </AnimatePresence>\n    </fieldset>\n    <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{\n      announcement\n    }}</span>\n    <p\n      v-if=\"message\"\n      :id=\"id + '-hint'\"\n      aria-live=\"polite\"\n      :class=\"cn('text-sm', messageTone)\"\n    >\n      {{ message }}\n    </p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch, onMounted, onBeforeUnmount, useId } from \"vue\";\nimport { motion, AnimatePresence, animate } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport { useOtpFields } from \"./use-otp-fields\";\ndefineOptions({ inheritAttrs: false });\nexport type OTPStatus = \"idle\" | \"error\" | \"success\";\nconst props = withDefaults(\n  defineProps<{\n    length?: number;\n    modelValue?: string;\n    value?: string;\n    defaultValue?: string;\n    label?: string;\n    hint?: string;\n    successMessage?: string;\n    errorMessage?: string;\n    status?: OTPStatus;\n    mask?: boolean;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    ariaLabel?: string;\n    className?: string;\n  }>(),\n  {\n    length: 6,\n    defaultValue: \"\",\n    status: \"idle\",\n    mask: false,\n    disabled: false,\n    autoFocus: false,\n    ariaLabel: \"One-time passcode\",\n  },\n);\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string];\n  change: [value: string];\n  complete: [value: string];\n}>();\nconst editor = useOtpFields({\n  length: () => props.length,\n  value: () => props.modelValue ?? props.value,\n  initial: props.defaultValue,\n  masked: () => props.mask,\n  changed(value) {\n    emit(\"update:modelValue\", value);\n    emit(\"change\", value);\n  },\n  completed(value) {\n    emit(\"complete\", value);\n  },\n});\nconst { count, fields, cursor, announcement } = editor;\nconst id = useId();\nconst input = ref<HTMLInputElement>();\nconst strip = ref<HTMLDivElement>();\nconst focused = ref(false);\nconst reduce = useReducedMotion();\nconst message = computed(() =>\n  props.status === \"success\"\n    ? props.successMessage\n    : props.status === \"error\"\n      ? props.errorMessage\n      : props.hint,\n);\nconst messageTone = computed(() =>\n  props.status === \"success\"\n    ? \"text-emerald-500\"\n    : props.status === \"error\"\n      ? \"text-destructive\"\n      : \"text-muted-foreground\",\n);\nfunction tone(value: string, index: number) {\n  return cn(\n    props.status === \"success\"\n      ? \"border-emerald-500/60 text-foreground\"\n      : props.status === \"error\"\n        ? \"border-destructive/60 text-foreground\"\n        : value\n          ? \"border-border-strong text-foreground\"\n          : \"border-border text-muted-foreground\",\n    focused.value &&\n      cursor.value === index &&\n      props.status === \"idle\" &&\n      \"border-foreground\",\n    props.disabled && \"opacity-50\",\n  );\n}\nfunction keydown(event: KeyboardEvent) {\n  if (props.disabled || event.metaKey || event.altKey || event.ctrlKey) return;\n  if (/^[0-9]$/.test(event.key)) {\n    event.preventDefault();\n    editor.insert(event.key);\n    return;\n  }\n  if (event.key === \"Backspace\" || event.key === \"Delete\") {\n    event.preventDefault();\n    editor.erase(event.key === \"Backspace\");\n    return;\n  }\n  if (editor.navigate(event.key)) event.preventDefault();\n}\nfunction pointer(event: MouseEvent) {\n  if (props.disabled) return;\n  event.preventDefault();\n  const children = Array.from(strip.value?.children ?? []);\n  const position = children.findIndex(\n    (element) => event.clientX < element.getBoundingClientRect().right,\n  );\n  const firstEmpty = fields.value.indexOf(\"\");\n  cursor.value = Math.min(\n    position < 0 ? count.value - 1 : position,\n    firstEmpty < 0 ? count.value - 1 : firstEmpty,\n  );\n  input.value?.focus();\n}\nfunction autofill(event: Event) {\n  const field = event.target as HTMLInputElement;\n  const value = field.value;\n  field.value = \"\";\n  if (!props.disabled) editor.replace(value);\n}\nfunction paste(event: ClipboardEvent) {\n  if (props.disabled) return;\n  event.preventDefault();\n  editor.insert(event.clipboardData?.getData(\"text\") ?? \"\");\n}\nlet feedback: ReturnType<typeof animate> | undefined;\nwatch(\n  () => props.status,\n  (status) => {\n    if (status !== \"error\" || reduce.value || !strip.value) return;\n    feedback?.stop();\n    feedback = animate(\n      strip.value,\n      { x: [0, -5, 5, -3, 3, -1, 0] },\n      { duration: 0.45, ease: EASE_OUT },\n    );\n  },\n);\nonMounted(() => {\n  if (props.autoFocus) input.value?.focus();\n});\nonBeforeUnmount(() => feedback?.stop());\n</script>\n\n<template>\n  <div\n    :class=\"cn('inline-flex flex-col gap-2', className, $attrs.class as string)\"\n    :style=\"$attrs.style as any\"\n    :data-status=\"status\"\n  >\n    <label\n      v-if=\"label\"\n      :for=\"id + '-input'\"\n      class=\"text-sm font-medium text-foreground\"\n      >{{ label }}</label\n    >\n    <fieldset\n      class=\"relative m-0 inline-flex w-max border-0 p-0\"\n      @mousedown=\"pointer\"\n    >\n      <input\n        ref=\"input\"\n        v-bind=\"{ ...$attrs, class: undefined, style: undefined }\"\n        :id=\"id + '-input'\"\n        inputmode=\"numeric\"\n        autocomplete=\"one-time-code\"\n        :disabled=\"disabled\"\n        :aria-label=\"ariaLabel\"\n        :aria-invalid=\"status === 'error'\"\n        :aria-describedby=\"message ? id + '-hint' : undefined\"\n        value=\"\"\n        :maxlength=\"count\"\n        @keydown=\"keydown\"\n        @input=\"autofill\"\n        @paste=\"paste\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n        class=\"absolute inset-0 z-20 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed\"\n      />\n      <div ref=\"strip\" class=\"flex items-center gap-2\">\n        <div\n          v-for=\"(digit, index) in fields\"\n          :key=\"id + '-' + index\"\n          :data-active=\"focused && index === cursor\"\n          :data-filled=\"digit !== ''\"\n          :class=\"\n            cn(\n              'relative grid h-14 w-12 place-items-center overflow-hidden rounded-xl border text-xl font-semibold tabular-nums transition-colors duration-200',\n              tone(digit, index),\n            )\n          \"\n        >\n          <motion.span\n            v-if=\"focused && index === cursor && status !== 'success'\"\n            aria-hidden=\"true\"\n            :animate=\"reduce ? undefined : { opacity: [1, 1, 0, 0] }\"\n            :transition=\"\n              reduce\n                ? undefined\n                : { duration: 1, repeat: Infinity, ease: 'linear' }\n            \"\n            :class=\"\n              cn(\n                'pointer-events-none absolute top-1/2 h-6 w-px -translate-y-1/2 bg-foreground',\n                digit ? 'right-3' : 'left-1/2 -translate-x-1/2',\n              )\n            \"\n          />\n          <AnimatePresence :initial=\"false\">\n            <motion.span\n              v-if=\"digit\"\n              :key=\"digit\"\n              class=\"absolute inset-0 grid place-items-center leading-none\"\n              :initial=\"\n                reduce\n                  ? { opacity: 0 }\n                  : { y: 14, opacity: 0, filter: 'blur(4px)' }\n              \"\n              :animate=\"\n                reduce\n                  ? { opacity: 1 }\n                  : { y: 0, opacity: 1, filter: 'blur(0px)' }\n              \"\n              :exit=\"\n                reduce\n                  ? { opacity: 0 }\n                  : { y: -14, opacity: 0, filter: 'blur(4px)' }\n              \"\n              :transition=\"\n                reduce ? { duration: 0 } : { duration: 0.22, ease: EASE_OUT }\n              \"\n              >{{ mask ? \"•\" : digit }}</motion.span\n            >\n          </AnimatePresence>\n        </div>\n      </div>\n      <AnimatePresence>\n        <motion.span\n          v-if=\"status === 'success'\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute -right-7 top-1/2 -translate-y-1/2 text-emerald-500\"\n          :initial=\"reduce ? { opacity: 0 } : { scale: 0.6, opacity: 0 }\"\n          :animate=\"reduce ? { opacity: 1 } : { scale: 1, opacity: 1 }\"\n          :exit=\"reduce ? { opacity: 0 } : { scale: 0.6, opacity: 0 }\"\n          :transition=\"\n            reduce\n              ? { duration: 0 }\n              : { type: 'spring', stiffness: 500, damping: 28 }\n          \"\n        >\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            :stroke-width=\"3\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <title>Verified</title>\n            <motion.path\n              d=\"M5 13l4 4L19 7\"\n              :initial=\"{ pathLength: reduce ? 1 : 0 }\"\n              :animate=\"{ pathLength: 1 }\"\n              :transition=\"\n                reduce\n                  ? { duration: 0 }\n                  : { duration: 0.35, ease: EASE_OUT, delay: 0.1 }\n              \"\n            />\n          </svg>\n        </motion.span>\n      </AnimatePresence>\n    </fieldset>\n    <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{\n      announcement\n    }}</span>\n    <p\n      v-if=\"message\"\n      :id=\"id + '-hint'\"\n      aria-live=\"polite\"\n      :class=\"cn('text-sm', messageTone)\"\n    >\n      {{ message }}\n    </p>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/overflow-actions-D4746kdz.js

@@ -0,0 +1,282 @@
+import { a as e, s as t, t as n } from "./composables-BJ1sih_H.js";
+import { r } from "./ease-rIvCM4O3.js";
+import { t as i } from "./utils-DIrLOK2M.js";
+import { n as a, r as o, t as s } from "./shared-DAEawhBJ.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeProps as g, normalizeClass as _, onMounted as v, onUpdated as y, openBlock as b, ref as x, renderList as S, unref as C, useId as w, watch as T, withCtx as E } from "vue";
+import { AnimatePresence as D, motion as O } from "motion-v";
+import { MoreHorizontal as k, X as A } from "lucide-vue-next";
+// src/blocks/overflow-actions/src/ActionButton.vue?vue&type=script&setup=true&lang.ts
+var j = [
+	"disabled",
+	"aria-label",
+	"tabindex",
+	"title"
+], M = /* @__PURE__ */ h({
+	__name: "ActionButton",
+	props: {
+		item: {},
+		size: {},
+		reduce: { type: Boolean },
+		canHover: { type: Boolean },
+		overflow: { type: Boolean },
+		visible: { type: Boolean },
+		classNames: {}
+	},
+	emits: ["action"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, a = {
+			hidden: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			visible: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)"
+			}
+		}, o = l(() => n.overflow ? {
+			initial: n.reduce ? { opacity: 0 } : "hidden",
+			animate: n.reduce ? { opacity: 1 } : "visible",
+			exit: n.reduce ? { opacity: 0 } : "exit"
+		} : {});
+		return (t, n) => (b(), u(C(O).span, g({
+			layout: "position",
+			variants: e.overflow ? a : void 0
+		}, o.value, {
+			"while-press": e.reduce || e.item.disabled ? void 0 : { scale: .97 },
+			"while-hover": e.reduce || !e.canHover || e.item.disabled ? void 0 : { scale: 1.008 },
+			transition: e.reduce ? { duration: 0 } : {
+				type: "spring",
+				stiffness: 220,
+				damping: 17,
+				mass: .85
+			},
+			class: "inline-flex shrink-0"
+		}), {
+			default: E(() => [p("button", {
+				type: "button",
+				disabled: e.item.disabled,
+				"aria-label": e.item.ariaLabel,
+				tabindex: e.overflow && !e.visible ? -1 : void 0,
+				title: typeof e.item.label == "string" ? e.item.label : void 0,
+				onClick: n[0] ||= (t) => r("action", e.item),
+				class: _(C(i)("inline-flex shrink-0 items-center justify-center rounded-full bg-background font-medium text-foreground outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", e.size === "sm" ? "h-8 min-w-8 gap-1.5 px-3" : "h-9 min-w-9 gap-2 px-3.5", e.classNames?.action, e.overflow ? e.classNames?.overflowAction : e.classNames?.primaryAction))
+			}, [e.item.icon ? (b(), f("span", {
+				key: 0,
+				class: _(C(i)("inline-flex shrink-0 items-center justify-center [&>svg]:size-full", e.size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4", e.classNames?.icon))
+			}, [m(C(s), { node: e.item.icon }, null, 8, ["node"])], 2)) : d("", !0), p("span", { class: _(C(i)("whitespace-nowrap", e.classNames?.label)) }, [m(C(s), { node: e.item.label }, null, 8, ["node"])], 2)], 10, j)]),
+			_: 1
+		}, 16, [
+			"variants",
+			"while-press",
+			"while-hover",
+			"transition"
+		]));
+	}
+}), N = /* @__PURE__ */ h({
+	__name: "OverflowActions",
+	props: {
+		primaryActions: {},
+		overflowActions: {},
+		expanded: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultExpanded: {
+			type: Boolean,
+			default: !1
+		},
+		collapseOnAction: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		openLabel: { default: "Show extra actions" },
+		closeLabel: { default: "Hide extra actions" },
+		classNames: {}
+	},
+	emits: [
+		"update:expanded",
+		"expandedChange",
+		"action"
+	],
+	setup(s, { emit: p }) {
+		let h = s, g = p, j = o(() => h.expanded, h.defaultExpanded, (e) => {
+			g("update:expanded", e), g("expandedChange", e);
+		}), N = t(), P = e("(hover:hover) and (pointer:fine)"), F = w(), I = x(), L = l(() => N.value ? { duration: 0 } : {
+			type: "spring",
+			stiffness: 220,
+			damping: 17,
+			mass: .85
+		}), R = {
+			hidden: {
+				opacity: 0,
+				filter: "blur(3px)"
+			},
+			visible: {
+				opacity: 1,
+				filter: "blur(0px)",
+				transition: {
+					duration: .18,
+					ease: r
+				}
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(3px)",
+				transition: {
+					duration: .18,
+					ease: r
+				}
+			}
+		}, z = 0;
+		function B() {
+			let e = n(I.value);
+			e && (j.value ? (e.style.left = "", z = e.getBoundingClientRect().left) : e.style.left = `${z - e.getBoundingClientRect().left}px`);
+		}
+		T(j, B, { flush: "post" }), v(B), y(B);
+		function V(e) {
+			e.disabled || (e.onClick?.(), g("action", e), h.collapseOnAction && (j.value = !1));
+		}
+		return (e, t) => (b(), u(C(O).div, {
+			layout: "",
+			transition: L.value,
+			class: _(C(i)("inline-flex", s.classNames?.root)),
+			role: "toolbar",
+			onKeydown: t[1] ||= (e) => C(a)(e, e.currentTarget)
+		}, {
+			default: E(() => [m(C(O).div, {
+				layout: "",
+				transition: L.value,
+				class: _(C(i)("relative inline-flex items-center overflow-hidden rounded-full border border-border bg-card", s.size === "sm" ? "gap-1 p-1 text-xs" : "gap-1.5 p-1.5 text-sm", s.classNames?.track))
+			}, {
+				default: E(() => [
+					m(C(O).div, {
+						layout: "",
+						transition: L.value,
+						class: _(C(i)("inline-flex items-center", s.size === "sm" ? "gap-1" : "gap-1.5"))
+					}, {
+						default: E(() => [(b(!0), f(c, null, S(s.primaryActions, (e) => (b(), u(M, {
+							key: e.id,
+							item: e,
+							size: s.size,
+							reduce: C(N),
+							"can-hover": C(P),
+							"class-names": s.classNames,
+							onAction: V
+						}, null, 8, [
+							"item",
+							"size",
+							"reduce",
+							"can-hover",
+							"class-names"
+						]))), 128))]),
+						_: 1
+					}, 8, ["transition", "class"]),
+					m(C(D), {
+						mode: "popLayout",
+						initial: !1,
+						as: "div",
+						class: "contents"
+					}, {
+						default: E(() => [C(j) ? (b(), u(C(O).div, {
+							key: "overflow-actions",
+							ref_key: "wrapper",
+							ref: I,
+							id: C(F),
+							layout: "",
+							"aria-hidden": !C(j),
+							transition: L.value,
+							class: _(C(i)("relative inline-flex w-max items-center", s.size === "sm" ? "gap-1" : "gap-1.5"))
+						}, {
+							default: E(() => [(b(!0), f(c, null, S(s.overflowActions, (e) => (b(), u(M, {
+								key: e.id,
+								item: e,
+								size: s.size,
+								reduce: C(N),
+								"can-hover": C(P),
+								overflow: "",
+								visible: C(j),
+								"class-names": s.classNames,
+								onAction: V
+							}, null, 8, [
+								"item",
+								"size",
+								"reduce",
+								"can-hover",
+								"visible",
+								"class-names"
+							]))), 128))]),
+							_: 1
+						}, 8, [
+							"id",
+							"aria-hidden",
+							"transition",
+							"class"
+						])) : d("", !0)]),
+						_: 1
+					}),
+					m(C(O).button, {
+						type: "button",
+						layout: "",
+						"aria-expanded": C(j),
+						"aria-controls": C(j) ? C(F) : void 0,
+						"aria-label": C(j) ? s.closeLabel : s.openLabel,
+						title: C(j) ? s.closeLabel : s.openLabel,
+						onClick: t[0] ||= (e) => j.value = !C(j),
+						"while-press": C(N) ? void 0 : { scale: .96 },
+						"while-hover": C(N) || !C(P) ? void 0 : { scale: 1.03 },
+						transition: L.value,
+						class: _(C(i)("relative inline-grid shrink-0 place-items-center rounded-full bg-primary text-primary-foreground outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", s.size === "sm" ? "h-8 w-8" : "h-9 w-9", s.classNames?.toggle))
+					}, {
+						default: E(() => [m(C(D), {
+							mode: "popLayout",
+							initial: !1
+						}, {
+							default: E(() => [(b(), u(C(O).span, {
+								key: C(j) ? "close" : "open",
+								variants: R,
+								initial: C(N) ? { opacity: 0 } : "hidden",
+								animate: C(N) ? { opacity: 1 } : "visible",
+								exit: C(N) ? { opacity: 0 } : "exit",
+								class: "inline-grid place-items-center"
+							}, {
+								default: E(() => [C(j) ? (b(), u(C(A), {
+									key: 0,
+									class: _(s.size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4")
+								}, null, 8, ["class"])) : (b(), u(C(k), {
+									key: 1,
+									class: _(s.size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4")
+								}, null, 8, ["class"]))]),
+								_: 1
+							}, 8, [
+								"initial",
+								"animate",
+								"exit"
+							]))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"aria-expanded",
+						"aria-controls",
+						"aria-label",
+						"title",
+						"while-press",
+						"while-hover",
+						"transition",
+						"class"
+					])
+				]),
+				_: 1
+			}, 8, ["transition", "class"])]),
+			_: 1
+		}, 8, ["transition", "class"]));
+	}
+});
+export { N as t };
+
+//# sourceMappingURL=overflow-actions-D4746kdz.js.map