@m3ui-vue/m3ui-vue 0.1.0 → 0.1.2

package/dist/code-editor.js

@@ -0,0 +1,379 @@
+import { t as e } from "./MIcon-CaEooCmZ.js";
+import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, watch as _, withCtx as v } from "vue";
+//#region src/components/MCodeEditor.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "overflow-hidden rounded-lg border border-outline-variant" }, b = { class: "flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-2" }, x = { class: "text-label-medium text-on-surface-variant" }, S = { class: "flex items-center gap-2" }, C = ["title"], w = {
+	key: 0,
+	class: "text-primary"
+}, T = /*#__PURE__*/ t(/* @__PURE__ */ c({
+	__name: "MCodeEditor",
+	props: {
+		modelValue: {},
+		language: { default: "javascript" },
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		lineNumbers: {
+			type: Boolean,
+			default: !0
+		},
+		theme: { default: "light" },
+		minHeight: { default: "200px" },
+		maxHeight: { default: "600px" },
+		placeholder: {},
+		wrap: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: o }) {
+		let c = t, v = o, T = m(null), E = null, D = null, O = m(!1);
+		async function k() {
+			await navigator.clipboard.writeText(c.modelValue), O.value = !0, setTimeout(() => {
+				O.value = !1;
+			}, 1500);
+		}
+		let A = n(() => ({
+			javascript: "JavaScript",
+			typescript: "TypeScript",
+			json: "JSON",
+			html: "HTML",
+			css: "CSS",
+			python: "Python",
+			vue: "Vue",
+			plain: "Texto"
+		})[c.language]);
+		async function j() {
+			if (D) return D;
+			let [e, t, n, r, i, a, o, s, c, l, u, d] = await Promise.all([
+				import("@codemirror/view"),
+				import("@codemirror/state"),
+				import("@codemirror/commands"),
+				import("@codemirror/language"),
+				import("./dist-Dsrzt6J5.js"),
+				import("@codemirror/theme-one-dark"),
+				import("@codemirror/lang-javascript"),
+				import("@codemirror/lang-json"),
+				import("@codemirror/lang-html"),
+				import("@codemirror/lang-css"),
+				import("@codemirror/lang-python"),
+				import("@codemirror/lang-vue")
+			]);
+			return D = {
+				viewMod: e,
+				stateMod: t,
+				commandsMod: n,
+				languageMod: r,
+				highlightMod: i,
+				oneDarkMod: a,
+				jsMod: o,
+				jsonMod: s,
+				htmlMod: c,
+				cssMod: l,
+				pyMod: u,
+				vueMod: d
+			}, D;
+		}
+		function M(e, t) {
+			return e.HighlightStyle.define([
+				{
+					tag: t.keyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.controlKeyword,
+					color: "var(--color-primary)",
+					fontWeight: "500"
+				},
+				{
+					tag: t.operatorKeyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.definitionKeyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.moduleKeyword,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.string,
+					color: "var(--color-tertiary)"
+				},
+				{
+					tag: t.regexp,
+					color: "var(--color-tertiary)"
+				},
+				{
+					tag: t.number,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.bool,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.function(t.variableName),
+					color: "var(--color-secondary)"
+				},
+				{
+					tag: t.function(t.definition(t.variableName)),
+					color: "var(--color-secondary)",
+					fontWeight: "500"
+				},
+				{
+					tag: t.typeName,
+					color: "var(--color-primary)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.className,
+					color: "var(--color-primary)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.namespace,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.propertyName,
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.definition(t.propertyName),
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.variableName,
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.definition(t.variableName),
+					color: "var(--color-on-surface)"
+				},
+				{
+					tag: t.comment,
+					color: "var(--color-outline)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.lineComment,
+					color: "var(--color-outline)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.blockComment,
+					color: "var(--color-outline)",
+					fontStyle: "italic"
+				},
+				{
+					tag: t.meta,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.tagName,
+					color: "var(--color-primary)"
+				},
+				{
+					tag: t.attributeName,
+					color: "var(--color-tertiary)"
+				},
+				{
+					tag: t.attributeValue,
+					color: "var(--color-secondary)"
+				},
+				{
+					tag: t.atom,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.null,
+					color: "var(--color-error)"
+				},
+				{
+					tag: t.punctuation,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.bracket,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.operator,
+					color: "var(--color-on-surface-variant)"
+				},
+				{
+					tag: t.separator,
+					color: "var(--color-on-surface-variant)"
+				}
+			]);
+		}
+		function N(e) {
+			switch (c.language) {
+				case "javascript": return e.jsMod.javascript();
+				case "typescript": return e.jsMod.javascript({ typescript: !0 });
+				case "json": return e.jsonMod.json();
+				case "html": return e.htmlMod.html();
+				case "css": return e.cssMod.css();
+				case "python": return e.pyMod.python();
+				case "vue": return e.vueMod.vue();
+				default: return [];
+			}
+		}
+		function P(e) {
+			let { viewMod: t, stateMod: n, commandsMod: r, languageMod: i, highlightMod: a, oneDarkMod: o } = e, s = M(i, a.tags), l = [
+				t.keymap.of([
+					...r.defaultKeymap,
+					...r.historyKeymap,
+					r.indentWithTab
+				]),
+				r.history(),
+				i.bracketMatching(),
+				i.indentOnInput(),
+				i.foldGutter(),
+				t.highlightActiveLine(),
+				t.highlightActiveLineGutter(),
+				i.syntaxHighlighting(s),
+				i.syntaxHighlighting(i.defaultHighlightStyle, { fallback: !0 }),
+				N(e),
+				t.EditorView.updateListener.of((e) => {
+					e.docChanged && v("update:modelValue", e.state.doc.toString());
+				}),
+				n.EditorState.readOnly.of(c.readonly)
+			];
+			return c.wrap && l.push(t.EditorView.lineWrapping), c.lineNumbers && l.push(t.lineNumbers()), c.theme === "dark" && l.push(o.oneDark), l;
+		}
+		async function F() {
+			if (!T.value) return;
+			let e = await j(), { viewMod: t, stateMod: n } = e;
+			E?.destroy(), E = new t.EditorView({
+				state: n.EditorState.create({
+					doc: c.modelValue,
+					extensions: P(e)
+				}),
+				parent: T.value
+			});
+		}
+		return f(F), _(() => c.modelValue, (e) => {
+			E && E.state.doc.toString() !== e && E.dispatch({ changes: {
+				from: 0,
+				to: E.state.doc.length,
+				insert: e
+			} });
+		}), _([
+			() => c.language,
+			() => c.theme,
+			() => c.readonly,
+			() => c.lineNumbers,
+			() => c.wrap
+		], F), d(() => E?.destroy()), (n, o) => (p(), i("div", y, [a("div", b, [a("span", x, g(A.value), 1), a("div", S, [h(n.$slots, "actions", {}, void 0, !0), a("button", {
+			type: "button",
+			class: "flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8",
+			title: O.value ? "Copied!" : "Copy code",
+			onClick: k
+		}, [s(e, {
+			name: O.value ? "check" : "content_copy",
+			size: 16,
+			class: l(O.value ? "text-primary" : "")
+		}, null, 8, ["name", "class"]), O.value ? (p(), i("span", w, "Copied")) : r("", !0)], 8, C)])]), a("div", {
+			ref_key: "containerRef",
+			ref: T,
+			class: "code-editor-container overflow-auto bg-surface text-on-surface",
+			style: u({
+				minHeight: t.minHeight,
+				maxHeight: t.maxHeight
+			})
+		}, null, 4)]));
+	}
+}), [["__scopeId", "data-v-b0a66a4b"]]), E = { class: "flex flex-col gap-0" }, D = { class: "flex items-center gap-2" }, O = {
+	key: 0,
+	class: "px-3 py-1.5 text-body-small text-error"
+}, k = /* @__PURE__ */ c({
+	__name: "MJsonEditor",
+	props: {
+		modelValue: {},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		minHeight: { default: "200px" },
+		maxHeight: { default: "600px" }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: c }) {
+		let u = t, d = c, f = m(JSON.stringify(u.modelValue, null, 2)), h = m(null), y = n(() => !h.value);
+		_(() => u.modelValue, (e) => {
+			let t = JSON.stringify(e, null, 2);
+			t !== f.value && (f.value = t, h.value = null);
+		});
+		function b(e) {
+			f.value = e;
+			try {
+				let t = JSON.parse(e);
+				h.value = null, d("update:modelValue", t);
+			} catch (e) {
+				h.value = e.message;
+			}
+		}
+		function x() {
+			try {
+				let e = JSON.parse(f.value);
+				f.value = JSON.stringify(e, null, 2), h.value = null, d("update:modelValue", e);
+			} catch {}
+		}
+		function S() {
+			try {
+				let e = JSON.parse(f.value);
+				f.value = JSON.stringify(e), h.value = null, d("update:modelValue", e);
+			} catch {}
+		}
+		return (n, c) => (p(), i("div", E, [s(T, {
+			"model-value": f.value,
+			language: "json",
+			readonly: t.readonly,
+			"min-height": t.minHeight,
+			"max-height": t.maxHeight,
+			"onUpdate:modelValue": b
+		}, {
+			actions: v(() => [a("div", D, [
+				a("span", { class: l(["flex items-center gap-1 rounded-full px-2.5 py-0.5 text-label-small", y.value ? "bg-success-container text-on-success-container" : "bg-error-container text-on-error-container"]) }, [s(e, {
+					name: y.value ? "check_circle" : "error",
+					size: 14
+				}, null, 8, ["name"]), o(" " + g(y.value ? "Válido" : "Inválido"), 1)], 2),
+				t.readonly ? r("", !0) : (p(), i("button", {
+					key: 0,
+					type: "button",
+					title: "Formatear",
+					class: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8",
+					onClick: x
+				}, [s(e, {
+					name: "format_indent_increase",
+					size: 16
+				}), c[0] ||= o(" Formatear ", -1)])),
+				t.readonly ? r("", !0) : (p(), i("button", {
+					key: 1,
+					type: "button",
+					title: "Minificar",
+					class: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8",
+					onClick: S
+				}, [s(e, {
+					name: "compress",
+					size: 16
+				}), c[1] ||= o(" Minificar ", -1)]))
+			])]),
+			_: 1
+		}, 8, [
+			"model-value",
+			"readonly",
+			"min-height",
+			"max-height"
+		]), h.value ? (p(), i("p", O, g(h.value), 1)) : r("", !0)]));
+	}
+});
+//#endregion
+export { T as MCodeEditor, k as MJsonEditor };
+
+//# sourceMappingURL=code-editor.js.map

package/dist/code-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.js","names":[],"sources":["../src/components/MCodeEditor.vue","../src/components/MCodeEditor.vue","../src/components/MJsonEditor.vue","../src/components/MJsonEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'\nimport MIcon from './MIcon.vue'\n\ntype Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'vue' | 'plain'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string\n    language?: Language\n    readonly?: boolean\n    lineNumbers?: boolean\n    theme?: 'light' | 'dark'\n    minHeight?: string\n    maxHeight?: string\n    placeholder?: string\n    wrap?: boolean\n  }>(),\n  {\n    language: 'javascript',\n    readonly: false,\n    lineNumbers: true,\n    theme: 'light',\n    minHeight: '200px',\n    maxHeight: '600px',\n    wrap: true,\n  },\n)\n\nconst emit = defineEmits<{ 'update:modelValue': [string] }>()\n\nconst containerRef = ref<HTMLElement | null>(null)\nlet view: any = null\nlet cmModules: any = null\nconst copied = ref(false)\n\nasync function copyCode() {\n  await navigator.clipboard.writeText(props.modelValue)\n  copied.value = true\n  setTimeout(() => { copied.value = false }, 1500)\n}\n\nconst langLabel = computed(() => {\n  const labels: Record<Language, string> = {\n    javascript: 'JavaScript',\n    typescript: 'TypeScript',\n    json: 'JSON',\n    html: 'HTML',\n    css: 'CSS',\n    python: 'Python',\n    vue: 'Vue',\n    plain: 'Texto',\n  }\n  return labels[props.language]\n})\n\nasync function loadModules() {\n  if (cmModules) return cmModules\n\n  const [viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod] = await Promise.all([\n    import('@codemirror/view'),\n    import('@codemirror/state'),\n    import('@codemirror/commands'),\n    import('@codemirror/language'),\n    import('@lezer/highlight'),\n    import('@codemirror/theme-one-dark'),\n    import('@codemirror/lang-javascript'),\n    import('@codemirror/lang-json'),\n    import('@codemirror/lang-html'),\n    import('@codemirror/lang-css'),\n    import('@codemirror/lang-python'),\n    import('@codemirror/lang-vue'),\n  ])\n\n  cmModules = { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod }\n  return cmModules\n}\n\nfunction buildM3HighlightStyle(languageMod: any, tags: any) {\n  return languageMod.HighlightStyle.define([\n    { tag: tags.keyword, color: 'var(--color-primary)' },\n    { tag: tags.controlKeyword, color: 'var(--color-primary)', fontWeight: '500' },\n    { tag: tags.operatorKeyword, color: 'var(--color-primary)' },\n    { tag: tags.definitionKeyword, color: 'var(--color-primary)' },\n    { tag: tags.moduleKeyword, color: 'var(--color-primary)' },\n\n    { tag: tags.string, color: 'var(--color-tertiary)' },\n    { tag: tags.regexp, color: 'var(--color-tertiary)' },\n\n    { tag: tags.number, color: 'var(--color-error)' },\n    { tag: tags.bool, color: 'var(--color-error)' },\n\n    { tag: tags.function(tags.variableName), color: 'var(--color-secondary)' },\n    { tag: tags.function(tags.definition(tags.variableName)), color: 'var(--color-secondary)', fontWeight: '500' },\n\n    { tag: tags.typeName, color: 'var(--color-primary)', fontStyle: 'italic' },\n    { tag: tags.className, color: 'var(--color-primary)', fontStyle: 'italic' },\n    { tag: tags.namespace, color: 'var(--color-on-surface-variant)' },\n\n    { tag: tags.propertyName, color: 'var(--color-on-surface)' },\n    { tag: tags.definition(tags.propertyName), color: 'var(--color-on-surface)' },\n\n    { tag: tags.variableName, color: 'var(--color-on-surface)' },\n    { tag: tags.definition(tags.variableName), color: 'var(--color-on-surface)' },\n\n    { tag: tags.comment, color: 'var(--color-outline)', fontStyle: 'italic' },\n    { tag: tags.lineComment, color: 'var(--color-outline)', fontStyle: 'italic' },\n    { tag: tags.blockComment, color: 'var(--color-outline)', fontStyle: 'italic' },\n\n    { tag: tags.meta, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.tagName, color: 'var(--color-primary)' },\n    { tag: tags.attributeName, color: 'var(--color-tertiary)' },\n    { tag: tags.attributeValue, color: 'var(--color-secondary)' },\n\n    { tag: tags.atom, color: 'var(--color-error)' },\n    { tag: tags.null, color: 'var(--color-error)' },\n\n    { tag: tags.punctuation, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.bracket, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.operator, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.separator, color: 'var(--color-on-surface-variant)' },\n  ])\n}\n\nfunction getLangExtension(mods: any) {\n  switch (props.language) {\n    case 'javascript': return mods.jsMod.javascript()\n    case 'typescript': return mods.jsMod.javascript({ typescript: true })\n    case 'json': return mods.jsonMod.json()\n    case 'html': return mods.htmlMod.html()\n    case 'css': return mods.cssMod.css()\n    case 'python': return mods.pyMod.python()\n    case 'vue': return mods.vueMod.vue()\n    default: return []\n  }\n}\n\nfunction buildExtensions(mods: any) {\n  const { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod } = mods\n\n  const m3Style = buildM3HighlightStyle(languageMod, highlightMod.tags)\n\n  const exts = [\n    viewMod.keymap.of([...commandsMod.defaultKeymap, ...commandsMod.historyKeymap, commandsMod.indentWithTab]),\n    commandsMod.history(),\n    languageMod.bracketMatching(),\n    languageMod.indentOnInput(),\n    languageMod.foldGutter(),\n    viewMod.highlightActiveLine(),\n    viewMod.highlightActiveLineGutter(),\n    languageMod.syntaxHighlighting(m3Style),\n    languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),\n    getLangExtension(mods),\n    viewMod.EditorView.updateListener.of((update: any) => {\n      if (update.docChanged) emit('update:modelValue', update.state.doc.toString())\n    }),\n    stateMod.EditorState.readOnly.of(props.readonly),\n  ]\n\n  if (props.wrap) exts.push(viewMod.EditorView.lineWrapping)\n  if (props.lineNumbers) exts.push(viewMod.lineNumbers())\n  if (props.theme === 'dark') exts.push(oneDarkMod.oneDark)\n\n  return exts\n}\n\nasync function createEditor() {\n  if (!containerRef.value) return\n  const mods = await loadModules()\n  const { viewMod, stateMod } = mods\n\n  view?.destroy()\n\n  view = new viewMod.EditorView({\n    state: stateMod.EditorState.create({\n      doc: props.modelValue,\n      extensions: buildExtensions(mods),\n    }),\n    parent: containerRef.value,\n  })\n}\n\nonMounted(createEditor)\n\nwatch(() => props.modelValue, (val) => {\n  if (view && view.state.doc.toString() !== val) {\n    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: val } })\n  }\n})\n\nwatch([() => props.language, () => props.theme, () => props.readonly, () => props.lineNumbers, () => props.wrap], createEditor)\n\nonBeforeUnmount(() => view?.destroy())\n</script>\n\n<template>\n  <div class=\"overflow-hidden rounded-lg border border-outline-variant\">\n    <!-- Header bar -->\n    <div class=\"flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-2\">\n      <span class=\"text-label-medium text-on-surface-variant\">{{ langLabel }}</span>\n      <div class=\"flex items-center gap-2\">\n        <slot name=\"actions\" />\n        <button\n          type=\"button\"\n          class=\"flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n          :title=\"copied ? 'Copied!' : 'Copy code'\"\n          @click=\"copyCode\"\n        >\n          <MIcon :name=\"copied ? 'check' : 'content_copy'\" :size=\"16\" :class=\"copied ? 'text-primary' : ''\" />\n          <span v-if=\"copied\" class=\"text-primary\">Copied</span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Editor -->\n    <div\n      ref=\"containerRef\"\n      class=\"code-editor-container overflow-auto bg-surface text-on-surface\"\n      :style=\"{ minHeight, maxHeight }\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.code-editor-container :deep(.cm-editor) {\n  height: 100%;\n  min-height: inherit;\n  font-family: 'Roboto Mono', 'Fira Code', 'Consolas', monospace;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n}\n\n.code-editor-container :deep(.cm-editor.cm-focused) {\n  outline: none;\n}\n\n.code-editor-container :deep(.cm-scroller) {\n  min-height: inherit;\n}\n\n.code-editor-container :deep(.cm-content) {\n  padding: 12px 0;\n}\n\n.code-editor-container :deep(.cm-line) {\n  padding: 0 16px;\n}\n\n.code-editor-container :deep(.cm-gutters) {\n  background: var(--color-surface-container);\n  border-right: 1px solid var(--color-outline-variant);\n  color: var(--color-outline);\n  font-size: 0.75rem;\n  padding: 0 4px;\n}\n\n.code-editor-container :deep(.cm-activeLineGutter) {\n  background: var(--color-surface-container-high);\n  color: var(--color-on-surface-variant);\n}\n\n.code-editor-container :deep(.cm-activeLine) {\n  background: var(--color-surface-container-lowest);\n}\n\n.code-editor-container :deep(.cm-selectionBackground) {\n  background: var(--color-primary-container) !important;\n}\n\n.code-editor-container :deep(.cm-cursor) {\n  border-left-color: var(--color-primary);\n  border-left-width: 2px;\n}\n\n.code-editor-container :deep(.cm-matchingBracket) {\n  background: var(--color-tertiary-container);\n  color: var(--color-on-tertiary-container);\n  border-radius: 2px;\n}\n\n.code-editor-container :deep(.cm-foldGutter span) {\n  color: var(--color-on-surface-variant);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'\nimport MIcon from './MIcon.vue'\n\ntype Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'vue' | 'plain'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string\n    language?: Language\n    readonly?: boolean\n    lineNumbers?: boolean\n    theme?: 'light' | 'dark'\n    minHeight?: string\n    maxHeight?: string\n    placeholder?: string\n    wrap?: boolean\n  }>(),\n  {\n    language: 'javascript',\n    readonly: false,\n    lineNumbers: true,\n    theme: 'light',\n    minHeight: '200px',\n    maxHeight: '600px',\n    wrap: true,\n  },\n)\n\nconst emit = defineEmits<{ 'update:modelValue': [string] }>()\n\nconst containerRef = ref<HTMLElement | null>(null)\nlet view: any = null\nlet cmModules: any = null\nconst copied = ref(false)\n\nasync function copyCode() {\n  await navigator.clipboard.writeText(props.modelValue)\n  copied.value = true\n  setTimeout(() => { copied.value = false }, 1500)\n}\n\nconst langLabel = computed(() => {\n  const labels: Record<Language, string> = {\n    javascript: 'JavaScript',\n    typescript: 'TypeScript',\n    json: 'JSON',\n    html: 'HTML',\n    css: 'CSS',\n    python: 'Python',\n    vue: 'Vue',\n    plain: 'Texto',\n  }\n  return labels[props.language]\n})\n\nasync function loadModules() {\n  if (cmModules) return cmModules\n\n  const [viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod] = await Promise.all([\n    import('@codemirror/view'),\n    import('@codemirror/state'),\n    import('@codemirror/commands'),\n    import('@codemirror/language'),\n    import('@lezer/highlight'),\n    import('@codemirror/theme-one-dark'),\n    import('@codemirror/lang-javascript'),\n    import('@codemirror/lang-json'),\n    import('@codemirror/lang-html'),\n    import('@codemirror/lang-css'),\n    import('@codemirror/lang-python'),\n    import('@codemirror/lang-vue'),\n  ])\n\n  cmModules = { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod }\n  return cmModules\n}\n\nfunction buildM3HighlightStyle(languageMod: any, tags: any) {\n  return languageMod.HighlightStyle.define([\n    { tag: tags.keyword, color: 'var(--color-primary)' },\n    { tag: tags.controlKeyword, color: 'var(--color-primary)', fontWeight: '500' },\n    { tag: tags.operatorKeyword, color: 'var(--color-primary)' },\n    { tag: tags.definitionKeyword, color: 'var(--color-primary)' },\n    { tag: tags.moduleKeyword, color: 'var(--color-primary)' },\n\n    { tag: tags.string, color: 'var(--color-tertiary)' },\n    { tag: tags.regexp, color: 'var(--color-tertiary)' },\n\n    { tag: tags.number, color: 'var(--color-error)' },\n    { tag: tags.bool, color: 'var(--color-error)' },\n\n    { tag: tags.function(tags.variableName), color: 'var(--color-secondary)' },\n    { tag: tags.function(tags.definition(tags.variableName)), color: 'var(--color-secondary)', fontWeight: '500' },\n\n    { tag: tags.typeName, color: 'var(--color-primary)', fontStyle: 'italic' },\n    { tag: tags.className, color: 'var(--color-primary)', fontStyle: 'italic' },\n    { tag: tags.namespace, color: 'var(--color-on-surface-variant)' },\n\n    { tag: tags.propertyName, color: 'var(--color-on-surface)' },\n    { tag: tags.definition(tags.propertyName), color: 'var(--color-on-surface)' },\n\n    { tag: tags.variableName, color: 'var(--color-on-surface)' },\n    { tag: tags.definition(tags.variableName), color: 'var(--color-on-surface)' },\n\n    { tag: tags.comment, color: 'var(--color-outline)', fontStyle: 'italic' },\n    { tag: tags.lineComment, color: 'var(--color-outline)', fontStyle: 'italic' },\n    { tag: tags.blockComment, color: 'var(--color-outline)', fontStyle: 'italic' },\n\n    { tag: tags.meta, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.tagName, color: 'var(--color-primary)' },\n    { tag: tags.attributeName, color: 'var(--color-tertiary)' },\n    { tag: tags.attributeValue, color: 'var(--color-secondary)' },\n\n    { tag: tags.atom, color: 'var(--color-error)' },\n    { tag: tags.null, color: 'var(--color-error)' },\n\n    { tag: tags.punctuation, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.bracket, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.operator, color: 'var(--color-on-surface-variant)' },\n    { tag: tags.separator, color: 'var(--color-on-surface-variant)' },\n  ])\n}\n\nfunction getLangExtension(mods: any) {\n  switch (props.language) {\n    case 'javascript': return mods.jsMod.javascript()\n    case 'typescript': return mods.jsMod.javascript({ typescript: true })\n    case 'json': return mods.jsonMod.json()\n    case 'html': return mods.htmlMod.html()\n    case 'css': return mods.cssMod.css()\n    case 'python': return mods.pyMod.python()\n    case 'vue': return mods.vueMod.vue()\n    default: return []\n  }\n}\n\nfunction buildExtensions(mods: any) {\n  const { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod } = mods\n\n  const m3Style = buildM3HighlightStyle(languageMod, highlightMod.tags)\n\n  const exts = [\n    viewMod.keymap.of([...commandsMod.defaultKeymap, ...commandsMod.historyKeymap, commandsMod.indentWithTab]),\n    commandsMod.history(),\n    languageMod.bracketMatching(),\n    languageMod.indentOnInput(),\n    languageMod.foldGutter(),\n    viewMod.highlightActiveLine(),\n    viewMod.highlightActiveLineGutter(),\n    languageMod.syntaxHighlighting(m3Style),\n    languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),\n    getLangExtension(mods),\n    viewMod.EditorView.updateListener.of((update: any) => {\n      if (update.docChanged) emit('update:modelValue', update.state.doc.toString())\n    }),\n    stateMod.EditorState.readOnly.of(props.readonly),\n  ]\n\n  if (props.wrap) exts.push(viewMod.EditorView.lineWrapping)\n  if (props.lineNumbers) exts.push(viewMod.lineNumbers())\n  if (props.theme === 'dark') exts.push(oneDarkMod.oneDark)\n\n  return exts\n}\n\nasync function createEditor() {\n  if (!containerRef.value) return\n  const mods = await loadModules()\n  const { viewMod, stateMod } = mods\n\n  view?.destroy()\n\n  view = new viewMod.EditorView({\n    state: stateMod.EditorState.create({\n      doc: props.modelValue,\n      extensions: buildExtensions(mods),\n    }),\n    parent: containerRef.value,\n  })\n}\n\nonMounted(createEditor)\n\nwatch(() => props.modelValue, (val) => {\n  if (view && view.state.doc.toString() !== val) {\n    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: val } })\n  }\n})\n\nwatch([() => props.language, () => props.theme, () => props.readonly, () => props.lineNumbers, () => props.wrap], createEditor)\n\nonBeforeUnmount(() => view?.destroy())\n</script>\n\n<template>\n  <div class=\"overflow-hidden rounded-lg border border-outline-variant\">\n    <!-- Header bar -->\n    <div class=\"flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-2\">\n      <span class=\"text-label-medium text-on-surface-variant\">{{ langLabel }}</span>\n      <div class=\"flex items-center gap-2\">\n        <slot name=\"actions\" />\n        <button\n          type=\"button\"\n          class=\"flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n          :title=\"copied ? 'Copied!' : 'Copy code'\"\n          @click=\"copyCode\"\n        >\n          <MIcon :name=\"copied ? 'check' : 'content_copy'\" :size=\"16\" :class=\"copied ? 'text-primary' : ''\" />\n          <span v-if=\"copied\" class=\"text-primary\">Copied</span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Editor -->\n    <div\n      ref=\"containerRef\"\n      class=\"code-editor-container overflow-auto bg-surface text-on-surface\"\n      :style=\"{ minHeight, maxHeight }\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.code-editor-container :deep(.cm-editor) {\n  height: 100%;\n  min-height: inherit;\n  font-family: 'Roboto Mono', 'Fira Code', 'Consolas', monospace;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n}\n\n.code-editor-container :deep(.cm-editor.cm-focused) {\n  outline: none;\n}\n\n.code-editor-container :deep(.cm-scroller) {\n  min-height: inherit;\n}\n\n.code-editor-container :deep(.cm-content) {\n  padding: 12px 0;\n}\n\n.code-editor-container :deep(.cm-line) {\n  padding: 0 16px;\n}\n\n.code-editor-container :deep(.cm-gutters) {\n  background: var(--color-surface-container);\n  border-right: 1px solid var(--color-outline-variant);\n  color: var(--color-outline);\n  font-size: 0.75rem;\n  padding: 0 4px;\n}\n\n.code-editor-container :deep(.cm-activeLineGutter) {\n  background: var(--color-surface-container-high);\n  color: var(--color-on-surface-variant);\n}\n\n.code-editor-container :deep(.cm-activeLine) {\n  background: var(--color-surface-container-lowest);\n}\n\n.code-editor-container :deep(.cm-selectionBackground) {\n  background: var(--color-primary-container) !important;\n}\n\n.code-editor-container :deep(.cm-cursor) {\n  border-left-color: var(--color-primary);\n  border-left-width: 2px;\n}\n\n.code-editor-container :deep(.cm-matchingBracket) {\n  background: var(--color-tertiary-container);\n  color: var(--color-on-tertiary-container);\n  border-radius: 2px;\n}\n\n.code-editor-container :deep(.cm-foldGutter span) {\n  color: var(--color-on-surface-variant);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue'\nimport MCodeEditor from './MCodeEditor.vue'\nimport MIcon from './MIcon.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: unknown\n    readonly?: boolean\n    minHeight?: string\n    maxHeight?: string\n  }>(),\n  {\n    readonly: false,\n    minHeight: '200px',\n    maxHeight: '600px',\n  },\n)\n\nconst emit = defineEmits<{ 'update:modelValue': [unknown] }>()\n\nconst rawText = ref(JSON.stringify(props.modelValue, null, 2))\nconst parseError = ref<string | null>(null)\n\nconst isValid = computed(() => !parseError.value)\n\nwatch(() => props.modelValue, (val) => {\n  const incoming = JSON.stringify(val, null, 2)\n  if (incoming !== rawText.value) {\n    rawText.value = incoming\n    parseError.value = null\n  }\n})\n\nfunction onTextUpdate(text: string) {\n  rawText.value = text\n  try {\n    const parsed = JSON.parse(text)\n    parseError.value = null\n    emit('update:modelValue', parsed)\n  } catch (e) {\n    parseError.value = (e as Error).message\n  }\n}\n\nfunction formatJson() {\n  try {\n    const parsed = JSON.parse(rawText.value)\n    rawText.value = JSON.stringify(parsed, null, 2)\n    parseError.value = null\n    emit('update:modelValue', parsed)\n  } catch {\n    // keep error state\n  }\n}\n\nfunction minifyJson() {\n  try {\n    const parsed = JSON.parse(rawText.value)\n    rawText.value = JSON.stringify(parsed)\n    parseError.value = null\n    emit('update:modelValue', parsed)\n  } catch {\n    // keep error state\n  }\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-0\">\n    <MCodeEditor\n      :model-value=\"rawText\"\n      language=\"json\"\n      :readonly=\"readonly\"\n      :min-height=\"minHeight\"\n      :max-height=\"maxHeight\"\n      @update:model-value=\"onTextUpdate\"\n    >\n      <template #actions>\n        <div class=\"flex items-center gap-2\">\n          <!-- Validation badge -->\n          <span\n            class=\"flex items-center gap-1 rounded-full px-2.5 py-0.5 text-label-small\"\n            :class=\"isValid ? 'bg-success-container text-on-success-container' : 'bg-error-container text-on-error-container'\"\n          >\n            <MIcon :name=\"isValid ? 'check_circle' : 'error'\" :size=\"14\" />\n            {{ isValid ? 'Válido' : 'Inválido' }}\n          </span>\n\n          <button\n            v-if=\"!readonly\"\n            type=\"button\"\n            title=\"Formatear\"\n            class=\"flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n            @click=\"formatJson\"\n          >\n            <MIcon name=\"format_indent_increase\" :size=\"16\" />\n            Formatear\n          </button>\n          <button\n            v-if=\"!readonly\"\n            type=\"button\"\n            title=\"Minificar\"\n            class=\"flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n            @click=\"minifyJson\"\n          >\n            <MIcon name=\"compress\" :size=\"16\" />\n            Minificar\n          </button>\n        </div>\n      </template>\n    </MCodeEditor>\n\n    <p v-if=\"parseError\" class=\"px-3 py-1.5 text-body-small text-error\">\n      {{ parseError }}\n    </p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue'\nimport MCodeEditor from './MCodeEditor.vue'\nimport MIcon from './MIcon.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: unknown\n    readonly?: boolean\n    minHeight?: string\n    maxHeight?: string\n  }>(),\n  {\n    readonly: false,\n    minHeight: '200px',\n    maxHeight: '600px',\n  },\n)\n\nconst emit = defineEmits<{ 'update:modelValue': [unknown] }>()\n\nconst rawText = ref(JSON.stringify(props.modelValue, null, 2))\nconst parseError = ref<string | null>(null)\n\nconst isValid = computed(() => !parseError.value)\n\nwatch(() => props.modelValue, (val) => {\n  const incoming = JSON.stringify(val, null, 2)\n  if (incoming !== rawText.value) {\n    rawText.value = incoming\n    parseError.value = null\n  }\n})\n\nfunction onTextUpdate(text: string) {\n  rawText.value = text\n  try {\n    const parsed = JSON.parse(text)\n    parseError.value = null\n    emit('update:modelValue', parsed)\n  } catch (e) {\n    parseError.value = (e as Error).message\n  }\n}\n\nfunction formatJson() {\n  try {\n    const parsed = JSON.parse(rawText.value)\n    rawText.value = JSON.stringify(parsed, null, 2)\n    parseError.value = null\n    emit('update:modelValue', parsed)\n  } catch {\n    // keep error state\n  }\n}\n\nfunction minifyJson() {\n  try {\n    const parsed = JSON.parse(rawText.value)\n    rawText.value = JSON.stringify(parsed)\n    parseError.value = null\n    emit('update:modelValue', parsed)\n  } catch {\n    // keep error state\n  }\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-0\">\n    <MCodeEditor\n      :model-value=\"rawText\"\n      language=\"json\"\n      :readonly=\"readonly\"\n      :min-height=\"minHeight\"\n      :max-height=\"maxHeight\"\n      @update:model-value=\"onTextUpdate\"\n    >\n      <template #actions>\n        <div class=\"flex items-center gap-2\">\n          <!-- Validation badge -->\n          <span\n            class=\"flex items-center gap-1 rounded-full px-2.5 py-0.5 text-label-small\"\n            :class=\"isValid ? 'bg-success-container text-on-success-container' : 'bg-error-container text-on-error-container'\"\n          >\n            <MIcon :name=\"isValid ? 'check_circle' : 'error'\" :size=\"14\" />\n            {{ isValid ? 'Válido' : 'Inválido' }}\n          </span>\n\n          <button\n            v-if=\"!readonly\"\n            type=\"button\"\n            title=\"Formatear\"\n            class=\"flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n            @click=\"formatJson\"\n          >\n            <MIcon name=\"format_indent_increase\" :size=\"16\" />\n            Formatear\n          </button>\n          <button\n            v-if=\"!readonly\"\n            type=\"button\"\n            title=\"Minificar\"\n            class=\"flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n            @click=\"minifyJson\"\n          >\n            <MIcon name=\"compress\" :size=\"16\" />\n            Minificar\n          </button>\n        </div>\n      </template>\n    </MCodeEditor>\n\n    <p v-if=\"parseError\" class=\"px-3 py-1.5 text-body-small text-error\">\n      {{ parseError }}\n    </p>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/MButton.vue.d.ts

@@ -16,9 +16,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "filled" | "tonal" | "outlined" | "text" | "elevated";
     type: "button" | "submit" | "reset";
     color: string;
+    variant: "filled" | "tonal" | "outlined" | "text" | "elevated";
     disabled: boolean;
     loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/MCalendar.vue.d.ts

@@ -16,8 +16,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onDateClick?: ((args_0: string) => any) | undefined;
     onEventClick?: ((args_0: CalendarEvent) => any) | undefined;
 }>, {
-    events: CalendarEvent[];
     locale: string;
+    events: CalendarEvent[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/MChart.vue.d.ts

@@ -1,9 +1,8 @@
-import { type ChartData, type ChartOptions } from 'chart.js';
 type ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'radar';
 type __VLS_Props = {
     type: ChartType;
-    data: ChartData<any>;
-    options?: ChartOptions<any>;
+    data: Record<string, any>;
+    options?: Record<string, any>;
     height?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

package/dist/components/MCodeEditor.vue.d.ts

@@ -1,4 +1,4 @@
-type Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'plain';
+type Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'vue' | 'plain';
 type __VLS_Props = {
     modelValue: string;
     language?: Language;
@@ -8,6 +8,7 @@ type __VLS_Props = {
     minHeight?: string;
     maxHeight?: string;
     placeholder?: string;
+    wrap?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -24,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     theme: "light" | "dark";
     minHeight: string;
     maxHeight: string;
+    wrap: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/MContainer.vue.d.ts

@@ -9,10 +9,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    padding: boolean;
     maxWidth: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     fluid: boolean;
     centered: boolean;
+    padding: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/MDataTable.vue.d.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((args_0: Record<string, any>[]) => any) | undefined;
     onRowClick?: ((args_0: Record<string, any>) => any) | undefined;
 }>, {
-    dense: boolean;
     modelValue: Record<string, any>[];
+    dense: boolean;
     loading: boolean;
     perPage: number;
     emptyText: string;

package/dist/components/MFab.vue.d.ts

@@ -9,9 +9,7 @@ type __VLS_Props = {
     color?: 'primary' | 'secondary' | 'tertiary' | 'surface';
     size?: 'small' | 'regular' | 'large';
     disabled?: boolean;
-    /** Speed-dial child items. If provided, clicking the FAB toggles them instead of emitting click. */
     items?: SpeedDialItem[];
-    /** Direction the speed-dial items expand toward. */
     direction?: 'up' | 'down' | 'left' | 'right' | 'radial';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/components/MIconButton.vue.d.ts

@@ -6,8 +6,8 @@ type __VLS_Props = {
     size?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "standard" | "filled" | "tonal" | "outlined";
     size: number;
+    variant: "standard" | "filled" | "tonal" | "outlined";
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/MMultiSelect.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: (string | number)[]) => any) | undefined;
 }>, {
-    variant: "filled" | "outlined";
     required: boolean;
     modelValue: (string | number)[];
+    variant: "filled" | "outlined";
     disabled: boolean;
     searchable: boolean;
     maxChips: number;

package/dist/components/MProgressBar.vue.d.ts

@@ -6,8 +6,8 @@ type __VLS_Props = {
     label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "linear" | "wavy";
     color: "primary" | "secondary" | "tertiary" | "error";
+    variant: "linear" | "wavy";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/MRichTextEditor.vue.d.ts

@@ -9,9 +9,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
-    disabled: boolean;
     minHeight: string;
     placeholder: string;
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/MScheduler.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     }) => any) | undefined;
 }>, {
     view: "week" | "day";
-    events: SchedulerEvent[];
     locale: string;
+    events: SchedulerEvent[];
     startHour: number;
     endHour: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/MSelect.vue.d.ts

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: string | number) => any) | undefined;
 }>, {
-    variant: "filled" | "outlined";
     required: boolean;
     modelValue: string | number | null;
+    variant: "filled" | "outlined";
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/MSkeleton.vue.d.ts

@@ -6,8 +6,8 @@ type __VLS_Props = {
     animation?: 'pulse' | 'wave' | 'none';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "text" | "circular" | "rectangular" | "rounded";
     animation: "pulse" | "wave" | "none";
+    variant: "text" | "circular" | "rectangular" | "rounded";
     lines: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/MSpotlightSearch.vue.d.ts

@@ -23,8 +23,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onSelect?: ((args_0: SpotlightResult) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
 }>, {
-    loading: boolean;
     placeholder: string;
+    loading: boolean;
     noResultsText: string;
     hotkey: string;
     results: SpotlightResult[];

package/dist/components/MStack.vue.d.ts

@@ -12,13 +12,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    wrap: boolean;
     direction: "column" | "row";
     gap: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     align: "start" | "center" | "end" | "stretch" | "baseline";
-    inline: boolean;
     justify: "start" | "center" | "end" | "between" | "around" | "evenly";
-    wrap: boolean;
     divider: boolean;
+    inline: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;