@feugene/granularity 0.1.0 → 0.3.0

package/dist/{chunks/DsImageViewer-C9NZ42St.js → components/DsImageViewer/chunks/DsImageViewer-_LWdAHAd.js}

@@ -1,22 +1,22 @@
-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";
+import { n as e, o as t, r as n, t as r } from "../../../chunks/transition-BJXMi52x.js";
+import { Fragment as i, Teleport as ee, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeStyle as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, watch as v, withCtx as y } 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 = {
+var b = { class: "fixed inset-0 overflow-hidden" }, x = { class: "pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6" }, S = { class: "pointer-events-auto flex items-center justify-between gap-3" }, C = { class: "flex items-center gap-2" }, w = {
 	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 = {
+}, T = {
 	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 = {
+}, te = ["aria-label"], ne = { class: "relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20" }, re = ["aria-label"], ie = ["aria-label"], ae = { class: "h-full w-full flex items-center justify-center" }, oe = ["src"], se = {
 	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 = {
+}, ce = { class: "pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6" }, le = { class: "pointer-events-auto mx-auto w-full max-w-max" }, ue = { class: "rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1" }, de = ["aria-label"], fe = ["aria-label"], pe = ["aria-label"], E = {
 	key: 1,
 	class: "mx-1 h-6 w-px bg-white/25",
 	"aria-hidden": "true"
-}, ue = 2e3, T = /* @__PURE__ */ c({
+}, me = ["aria-label"], he = ["aria-label"], ge = 2e3, D = /* @__PURE__ */ d({
 	__name: "DsImageViewer",
 	props: {
 		modelValue: { type: Boolean },
@@ -41,7 +41,16 @@ var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-even
 			type: Boolean,
 			default: !0
 		},
-		zIndex: { default: void 0 }
+		zIndex: { default: void 0 },
+		closeLabel: { default: "Close image viewer" },
+		prevLabel: { default: "Previous image" },
+		nextLabel: { default: "Next image" },
+		zoomInLabel: { default: "Zoom in" },
+		zoomOutLabel: { default: "Zoom out" },
+		resetZoomLabel: { default: "Reset zoom" },
+		rotateLeftLabel: { default: "Rotate left" },
+		rotateRightLabel: { default: "Rotate right" },
+		emptyText: { default: "No image" }
 	},
 	emits: [
 		"update:modelValue",
@@ -49,56 +58,56 @@ var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-even
 		"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, "");
+	setup(d, { emit: D }) {
+		let O = d, k = D, A = /\.0$/, j = a(() => O.modelValue), M = a(() => O.urlList.length), N = a(() => M.value > 0), P = m(0), F = m(1), I = m(0), L = m(0), R = m(0), z = a(() => {
+			if (N.value) return O.urlList[P.value];
+		}), B = a(() => N.value ? P.value + 1 : 0), _e = a(() => ({ zIndex: String(Number.isFinite(O.zIndex) ? O.zIndex : ge) })), ve = a(() => ({ transform: `translate3d(${L.value}px, ${R.value}px, 0) scale(${F.value}) rotate(${I.value}deg)` })), ye = a(() => {
+			let e = F.value * 100;
+			return Number.isInteger(e) ? String(e) : e.toFixed(1).replace(A, "");
 		});
 		function V(e) {
-			return A.value ? ((Number.isFinite(e) ? Math.trunc(e) : 0) % k.value + k.value) % k.value : 0;
+			return N.value ? ((Number.isFinite(e) ? Math.trunc(e) : 0) % M.value + M.value) % M.value : 0;
 		}
 		function H() {
-			M.value = 1, N.value = 0, P.value = 0, F.value = 0;
+			F.value = 1, I.value = 0, L.value = 0, R.value = 0;
 		}
 		function U(e, t) {
 			let n = V(e);
-			n !== j.value && (j.value = n, H(), t?.emitSwitch !== !1 && D("switch", n));
+			n !== P.value && (P.value = n, H(), t?.emitSwitch !== !1 && k("switch", n));
 		}
 		function W() {
-			if (!A.value) {
-				j.value = 0;
+			if (!N.value) {
+				P.value = 0;
 				return;
 			}
-			j.value = V(E.initialIndex), H();
+			P.value = V(O.initialIndex), H();
 		}
 		function G(e) {
-			let t = E.urlList[e];
+			let t = O.urlList[e];
 			if (!t) return;
 			let n = new Image();
 			n.decoding = "async", n.src = t;
 		}
 		function K() {
-			D("update:modelValue", !1), D("close");
+			k("update:modelValue", !1), k("close");
 		}
 		function q() {
-			U(j.value - 1);
+			U(P.value - 1);
 		}
 		function J() {
-			U(j.value + 1);
+			U(P.value + 1);
 		}
 		function Y() {
-			M.value = Math.min(E.maxScale, Number((M.value * E.zoomRate).toFixed(4)));
+			F.value = Math.min(O.maxScale, Number((F.value * O.zoomRate).toFixed(4)));
 		}
 		function X() {
-			M.value = Math.max(E.minScale, Number((M.value / E.zoomRate).toFixed(4)));
+			F.value = Math.max(O.minScale, Number((F.value / O.zoomRate).toFixed(4)));
 		}
 		function Z() {
-			N.value -= 90, D("rotate", N.value);
+			I.value -= 90, k("rotate", I.value);
 		}
 		function Q() {
-			N.value += 90, D("rotate", N.value);
+			I.value += 90, k("rotate", I.value);
 		}
 		let $ = {
 			close: K,
@@ -110,13 +119,13 @@ var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-even
 			rotateLeft: Z,
 			rotateRight: Q
 		};
-		function fe() {
-			E.hideOnClickModal && K();
+		function be() {
+			O.hideOnClickModal && K();
 		}
-		function pe(e) {
+		function xe(e) {
 			switch (e.key) {
 				case "Escape":
-					if (!E.closeOnPressEscape) return;
+					if (!O.closeOnPressEscape) return;
 					e.preventDefault(), K();
 					return;
 				case "ArrowLeft":
@@ -141,28 +150,28 @@ var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-even
 				default:
 			}
 		}
-		return h(() => E.modelValue, (e) => {
+		return v(() => O.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,
+		}, { immediate: !0 }), v(() => O.initialIndex, () => {
+			O.modelValue && W();
+		}), v(() => O.urlList, () => {
+			O.modelValue && W();
+		}, { deep: !0 }), v(P, (e) => {
+			!N.value || M.value < 2 || (G(V(e - 1)), G(V(e + 1)));
+		}, { immediate: !0 }), (a, m) => (p(), o(ee, { to: "body" }, [u(_(r), {
+			show: j.value,
 			as: "template"
 		}, {
-			default: g(() => [s(m(e), {
+			default: y(() => [u(_(t), {
 				as: "div",
 				class: "fixed inset-0",
-				style: l(R.value),
+				style: f(_e.value),
 				role: "dialog",
 				"aria-modal": "true",
 				static: !0,
-				onKeydown: pe
+				onKeydown: xe
 			}, {
-				default: g(() => [o("div", ie, [s(m(t), {
+				default: y(() => [l("div", b, [u(_(e), {
 					as: "template",
 					enter: "duration-150 ease-out",
 					"enter-from": "opacity-0",
@@ -171,14 +180,14 @@ var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-even
 					"leave-from": "opacity-100",
 					"leave-to": "opacity-0"
 				}, {
-					default: g(() => [o("div", {
+					default: y(() => [l("div", {
 						"data-ds-image-viewer-overlay": "",
 						class: "absolute inset-0 bg-black/60 backdrop-blur-sm",
 						"aria-hidden": "true",
-						onClick: fe
+						onClick: be
 					})]),
 					_: 1
-				}), s(m(t), {
+				}), u(_(e), {
 					as: "template",
 					enter: "duration-180 ease-out",
 					"enter-from": "opacity-0 scale-98",
@@ -187,116 +196,116 @@ var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-even
 					"leave-from": "opacity-100 scale-100",
 					"leave-to": "opacity-0 scale-98"
 				}, {
-					default: g(() => [s(m(n), {
+					default: y(() => [u(_(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", {
+						default: y(() => [
+							l("div", x, [l("div", S, [l("div", C, [d.showProgress ? (p(), c("div", w, g(B.value) + " / " + g(M.value), 1)) : s("", !0), d.showZoomValue ? (p(), c("div", T, g(ye.value) + "% ", 1)) : s("", !0)]), l("button", {
 								type: "button",
 								"data-ds-image-viewer-close": "",
-								"aria-label": "Close image viewer",
+								"aria-label": d.closeLabel,
 								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", {
+							}, [...m[0] ||= [l("span", {
 								"aria-hidden": "true",
 								class: "text-lg leading-none"
-							}, "✕", -1)]])])]),
-							o("div", x, [
-								k.value > 1 ? (u(), a("button", {
+							}, "✕", -1)]], 8, te)])]),
+							l("div", ne, [
+								M.value > 1 ? (p(), c("button", {
 									key: 0,
 									type: "button",
 									"data-ds-image-viewer-prev": "",
-									"aria-label": "Previous image",
+									"aria-label": d.prevLabel,
 									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", {
+								}, [...m[1] ||= [l("span", {
 									"aria-hidden": "true",
 									class: "text-xl leading-none"
-								}, "‹", -1)]])) : i("", !0),
-								k.value > 1 ? (u(), a("button", {
+								}, "‹", -1)]], 8, re)) : s("", !0),
+								M.value > 1 ? (p(), c("button", {
 									key: 1,
 									type: "button",
 									"data-ds-image-viewer-next": "",
-									"aria-label": "Next image",
+									"aria-label": d.nextLabel,
 									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", {
+								}, [...m[2] ||= [l("span", {
 									"aria-hidden": "true",
 									class: "text-xl leading-none"
-								}, "›", -1)]])) : i("", !0),
-								o("div", S, [I.value ? (u(), a("img", {
+								}, "›", -1)]], 8, ie)) : s("", !0),
+								l("div", ae, [z.value ? (p(), c("img", {
 									key: 0,
 									"data-ds-image-viewer-image": "",
-									src: I.value,
+									src: z.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 "))])
+									style: f(ve.value)
+								}, null, 12, oe)) : (p(), c("div", se, g(d.emptyText), 1))])
 							]),
-							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,
+							l("div", ce, [l("div", le, [h(a.$slots, "toolbar", {
+								index: P.value,
+								displayIndex: B.value,
+								total: M.value,
+								scale: F.value,
+								rotation: I.value,
 								actions: $
-							}, () => [o("div", ce, [
-								o("button", {
+							}, () => [l("div", ue, [
+								l("button", {
 									type: "button",
 									"data-ds-image-viewer-zoom-out": "",
-									"aria-label": "Zoom out",
+									"aria-label": d.zoomOutLabel,
 									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", {
+								}, " − ", 8, de),
+								l("button", {
 									type: "button",
 									"data-ds-image-viewer-zoom-reset": "",
-									"aria-label": "Reset zoom",
+									"aria-label": d.resetZoomLabel,
 									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", {
+								}, " 100% ", 8, fe),
+								l("button", {
 									type: "button",
 									"data-ds-image-viewer-zoom-in": "",
-									"aria-label": "Zoom in",
+									"aria-label": d.zoomInLabel,
 									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", {
+								}, " + ", 8, pe),
+								a.$slots["toolbar-actions"] ? (p(), c(i, { key: 0 }, [
+									m[3] ||= l("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,
+									h(a.$slots, "toolbar-actions", {
+										index: P.value,
+										displayIndex: B.value,
+										total: M.value,
+										scale: F.value,
+										rotation: I.value,
 										actions: $
 									}),
-									d[4] ||= o("div", {
+									m[4] ||= l("div", {
 										class: "mx-1 h-6 w-px bg-white/25",
 										"aria-hidden": "true"
 									}, null, -1)
-								], 64)) : (u(), a("div", le)),
-								o("button", {
+								], 64)) : (p(), c("div", E)),
+								l("button", {
 									type: "button",
 									"data-ds-image-viewer-rotate-left": "",
-									"aria-label": "Rotate left",
+									"aria-label": d.rotateLeftLabel,
 									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", {
+								}, " ↺ ", 8, me),
+								l("button", {
 									type: "button",
 									"data-ds-image-viewer-rotate-right": "",
-									"aria-label": "Rotate right",
+									"aria-label": d.rotateRightLabel,
 									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
-								}, " ↻ ")
+								}, " ↻ ", 8, he)
 							])])])])
 						]),
 						_: 3
@@ -310,4 +319,4 @@ var ie = { class: "fixed inset-0 overflow-hidden" }, ae = { class: "pointer-even
 	}
 });
 //#endregion
-export { T as t };
+export { D as t };

package/dist/components/DsImageViewer/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsImageViewer-C9NZ42St.js";
-import { n as t, t as n } from "../../chunks/config-DAiP4yeJ.js";
-export { e as DsImageViewer, e as default, n as dsImageViewerConfig, t as dsImageViewerSafelist };
+import { t as e } from "./chunks/DsImageViewer-_LWdAHAd.js";
+import { t } from "../../chunks/config-C_bF_fTb.js";
+export { e as DsImageViewer, e as default, t as dsImageViewerConfig };

package/dist/{chunks/DsInput-DeoAkT6R.js → components/DsInput/chunks/DsInput-B8RhHkKQ.js}

@@ -10,7 +10,7 @@ var h = { class: "relative w-full" }, g = [
 	"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({
+], _ = /* @__PURE__ */ i({
 	inheritAttrs: !1,
 	__name: "DsInput",
 	props: {
@@ -38,122 +38,121 @@ var h = { class: "relative w-full" }, g = [
 		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();
+	setup(i, { expose: _, emit: v }) {
+		let y = i, b = v, x = f(null);
+		function S() {
+			x.value?.focus();
 		}
-		v({ focus: C });
-		let w = m(), T = e(() => !!w.prefix), E = e(() => !!w.suffix), D = e(() => ({
+		_({ focus: S });
+		let C = m(), w = e(() => !!C.prefix), T = e(() => !!C.suffix), E = 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) {
+		})[y.size]), D = e(() => y.prefixMinWidth ?? E.value), O = e(() => y.suffixMinWidth ?? E.value), k = f(null), A = f(null), j = f(void 0), M = f(void 0), N = null, P = !1;
+		function F(e) {
 			if (!e) return;
 			let t = Math.ceil(e.getBoundingClientRect().width || 0);
 			if (!(t <= 0)) return `${t}px`;
 		}
+		function I() {
+			j.value = w.value ? F(k.value) : void 0, M.value = T.value ? F(A.value) : void 0;
+		}
 		function L() {
-			M.value = T.value ? I(A.value) : void 0, N.value = E.value ? I(j.value) : void 0;
+			typeof ResizeObserver > "u" || (N ||= new ResizeObserver(() => I()), N.disconnect(), k.value && N.observe(k.value), A.value && N.observe(A.value));
 		}
 		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();
+			P || (P = !0, o(() => {
+				P = !1, I(), L();
 			}));
 		}
-		l(() => z()), u(() => z()), c(() => P?.disconnect());
-		function B(e, t) {
+		l(() => R()), u(() => R()), c(() => N?.disconnect());
+		function z(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(() => ({
+		let B = 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";
+		})[y.size]), V = e(() => {
+			let e = w.value ? j.value ?? D.value : "0px", t = T.value ? M.value ?? O.value : "0px";
 			return {
-				paddingLeft: T.value ? B(e, V.value) : void 0,
-				paddingRight: E.value ? B(t, V.value) : void 0
+				paddingLeft: w.value ? z(e, B.value) : void 0,
+				paddingRight: T.value ? z(t, B.value) : void 0
 			};
-		}), U = e(() => ({
+		}), H = e(() => ({
+			minWidth: D.value,
+			maxWidth: y.prefixMaxWidth
+		})), U = e(() => ({
 			minWidth: O.value,
-			maxWidth: b.prefixMaxWidth
+			maxWidth: y.suffixMaxWidth
 		})), 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(() => ({
+		})[y.size]), G = e(() => ({
 			left: "text-left",
 			center: "text-center",
 			right: "text-right"
-		})[b.textAlign]), q = e(() => {
-			let e = b.state, t = {
+		})[y.textAlign]), K = e(() => {
+			let e = y.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 [
-				_,
+				W.value,
 				G.value,
-				K.value,
-				b.invalid ? t.danger : t[e]
+				y.invalid ? t.danger : t[e]
 			].join(" ");
 		});
-		function J(e) {
-			x("update:modelValue", e.target.value);
+		function q(e) {
+			b("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,
+				ref: k,
 				"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),
+				style: s(H.value),
 				"aria-hidden": "true"
 			}, [p(e.$slots, "prefix")], 4)) : t("", !0),
 			r("input", a({
-				id: b.id,
+				id: y.id,
 				ref_key: "inputEl",
-				ref: S
+				ref: x
 			}, 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
+				name: y.name,
+				type: y.type,
+				inputmode: y.inputmode,
+				autocomplete: y.autocomplete,
+				placeholder: y.placeholder,
+				disabled: y.disabled,
+				value: y.modelValue,
+				"aria-invalid": y.invalid ? "true" : void 0,
+				class: ["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", K.value],
+				style: V.value,
+				onInput: q
 			}), null, 16, g),
 			e.$slots.suffix ? (d(), n("div", {
 				key: 1,
 				ref_key: "suffixEl",
-				ref: j,
+				ref: A,
 				"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),
+				style: s(U.value),
 				"aria-hidden": "true"
 			}, [p(e.$slots, "suffix")], 4)) : t("", !0)
 		]));
 	}
 });
 //#endregion
-export { v as t };
+export { _ as t };

package/dist/components/DsInput/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsInput-DeoAkT6R.js";
-import { n as t, t as n } from "../../chunks/config-BXlW2GSa.js";
+import { t as e } from "./chunks/DsInput-B8RhHkKQ.js";
+import { n as t, t as n } from "../../chunks/config-Bo4SoxQg.js";
 export { e as DsInput, e as default, n as dsInputConfig, t as dsInputSafelist };