@feugene/granularity 0.1.0

package/dist/chunks/DsLink-CWpVQ0ij.js

@@ -0,0 +1,56 @@
+import { n as e } from "./config-Ch0TH9wN.js";
+import { computed as t, createElementBlock as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, useAttrs as c } from "vue";
+//#region src/components/DsLink/DsLink.vue?vue&type=script&setup=true&lang.ts
+var l = [
+	"href",
+	"target",
+	"rel",
+	"aria-label"
+], u = ["aria-label", "aria-disabled"], d = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "DsLink",
+	props: {
+		href: { default: void 0 },
+		external: {
+			type: Boolean,
+			default: !1
+		},
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: void 0 },
+		variant: { default: "primary" },
+		underline: { default: "auto" },
+		size: { default: "sm" }
+	},
+	setup(r) {
+		let d = r, f = c(), p = t(() => !!d.href && !d.disabled), m = t(() => {
+			if (d.target) return d.target;
+			if (d.external) return "_blank";
+		}), h = t(() => {
+			if (d.rel) return d.rel;
+			if (d.external) return "noopener noreferrer";
+		}), g = t(() => e({
+			size: d.size,
+			underline: d.underline,
+			variant: d.variant,
+			disabled: d.disabled
+		}));
+		return (e, t) => p.value ? (a(), n("a", i({ key: 0 }, s(f), {
+			href: d.href,
+			target: m.value,
+			rel: h.value,
+			"aria-label": d.ariaLabel,
+			class: ["inline-flex items-center gap-1 rounded-[6px] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]", g.value]
+		}), [o(e.$slots, "default")], 16, l)) : (a(), n("span", i({ key: 1 }, s(f), {
+			"aria-label": d.ariaLabel,
+			"aria-disabled": d.disabled ? "true" : void 0,
+			class: ["inline-flex items-center gap-1 rounded-[6px] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]", g.value]
+		}), [o(e.$slots, "default")], 16, u));
+	}
+});
+//#endregion
+export { d as t };

package/dist/chunks/DsList-XI8AAk9b.js

@@ -0,0 +1,31 @@
+import { t as e } from "./DsCard-GtapCsjq.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, withCtx as d } from "vue";
+//#endregion
+//#region src/components/DsList/DsList.vue
+var f = /* @__PURE__ */ a({
+	__name: "DsList",
+	props: { divided: {
+		type: Boolean,
+		default: !0
+	} },
+	setup(n) {
+		return (r, a) => (s(), t(u(e), null, {
+			default: d(() => [i("div", { class: o(n.divided ? "divide-y divide-[var(--brd)]" : "") }, [c(r.$slots, "default")], 2)]),
+			_: 3
+		}));
+	}
+}), p = { class: "px-4 py-3 flex items-start justify-between gap-4" }, m = { class: "min-w-0" }, h = { class: "text-[13px] font-700" }, g = {
+	key: 0,
+	class: "text-[13px] ds-muted mt-0.5"
+}, _ = { class: "shrink-0" }, v = /* @__PURE__ */ a({
+	__name: "DsListItem",
+	props: {
+		title: {},
+		description: {}
+	},
+	setup(e) {
+		return (t, a) => (s(), r("div", p, [i("div", m, [i("div", h, l(e.title), 1), e.description ? (s(), r("div", g, l(e.description), 1)) : n("", !0)]), i("div", _, [c(t.$slots, "default")])]));
+	}
+});
+//#endregion
+export { f as n, v as t };

package/dist/chunks/DsLoading-ogfmbPE4.js

@@ -0,0 +1,53 @@
+import { t as e } from "./loader-circle-DtXjkqR7.js";
+import { t } from "./dsLoadingStyles-B2ScgHwn.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, resolveDynamicComponent as d, toDisplayString as f } from "vue";
+//#region src/components/DsLoading/DsLoading.vue?vue&type=script&setup=true&lang.ts
+var p = { class: "flex flex-col items-center justify-center gap-2 px-4 text-center" }, m = {
+	key: 2,
+	class: "text-sm ds-muted"
+}, h = "Loading...", g = /* @__PURE__ */ s({
+	__name: "DsLoading",
+	props: {
+		text: { default: void 0 },
+		spinner: { default: void 0 },
+		spinnerClass: { default: void 0 },
+		animated: {
+			type: Boolean,
+			default: !0
+		},
+		background: { default: void 0 },
+		fullscreen: {
+			type: Boolean,
+			default: !1
+		},
+		zIndex: { default: void 0 },
+		customClass: { default: void 0 }
+	},
+	setup(s) {
+		let g = s, _ = n(() => g.spinner ?? e), v = n(() => g.text === void 0 ? h : g.text), y = n(() => t({
+			fullscreen: g.fullscreen,
+			hasBackground: g.background !== void 0,
+			customClass: g.customClass
+		})), b = n(() => ({
+			backgroundColor: g.background,
+			zIndex: g.zIndex == null ? void 0 : String(g.zIndex)
+		})), x = n(() => g.spinnerClass);
+		return (e, t) => (u(), a("div", {
+			"data-ds-loading": "",
+			class: c(["flex items-center justify-center cursor-wait select-none pointer-events-auto", y.value]),
+			style: l(b.value),
+			role: "status",
+			"aria-live": "polite"
+		}, [o("div", p, [g.animated ? (u(), r(d(_.value), {
+			key: 0,
+			class: c(["ds-loading__spinner ds-loading__spinner--animated h-7 w-7 text-[var(--muted-fg)]", x.value]),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])) : (u(), r(d(_.value), {
+			key: 1,
+			class: c(["ds-loading__spinner h-7 w-7 text-[var(--muted-fg)]", x.value]),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])), v.value ? (u(), a("div", m, f(v.value), 1)) : i("", !0)])], 6));
+	}
+});
+//#endregion
+export { g as t };

package/dist/chunks/DsModal-Bl9r6v33.js

@@ -0,0 +1,75 @@
+import { a as e, n as t, r as n, t as r } from "./transition-CT9vsWnT.js";
+import { r as i } from "./dsModalStyles-C7E5kJ1o.js";
+import { Teleport as a, computed as o, createBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderSlot as p, unref as m, withCtx as h, withKeys as g, withModifiers as _ } from "vue";
+//#region src/components/DsModal/DsModal.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "fixed inset-0 overflow-y-auto p-4 sm:p-6" }, y = { class: "min-h-full flex items-center justify-center" }, b = /* @__PURE__ */ u({
+	__name: "DsModal",
+	props: {
+		modelValue: { type: Boolean },
+		closeOnBackdrop: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(u, { emit: b }) {
+		let x = u, S = b, C = o(() => x.modelValue), w = o(() => i(x.size));
+		function T() {
+			S("update:modelValue", !1);
+		}
+		function E() {
+			x.closeOnBackdrop && T();
+		}
+		return (i, o) => (f(), s(a, { to: "body" }, [l(m(r), {
+			show: C.value,
+			as: "template"
+		}, {
+			default: h(() => [l(m(e), {
+				as: "div",
+				class: "fixed inset-0 z-50",
+				onClose: E,
+				onKeydown: g(_(T, ["stop", "prevent"]), ["esc"])
+			}, {
+				default: h(() => [c("div", v, [c("div", y, [l(m(t), {
+					as: "template",
+					enter: "duration-200 ease-out",
+					"enter-from": "opacity-0",
+					"enter-to": "opacity-100",
+					leave: "duration-150 ease-in",
+					"leave-from": "opacity-100",
+					"leave-to": "opacity-0"
+				}, {
+					default: h(() => [...o[0] ||= [c("div", {
+						"data-ds-modal-overlay": "",
+						class: "fixed inset-0 z-0 bg-black/40",
+						"aria-hidden": "true"
+					}, null, -1)]]),
+					_: 1
+				}), l(m(t), {
+					as: "template",
+					enter: "duration-200 ease-out",
+					"enter-from": "opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95",
+					"enter-to": "opacity-100 translate-y-0 sm:scale-100",
+					leave: "duration-150 ease-in",
+					"leave-from": "opacity-100 translate-y-0 sm:scale-100",
+					"leave-to": "opacity-0 translate-y-2 sm:translate-y-0 sm:scale-95"
+				}, {
+					default: h(() => [l(m(n), {
+						"data-ds-modal-panel": "",
+						tabindex: "-1",
+						class: d(w.value)
+					}, {
+						default: h(() => [p(i.$slots, "default")]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				})])])]),
+				_: 3
+			}, 8, ["onKeydown"])]),
+			_: 3
+		}, 8, ["show"])]));
+	}
+});
+//#endregion
+export { b as t };

package/dist/chunks/DsNavbar-DJ4bv_MR.js

@@ -0,0 +1,54 @@
+import { t as e } from "./DsButton-CA18Fha-.js";
+import { t } from "./granularityI18n-DBuOHekC.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, markRaw as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+//#region ~icons/lucide/menu
+var _ = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function v(e, t) {
+	return f(), a("svg", _, [...t[0] ||= [o("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M4 5h16M4 12h16M4 19h16"
+	}, null, -1)]]);
+}
+var y = u({
+	name: "lucide-menu",
+	render: v
+}), b = { class: "h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6" }, x = { class: "flex items-center gap-3" }, S = { class: "text-[14px] font-700" }, C = { class: "flex items-center gap-3" }, w = /* @__PURE__ */ l({
+	__name: "DsNavbar",
+	props: {
+		title: {},
+		showMenuButton: {
+			type: Boolean,
+			default: !1
+		},
+		menuButtonClass: { default: "" }
+	},
+	emits: ["menu"],
+	setup(l, { emit: u }) {
+		let { t: _ } = t(), v = u, w = n(() => _("ds.navbar.openMenu", "Open menu"));
+		return (t, n) => (f(), a("header", b, [o("div", x, [l.showMenuButton ? (f(), r(e, {
+			key: 0,
+			variant: "ghost",
+			size: "sm",
+			square: "",
+			"aria-label": w.value,
+			class: d(l.menuButtonClass),
+			onClick: n[0] ||= (e) => v("menu")
+		}, {
+			default: g(() => [c(h(y), {
+				class: "h-4 w-4",
+				"aria-hidden": "true"
+			})]),
+			_: 1
+		}, 8, ["aria-label", "class"])) : i("", !0), o("div", S, [p(t.$slots, "title", {}, () => [s(m(l.title), 1)])])]), o("div", C, [p(t.$slots, "default")])]));
+	}
+});
+//#endregion
+export { w as t };

package/dist/chunks/DsNumberInput-D-m5QoQJ.js

@@ -0,0 +1,301 @@
+import { i as e, n as t } from "./config-BnryTLnh.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeProps as ee, nextTick as s, normalizeClass as te, normalizeStyle as c, onBeforeUnmount as l, onMounted as ne, onUpdated as re, openBlock as u, ref as d, renderSlot as f, useSlots as ie, withModifiers as p } from "vue";
+//#region src/components/DsNumberInput/DsNumberInput.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"id",
+	"name",
+	"inputmode",
+	"autocomplete",
+	"placeholder",
+	"disabled",
+	"value",
+	"aria-invalid"
+], ae = { class: "flex flex-col justify-center gap-1" }, oe = ["disabled"], h = ["disabled"], g = ["disabled"], se = ["disabled"], _ = /* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "DsNumberInput",
+	props: {
+		modelValue: {},
+		placeholder: { default: void 0 },
+		autocomplete: { default: void 0 },
+		inputmode: { default: "decimal" },
+		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" },
+		decimalSeparator: { default: "." },
+		step: { default: 1 },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		precision: { default: void 0 },
+		controls: {
+			type: Boolean,
+			default: !1
+		},
+		controlsDirection: { default: "vertical" },
+		prefixMinWidth: { default: void 0 },
+		prefixMaxWidth: { default: void 0 },
+		suffixMinWidth: { default: void 0 },
+		suffixMaxWidth: { default: void 0 }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(o, { expose: _, emit: v }) {
+		let y = {
+			xs: 32,
+			sm: 36,
+			md: 40,
+			lg: 48
+		}, b = {
+			xs: "10px",
+			sm: "12px",
+			md: "12px",
+			lg: "16px"
+		};
+		function x(e) {
+			return `${e}px`;
+		}
+		let S = o, C = v, w = d(null);
+		function T() {
+			w.value?.focus();
+		}
+		_({ focus: T });
+		let E = ie(), D = n(() => !!E.prefix), O = n(() => !!E.suffix), k = n(() => S.controls && S.controlsDirection === "horizontal"), A = n(() => S.controls && S.controlsDirection === "vertical"), j = n(() => y[S.size]), M = n(() => x(j.value)), N = n(() => b[S.size]), P = n(() => M.value), F = n(() => S.prefixMinWidth ?? P.value), I = n(() => S.suffixMinWidth ?? P.value), L = d(null), R = d(null), z = d(void 0), B = d(void 0), V = null, H = !1;
+		function U(e) {
+			if (!e) return;
+			let t = Math.ceil(e.getBoundingClientRect().width || 0);
+			if (!(t <= 0)) return `${t}px`;
+		}
+		function W() {
+			z.value = D.value ? U(L.value) : void 0, B.value = O.value ? U(R.value) : void 0;
+		}
+		function G() {
+			typeof ResizeObserver > "u" || (V ||= new ResizeObserver(() => W()), V.disconnect(), L.value && V.observe(L.value), R.value && V.observe(R.value));
+		}
+		function K() {
+			H || (H = !0, s(() => {
+				H = !1, W(), G();
+			}));
+		}
+		ne(() => K()), re(() => K()), l(() => V?.disconnect());
+		function q(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 J = n(() => D.value ? z.value ?? F.value : "0px"), Y = n(() => O.value ? B.value ?? I.value : "0px");
+		function X(e, t) {
+			return {
+				width: M.value,
+				[e]: t
+			};
+		}
+		let ce = n(() => {
+			let e = k.value ? M.value : "0px", t = +!!k.value + +!!A.value, n = t > 0 ? x(j.value * t) : "0px", r = q(J.value, e), i = q(Y.value, n);
+			return {
+				paddingLeft: D.value || k.value ? q(r, N.value) : void 0,
+				paddingRight: O.value || t > 0 ? q(i, N.value) : void 0
+			};
+		}), le = n(() => ({
+			right: "0px",
+			minWidth: I.value,
+			maxWidth: S.suffixMaxWidth
+		})), ue = n(() => ({
+			minWidth: F.value,
+			maxWidth: S.prefixMaxWidth
+		})), de = n(() => X("right", Y.value)), fe = n(() => X("left", J.value)), pe = n(() => X("right", Y.value)), me = n(() => e({
+			disabled: S.disabled,
+			state: S.invalid ? "danger" : S.state
+		})), he = n(() => t({
+			size: S.size,
+			textAlign: S.textAlign
+		}));
+		function Z(e) {
+			return e >= "0" && e <= "9";
+		}
+		function Q(e) {
+			let t = S.decimalSeparator || ".", n = "", r = !1;
+			for (let i = 0; i < e.length; i++) {
+				let a = e[i];
+				if (Z(a)) {
+					n += a;
+					continue;
+				}
+				(a === t || a === "." || a === ",") && !r && (n += t, r = !0);
+			}
+			return n;
+		}
+		function ge(e) {
+			if (e.trim() === "") return null;
+			let t = S.decimalSeparator || ".", n = t === "." ? e : e.replace(t, "."), r = Number(n);
+			return Number.isFinite(r) ? r : null;
+		}
+		function _e(e) {
+			return S.min !== void 0 && (e = Math.max(S.min, e)), S.max !== void 0 && (e = Math.min(S.max, e)), e;
+		}
+		function ve(e) {
+			if (S.precision === void 0) return e;
+			let t = Math.max(0, S.precision);
+			return Number(e.toFixed(t));
+		}
+		function ye(e) {
+			let t = S.decimalSeparator || ".", n = S.precision, r = n === void 0 ? String(e) : e.toFixed(Math.max(0, n));
+			return t !== "." && (r = r.replace(".", t)), r;
+		}
+		function be(e) {
+			let t = e.target, n = Q(t.value);
+			t.value !== n && (t.value = n), C("update:modelValue", n);
+		}
+		function xe(e) {
+			let t = e.target, n = Q(t.value);
+			t.value !== n && (t.value = n), C("change", n);
+		}
+		function $(e) {
+			if (S.disabled) return;
+			let t = ye(_e(ve((ge(S.modelValue) ?? 0) + (S.step ?? 1) * e)));
+			C("update:modelValue", t), C("change", t), T();
+		}
+		return (e, t) => (u(), i("div", { class: te(["relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]", me.value]) }, [
+			e.$slots.prefix ? (u(), i("div", {
+				key: 0,
+				ref_key: "prefixEl",
+				ref: L,
+				"data-testid": "number-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: c(ue.value),
+				"aria-hidden": "true"
+			}, [f(e.$slots, "prefix")], 4)) : r("", !0),
+			a("input", ee({
+				id: S.id,
+				ref_key: "inputEl",
+				ref: w
+			}, e.$attrs, {
+				name: S.name,
+				type: "text",
+				inputmode: S.inputmode,
+				autocomplete: S.autocomplete,
+				placeholder: S.placeholder,
+				disabled: S.disabled,
+				value: S.modelValue,
+				"aria-invalid": S.invalid ? "true" : void 0,
+				class: ["w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed", he.value],
+				style: ce.value,
+				onInput: be,
+				onChange: xe
+			}), null, 16, m),
+			e.$slots.suffix ? (u(), i("div", {
+				key: 1,
+				ref_key: "suffixEl",
+				ref: R,
+				"data-testid": "number-input-suffix",
+				class: "absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
+				style: c(le.value),
+				"aria-hidden": "true"
+			}, [f(e.$slots, "suffix")], 4)) : r("", !0),
+			A.value ? (u(), i("div", {
+				key: 2,
+				"data-testid": "number-input-controls-vertical",
+				class: "absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)]",
+				style: c(de.value)
+			}, [a("div", ae, [a("button", {
+				type: "button",
+				class: "h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed",
+				disabled: S.disabled,
+				"aria-label": "Increase",
+				onMousedown: t[0] ||= p(() => {}, ["prevent"]),
+				onClick: t[1] ||= (e) => $(1)
+			}, [...t[8] ||= [a("svg", {
+				width: "12",
+				height: "12",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, [a("path", {
+				d: "M7 14l5-5 5 5",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)]], 40, oe), a("button", {
+				type: "button",
+				class: "h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed",
+				disabled: S.disabled,
+				"aria-label": "Decrease",
+				onMousedown: t[2] ||= p(() => {}, ["prevent"]),
+				onClick: t[3] ||= (e) => $(-1)
+			}, [...t[9] ||= [a("svg", {
+				width: "12",
+				height: "12",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, [a("path", {
+				d: "M7 10l5 5 5-5",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)]], 40, h)])], 4)) : r("", !0),
+			k.value ? (u(), i("div", {
+				key: 3,
+				"data-testid": "number-input-controls-horizontal-left",
+				class: "absolute inset-y-0 flex items-stretch justify-center border-r border-[var(--brd)]",
+				style: c(fe.value)
+			}, [a("button", {
+				type: "button",
+				class: "h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+				disabled: S.disabled,
+				"aria-label": "Decrease",
+				onMousedown: t[4] ||= p(() => {}, ["prevent"]),
+				onClick: t[5] ||= (e) => $(-1)
+			}, [...t[10] ||= [a("svg", {
+				width: "12",
+				height: "12",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, [a("path", {
+				d: "M14 7l-5 5 5 5",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)]], 40, g)], 4)) : r("", !0),
+			k.value ? (u(), i("div", {
+				key: 4,
+				"data-testid": "number-input-controls-horizontal-right",
+				class: "absolute inset-y-0 flex items-stretch justify-center border-l border-[var(--brd)]",
+				style: c(pe.value)
+			}, [a("button", {
+				type: "button",
+				class: "h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+				disabled: S.disabled,
+				"aria-label": "Increase",
+				onMousedown: t[6] ||= p(() => {}, ["prevent"]),
+				onClick: t[7] ||= (e) => $(1)
+			}, [...t[11] ||= [a("svg", {
+				width: "12",
+				height: "12",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, [a("path", {
+				d: "M10 7l5 5-5 5",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)]], 40, se)], 4)) : r("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { _ as t };

package/dist/chunks/DsPagination-B28ms0hc.js

@@ -0,0 +1,81 @@
+import { t as e } from "./DsButton-CA18Fha-.js";
+import { t } from "./granularityI18n-DBuOHekC.js";
+import { t as n } from "./DsSelect-DEHGeICn.js";
+import { Fragment as r, computed as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderList as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+//#region src/components/DsPagination/DsPagination.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "flex flex-wrap items-center justify-end gap-3" }, _ = { class: "min-w-[100px]" }, v = { class: "flex items-center gap-1" }, y = ["onClick"], b = /* @__PURE__ */ l({
+	__name: "DsPagination",
+	props: {
+		page: {},
+		pageSize: {},
+		total: {},
+		pageSizes: { default: () => [
+			10,
+			20,
+			50
+		] }
+	},
+	emits: ["update:page", "update:pageSize"],
+	setup(l, { emit: b }) {
+		let { t: x } = t(), S = l, C = b, w = i(() => Math.max(1, Math.ceil(S.total / S.pageSize))), T = i({
+			get: () => S.page,
+			set: (e) => C("update:page", e)
+		}), E = i({
+			get: () => String(S.pageSize),
+			set: (e) => C("update:pageSize", Number(e))
+		}), D = i(() => S.pageSizes.map((e) => ({
+			value: String(e),
+			label: String(e)
+		}))), O = i(() => {
+			let e = w.value, t = S.page, n = Math.max(1, t - 2), r = Math.min(e, n + 5 - 1);
+			n = Math.max(1, r - 5 + 1);
+			let i = [];
+			for (let e = n; e <= r; e += 1) i.push(e);
+			return i;
+		});
+		function k() {
+			C("update:page", Math.max(1, S.page - 1));
+		}
+		function A() {
+			C("update:page", Math.min(w.value, S.page + 1));
+		}
+		return (t, i) => (d(), a("div", g, [
+			o("div", _, [c(n, {
+				modelValue: E.value,
+				"onUpdate:modelValue": i[0] ||= (e) => E.value = e,
+				options: D.value,
+				"aria-label": m(x)("ds.pagination.pageSize", "Page size")
+			}, null, 8, [
+				"modelValue",
+				"options",
+				"aria-label"
+			])]),
+			c(e, {
+				variant: "ghost",
+				size: "sm",
+				disabled: S.page <= 1,
+				onClick: k
+			}, {
+				default: h(() => [s(p(m(x)("ds.pagination.prev", "Prev")), 1)]),
+				_: 1
+			}, 8, ["disabled"]),
+			o("div", v, [(d(!0), a(r, null, f(O.value, (e) => (d(), a("button", {
+				key: e,
+				type: "button",
+				class: u(["h-8 min-w-8 px-2 rounded-md text-sm font-600 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]", e === S.page ? "bg-[var(--primary)] text-[var(--primary-fg)]" : "text-[var(--muted-fg)] hover:bg-[var(--muted)] hover:text-[var(--fg)]"]),
+				onClick: (t) => T.value = e
+			}, p(e), 11, y))), 128))]),
+			c(e, {
+				variant: "ghost",
+				size: "sm",
+				disabled: S.page >= w.value,
+				onClick: A
+			}, {
+				default: h(() => [s(p(m(x)("ds.pagination.next", "Next")), 1)]),
+				_: 1
+			}, 8, ["disabled"])
+		]));
+	}
+});
+//#endregion
+export { b as t };

package/dist/chunks/DsProgressBar-Bkuqudkg.js

@@ -0,0 +1,27 @@
+import { n as e } from "./config-tQBoBLph.js";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s } from "vue";
+//#region src/components/DsProgressBar/DsProgressBar.vue?vue&type=script&setup=true&lang.ts
+var c = ["aria-label", "aria-valuenow"], l = /* @__PURE__ */ i({
+	__name: "DsProgressBar",
+	props: {
+		value: {},
+		ariaLabel: { default: void 0 },
+		tone: { default: "primary" }
+	},
+	setup(i) {
+		let l = i, u = t(() => Number.isNaN(l.value) ? 0 : Math.min(100, Math.max(0, l.value))), d = t(() => e(l.tone));
+		return (e, t) => (s(), n("div", {
+			role: "progressbar",
+			"aria-label": l.ariaLabel,
+			"aria-valuenow": u.value,
+			"aria-valuemin": "0",
+			"aria-valuemax": "100",
+			class: "h-2 w-full rounded-full bg-[var(--muted)] border border-[var(--brd)] overflow-hidden"
+		}, [r("div", {
+			class: a(["h-full", d.value]),
+			style: o({ width: `${u.value}%` })
+		}, null, 6)], 8, c));
+	}
+});
+//#endregion
+export { l as t };