@feugene/granularity 0.1.0

package/dist/chunks/DsImageViewer-C9NZ42St.js

@@ -0,0 +1,313 @@
+import { a as e, n as t, r as n, t as ee } from "./transition-CT9vsWnT.js";
+import { Fragment as te, Teleport as ne, computed as r, createBlock as re, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeStyle as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, watch as h, withCtx as g } from "vue";
+//#region src/components/DsImageViewer/DsImageViewer.vue?vue&type=script&setup=true&lang.ts
+var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6" }, _ = { class: "pointer-events-auto flex items-center justify-between gap-3" }, v = { class: "flex items-center gap-2" }, y = {
+	key: 0,
+	"data-ds-image-viewer-progress": "",
+	class: "rounded-full bg-black/35 px-3 py-1 text-xs font-600 text-white/95 sm:text-sm"
+}, b = {
+	key: 1,
+	"data-ds-image-viewer-zoom-value": "",
+	class: "rounded-full bg-black/35 px-3 py-1 text-xs font-700 text-white/95 sm:text-sm"
+}, x = { class: "relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20" }, S = { class: "h-full w-full flex items-center justify-center" }, C = ["src"], w = {
+	key: 1,
+	class: "rounded-[var(--ds-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80"
+}, oe = { class: "pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6" }, se = { class: "pointer-events-auto mx-auto w-full max-w-max" }, ce = { class: "rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1" }, le = {
+	key: 1,
+	class: "mx-1 h-6 w-px bg-white/25",
+	"aria-hidden": "true"
+}, ue = 2e3, T = /* @__PURE__ */ c({
+	__name: "DsImageViewer",
+	props: {
+		modelValue: { type: Boolean },
+		urlList: {},
+		initialIndex: { default: 0 },
+		zoomRate: { default: 1.2 },
+		minScale: { default: .5 },
+		maxScale: { default: 5 },
+		hideOnClickModal: {
+			type: Boolean,
+			default: !1
+		},
+		closeOnPressEscape: {
+			type: Boolean,
+			default: !0
+		},
+		showProgress: {
+			type: Boolean,
+			default: !1
+		},
+		showZoomValue: {
+			type: Boolean,
+			default: !0
+		},
+		zIndex: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"close",
+		"switch",
+		"rotate"
+	],
+	setup(c, { emit: T }) {
+		let E = c, D = T, O = /\.0$/, de = r(() => E.modelValue), k = r(() => E.urlList.length), A = r(() => k.value > 0), j = d(0), M = d(1), N = d(0), P = d(0), F = d(0), I = r(() => {
+			if (A.value) return E.urlList[j.value];
+		}), L = r(() => A.value ? j.value + 1 : 0), R = r(() => ({ zIndex: String(Number.isFinite(E.zIndex) ? E.zIndex : ue) })), z = r(() => ({ transform: `translate3d(${P.value}px, ${F.value}px, 0) scale(${M.value}) rotate(${N.value}deg)` })), B = r(() => {
+			let e = M.value * 100;
+			return Number.isInteger(e) ? String(e) : e.toFixed(1).replace(O, "");
+		});
+		function V(e) {
+			return A.value ? ((Number.isFinite(e) ? Math.trunc(e) : 0) % k.value + k.value) % k.value : 0;
+		}
+		function H() {
+			M.value = 1, N.value = 0, P.value = 0, F.value = 0;
+		}
+		function U(e, t) {
+			let n = V(e);
+			n !== j.value && (j.value = n, H(), t?.emitSwitch !== !1 && D("switch", n));
+		}
+		function W() {
+			if (!A.value) {
+				j.value = 0;
+				return;
+			}
+			j.value = V(E.initialIndex), H();
+		}
+		function G(e) {
+			let t = E.urlList[e];
+			if (!t) return;
+			let n = new Image();
+			n.decoding = "async", n.src = t;
+		}
+		function K() {
+			D("update:modelValue", !1), D("close");
+		}
+		function q() {
+			U(j.value - 1);
+		}
+		function J() {
+			U(j.value + 1);
+		}
+		function Y() {
+			M.value = Math.min(E.maxScale, Number((M.value * E.zoomRate).toFixed(4)));
+		}
+		function X() {
+			M.value = Math.max(E.minScale, Number((M.value / E.zoomRate).toFixed(4)));
+		}
+		function Z() {
+			N.value -= 90, D("rotate", N.value);
+		}
+		function Q() {
+			N.value += 90, D("rotate", N.value);
+		}
+		let $ = {
+			close: K,
+			prev: q,
+			next: J,
+			zoomIn: Y,
+			zoomOut: X,
+			reset: H,
+			rotateLeft: Z,
+			rotateRight: Q
+		};
+		function fe() {
+			E.hideOnClickModal && K();
+		}
+		function pe(e) {
+			switch (e.key) {
+				case "Escape":
+					if (!E.closeOnPressEscape) return;
+					e.preventDefault(), K();
+					return;
+				case "ArrowLeft":
+					e.preventDefault(), q();
+					return;
+				case "ArrowRight":
+					e.preventDefault(), J();
+					return;
+				case "+":
+				case "=":
+				case "Add":
+					e.preventDefault(), Y();
+					return;
+				case "-":
+				case "_":
+				case "Subtract":
+					e.preventDefault(), X();
+					return;
+				case "0":
+					e.preventDefault(), H();
+					break;
+				default:
+			}
+		}
+		return h(() => E.modelValue, (e) => {
+			e && W();
+		}, { immediate: !0 }), h(() => E.initialIndex, () => {
+			E.modelValue && W();
+		}), h(() => E.urlList, () => {
+			E.modelValue && W();
+		}, { deep: !0 }), h(j, (e) => {
+			!A.value || k.value < 2 || (G(V(e - 1)), G(V(e + 1)));
+		}, { immediate: !0 }), (r, d) => (u(), re(ne, { to: "body" }, [s(m(ee), {
+			show: de.value,
+			as: "template"
+		}, {
+			default: g(() => [s(m(e), {
+				as: "div",
+				class: "fixed inset-0",
+				style: l(R.value),
+				role: "dialog",
+				"aria-modal": "true",
+				static: !0,
+				onKeydown: pe
+			}, {
+				default: g(() => [o("div", ie, [s(m(t), {
+					as: "template",
+					enter: "duration-150 ease-out",
+					"enter-from": "opacity-0",
+					"enter-to": "opacity-100",
+					leave: "duration-120 ease-in",
+					"leave-from": "opacity-100",
+					"leave-to": "opacity-0"
+				}, {
+					default: g(() => [o("div", {
+						"data-ds-image-viewer-overlay": "",
+						class: "absolute inset-0 bg-black/60 backdrop-blur-sm",
+						"aria-hidden": "true",
+						onClick: fe
+					})]),
+					_: 1
+				}), s(m(t), {
+					as: "template",
+					enter: "duration-180 ease-out",
+					"enter-from": "opacity-0 scale-98",
+					"enter-to": "opacity-100 scale-100",
+					leave: "duration-130 ease-in",
+					"leave-from": "opacity-100 scale-100",
+					"leave-to": "opacity-0 scale-98"
+				}, {
+					default: g(() => [s(m(n), {
+						"data-ds-image-viewer-panel": "",
+						class: "relative z-10 h-full w-full outline-none",
+						tabindex: "-1"
+					}, {
+						default: g(() => [
+							o("div", ae, [o("div", _, [o("div", v, [c.showProgress ? (u(), a("div", y, p(L.value) + " / " + p(k.value), 1)) : i("", !0), c.showZoomValue ? (u(), a("div", b, p(B.value) + "% ", 1)) : i("", !0)]), o("button", {
+								type: "button",
+								"data-ds-image-viewer-close": "",
+								"aria-label": "Close image viewer",
+								class: "h-11 w-11 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
+								onClick: K
+							}, [...d[0] ||= [o("span", {
+								"aria-hidden": "true",
+								class: "text-lg leading-none"
+							}, "✕", -1)]])])]),
+							o("div", x, [
+								k.value > 1 ? (u(), a("button", {
+									key: 0,
+									type: "button",
+									"data-ds-image-viewer-prev": "",
+									"aria-label": "Previous image",
+									class: "absolute left-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:left-6",
+									onClick: q
+								}, [...d[1] ||= [o("span", {
+									"aria-hidden": "true",
+									class: "text-xl leading-none"
+								}, "‹", -1)]])) : i("", !0),
+								k.value > 1 ? (u(), a("button", {
+									key: 1,
+									type: "button",
+									"data-ds-image-viewer-next": "",
+									"aria-label": "Next image",
+									class: "absolute right-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:right-6",
+									onClick: J
+								}, [...d[2] ||= [o("span", {
+									"aria-hidden": "true",
+									class: "text-xl leading-none"
+								}, "›", -1)]])) : i("", !0),
+								o("div", S, [I.value ? (u(), a("img", {
+									key: 0,
+									"data-ds-image-viewer-image": "",
+									src: I.value,
+									alt: "",
+									draggable: "false",
+									class: "max-h-full max-w-full select-none object-contain will-change-transform transition-transform duration-150 ease-out",
+									style: l(z.value)
+								}, null, 12, C)) : (u(), a("div", w, " No image "))])
+							]),
+							o("div", oe, [o("div", se, [f(r.$slots, "toolbar", {
+								index: j.value,
+								displayIndex: L.value,
+								total: k.value,
+								scale: M.value,
+								rotation: N.value,
+								actions: $
+							}, () => [o("div", ce, [
+								o("button", {
+									type: "button",
+									"data-ds-image-viewer-zoom-out": "",
+									"aria-label": "Zoom out",
+									class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
+									onClick: X
+								}, " − "),
+								o("button", {
+									type: "button",
+									"data-ds-image-viewer-zoom-reset": "",
+									"aria-label": "Reset zoom",
+									class: "h-11 min-w-11 px-3 flex items-center justify-center rounded-full text-xs font-700 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
+									onClick: H
+								}, " 100% "),
+								o("button", {
+									type: "button",
+									"data-ds-image-viewer-zoom-in": "",
+									"aria-label": "Zoom in",
+									class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
+									onClick: Y
+								}, " + "),
+								r.$slots["toolbar-actions"] ? (u(), a(te, { key: 0 }, [
+									d[3] ||= o("div", {
+										class: "mx-1 h-6 w-px bg-white/25",
+										"aria-hidden": "true"
+									}, null, -1),
+									f(r.$slots, "toolbar-actions", {
+										index: j.value,
+										displayIndex: L.value,
+										total: k.value,
+										scale: M.value,
+										rotation: N.value,
+										actions: $
+									}),
+									d[4] ||= o("div", {
+										class: "mx-1 h-6 w-px bg-white/25",
+										"aria-hidden": "true"
+									}, null, -1)
+								], 64)) : (u(), a("div", le)),
+								o("button", {
+									type: "button",
+									"data-ds-image-viewer-rotate-left": "",
+									"aria-label": "Rotate left",
+									class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
+									onClick: Z
+								}, " ↺ "),
+								o("button", {
+									type: "button",
+									"data-ds-image-viewer-rotate-right": "",
+									"aria-label": "Rotate right",
+									class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
+									onClick: Q
+								}, " ↻ ")
+							])])])])
+						]),
+						_: 3
+					})]),
+					_: 3
+				})])]),
+				_: 3
+			}, 8, ["style"])]),
+			_: 3
+		}, 8, ["show"])]));
+	}
+});
+//#endregion
+export { T as t };

package/dist/chunks/DsInput-DeoAkT6R.js

@@ -0,0 +1,159 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeProps as a, nextTick as o, normalizeStyle as s, onBeforeUnmount as c, onMounted as l, onUpdated as u, openBlock as d, ref as f, renderSlot as p, useSlots as m } from "vue";
+//#region src/components/DsInput/DsInput.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "relative w-full" }, g = [
+	"id",
+	"name",
+	"type",
+	"inputmode",
+	"autocomplete",
+	"placeholder",
+	"disabled",
+	"value",
+	"aria-invalid"
+], _ = "w-full rounded-md border bg-[var(--bg)] text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:cursor-not-allowed", v = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "DsInput",
+	props: {
+		modelValue: {},
+		type: { default: "text" },
+		placeholder: { default: void 0 },
+		autocomplete: { default: void 0 },
+		inputmode: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		state: { default: "default" },
+		name: { default: void 0 },
+		id: { default: void 0 },
+		size: { default: "md" },
+		textAlign: { default: "left" },
+		prefixMinWidth: { default: void 0 },
+		prefixMaxWidth: { default: void 0 },
+		suffixMinWidth: { default: void 0 },
+		suffixMaxWidth: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(i, { expose: v, emit: y }) {
+		let b = i, x = y, S = f(null);
+		function C() {
+			S.value?.focus();
+		}
+		v({ focus: C });
+		let w = m(), T = e(() => !!w.prefix), E = e(() => !!w.suffix), D = e(() => ({
+			xs: "2rem",
+			sm: "2.25rem",
+			md: "2.5rem",
+			lg: "3rem"
+		})[b.size]), O = e(() => b.prefixMinWidth ?? D.value), k = e(() => b.suffixMinWidth ?? D.value), A = f(null), j = f(null), M = f(void 0), N = f(void 0), P = null, F = !1;
+		function I(e) {
+			if (!e) return;
+			let t = Math.ceil(e.getBoundingClientRect().width || 0);
+			if (!(t <= 0)) return `${t}px`;
+		}
+		function L() {
+			M.value = T.value ? I(A.value) : void 0, N.value = E.value ? I(j.value) : void 0;
+		}
+		function R() {
+			typeof ResizeObserver > "u" || (P ||= new ResizeObserver(() => L()), P.disconnect(), A.value && P.observe(A.value), j.value && P.observe(j.value));
+		}
+		function z() {
+			F || (F = !0, o(() => {
+				F = !1, L(), R();
+			}));
+		}
+		l(() => z()), u(() => z()), c(() => P?.disconnect());
+		function B(e, t) {
+			if (e === "0px") return t;
+			if (t === "0px") return e;
+			let n = e.endsWith("px") ? Number(e.slice(0, -2)) : null, r = t.endsWith("px") ? Number(t.slice(0, -2)) : null;
+			return n !== null && Number.isFinite(n) && r !== null && Number.isFinite(r) ? `${n + r}px` : `calc(${e} + ${t})`;
+		}
+		let V = e(() => ({
+			xs: "10px",
+			sm: "12px",
+			md: "12px",
+			lg: "16px"
+		})[b.size]), H = e(() => {
+			let e = T.value ? M.value ?? O.value : "0px", t = E.value ? N.value ?? k.value : "0px";
+			return {
+				paddingLeft: T.value ? B(e, V.value) : void 0,
+				paddingRight: E.value ? B(t, V.value) : void 0
+			};
+		}), U = e(() => ({
+			minWidth: O.value,
+			maxWidth: b.prefixMaxWidth
+		})), W = e(() => ({
+			minWidth: k.value,
+			maxWidth: b.suffixMaxWidth
+		})), G = e(() => ({
+			xs: "h-7 px-2.5 text-[12px]",
+			sm: "h-8 px-3 text-[13px]",
+			md: "h-10 px-3 text-[14px]",
+			lg: "h-11 px-4 text-[16px]"
+		})[b.size]), K = e(() => ({
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		})[b.textAlign]), q = e(() => {
+			let e = b.state, t = {
+				default: "border-[var(--brd)]",
+				success: "border-[var(--ds-success)] focus-visible:ring-[var(--ds-success)]",
+				warning: "border-[var(--ds-warning)] focus-visible:ring-[var(--ds-warning)]",
+				danger: "border-[var(--ds-danger)] focus-visible:ring-[var(--ds-danger)]"
+			};
+			return [
+				_,
+				G.value,
+				K.value,
+				b.invalid ? t.danger : t[e]
+			].join(" ");
+		});
+		function J(e) {
+			x("update:modelValue", e.target.value);
+		}
+		return (e, i) => (d(), n("div", h, [
+			e.$slots.prefix ? (d(), n("div", {
+				key: 0,
+				ref_key: "prefixEl",
+				ref: A,
+				"data-testid": "ds-input-prefix",
+				class: "absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
+				style: s(U.value),
+				"aria-hidden": "true"
+			}, [p(e.$slots, "prefix")], 4)) : t("", !0),
+			r("input", a({
+				id: b.id,
+				ref_key: "inputEl",
+				ref: S
+			}, e.$attrs, {
+				name: b.name,
+				type: b.type,
+				inputmode: b.inputmode,
+				autocomplete: b.autocomplete,
+				placeholder: b.placeholder,
+				disabled: b.disabled,
+				value: b.modelValue,
+				"aria-invalid": b.invalid ? "true" : void 0,
+				class: q.value,
+				style: H.value,
+				onInput: J
+			}), null, 16, g),
+			e.$slots.suffix ? (d(), n("div", {
+				key: 1,
+				ref_key: "suffixEl",
+				ref: j,
+				"data-testid": "ds-input-suffix",
+				class: "absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
+				style: s(W.value),
+				"aria-hidden": "true"
+			}, [p(e.$slots, "suffix")], 4)) : t("", !0)
+		]));
+	}
+});
+//#endregion
+export { v as t };

package/dist/chunks/DsInputTag-DWip_-Cr.js

@@ -0,0 +1,201 @@
+import { t as e } from "./x-dGjszOU2.js";
+import { t } from "./DsBadge-Dnd7_I-K.js";
+import { i as n, n as r } from "./config-qlwX-rLq.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y, withModifiers as b } from "vue";
+//#region src/components/DsInputTag/DsInputTag.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "truncate max-w-[18rem]" }, S = ["data-index", "onClick"], C = [
+	"value",
+	"disabled",
+	"readonly",
+	"placeholder",
+	"aria-invalid"
+], w = /* @__PURE__ */ d({
+	__name: "DsInputTag",
+	props: {
+		modelValue: {},
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		state: { default: "default" },
+		size: { default: "md" },
+		separators: { default: () => [","] },
+		allowDuplicates: {
+			type: Boolean,
+			default: !1
+		},
+		trim: {
+			type: Boolean,
+			default: !0
+		},
+		max: { default: void 0 },
+		addOnBlur: {
+			type: Boolean,
+			default: !1
+		},
+		clearInputOnAdd: {
+			type: Boolean,
+			default: !0
+		},
+		tagTone: { default: "neutral" },
+		tagDark: {
+			type: Boolean,
+			default: !1
+		},
+		tagSize: { default: "md" },
+		tagRadius: { default: "round" },
+		tagClosable: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"add",
+		"remove"
+	],
+	setup(d, { expose: w, emit: T }) {
+		let E = /[.*+?^${}()|[\]\\]/g, D = d, O = T, k = m(""), A = m(null);
+		function j() {
+			A.value?.focus();
+		}
+		w({ focus: j });
+		let M = a(() => D.max !== void 0 && D.modelValue.length >= D.max), N = a(() => !D.disabled && !D.readonly), P = a(() => D.tagClosable && N.value);
+		function F(e) {
+			return e.replace(E, "\\$&");
+		}
+		let I = a(() => {
+			let e = (D.separators ?? []).filter(Boolean).map((e) => e[0]), t = [...new Set([
+				...e,
+				"\n",
+				"\r",
+				"	"
+			])].map(F).join("");
+			return RegExp(`[${t}]+`, "g");
+		});
+		function L(e) {
+			return D.trim ? e.trim() : e;
+		}
+		function R(e) {
+			return e.split(I.value).map((e) => L(e)).filter(Boolean);
+		}
+		function z(e) {
+			if (!N.value || M.value) return !1;
+			let t = D.modelValue.slice(), n = !1;
+			for (let r of e) {
+				let e = L(r);
+				if (e && !(!D.allowDuplicates && t.includes(e))) {
+					if (D.max !== void 0 && t.length >= D.max) break;
+					t.push(e), n = !0, O("add", e);
+				}
+			}
+			return n ? (O("update:modelValue", t), !0) : !1;
+		}
+		function B() {
+			if (!N.value || M.value || !k.value) return;
+			let e = R(k.value);
+			e.length && z(e) && D.clearInputOnAdd && (k.value = "");
+		}
+		function V(e) {
+			if (!N.value) return;
+			let t = D.modelValue.slice(), n = t[e];
+			n !== void 0 && (t.splice(e, 1), O("update:modelValue", t), O("remove", n, e));
+		}
+		function H(e) {
+			k.value = e.target.value;
+		}
+		function U(e) {
+			if (N.value) {
+				if (e.key === "Enter") {
+					e.preventDefault(), B();
+					return;
+				}
+				if ((D.separators ?? []).includes(e.key)) {
+					e.preventDefault(), B();
+					return;
+				}
+				e.key === "Backspace" && k.value.length === 0 && D.modelValue.length > 0 && (e.preventDefault(), V(D.modelValue.length - 1));
+			}
+		}
+		function W() {
+			D.addOnBlur && B();
+		}
+		function G(e) {
+			if (!N.value || M.value) return;
+			let t = e.clipboardData?.getData("text");
+			if (!t) return;
+			let n = R(t);
+			n.length <= 1 || (e.preventDefault(), z(n));
+		}
+		let K = a(() => n({
+			size: D.size,
+			state: D.state,
+			invalid: D.invalid,
+			disabled: D.disabled
+		})), q = a(() => r(D.size)), J = a(() => D.modelValue.length > 0 ? void 0 : D.placeholder);
+		return (n, r) => (p(), c("div", {
+			"data-testid": "ds-input-tag",
+			class: f(["w-full flex flex-wrap items-center rounded-md border bg-[var(--bg)] text-[var(--fg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]", K.value]),
+			onClick: j
+		}, [(p(!0), c(i, null, h(D.modelValue, (i, a) => (p(), o(t, {
+			key: `${i}-${a}`,
+			tone: D.tagTone,
+			dark: D.tagDark,
+			size: D.tagSize,
+			radius: D.tagRadius,
+			class: "gap-1",
+			"data-testid": "ds-input-tag-item",
+			"data-index": a
+		}, {
+			default: y(() => [g(n.$slots, "tag", {
+				tag: i,
+				index: a,
+				remove: () => V(a)
+			}, () => [l("span", x, _(i), 1)]), P.value ? (p(), c("button", {
+				key: 0,
+				type: "button",
+				class: "-mr-0.5 inline-flex items-center justify-center rounded-[6px] p-0.5 opacity-70 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+				"aria-label": "Remove tag",
+				"data-testid": "ds-input-tag-remove",
+				"data-index": a,
+				onMousedown: r[0] ||= b(() => {}, ["prevent", "stop"]),
+				onClick: b((e) => V(a), ["stop"])
+			}, [u(v(e), {
+				class: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			})], 40, S)) : s("", !0)]),
+			_: 2
+		}, 1032, [
+			"tone",
+			"dark",
+			"size",
+			"radius",
+			"data-index"
+		]))), 128)), l("input", {
+			ref_key: "inputEl",
+			ref: A,
+			"data-testid": "ds-input-tag-input",
+			value: k.value,
+			disabled: D.disabled || M.value,
+			readonly: D.readonly,
+			placeholder: J.value,
+			"aria-invalid": D.invalid ? "true" : void 0,
+			class: f(["flex-1 min-w-[120px] bg-transparent border-none outline-none placeholder:text-[var(--muted-fg)]", q.value]),
+			onInput: H,
+			onKeydown: U,
+			onBlur: W,
+			onPaste: G
+		}, null, 42, C)], 2));
+	}
+});
+//#endregion
+export { w as t };