npm - modular-ui-kit-vue - Versions diffs - 1.0.0 - Mend

modular-ui-kit-vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +32 -0
package/dist/index.cjs +1 -0
package/dist/index.mjs +715 -0
package/dist/modular-ui-kit-vue.css +2 -0
package/package.json +64 -0

package/README.md ADDED Viewed

@@ -0,0 +1,32 @@
+# modular-ui-kit
+[![GitHub Clones](https://img.shields.io/badge/dynamic/json?color=success&label=Clone&query=count&url=https://gist.githubusercontent.com/eugenia-vitinschii/2e6247835bbf3928be881ca260cad051/raw/clone.json&logo=github)](https://github.com/MShawon/github-clone-count-badge)
+`modular-ui-kit` is a lightweight library of independent frontend components designed for rapid development and clean code. No heavy backend logic: just pure, flexible, and responsive UI elements ready to be dropped into any web application.
+## Features
+➜ flexible UI Kit: fully typed base components with customizable variants, design tokens, and SASS mixins for quick theme changes.
+➜ auth module ready: pre-built Login, Registration, and Error pages (401, 403, 500) with smooth routing.
+➜ API layer set up: includes a pre-configured Axios instance with Request/Response Interceptors for automatic auth headers and seamless error handling.
+### Install dependencies:
+```sh
+npm install
+```
+### Create a .env file in the project root:
+```sh
+VITE_API_URL=http://localhost:3000/api
+```
+### Run:
+```sh
+npm run dev
+```

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,715 @@
+import { Fragment as e, Teleport as t, Transition as n, TransitionGroup 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, normalizeClass as f, normalizeStyle as p, onMounted as ee, onUnmounted as te, openBlock as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useId as x, withCtx as S, withModifiers as ne } from "vue";
+import { useRoute as re, useRouter as ie } from "vue-router";
+//#region src/components/ui/form/BaseCheckbox.vue?vue&type=script&setup=true&lang.ts
+var ae = { class: "base-checkbox" }, oe = ["for"], C = { class: "base-checkbox__data" }, w = [
+	"id",
+	"checked",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], T = {
+	key: 0,
+	class: "form-label form-label--side"
+}, E = { class: "base-checkbox__info" }, D = ["id"], O = ["id"], k = /* @__PURE__ */ d({
+	__name: "BaseCheckbox",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		label: {},
+		hint: {},
+		error: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = x(), r = t;
+		function i(e) {
+			let t = e.target;
+			r("update:modelValue", t.checked);
+		}
+		return (t, r) => (m(), s("div", ae, [c("label", {
+			class: "base-checkbox__wrapper",
+			for: b(n)
+		}, [c("div", C, [
+			c("input", {
+				type: "checkbox",
+				class: "base-checkbox__field",
+				id: b(n),
+				checked: e.modelValue,
+				disabled: e.disabled,
+				onChange: i,
+				"aria-invalid": !!e.error,
+				"aria-describedby": e.error ? `${b(n)}-error` : e.hint ? `${b(n)}-hint` : void 0
+			}, null, 40, w),
+			c("span", { class: f(["base-checkbox__box", { "is-error": !!e.error }]) }, [...r[0] ||= [c("span", { class: "base-checkbox__check" }, "✓", -1)]], 2),
+			e.label ? (m(), s("span", T, y(e.label), 1)) : o("", !0)
+		])], 8, oe), c("div", E, [e.error ? (m(), s("p", {
+			key: 0,
+			class: "form-error",
+			id: `${b(n)}-error`
+		}, y(e.error), 9, D)) : e.hint ? (m(), s("p", {
+			key: 1,
+			class: "form-hint",
+			id: `${b(n)}-hint`
+		}, y(e.hint), 9, O)) : o("", !0)])]));
+	}
+}), A = { class: "base-input" }, j = ["for"], M = [
+	"id",
+	"type",
+	"placeholder",
+	"disabled",
+	"value",
+	"autocomplete",
+	"aria-invalid",
+	"aria-describedby"
+], N = ["id"], P = ["id"], F = /* @__PURE__ */ d({
+	__name: "BaseInput",
+	props: {
+		modelValue: {},
+		label: {},
+		placeholder: {},
+		hint: {},
+		error: {},
+		disabled: { type: Boolean },
+		type: { default: "text" },
+		autocomplete: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = x(), r = t;
+		function i(e) {
+			let t = e.target;
+			r("update:modelValue", t.type === "number" && t.value !== "" ? Number(t.value) : t.value);
+		}
+		return (t, r) => (m(), s("div", A, [
+			e.label ? (m(), s("label", {
+				key: 0,
+				class: "form-label form-label--top",
+				for: b(n)
+			}, y(e.label), 9, j)) : o("", !0),
+			c("input", {
+				class: f(["base-input__control", { "is-error": !!e.error }]),
+				id: b(n),
+				type: e.type,
+				placeholder: e.placeholder,
+				disabled: e.disabled,
+				value: e.modelValue,
+				autocomplete: e.autocomplete,
+				onInput: i,
+				"aria-invalid": !!e.error,
+				"aria-describedby": e.error ? `${b(n)}-error` : e.hint ? `${b(n)}-hint` : void 0
+			}, null, 42, M),
+			e.error ? (m(), s("p", {
+				key: 1,
+				class: "form-error",
+				id: `${b(n)}-error`
+			}, y(e.error), 9, N)) : e.hint ? (m(), s("p", {
+				key: 2,
+				class: "form-hint",
+				id: `${b(n)}-hint`
+			}, y(e.hint), 9, P)) : o("", !0)
+		]));
+	}
+}), I = { class: "base-radio" }, L = ["for"], R = { class: "base-radio__data" }, z = [
+	"id",
+	"checked",
+	"disabled",
+	"name",
+	"aria-invalid",
+	"aria-describedby"
+], B = {
+	key: 0,
+	class: "form-label form-label--side"
+}, V = { class: "base-radio__info" }, H = ["id"], U = ["id"], W = /* @__PURE__ */ d({
+	__name: "BaseRadio",
+	props: {
+		modelValue: { type: [
+			Boolean,
+			String,
+			Number,
+			null
+		] },
+		value: { type: [
+			Boolean,
+			String,
+			Number
+		] },
+		label: {},
+		name: {},
+		hint: {},
+		error: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = x(), r = e, i = t;
+		function a(e) {
+			i("update:modelValue", r.value);
+		}
+		return (t, r) => (m(), s("div", I, [c("label", {
+			class: "base-radio__wrapper",
+			for: b(n)
+		}, [c("div", R, [
+			c("input", {
+				type: "radio",
+				class: "base-radio__field",
+				id: b(n),
+				checked: e.modelValue === e.value,
+				disabled: e.disabled,
+				name: e.name,
+				onChange: a,
+				"aria-invalid": !!e.error,
+				"aria-describedby": e.error ? `${b(n)}-error` : e.hint ? `${b(n)}-hint` : void 0
+			}, null, 40, z),
+			c("span", { class: f(["base-radio__box", { "is-error": !!e.error }]) }, [...r[0] ||= [c("span", {
+				class: "base-radio__circle",
+				"aria-hidden": "true"
+			}, null, -1)]], 2),
+			e.label ? (m(), s("span", B, y(e.label), 1)) : o("", !0)
+		])], 8, L), c("div", V, [e.error ? (m(), s("p", {
+			key: 0,
+			class: "form-error",
+			id: `${b(n)}-error`
+		}, y(e.error), 9, H)) : e.hint ? (m(), s("p", {
+			key: 1,
+			class: "form-hint",
+			id: `${b(n)}-hint`
+		}, y(e.hint), 9, U)) : o("", !0)])]));
+	}
+}), G = { class: "base-select" }, K = ["for"], q = { class: "base-select__wrapper" }, se = [
+	"id",
+	"value",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], ce = {
+	key: 0,
+	value: "",
+	disabled: ""
+}, le = ["value"], ue = ["id"], de = ["id"], fe = /* @__PURE__ */ d({
+	__name: "BaseSelect",
+	props: {
+		modelValue: { default: "" },
+		label: {},
+		placeholder: {},
+		options: {},
+		error: {},
+		hint: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let r = x(), i = n;
+		function a(e) {
+			let t = e.target;
+			i("update:modelValue", t.value);
+		}
+		return (n, i) => (m(), s("div", G, [
+			t.label ? (m(), s("label", {
+				key: 0,
+				class: "form-label form-label--top",
+				for: b(r)
+			}, y(t.label), 9, K)) : o("", !0),
+			c("div", q, [c("select", {
+				class: f(["base-select__field", { "is-error": !!t.error }]),
+				id: b(r),
+				value: t.modelValue,
+				disabled: t.disabled,
+				onChange: a,
+				"aria-invalid": !!t.error,
+				"aria-describedby": t.error ? `${b(r)}-error` : t.hint ? `${b(r)}-hint` : void 0
+			}, [t.placeholder ? (m(), s("option", ce, y(t.placeholder), 1)) : o("", !0), (m(!0), s(e, null, g(t.options, (e) => (m(), s("option", {
+				key: e.value,
+				value: e.value
+			}, y(e.label), 9, le))), 128))], 42, se), i[0] ||= c("span", {
+				class: "base-select__icon",
+				"feat(ui):": "",
+				add: "",
+				a11y: "",
+				to: "",
+				form: "",
+				"elements,": "",
+				"buttons,": "",
+				and: "",
+				links: ""
+			}, "↓", -1)]),
+			t.error ? (m(), s("p", {
+				key: 1,
+				class: "form-error",
+				id: `${b(r)}-error`
+			}, y(t.error), 9, ue)) : t.hint ? (m(), s("p", {
+				key: 2,
+				class: "form-hint",
+				id: `${b(r)}-hint`
+			}, y(t.hint), 9, de)) : o("", !0)
+		]));
+	}
+}), pe = { class: "base-textarea" }, me = ["for"], he = [
+	"id",
+	"placeholder",
+	"value",
+	"rows",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], ge = ["id"], _e = ["id"], ve = /* @__PURE__ */ d({
+	__name: "BaseTextarea",
+	props: {
+		modelValue: { default: "" },
+		label: {},
+		placeholder: {},
+		error: {},
+		hint: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		rows: { default: 6 }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = x(), r = t;
+		function i(e) {
+			let t = e.target;
+			r("update:modelValue", t.value);
+		}
+		return (t, r) => (m(), s("div", pe, [
+			e.label ? (m(), s("label", {
+				key: 0,
+				class: "form-label form-label--top",
+				for: b(n)
+			}, y(e.label), 9, me)) : o("", !0),
+			c("textarea", {
+				class: f(["base-textarea__field", { "is-error": !!e.error }]),
+				id: b(n),
+				placeholder: e.placeholder,
+				value: e.modelValue,
+				rows: e.rows,
+				disabled: e.disabled,
+				onInput: i,
+				"aria-invalid": !!e.error,
+				"aria-describedby": e.error ? `${b(n)}-error` : e.hint ? `${b(n)}-hint` : void 0
+			}, "      ", 42, he),
+			e.error ? (m(), s("p", {
+				key: 1,
+				class: "form-error",
+				id: `${b(n)}-error`
+			}, y(e.error), 9, ge)) : e.hint ? (m(), s("p", {
+				key: 2,
+				class: "form-hint",
+				id: `${b(n)}-hint`
+			}, y(e.hint), 9, _e)) : o("", !0)
+		]));
+	}
+}), ye = [
+	"disabled",
+	"type",
+	"aria-busy"
+], be = {
+	key: 0,
+	class: "btn__content"
+}, xe = /* @__PURE__ */ d({
+	__name: "BaseButton",
+	props: {
+		variant: { default: "primary" },
+		size: { default: "lg" },
+		type: { default: "button" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(t) {
+		return (n, r) => (m(), s("button", {
+			class: f(["btn", [
+				`btn--${t.variant}`,
+				`btn--${t.size}`,
+				{ "is-loading": t.loading }
+			]]),
+			disabled: t.disabled,
+			type: t.type,
+			"aria-busy": t.loading
+		}, [t.loading ? (m(), s(e, { key: 1 }, [r[0] ||= c("span", {
+			class: "btn-spinner",
+			"aria-hidden": "true"
+		}, null, -1), r[1] ||= c("span", { class: "visually-hidden" }, "Loading", -1)], 64)) : (m(), s("span", be, [_(n.$slots, "default")]))], 10, ye));
+	}
+}), Se = [
+	"disabled",
+	"type",
+	"aria-busy",
+	"aria-label"
+], Ce = {
+	key: 0,
+	class: "btn-icon__content",
+	"aria-hidden": "true"
+}, J = /* @__PURE__ */ d({
+	__name: "BaseIconButton",
+	props: {
+		ariaLabel: {},
+		variant: { default: "primary" },
+		type: { default: "button" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "lg" }
+	},
+	setup(t) {
+		return (n, r) => (m(), s("button", {
+			class: f(["btn-icon", [
+				`btn-icon--${t.variant}`,
+				`btn-icon--${t.size}`,
+				{ "is-loading": t.loading }
+			]]),
+			disabled: t.disabled,
+			type: t.type,
+			"aria-busy": t.loading,
+			"aria-label": t.ariaLabel ? String(t.ariaLabel) : void 0
+		}, [t.loading ? (m(), s(e, { key: 1 }, [r[0] ||= c("span", {
+			class: "btn-spinner",
+			"aria-hidden": "true"
+		}, null, -1), r[1] ||= c("span", { class: "visually-hidden" }, "Loading", -1)], 64)) : (m(), s("span", Ce, [_(n.$slots, "default")]))], 10, Se));
+	}
+}), we = /* @__PURE__ */ d({
+	__name: "BaseSkeleton",
+	props: {
+		type: { default: "text" },
+		width: {},
+		height: {},
+		shimmer: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let t = e, n = i(() => {
+			let e = {};
+			if (t.width !== void 0 && t.width !== "") {
+				let n = typeof t.width == "number" ? `${t.width}px` : t.width;
+				e.width = n, t.type === "circle" && !t.height && (e.height = n);
+			}
+			if (t.height !== void 0 && t.height !== "") {
+				let n = typeof t.height == "number" ? `${t.height}px` : t.height;
+				e.height = n, t.type === "circle" && !t.width && (e.height = n);
+			}
+			return e;
+		});
+		return (t, r) => (m(), s("div", {
+			class: f(["base-skeleton", [`base-skeleton__${e.type}`, { shimmer: e.shimmer }]]),
+			style: p(n.value)
+		}, null, 6));
+	}
+}), Y = /* @__PURE__ */ d({
+	__name: "BaseText",
+	props: {
+		variant: { default: "secondary" },
+		as: { default: "p" },
+		type: { default: "body-text" },
+		align: { default: "left" }
+	},
+	setup(e) {
+		return (t, n) => (m(), a(v(e.as), { class: f([
+			e.type,
+			`txt--${e.align}`,
+			`txt--${e.variant}`
+		]) }, {
+			default: S(() => [_(t.$slots, "default")]),
+			_: 3
+		}, 8, ["class"]));
+	}
+}), X = h([]);
+function Z() {
+	return {
+		toasts: X,
+		addToast: (e, t = "secondary", n = 3e3) => {
+			let r = Date.now().toString() + Math.random().toString().slice(2, 6);
+			X.value.push({
+				id: r,
+				message: e,
+				variant: t,
+				duration: n
+			});
+		},
+		removeToast: (e) => {
+			X.value = X.value.filter((t) => t.id !== e);
+		}
+	};
+}
+//#endregion
+//#region src/components/ui/feedback/BaseToast.vue?vue&type=script&setup=true&lang.ts
+var Te = { class: "base-toast__wrapper" }, Ee = { class: "base-toast__message" }, Q = /* @__PURE__ */ d({
+	__name: "BaseToast",
+	props: { toast: {} },
+	setup(e) {
+		let t = e, { removeToast: n } = Z(), r = h(100), i = null, a = t.toast.duration, o = Date.now();
+		function d() {
+			n(t.toast.id);
+		}
+		function g() {
+			let e = Date.now() - o;
+			r.value = 100 - e / t.toast.duration * 100, e >= a && d();
+		}
+		function _() {
+			i && clearInterval(i), a -= Date.now() - o;
+		}
+		function v() {
+			o = Date.now(), i = window.setInterval(g, 16);
+		}
+		return ee(() => {
+			i = window.setInterval(g, 16);
+		}), te(() => {
+			i && clearInterval(i);
+		}), (t, n) => (m(), s("div", {
+			class: f(["base-toast", `base-toast--${e.toast.variant}`]),
+			onMouseenter: _,
+			onMouseleave: v
+		}, [c("div", Te, [c("div", Ee, [u(Y, {
+			type: "body-text",
+			variant: e.toast.variant
+		}, {
+			default: S(() => [l(y(e.toast.message), 1)]),
+			_: 1
+		}, 8, ["variant"])]), u(J, {
+			onClick: d,
+			variant: e.toast.variant,
+			"aria-label": "close toast"
+		}, {
+			default: S(() => [...n[0] ||= [c("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 -960 960 960"
+			}, [c("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })], -1)]]),
+			_: 1
+		}, 8, ["variant"])]), c("div", {
+			class: "base-toast__progress",
+			style: p({ width: r.value + "%" })
+		}, null, 4)], 34));
+	}
+}), De = { class: "base-toast-container" }, Oe = /* @__PURE__ */ d({
+	__name: "BaseToastContainer",
+	setup(t) {
+		let { toasts: n } = Z();
+		return (t, i) => (m(), s("div", De, [u(r, { name: "toast" }, {
+			default: S(() => [(m(!0), s(e, null, g(b(n), (e) => (m(), a(Q, {
+				key: e.id,
+				toast: e
+			}, null, 8, ["toast"]))), 128))]),
+			_: 1
+		})]));
+	}
+}), ke = { class: "empty-state__text" }, Ae = { class: "empty-state__actions" }, je = /* @__PURE__ */ d({
+	__name: "EmptyState",
+	props: {
+		title: { default: "No data available" },
+		description: { default: "There is nothing to display here at the moment. Please try refreshing the page" },
+		variant: { default: "secondary" }
+	},
+	setup(e) {
+		return (t, n) => (m(), s("div", { class: f(["empty-state", `empty-state--${e.variant}`]) }, [c("div", ke, [u(Y, {
+			type: "subheading",
+			as: "h3"
+		}, {
+			default: S(() => [l(y(e.title), 1)]),
+			_: 1
+		}), u(Y, { type: "body-text" }, {
+			default: S(() => [l(y(e.description), 1)]),
+			_: 1
+		})]), c("div", Ae, [_(t.$slots, "action")])], 2));
+	}
+}), Me = { class: "error-state" }, Ne = { class: "error-state__text" }, Pe = { class: "error-state__action" }, $ = /* @__PURE__ */ d({
+	__name: "ErrorState",
+	props: {
+		title: { default: "Oops! Something went wrong" },
+		description: { default: "Failed to fetch data. Please try again." }
+	},
+	setup(e) {
+		return (t, n) => (m(), s("div", Me, [c("div", Ne, [u(Y, {
+			type: "subheading",
+			as: "h3",
+			align: "center",
+			variant: "danger"
+		}, {
+			default: S(() => [l(y(e.title), 1)]),
+			_: 1
+		}), u(Y, {
+			type: "body-text",
+			align: "center"
+		}, {
+			default: S(() => [l(y(e.description), 1)]),
+			_: 1
+		})]), c("div", Pe, [_(t.$slots, "action")])]));
+	}
+}), Fe = { class: "container" }, Ie = {
+	key: 0,
+	class: "base-breadcrumbs"
+}, Le = { class: "base-breadcrumbs__list" }, Re = /* @__PURE__ */ d({
+	__name: "BaseBreadcrumbs",
+	setup(t) {
+		let n = re(), r = ie(), d = i(() => {
+			let e = n.matched.filter((e) => e.meta && e.meta.title).map((e) => {
+				let t = typeof e.meta.title == "function" ? e.meta.title(n) : e.meta.title, r = e.path;
+				return Object.keys(n.params).forEach((e) => {
+					r = r.replace(`:${e}`, n.params[e]);
+				}), {
+					label: t,
+					to: r
+				};
+			});
+			return n.path !== "/" && e.unshift({
+				label: "Home",
+				to: "/"
+			}), e;
+		});
+		return (t, i) => (m(), s("div", Fe, [b(n).path === "/" ? o("", !0) : (m(), s("nav", Ie, [c("ul", Le, [u(J, {
+			onClick: i[0] ||= (e) => b(r).back(),
+			"aria-label": "Go back"
+		}, {
+			default: S(() => [...i[1] ||= [c("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 -960 960 960"
+			}, [c("path", { d: "M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" })], -1)]]),
+			_: 1
+		}), (m(!0), s(e, null, g(d.value, (t, n) => (m(), s("li", {
+			class: "base-breadcrumbs__item",
+			key: n
+		}, [n === d.value.length - 1 ? (m(), a(Y, {
+			key: 0,
+			as: "span"
+		}, {
+			default: S(() => [l(y(t.label), 1)]),
+			_: 2
+		}, 1024)) : (m(), s(e, { key: 1 }, [u(Y, {
+			as: "router-link",
+			to: t.to,
+			align: "center"
+		}, {
+			default: S(() => [l(y(t.label), 1)]),
+			_: 2
+		}, 1032, ["to"]), u(Y, {
+			as: "span",
+			class: "base-breadcrumbs__item-separator"
+		}, {
+			default: S(() => [...i[2] ||= [l("/", -1)]]),
+			_: 1
+		})], 64))]))), 128))])]))]));
+	}
+}), ze = { class: "base-pagination" }, Be = { class: "base-pagination__desktop" }, Ve = { class: "base-pagination__mobile" }, He = /* @__PURE__ */ d({
+	__name: "BasePagination",
+	props: {
+		page: {},
+		totalPages: {}
+	},
+	emits: ["change"],
+	setup(t, { emit: n }) {
+		let r = t, o = i(() => {
+			let e = r.totalPages, t = r.page, n = Math.floor((t - 1) / 5) * 5 + 1, i = Math.min(e, n + 5 - 1), a = [];
+			n > 1 && (a.push(1), n > 2 && a.push("..."));
+			for (let e = n; e <= i; e++) a.push(e);
+			return i < e && (i < e - 1 && a.push("..."), a.push(e)), a;
+		});
+		return (n, r) => (m(), s("div", ze, [
+			u(J, {
+				disabled: t.page === 1,
+				onClick: r[0] ||= (e) => n.$emit("change", t.page - 1),
+				"aria-label": "Previous page"
+			}, {
+				default: S(() => [...r[2] ||= [c("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 -960 960 960"
+				}, [c("path", { d: "M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" })], -1)]]),
+				_: 1
+			}, 8, ["disabled"]),
+			c("div", Be, [(m(!0), s(e, null, g(o.value, (e) => (m(), a(J, {
+				key: e + "",
+				disabled: e === "...",
+				class: f({ "is-active": e === t.page }),
+				onClick: (t) => typeof e == "number" && n.$emit("change", e),
+				"aria-label": e
+			}, {
+				default: S(() => [u(Y, null, {
+					default: S(() => [l(y(e), 1)]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1032, [
+				"disabled",
+				"class",
+				"onClick",
+				"aria-label"
+			]))), 128))]),
+			c("div", Ve, [u(Y, null, {
+				default: S(() => [l(y(t.page) + " / " + y(t.totalPages), 1)]),
+				_: 1
+			})]),
+			u(J, {
+				disabled: t.page === t.totalPages,
+				onClick: r[1] ||= (e) => n.$emit("change", t.page + 1),
+				"aria-label": "Next page"
+			}, {
+				default: S(() => [...r[3] ||= [c("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 -960 960 960"
+				}, [c("path", { d: "m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" })], -1)]]),
+				_: 1
+			}, 8, ["disabled"])
+		]));
+	}
+}), Ue = {
+	key: 0,
+	class: "base-modal__header"
+}, We = { class: "base-modal__content" }, Ge = { class: "base-modal__footer" }, Ke = /* @__PURE__ */ d({
+	__name: "BaseModal",
+	props: {
+		open: { type: Boolean },
+		title: {},
+		variant: { default: "secondary" }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: r }) {
+		let i = r, d = () => {
+			i("update:open", !1);
+		};
+		return (r, i) => (m(), a(t, { to: "body" }, [u(n, { name: "modal-fade" }, {
+			default: S(() => [e.open ? (m(), s("div", {
+				key: 0,
+				class: "base-modal-backdrop",
+				onClick: d
+			}, [c("div", {
+				class: f(["base-modal", `base-modal--${e.variant}`]),
+				onClick: i[0] ||= ne(() => {}, ["stop"])
+			}, [
+				e.title ? (m(), s("div", Ue, [u(Y, {
+					type: "subheading",
+					variant: e.variant
+				}, {
+					default: S(() => [l(y(e.title), 1)]),
+					_: 1
+				}, 8, ["variant"])])) : o("", !0),
+				c("div", We, [_(r.$slots, "content")]),
+				c("div", Ge, [_(r.$slots, "actions")])
+			], 2)])) : o("", !0)]),
+			_: 3
+		})]));
+	}
+});
+//#endregion
+export { Re as BaseBreadcrumbs, xe as BaseButton, k as BaseCheckbox, J as BaseIconButton, F as BaseInput, Ke as BaseModal, He as BasePagination, W as BaseRadio, fe as BaseSelect, we as BaseSkeleton, Y as BaseText, ve as BaseTextarea, Q as BaseToast, Oe as BaseToastContainer, je as EmptyState, $ as ErrorState, Z as useToast };

package/dist/modular-ui-kit-vue.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--ui-text:#eceef2;--ui-text-muted:#8a93a6;--ui-bg:#0b0d11;--ui-bg-soft:#12151c;--ui-bg-card:#171b24;--ui-bg-code:#1e2330;--ui-primary:#6366f1;--ui-primary-hover:#4f46e5;--ui-danger:#ff4a6b;--ui-success:#10b981;--ui-warning:#f59e0b;--ui-font-heading:26px;--ui-font-subheading:19px;--ui-font-body:16px;--ui-font-heading-md:24px;--ui-font-subheading-md:18px;--ui-font-body-md:15px;--ui-font-heading-sm:20px;--ui-font-subheading-sm:16px;--ui-font-body-sm:14px;--ui-border-color:#eceef214;--ui-border-width:1px;--ui-border-style:solid;--ui-border-radius:0px;--ui-space-content-sm:6px;--ui-space-content-md:10px;--ui-space-content-lg:14px;--ui-space-container-sm:16px;--ui-space-container-md:24px;--ui-space-container-lg:32px;--ui-transition:all .3s ease-out;--ui-opacity:.4}*,:before,:after{box-sizing:border-box}:focus,:active,a:focus,a:active{outline:none}nav,footer,aside{display:block}html,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background:#232222;height:100%;margin:0;padding:0;font-family:Inter,sans-serif;font-size:100%;line-height:1.5}input,textarea,button,select{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer;background:0 0;border:none}button::-moz-focus-inner{border:0;padding:0}a,a:visited{cursor:pointer;text-decoration:none}button,a:hover{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:400}ul{padding-inline-start:0}ul li{margin:0;list-style:none}img{max-width:100%;display:block}.heading{font-size:26px;font-weight:600;line-height:34px}.subheading{font-size:19px;font-weight:500;line-height:28px}.body-text{font-size:16px;font-weight:400;line-height:24px}@media (width<=1024px){.heading{font-size:24px;line-height:30px}.subheading{font-size:18px;line-height:24px}.body-text{font-size:15px;line-height:22px}}@media (width<=767px){.heading{font-size:20px;line-height:26px}.subheading{font-size:16px;line-height:22px}.body-text{font-size:14px;line-height:20px}}a{text-underline-offset:4px;transition:all .3s ease-out;display:block}a:hover{opacity:.8}a:active{opacity:.6;filter:brightness(.9)}.shimmer{position:relative;overflow:hidden}.shimmer:before{content:"";background:linear-gradient(90deg,#0000 0%,#8a93a6 50%,#0000 100%);width:150px;height:100%;animation:2.6s infinite loading;position:absolute;top:0;left:-150px}@keyframes loading{0%{left:-150px}to{left:100%}}.fade-enter-active,.fade-leave-active{transition:opacity .25s}.fade-enter-from,.fade-leave-to{opacity:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-weight:500;line-height:1.2;transition:all .3s ease-out;display:inline-flex}.btn--sm{--spinner-size:14px;height:38px;padding:3px 14px;font-size:14px}.btn--md{--spinner-size:18px;height:44px;padding:3px 16px;font-size:15px}.btn--lg{--spinner-size:22px;height:50px;padding:3px 18px;font-size:16px}.btn--primary{color:#eceef2;--spinner-color:#6366f1;background:#171b24;border:1px solid #6366f1;border-radius:10px}.btn--primary:hover:not(:disabled):not(.is-loading){background:#6366f1}.btn--primary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--primary:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--primary.is-loading{cursor:wait}.btn--secondary{color:#eceef2;--spinner-color:#8a93a6;background:#171b24;border:1px solid #8a93a6;border-radius:10px}.btn--secondary:hover:not(:disabled):not(.is-loading){background:#8a93a6}.btn--secondary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--secondary:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--secondary.is-loading{cursor:wait}.btn--success{color:#eceef2;--spinner-color:#10b981;background:#171b24;border:1px solid #10b981;border-radius:10px}.btn--success:hover:not(:disabled):not(.is-loading){background:#10b981}.btn--success:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--success:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--success.is-loading{cursor:wait}.btn--warning{color:#eceef2;--spinner-color:#f59e0b;background:#171b24;border:1px solid #f59e0b;border-radius:10px}.btn--warning:hover:not(:disabled):not(.is-loading){background:#f59e0b}.btn--warning:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--warning:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--warning.is-loading{cursor:wait}.btn--danger{color:#eceef2;--spinner-color:#ff4a6b;background:#171b24;border:1px solid #ff4a6b;border-radius:10px}.btn--danger:hover:not(:disabled):not(.is-loading){background:#ff4a6b}.btn--danger:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--danger:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--danger.is-loading{cursor:wait}.btn--ghost{color:#8a93a6;--spinner-color:#0b0d11;background:#171b24;border:1px solid #0b0d11;border-radius:10px}.btn--ghost:hover:not(:disabled):not(.is-loading){filter:brightness(1.1)}.btn--ghost:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--ghost:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--ghost.is-loading{cursor:wait}.btn-spinner{width:var(--spinner-size,18px);height:var(--spinner-size,18px);border:2px solid var(--spinner-color,currentColor);border-right-color:#0000;border-radius:50%;flex-shrink:0;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-icon{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:all .3s ease-out;display:inline-flex}.btn-icon svg{transition:all .3s ease-out}.btn-icon--sm{width:32px;min-width:32px;height:32px;min-height:32px}.btn-icon--sm svg{width:18px;height:18px}.btn-icon--sm{--spinner-size:14px}.btn-icon--md{width:40px;min-width:40px;height:40px;min-height:40px}.btn-icon--md svg{width:22px;height:22px}.btn-icon--md{--spinner-size:18px}.btn-icon--lg{width:48px;min-width:48px;height:48px;min-height:48px}.btn-icon--lg svg{width:26px;height:26px}.btn-icon--lg{--spinner-size:22px}.btn-icon--primary{color:#6366f1;background:0 0}.btn-icon--primary svg{fill:currentColor}.btn-icon--primary:hover:not(:disabled):not(.is-loading){color:#4f46e5}.btn-icon--primary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--primary.is-loading{cursor:wait}.btn-icon--secondary{color:#eceef2;background:0 0}.btn-icon--secondary svg{fill:currentColor}.btn-icon--secondary:hover:not(:disabled):not(.is-loading){color:#4f46e5}.btn-icon--secondary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--secondary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--secondary.is-loading{cursor:wait}.btn-icon--success{color:#10b981;background:0 0}.btn-icon--success svg{fill:currentColor}.btn-icon--success:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--success:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--success:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--success.is-loading{cursor:wait}.btn-icon--warning{color:#f59e0b;background:0 0}.btn-icon--warning svg{fill:currentColor}.btn-icon--warning:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--warning:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--warning:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--warning.is-loading{cursor:wait}.btn-icon--danger{color:#ff4a6b;background:0 0}.btn-icon--danger svg{fill:currentColor}.btn-icon--danger:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--danger:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--danger:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--danger.is-loading{cursor:wait}.btn-icon--ghost{color:#8a93a6;background:0 0}.btn-icon--ghost svg{fill:currentColor}.btn-icon--ghost:hover:not(:disabled):not(.is-loading){color:#eceef2}.btn-icon--ghost:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--ghost:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--ghost.is-loading{cursor:wait}.form-error{color:#ff4a6b;font-size:13px}.form-hint,.form-label{color:#8a93a6;font-size:13px}.form-label--top{margin:0 0 10px}.form-label--side{margin:10px}.form__item{background:#171b24;width:100%;margin:14px 0;padding:14px;transition:all .3s ease-out}@media (width<=1024px){.form__item{margin:10px 0;padding:10px}}@media (width<=768px){.form__item{margin:6px 0;padding:6px}}.form__actions{background:#171b24;width:100%;margin:14px 0;padding:14px;transition:all .3s ease-out}@media (width<=1024px){.form__actions{margin:10px 0;padding:10px}}@media (width<=768px){.form__actions{margin:6px 0;padding:6px}}.form__actions{flex-direction:row;justify-content:start;align-items:center;gap:10px;display:flex}.base-input{flex-direction:column;display:flex}.base-input__control{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-input__control:focus,.base-input__control:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-input__control:disabled{opacity:.4;cursor:not-allowed}.base-input__control.is-error{border-color:#ff4a6b}.base-input__control.is-error:focus,.base-input__control.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(98%)sepia(1%)saturate(678%)hue-rotate(181deg)brightness(98%)contrast(94%)}.base-select{flex-direction:column;display:flex}.base-select__wrapper{position:relative}.base-select__field{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-select__field:focus,.base-select__field:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-select__field:disabled{opacity:.4;cursor:not-allowed}.base-select__field.is-error{border-color:#ff4a6b}.base-select__field.is-error:focus,.base-select__field.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-select__field{appearance:none;cursor:pointer;border-radius:0;width:100%}.base-select__icon{pointer-events:none;color:#8a93a6;font-size:14px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.base-textarea{flex-direction:column;display:flex}.base-textarea__field{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-textarea__field:focus,.base-textarea__field:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-textarea__field:disabled{opacity:.4;cursor:not-allowed}.base-textarea__field.is-error{border-color:#ff4a6b}.base-textarea__field.is-error:focus,.base-textarea__field.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-textarea__field{resize:vertical;min-height:120px}.base-textarea__field::placeholder{color:#8a93a6}.base-checkbox{position:relative}.base-checkbox__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.base-checkbox__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex}.base-checkbox__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.base-checkbox__field:focus-visible+.base-checkbox__box{border-color:#4f46e5}.base-checkbox__field:checked+.base-checkbox__box{border-color:#6366f1}.base-checkbox__field:checked+.base-checkbox__box .base-checkbox__check{transform:scale(1)}.base-checkbox__field:disabled+.base-checkbox__box{opacity:.4;cursor:not-allowed}.base-checkbox__box{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-checkbox__box:focus,.base-checkbox__box:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-checkbox__box:disabled{opacity:.4;cursor:not-allowed}.base-checkbox__box.is-error{border-color:#ff4a6b}.base-checkbox__box.is-error:focus,.base-checkbox__box.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-checkbox__box{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:4px;display:flex}.base-checkbox__check{color:#eceef2;border-radius:50%;transition:all .3s ease-out;transform:scale(0)}.base-radio{position:relative}.base-radio__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.base-radio__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex;position:relative}.base-radio__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.base-radio__field:checked+.base-radio__box{border-color:#6366f1}.base-radio__field:checked+.base-radio__box .base-radio__circle{background:#eceef2;transform:scale(1)}.base-radio__field:disabled+.base-radio__box{opacity:.4;cursor:not-allowed}.base-radio__box{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-radio__box:focus,.base-radio__box:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-radio__box:disabled{opacity:.4;cursor:not-allowed}.base-radio__box.is-error{border-color:#ff4a6b}.base-radio__box.is-error:focus,.base-radio__box.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-radio__box{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:5px;display:flex}.base-radio__circle{background:0 0;border-radius:50%;flex-shrink:0;width:10px;height:10px;transition:all .3s ease-out;display:block;transform:scale(0)}.base-breadcrumbs{white-space:nowrap;max-width:100%;overflow:auto scroll}.base-breadcrumbs__list{align-items:center;list-style:none;display:flex}.base-breadcrumbs__item{align-items:center;display:flex}.base-breadcrumbs__item a,.base-breadcrumbs__item span{margin-top:0;padding-top:0}.base-breadcrumbs__item a:hover{color:#4f46e5}.base-breadcrumbs__item-separator{margin:0 8px}.base-pagination{justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.base-pagination p{padding-top:0;transition:all .3s ease-out;cursor:pointer!important}.base-pagination p:hover{color:#4f46e5}.base-pagination .btn-icon.is-active p{font-weight:700;color:#6366f1!important}.base-pagination__desktop{align-items:center;gap:5px;display:flex}@media (width<=640px){.base-pagination__desktop{display:none}}.base-pagination__mobile{display:none}@media (width<=640px){.base-pagination__mobile{align-items:center;display:flex}}.empty-state{border:1px solid #0b0d11;border-radius:0;padding:10px}.empty-state__text p,.empty-state__text h3{text-align:center}.empty-state__actions{justify-content:center;display:flex}.empty-state--secondary{border-color:#eceef2}.empty-state--primary{border-color:#6366f1}.empty-state--primary p,.empty-state--primary h3,.empty-state--primary a{color:#6366f1}.error-state{border:1px dotted #ff4a6b;border-radius:0;padding:10px}.error-state__action{justify-content:center;display:flex}.base-skeleton{opacity:.4;background:#0b0d11;border-radius:0}.base-skeleton__circle{border-radius:50%;width:50px;height:50px}.base-skeleton__text{width:100%;height:20px}.base-skeleton__rect{width:100%;height:100px}.base-toast-container{z-index:99999;pointer-events:none;position:fixed;top:20px;right:20px}.base-toast{pointer-events:auto;background:#0b0d11;border:1px solid #0b0d11;border-radius:0;width:300px;margin-top:5px;padding:10px;animation:.25s fadeIn;position:relative;overflow:hidden}.base-toast__wrapper{flex-direction:row;justify-content:space-between;align-items:center;display:flex}.base-toast__wrapper p{margin:0;padding:0}.base-toast__progress{pointer-events:none;background:#ffffffb3;height:4px;transition:width .1s linear;position:absolute;bottom:0;left:0}.base-toast--primary{border-color:#6366f1}.base-toast--secondary{border-color:#eceef2}.base-toast--success{border-color:#10b981}.base-toast--warning{border-color:#f59e0b}.base-toast--danger{border-color:#ff4a6b}.toast-enter-active,.toast-leave-active{transition:all .25s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(30px)}.base-modal-backdrop{z-index:10000;pointer-events:auto;background:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.base-modal{background:#171b24;border:1px solid #0b0d11;border-radius:0;width:100%;max-width:450px;padding:24px}.base-modal__header{margin-bottom:16px}.base-modal__content{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.base-modal__footer{justify-content:flex-end;gap:12px;display:flex}@media (width<=500px){.base-modal{max-width:100%}}.modal-fade-enter-active,.modal-fade-leave-active{transition:opacity .25s}.modal-fade-enter-active .base-modal,.modal-fade-leave-active .base-modal{transition:transform .25s}.modal-fade-enter-from,.modal-fade-leave-to{opacity:0}.modal-fade-enter-from .base-modal,.modal-fade-leave-to .base-modal{transform:translateY(-20px)}.base-modal--primary{border-color:#6366f1}.base-modal--secondary{border-color:#eceef2}.base-modal--success{border-color:#10b981}.base-modal--warning{border-color:#f59e0b}.base-modal--danger{border-color:#ff4a6b}.txt--primary{color:#6366f1}.txt--danger{color:#ff4a6b}.txt--warning{color:#f59e0b}.txt--success{color:#10b981}.txt--secondary{color:#eceef2}.txt--muted{color:#8a93a6}.txt--left{text-align:left}.txt--center{text-align:center}.txt--right{text-align:right}
2	+ /$vite$:1/

package/package.json ADDED Viewed

@@ -0,0 +1,64 @@
+{
+  "name": "modular-ui-kit-vue",
+  "version": "1.0.0",
+  "author": "vitinschii.eugenia@gmail.com",
+  "description": "A modular, lightweight UI kit built with Vue 3, Pinia, and TypeScript.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/style.css": "./dist/modular-ui-kit.css",
+    "./dist/modular-ui-kit.css": "./dist/modular-ui-kit.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s \"lint:*\"",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "peerDependencies": {
+    "pinia": "^3.0.4",
+    "vue": "^3.5.38",
+    "vue-router": "^4.6.4"
+  },
+  "dependencies": {
+    "axios": "^1.18.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.13.2",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/eslint-config-typescript": "^14.8.0",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.5.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.69.0",
+    "eslint-plugin-vue": "~10.9.2",
+    "jiti": "^2.7.0",
+    "npm-run-all2": "^9.0.2",
+    "oxlint": "~1.69.0",
+    "prettier": "3.8.4",
+    "sass": "^1.101.0",
+    "typescript": "~6.0.0",
+    "vite": "^8.0.16",
+    "vite-plugin-vue-devtools": "^8.1.2",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^3.3.5"
+  },
+  "engines": {
+    "node": "^22.18.0 || >=24.12.0"
+  }
+}