@mudakit/ui 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- b2c6b22: Prefix component Tailwind styles, export shared component variants, and align migrated component behavior.
+
+## 0.2.0
+
+### Minor Changes
+
+- 60219a2: Prefix Muda color tokens and their Tailwind utilities with `muda-` to avoid collisions with application themes.
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/MudaButton-CWY0U8WO.js

@@ -0,0 +1,43 @@
+import { createBlock as e, defineComponent as t, mergeProps as n, openBlock as r, renderSlot as i, resolveDynamicComponent as a, withCtx as o } from "vue";
+//#endregion
+//#region src/components/MudaButton/MudaButton.vue
+var s = /* @__PURE__ */ t({
+	__name: "MudaButton",
+	props: {
+		size: { default: "medium" },
+		variant: { default: "default" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		as: { default: "button" }
+	},
+	setup(t) {
+		let s = t;
+		return (t, c) => (r(), e(a(s.as), n(t.$attrs, {
+			disabled: s.disabled,
+			class: ["muda:flex muda:items-center muda:justify-center muda:gap-1 muda:focus-visible:outline-2 muda:focus-visible:outline-offset-2", {
+				"muda-link-reset": s.as === "a",
+				"muda-button-reset": s.as === "button",
+				"muda:rounded-md muda:font-semibold muda:shadow-xs": !0,
+				"muda:px-2.5 muda:py-1.5 muda:text-xs": s.size === "small",
+				"muda:px-3 muda:py-2 muda:text-sm": s.size === "medium",
+				"muda:px-3.5 muda:py-2.5 muda:text-sm": s.size === "large",
+				"muda:cursor-pointer": !s.disabled,
+				"muda:cursor-not-allowed": s.disabled,
+				"muda:border muda:border-secondary-light muda:bg-form-background": s.variant === "default",
+				"muda:border muda:border-primary-dark muda:bg-primary muda:fill-white muda:text-white muda:hover:bg-primary-dark muda:focus-visible:bg-primary muda:disabled:border-primary-dark/20 muda:disabled:bg-primary-light/70": s.variant === "primary",
+				"muda:border muda:border-secondary-dark muda:bg-secondary muda:fill-white muda:text-white muda:hover:bg-secondary-dark muda:focus-visible:bg-secondary muda:disabled:border-secondary-dark/20 muda:disabled:bg-secondary-light/70": s.variant === "secondary",
+				"muda:border muda:border-success-dark muda:bg-success muda:fill-white muda:text-white muda:hover:bg-success-dark muda:focus-visible:bg-success muda:disabled:border-success-dark/20 muda:disabled:bg-success-light/70": s.variant === "success",
+				"muda:border muda:border-warning-dark muda:bg-warning muda:fill-white muda:text-white muda:hover:bg-warning-dark muda:focus-visible:bg-warning muda:disabled:border-warning-dark/20 muda:disabled:bg-warning-light/70": s.variant === "warning",
+				"muda:border muda:border-danger-dark muda:bg-danger muda:fill-white muda:text-white muda:hover:bg-danger-dark muda:focus-visible:bg-danger muda:disabled:border-danger-dark/20 muda:disabled:bg-danger-light/70": s.variant === "danger",
+				"muda:border muda:border-info-dark muda:bg-info muda:fill-white muda:text-white muda:hover:bg-info-dark muda:focus-visible:bg-info muda:disabled:border-info-dark/20 muda:disabled:bg-info-light/70": s.variant === "info"
+			}]
+		}), {
+			default: o(() => [i(t.$slots, "default")]),
+			_: 3
+		}, 16, ["disabled", "class"]));
+	}
+});
+//#endregion
+export { s as t };

package/dist/{MudaButtonStack-xCMVwXHf.js → MudaButtonStack-8z8FVezw.js}

@@ -6,9 +6,9 @@ var a = /* @__PURE__ */ t({
 	props: { layout: {} },
 	setup(t) {
 		let a = t;
-		return (t, o) => (r(), e("div", { class: n(["flex justify-start gap-px", {
+		return (t, o) => (r(), e("div", { class: n(["muda:flex muda:justify-start muda:gap-px", {
 			"muda-button-stack-h": a.layout === "horizontal",
-			"muda-button-stack-v flex-col": a.layout === "vertical"
+			"muda-button-stack-v muda:flex-col": a.layout === "vertical"
 		}]) }, [i(t.$slots, "default")], 2));
 	}
 });

package/dist/{MudaCalendar-C1PMSA6X.js → MudaCalendar-CgKIaHEr.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./keymap-BzfMgdJH.js";
-import { t } from "./MudaIcon-D_siyzw0.js";
-import { t as n } from "./MudaFormInput-CI_xfpTj.js";
-import { t as r } from "./MudaPopover-BgwkVjjX.js";
+import { t } from "./MudaIcon-BwqQQnti.js";
+import { t as n } from "./MudaFormInput-D1-kQq9y.js";
+import { t as r } from "./MudaPopover-C1fDWbPf.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, toRefs as x, unref as S, useModel as C, useTemplateRef as w, vModelText as T, watch as E, withCtx as D, withDirectives as O, withModifiers as k } from "vue";
 import A from "dayjs";
 import j from "dayjs/plugin/customParseFormat.js";
@@ -88,25 +88,20 @@ function J(e, t, n, r, i) {
 }
 //#endregion
 //#region src/components/MudaCalendar/MudaCalendarWeekDays.vue?vue&type=script&setup=true&lang.ts
-var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
+var Y = { class: "muda:grid muda:grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 	__name: "MudaCalendarWeekDays",
 	props: { locale: {} },
 	setup(e) {
 		let { locale: t } = x(e), n = U(t);
 		return (e, t) => (_(), c("div", Y, [(_(!0), c(i, null, y(S(n), (e) => (_(), c("div", {
 			key: e.name,
-			class: g(["flex min-h-10 min-w-10 items-center justify-center font-bold", {
-				"text-danger": e.isWeekend,
-				"text-secondary-dark": !e.isWeekend
+			class: g(["muda:flex muda:min-h-10 muda:min-w-10 muda:items-center muda:justify-center muda:font-bold", {
+				"muda:text-danger": e.isWeekend,
+				"muda:text-secondary-dark": !e.isWeekend
 			}])
 		}, b(e.name), 3))), 128))]));
 	}
-}), Z = { class: "inline-flex flex-col" }, re = { class: "isolate grid grid-cols-7 gap-1" }, ie = [
-	"disabled",
-	"aria-selected",
-	"aria-current",
-	"onClick"
-], ae = ["datetime"], Q = /* @__PURE__ */ p({
+}), Z = { class: "muda:inline-flex muda:flex-col" }, re = { class: "muda:isolate muda:grid muda:grid-cols-7 muda:gap-1" }, ie = ["disabled", "onClick"], ae = ["datetime"], Q = /* @__PURE__ */ p({
 	__name: "MudaCalendarDays",
 	props: /*@__PURE__*/ m({
 		today: {},
@@ -131,22 +126,20 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 			type: "button",
 			tabindex: "-1",
 			disabled: e.disabled || t.disabled,
-			"aria-selected": S(p)(e.value, n.value),
-			"aria-current": e.isToday ? "date" : void 0,
-			class: g(["muda-button-reset relative flex size-min w-full items-center justify-center rounded-md disabled:text-secondary-light", {
-				"text-secondary-dark hover:bg-primary-light hover:text-white": !(e.disabled || t.disabled),
-				"text-secondary-light": !e.isCurrentMonth,
-				"bg-primary text-white": S(p)(e.value, n.value),
-				"font-bold text-warning": e.isToday,
-				"after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:rounded-lg after:border-2 after:border-primary": t.keyboard && S(p)(e.value, r.value)
+			class: g(["muda-button-reset muda:relative muda:flex muda:size-min muda:w-full muda:items-center muda:justify-center muda:rounded-md muda:disabled:text-secondary-light", {
+				"muda:text-secondary-dark muda:hover:bg-primary-light muda:hover:text-white": !(e.disabled || t.disabled),
+				"muda:text-secondary-light": !e.isCurrentMonth,
+				"muda:bg-primary muda:text-white": S(p)(e.value, n.value),
+				"muda:font-bold muda:text-warning": e.isToday,
+				"muda:after:absolute muda:after:top-0 muda:after:right-0 muda:after:bottom-0 muda:after:left-0 muda:after:rounded-lg muda:after:border-2 muda:after:border-primary": t.keyboard && S(p)(e.value, r.value)
 			}]),
 			onClick: k((t) => m(e), ["stop"])
 		}, [l("time", {
-			class: "flex min-h-10 items-center justify-center",
+			class: "muda:flex muda:min-h-10 muda:items-center muda:justify-center",
 			datetime: e.value
 		}, b(e.label), 9, ae)], 10, ie))), 128))])]));
 	}
-}), oe = ["disabled"], se = ["disabled"], ce = { class: "col-span-3 flex flex-1 items-center justify-center gap-2" }, le = ["disabled"], ue = ["disabled"], de = ["disabled"], fe = ["disabled"], pe = ["disabled"], me = /* @__PURE__ */ p({
+}), oe = ["disabled"], se = ["disabled"], ce = { class: "muda:col-span-3 muda:flex muda:flex-1 muda:items-center muda:justify-center muda:gap-2" }, le = ["disabled"], ue = ["disabled"], de = ["disabled"], fe = ["disabled"], pe = ["disabled"], me = /* @__PURE__ */ p({
 	__name: "MudaCalendarHead",
 	props: /*@__PURE__*/ m({
 		locale: {},
@@ -171,75 +164,63 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 			let n = e.add(9, "year");
 			return `${e.format(R)} ~ ${n.format(R)}`;
 		});
-		return (e, r) => (_(), c("div", { class: g(["grid", {
-			"grid-cols-7": o.value === "days",
-			"grid-cols-5": o.value !== "days"
+		return (e, r) => (_(), c("div", { class: g(["muda:grid", {
+			"muda:grid-cols-7": o.value === "days",
+			"muda:grid-cols-5": o.value !== "days"
 		}]) }, [
 			l("button", {
 				type: "button",
-				class: "muda-button-reset flex items-center justify-center fill-primary hover:fill-primary-dark disabled:fill-secondary-light",
+				class: "muda-button-reset muda:flex muda:items-center muda:justify-center muda:fill-primary muda:hover:fill-primary-dark muda:disabled:fill-secondary-light",
 				tabindex: "-1",
 				disabled: n.disabled,
-				"aria-label": "Previous year",
 				onClick: r[0] ||= (e) => u("year", o.value === "years" ? -S(10) : -1)
 			}, [f(S(t), { icon: "keyboard_double_arrow_left:outlined" })], 8, oe),
 			o.value === "days" ? (_(), c("button", {
 				key: 0,
 				type: "button",
-				class: "muda-button-reset flex items-center justify-center fill-primary hover:fill-primary-dark disabled:fill-secondary-light",
+				class: "muda-button-reset muda:flex muda:items-center muda:justify-center muda:fill-primary muda:hover:fill-primary-dark muda:disabled:fill-secondary-light",
 				tabindex: "-1",
 				disabled: n.disabled,
-				"aria-label": "Previous month",
 				onClick: r[1] ||= (e) => u("month", -1)
 			}, [f(S(t), { icon: "keyboard_arrow_left:outlined" })], 8, se)) : s("", !0),
 			l("div", ce, [o.value === "days" ? (_(), c(i, { key: 0 }, [l("button", {
 				type: "button",
-				class: "muda-button-reset font-semibold text-primary hover:text-primary-dark disabled:text-secondary-light",
+				class: "muda-button-reset muda:font-semibold muda:text-primary muda:hover:text-primary-dark muda:disabled:text-secondary-light",
 				tabindex: "-1",
 				disabled: n.disabled,
-				"aria-label": "Choose year",
 				onClick: r[2] ||= (e) => o.value = "years"
 			}, b(p.value.format(S(R))), 9, le), l("button", {
 				type: "button",
-				class: "muda-button-reset font-semibold text-primary hover:text-primary-dark disabled:text-secondary-light",
+				class: "muda-button-reset muda:font-semibold muda:text-primary muda:hover:text-primary-dark muda:disabled:text-secondary-light",
 				tabindex: "-1",
 				disabled: n.disabled,
-				"aria-label": "Choose month",
 				onClick: r[3] ||= (e) => o.value = "months"
 			}, b(p.value.format(S("MMM"))), 9, ue)], 64)) : o.value === "months" ? (_(), c("button", {
 				key: 1,
 				type: "button",
-				class: "muda-button-reset font-semibold text-primary hover:text-primary-dark disabled:text-secondary-light",
+				class: "muda-button-reset muda:font-semibold muda:text-primary muda:hover:text-primary-dark muda:disabled:text-secondary-light",
 				tabindex: "-1",
 				disabled: n.disabled,
-				"aria-label": "Choose year",
 				onClick: r[4] ||= (e) => o.value = "years"
 			}, b(p.value.format(S(R))), 9, de)) : o.value === "years" ? (_(), c(i, { key: 2 }, [d(b(m.value), 1)], 64)) : s("", !0)]),
 			o.value === "days" ? (_(), c("button", {
 				key: 1,
 				type: "button",
-				class: "muda-button-reset flex items-center justify-center fill-primary hover:fill-primary-dark disabled:fill-secondary-light",
+				class: "muda-button-reset muda:flex muda:items-center muda:justify-center muda:fill-primary muda:hover:fill-primary-dark muda:disabled:fill-secondary-light",
 				tabindex: "-1",
 				disabled: n.disabled,
-				"aria-label": "Next month",
 				onClick: r[5] ||= (e) => u("month", 1)
 			}, [f(S(t), { icon: "keyboard_arrow_right:outlined" })], 8, fe)) : s("", !0),
 			l("button", {
 				type: "button",
-				class: "muda-button-reset flex items-center justify-center fill-primary hover:fill-primary-dark disabled:fill-secondary-light",
+				class: "muda-button-reset muda:flex muda:items-center muda:justify-center muda:fill-primary muda:hover:fill-primary-dark muda:disabled:fill-secondary-light",
 				tabindex: "-1",
 				disabled: n.disabled,
-				"aria-label": "Next year",
 				onClick: r[6] ||= (e) => u("year", o.value === "years" ? S(10) : 1)
 			}, [f(S(t), { icon: "keyboard_double_arrow_right:outlined" })], 8, pe)
 		], 2));
 	}
-}), he = { class: "flex" }, ge = { class: "relative grid flex-1 grid-cols-[repeat(4,1fr)]" }, _e = [
-	"disabled",
-	"aria-selected",
-	"aria-current",
-	"onClick"
-], ve = ["datetime"], ye = /* @__PURE__ */ p({
+}), he = { class: "muda:flex" }, ge = { class: "muda:relative muda:grid muda:flex-1 muda:grid-cols-[repeat(4,1fr)]" }, _e = ["disabled", "onClick"], ve = ["datetime"], ye = /* @__PURE__ */ p({
 	__name: "MudaCalendarMonths",
 	props: /*@__PURE__*/ m({
 		today: {},
@@ -263,25 +244,18 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 			type: "button",
 			tabindex: "-1",
 			disabled: e.disabled || n.disabled,
-			"aria-selected": S(m)(e.value, r.value),
-			"aria-current": e.isToday ? "date" : void 0,
-			class: g(["muda-button-reset flex items-center justify-center rounded-md py-5 disabled:text-secondary-light", {
-				"text-secondary-dark hover:bg-primary-light hover:text-white": !(e.disabled || n.disabled),
-				"bg-primary text-white": S(m)(e.value, r.value),
-				"font-bold text-warning": e.isToday
+			class: g(["muda-button-reset muda:flex muda:items-center muda:justify-center muda:rounded-md muda:py-5 muda:disabled:text-secondary-light", {
+				"muda:text-secondary-dark muda:hover:bg-primary-light muda:hover:text-white": !(e.disabled || n.disabled),
+				"muda:bg-primary muda:text-white": S(m)(e.value, r.value),
+				"muda:font-bold muda:text-warning": e.isToday
 			}]),
 			onClick: k((t) => h(e), ["prevent"])
 		}, [l("time", {
-			class: "flex items-center justify-center",
+			class: "muda:flex muda:items-center muda:justify-center",
 			datetime: e.value
 		}, b(e.label), 9, ve)], 10, _e))), 128))])]));
 	}
-}), be = { class: "grid grid-cols-[repeat(2,1fr)]" }, xe = [
-	"disabled",
-	"aria-selected",
-	"aria-current",
-	"onClick"
-], Se = ["datetime"], Ce = /* @__PURE__ */ p({
+}), be = { class: "muda:grid muda:grid-cols-[repeat(2,1fr)]" }, xe = ["disabled", "onClick"], Se = ["datetime"], Ce = /* @__PURE__ */ p({
 	__name: "MudaCalendarYears",
 	props: /*@__PURE__*/ m({
 		today: {},
@@ -305,16 +279,14 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 			type: "button",
 			tabindex: "-1",
 			disabled: e.disabled || n.disabled,
-			"aria-selected": S(m)(e.value, r.value),
-			"aria-current": e.isToday ? "date" : void 0,
-			class: g(["muda-button-reset flex items-center justify-center rounded-md py-3 disabled:text-secondary-light", {
-				"text-secondary-dark hover:bg-primary-light hover:text-white": !(e.disabled || n.disabled),
-				"bg-primary text-white": S(m)(e.value, r.value),
-				"font-bold text-warning": e.isToday
+			class: g(["muda-button-reset muda:flex muda:items-center muda:justify-center muda:rounded-md muda:py-3 muda:disabled:text-secondary-light", {
+				"muda:text-secondary-dark muda:hover:bg-primary-light muda:hover:text-white": !(e.disabled || n.disabled),
+				"muda:bg-primary muda:text-white": S(m)(e.value, r.value),
+				"muda:font-bold muda:text-warning": e.isToday
 			}]),
 			onClick: k((t) => h(e), ["prevent"])
 		}, [l("time", {
-			class: "flex items-center justify-center",
+			class: "muda:flex muda:items-center muda:justify-center",
 			datetime: e.value
 		}, b(e.label), 9, Se)], 10, xe))), 128))]));
 	}
@@ -355,7 +327,7 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 		};
 		return n({ handleKeydown: p }), (e, t) => (_(), c("div", {
 			tabindex: r.keyboard && !r.disabled ? 0 : void 0,
-			class: "flex flex-col text-gray-600",
+			class: "muda:flex muda:flex-col muda:text-gray-600",
 			onKeydown: k(p, ["stop"])
 		}, [f(me, {
 			modelValue: d.value,
@@ -439,8 +411,7 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 }), Te = ["tabindex"], Ee = [
 	"min",
 	"max",
-	"disabled",
-	"aria-invalid"
+	"disabled"
 ], De = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "MudaCalendar",
@@ -472,9 +443,9 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 			onBlur: r[3] ||= (e) => o.value = !1,
 			onKeydown: d,
 			ref: "root",
-			class: g(["rounded-md bg-foreground p-2 ring-1 focus:rounded-md focus:ring-2 focus:ring-primary-light focus:outline-hidden", {
-				"ring-danger": t.isInvalid,
-				"ring-secondary-light": !t.isInvalid
+			class: g(["muda:rounded-md muda:bg-foreground muda:p-2 muda:ring-1 muda:focus:rounded-md muda:focus:ring-2 muda:focus:ring-primary-light muda:focus:outline-hidden", {
+				"muda:ring-danger": t.isInvalid,
+				"muda:ring-secondary-light": !t.isInvalid
 			}])
 		}, [f($, {
 			modelValue: n.value,
@@ -497,8 +468,7 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 			min: s.value,
 			max: u.value,
 			disabled: t.disabled,
-			"aria-invalid": t.isInvalid || void 0,
-			class: "hidden"
+			class: "muda:hidden"
 		}), null, 16, Ee), [[T, n.value]])], 42, Te));
 	}
 }), Oe = /* @__PURE__ */ p({
@@ -551,7 +521,7 @@ var Y = { class: "grid grid-cols-[repeat(7,auto)]" }, X = /* @__PURE__ */ p({
 				"onUpdate:modelValue": i[1] ||= (e) => c.value = e,
 				ref_key: "pickerRef",
 				ref: p,
-				class: "w-76",
+				class: "muda:w-76",
 				keyboard: g.value,
 				locale: s.locale,
 				min: s.min,

package/dist/{MudaCard-C9geam4O.js → MudaCard-DGdFOdro.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, openBlock as n, renderSlot as r } from "vue";
 //#region src/components/MudaCard/MudaCard.vue
-var i = {}, a = { class: "relative rounded-lg border border-secondary-light bg-foreground p-4" };
+var i = {}, a = { class: "muda:relative muda:rounded-lg muda:border muda:border-secondary-light muda:bg-foreground muda:p-4" };
 function o(e, i) {
 	return n(), t("div", a, [r(e.$slots, "default")]);
 }

package/dist/{MudaColorPicker-D9JCnuHA.js → MudaColorPicker-CnB1MYB3.js}

@@ -1,8 +1,8 @@
-import { t as e } from "./MudaButton-Bw6Fw2-Y.js";
+import { t as e } from "./MudaButton-CWY0U8WO.js";
 import { t } from "./keymap-BzfMgdJH.js";
-import { t as n } from "./MudaIcon-D_siyzw0.js";
-import { t as r } from "./MudaFormInput-CI_xfpTj.js";
-import { t as i } from "./MudaPopover-BgwkVjjX.js";
+import { t as n } from "./MudaIcon-BwqQQnti.js";
+import { t as r } from "./MudaFormInput-D1-kQq9y.js";
+import { t as i } from "./MudaPopover-C1fDWbPf.js";
 import { t as a } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as o } from "./useKeyDown-B1jmp4nA.js";
 import { createBlock as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, normalizeStyle as h, openBlock as g, ref as _, toDisplayString as v, unref as y, useModel as b, watch as x, watchEffect as S, withCtx as C, withModifiers as w } from "vue";
@@ -28,10 +28,10 @@ var k = {
 		return S(() => {
 			r("change", o.value.hex);
 		}), (e, t) => (g(), c("div", {
-			class: "flex flex-col gap-4",
+			class: "muda:flex muda:flex-col muda:gap-4",
 			style: h({ width: `${n.size}px` })
 		}, [d(y(T), {
-			class: "color-picker-saturation relative w-full rounded-lg select-none",
+			class: "color-picker-saturation muda:relative muda:w-full muda:rounded-lg muda:select-none",
 			style: h({
 				backgroundColor: `hsl(${y(o).hsv.h}, 100%, 50%)`,
 				height: `${n.size}px`
@@ -39,25 +39,25 @@ var k = {
 			onChangePosition: y(a)
 		}, {
 			default: C(() => [d(y(D), {
-				class: "absolute h-4 w-4 -translate-x-2 -translate-y-2 rounded-full border-2 border-white shadow-xs shadow-gray-400",
+				class: "muda:absolute muda:h-4 muda:w-4 muda:-translate-x-2 muda:-translate-y-2 muda:rounded-full muda:border-2 muda:border-white muda:shadow-xs muda:shadow-gray-400",
 				"saturation-position": y(s),
 				hex: y(o).hex
 			}, null, 8, ["saturation-position", "hex"])]),
 			_: 1
 		}, 8, ["style", "onChangePosition"]), d(y(T), {
-			class: "color-picker-hue relative h-4 w-full rounded-lg select-none",
+			class: "color-picker-hue muda:relative muda:h-4 muda:w-full muda:rounded-lg muda:select-none",
 			onChangePosition: y(i)
 		}, {
 			default: C(() => [d(y(E), {
 				position: y(l),
 				hue: y(o).hsv.h,
 				direction: "horizontal",
-				class: "absolute h-4 w-4 -translate-x-2 rounded-full border-2 border-white shadow-xs shadow-gray-400"
+				class: "muda:absolute muda:h-4 muda:w-4 muda:-translate-x-2 muda:rounded-full muda:border-2 muda:border-white muda:shadow-xs muda:shadow-gray-400"
 			}, null, 8, ["position", "hue"])]),
 			_: 1
 		}, 8, ["onChangePosition"])], 4));
 	}
-}), j = /*#__PURE__*/ a(A, [["__scopeId", "data-v-2888e57a"]]), M = { class: "flex flex-col gap-2" }, N = /* @__PURE__ */ f({
+}), j = /*#__PURE__*/ a(A, [["__scopeId", "data-v-bdb328ef"]]), M = { class: "muda:flex muda:flex-col muda:gap-2" }, N = /* @__PURE__ */ f({
 	inheritAttrs: !1,
 	__name: "MudaColorPicker",
 	props: /*@__PURE__*/ p({

package/dist/{MudaDialog-BYH1sqFg.js → MudaDialog-DTR4JKpJ.js}

@@ -11,7 +11,7 @@ var S = 0, C = "", w = (e) => {
 		!t || typeof document > "u" || (--S, t = !1, S === 0 && (document.body.style.overflow = C));
 	};
 	y(e, (e) => e ? n() : r(), { immediate: !0 }), p(r);
-}, T = { class: "fixed inset-0 w-screen overflow-y-auto py-6" }, E = { class: "flex min-h-full items-center justify-center" }, D = /* @__PURE__ */ u({
+}, T = { class: "muda:fixed muda:inset-0 muda:w-screen muda:overflow-y-auto muda:py-6" }, E = { class: "muda:flex muda:min-h-full muda:items-center muda:justify-center" }, D = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "MudaDialog",
 	props: {
@@ -33,22 +33,21 @@ var S = 0, C = "", w = (e) => {
 			y.value?.contains(e.target) || (p.value = !1);
 		};
 		return (e, t) => (m(), o(i, { to: "body" }, [l(a, {
-			"enter-active-class": "transition-opacity ease-linear duration-100",
-			"leave-active-class": "transition-opacity ease-linear duration-100",
-			"enter-from-class": "opacity-0",
-			"leave-to-class": "opacity-0"
+			"enter-active-class": "muda:transition-opacity muda:ease-linear muda:duration-100",
+			"leave-active-class": "muda:transition-opacity muda:ease-linear muda:duration-100",
+			"enter-from-class": "muda:opacity-0",
+			"leave-to-class": "muda:opacity-0"
 		}, {
 			default: b(() => [p.value ? (m(), o(g(r), {
 				key: 0,
-				"aria-modal": "true",
 				role: "dialog",
-				class: "fixed inset-0 bg-gray-500/30 backdrop-blur-xs transition-opacity",
+				class: "muda:fixed muda:inset-0 muda:bg-gray-500/30 muda:backdrop-blur-xs muda:transition-opacity",
 				style: f({ zIndex: g(S) }),
 				onClickCapture: C,
 				onWheel: t[0] ||= x(() => {}, ["stop"])
 			}, {
 				default: b(() => [c("div", T, [c("div", E, [c("div", d(e.$attrs, {
-					class: "rounded-lg bg-background p-4 focus:outline-hidden",
+					class: "muda:rounded-lg muda:bg-background muda:p-4 muda:focus:outline-hidden",
 					tabindex: "0",
 					ref: "dialog"
 				}), [h(e.$slots, "default")], 16)])])]),

package/dist/{MudaDropdown-DwNvdtqh.js → MudaDropdown-Dhv8Mhxm.js}

@@ -1,10 +1,10 @@
-import { t as e } from "./MudaIcon-D_siyzw0.js";
-import { t } from "./MudaPopover-BgwkVjjX.js";
+import { t as e } from "./MudaIcon-BwqQQnti.js";
+import { t } from "./MudaPopover-C1fDWbPf.js";
 import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, useSlots as _, withCtx as v, withModifiers as y } from "vue";
 //#region src/components/MudaDropdown/MudaDropdown.vue?vue&type=script&setup=true&lang.ts
-var b = { class: "flex flex-col" }, x = ["onClick"], S = {
+var b = { class: "muda:flex muda:flex-col" }, x = ["onClick"], S = {
 	key: 0,
-	class: "flex items-center gap-2"
+	class: "muda:flex muda:items-center muda:gap-2"
 }, C = /* @__PURE__ */ c({
 	__name: "MudaDropdown",
 	props: /*@__PURE__*/ l({ items: {} }, {
@@ -27,14 +27,14 @@ var b = { class: "flex flex-col" }, x = ["onClick"], S = {
 		}, {
 			content: v(() => [o("div", b, [(d(!0), a(n, null, f(C.items, (t, n) => (d(), a("button", {
 				key: n,
-				class: u(["muda-button-reset flex w-full cursor-pointer items-center gap-2 rounded-md px-4 py-2 text-left text-sm", {
-					"fill-secondary text-secondary hover:bg-secondary-light": t.variant === "default" || t.variant == null,
-					"fill-primary text-primary hover:bg-primary hover:fill-white hover:text-white": t.variant === "primary",
-					"fill-secondary text-secondary hover:bg-secondary hover:fill-white hover:text-white": t.variant === "secondary",
-					"fill-success text-success hover:bg-success hover:fill-white hover:text-white": t.variant === "success",
-					"fill-danger text-danger hover:bg-danger hover:fill-white hover:text-white": t.variant === "danger",
-					"fill-warning text-warning hover:bg-warning hover:fill-white hover:text-white": t.variant === "warning",
-					"fill-info text-info hover:bg-info hover:fill-white hover:text-white": t.variant === "info"
+				class: u(["muda-button-reset muda:flex muda:w-full muda:cursor-pointer muda:items-center muda:gap-2 muda:rounded-md muda:px-4 muda:py-2 muda:text-left muda:text-sm", {
+					"muda:fill-secondary muda:text-secondary muda:hover:bg-secondary-light": t.variant === "default" || t.variant == null,
+					"muda:fill-primary muda:text-primary muda:hover:bg-primary muda:hover:fill-white muda:hover:text-white": t.variant === "primary",
+					"muda:fill-secondary muda:text-secondary muda:hover:bg-secondary muda:hover:fill-white muda:hover:text-white": t.variant === "secondary",
+					"muda:fill-success muda:text-success muda:hover:bg-success muda:hover:fill-white muda:hover:text-white": t.variant === "success",
+					"muda:fill-danger muda:text-danger muda:hover:bg-danger muda:hover:fill-white muda:hover:text-white": t.variant === "danger",
+					"muda:fill-warning muda:text-warning muda:hover:bg-warning muda:hover:fill-white muda:hover:text-white": t.variant === "warning",
+					"muda:fill-info muda:text-info muda:hover:bg-info muda:hover:fill-white muda:hover:text-white": t.variant === "info"
 				}]),
 				onClick: y((e) => D(t, n), ["prevent"])
 			}, [w.item == null ? (d(), a("span", S, [t.icon == null ? i("", !0) : (d(), r(h(e), {

package/dist/{MudaErrorBox-C0DvbAfU.js → MudaErrorBox-B9ySoal8.js}

@@ -1,10 +1,9 @@
 import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, openBlock as i, toDisplayString as a } from "vue";
 //#region src/components/MudaErrorBox/MudaErrorBox.vue?vue&type=script&setup=true&lang.ts
 var o = {
-	class: "flex flex-col gap-2",
-	role: "alert",
-	"aria-live": "assertive"
-}, s = { class: "text-center text-4xl font-bold text-danger" }, c = { class: "text-center text-2xl font-semibold tracking-tight text-secondary-dark" }, l = /* @__PURE__ */ r({
+	class: "muda:flex muda:flex-col muda:gap-2",
+	role: "alert"
+}, s = { class: "muda:text-center muda:text-4xl muda:font-bold muda:text-danger" }, c = { class: "muda:text-center muda:text-2xl muda:font-semibold muda:tracking-tight muda:text-secondary-dark" }, l = /* @__PURE__ */ r({
 	__name: "MudaErrorBox",
 	props: {
 		title: { default: "Error" },

package/dist/MudaFormCheckbox-C1wTjohm.js

@@ -0,0 +1,43 @@
+import { createElementBlock as e, defineComponent as t, mergeModels as n, mergeProps as r, openBlock as i, useModel as a, vModelCheckbox as o, withDirectives as s } from "vue";
+//#endregion
+//#region src/components/MudaFormCheckbox/MudaFormCheckbox.vue
+var c = /* @__PURE__ */ t({
+	__name: "MudaFormCheckbox",
+	props: /*@__PURE__*/ n({ size: { default: "medium" } }, {
+		modelValue: {
+			type: [
+				Boolean,
+				Array,
+				null
+			],
+			default: void 0
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(t) {
+		let n = t, c = a(t, "modelValue");
+		return (t, a) => s((i(), e("input", r(t.$attrs, {
+			"onUpdate:modelValue": a[0] ||= (e) => c.value = e,
+			type: "checkbox",
+			"data-checked": "✓",
+			class: [
+				n.size === "small" && "muda:size-4 muda:before:text-xs",
+				n.size === "medium" && "muda:size-5 muda:before:text-lg",
+				n.size === "large" && "muda:size-6 muda:before:text-xl",
+				"muda-control-reset muda:bg-form-background",
+				"muda:relative muda:shrink-0 muda:cursor-pointer muda:appearance-none muda:outline-hidden muda:disabled:cursor-not-allowed",
+				"muda:rounded-xs muda:border muda:border-secondary-light muda:text-secondary-dark",
+				"muda:focus:ring-2 muda:focus:ring-primary-light muda:focus:outline-hidden",
+				"muda:disabled:border-secondary-dark/20 muda:disabled:text-secondary-light",
+				"muda:before:absolute muda:before:top-0 muda:before:right-0 muda:before:bottom-0 muda:before:left-0",
+				"muda:before:flex muda:before:items-center muda:before:justify-center",
+				"muda:before:text-sm muda:before:font-bold muda:before:text-primary",
+				"muda:checked:before:content-[attr(data-checked)]",
+				"muda:disabled:before:text-secondary-light"
+			]
+		}), null, 16)), [[o, c.value]]);
+	}
+});
+//#endregion
+export { c as t };

package/dist/{MudaFormCombobox-BFOvOqGX.js → MudaFormCombobox-DqH-EyMV.js}

@@ -1,17 +1,17 @@
 import { t as e } from "./keymap-BzfMgdJH.js";
-import { t } from "./MudaIcon-D_siyzw0.js";
-import { t as n } from "./MudaFormInput-CI_xfpTj.js";
+import { t } from "./MudaIcon-BwqQQnti.js";
+import { t as n } from "./MudaFormInput-D1-kQq9y.js";
 import { t as r } from "./useClickOutside-B6tdxsc3.js";
 import { t as i } from "./useZIndex-DWnsohLZ.js";
 import { t as a } from "./useKeyDown-B1jmp4nA.js";
-import { t as o } from "./MudaFormCheckbox-CDY-INi6.js";
+import { t as o } from "./MudaFormCheckbox-C1wTjohm.js";
 import { Fragment as s, Teleport as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeModels as y, mergeProps as b, normalizeClass as x, normalizeStyle as S, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, unref as O, useModel as k, useSlots as A, useTemplateRef as j, watch as M, watchEffect as N, withCtx as P, withModifiers as F } from "vue";
 import { autoUpdate as I, flip as L, offset as R, shift as z, size as B, useFloating as V } from "@floating-ui/vue";
 //#region src/components/MudaFormCombobox/MudaFormComboboxMultiple.vue?vue&type=script&setup=true&lang.ts
-var H = { class: "flex flex-col" }, U = {
+var H = { class: "muda:flex muda:flex-col" }, U = {
 	key: 0,
-	class: "-mt-2.75 rounded-b-lg border border-secondary-light bg-form-background pt-2.5"
-}, W = { class: "m-0 muda-no-scrollbar flex max-h-80 list-none flex-col gap-1 muda-scroll-container-v-form-background rounded-lg px-2 py-2" }, G = { class: "flex cursor-pointer items-center gap-2" }, K = /* @__PURE__ */ v({
+	class: "muda:-mt-2.75 muda:rounded-b-lg muda:border muda:border-secondary-light muda:bg-form-background muda:pt-2.5"
+}, W = { class: "muda:m-0 muda:no-scrollbar muda:flex muda:max-h-80 muda:list-none muda:flex-col muda:gap-1 muda:scroll-container-v-form-background muda:rounded-lg muda:px-2 muda:py-2" }, G = { class: "muda:flex muda:cursor-pointer muda:items-center muda:gap-2" }, K = /* @__PURE__ */ v({
 	inheritAttrs: !1,
 	__name: "MudaFormComboboxMultiple",
 	props: /*@__PURE__*/ y({
@@ -60,7 +60,7 @@ var H = { class: "flex flex-col" }, U = {
 	}
 }), q = {
 	ref: "root",
-	class: "relative"
+	class: "muda:relative"
 }, J = ["onClick"], Y = /* @__PURE__ */ v({
 	__name: "MudaFormComboboxSingle",
 	props: /*@__PURE__*/ y({
@@ -102,6 +102,7 @@ var H = { class: "flex flex-col" }, U = {
 		}), a((t) => {
 			if (K.value && !t.isComposing) switch (t.key) {
 				case e.Enter:
+				case e.Tab:
 					Y.value != null && ($(Y.value), t.preventDefault());
 					break;
 				case e.Escape:
@@ -156,15 +157,15 @@ var H = { class: "flex flex-col" }, U = {
 			to: "body",
 			disabled: !m.appendToBody
 		}, [_(l, {
-			"enter-active-class": "transition-opacity ease-linear duration-100",
-			"leave-active-class": "transition-opacity ease-linear duration-100",
-			"enter-from-class": "opacity-0",
-			"leave-to-class": "opacity-0"
+			"enter-active-class": "muda:transition-opacity muda:ease-linear muda:duration-100",
+			"leave-active-class": "muda:transition-opacity muda:ease-linear muda:duration-100",
+			"enter-from-class": "muda:opacity-0",
+			"leave-to-class": "muda:opacity-0"
 		}, {
 			default: P(() => [K.value ? (C(), p("ul", {
 				key: 0,
 				ref: "list",
-				class: "m-0 max-h-52 w-max list-none overflow-auto rounded-sm bg-form-background p-0 shadow-lg",
+				class: "muda:m-0 muda:max-h-52 muda:w-max muda:list-none muda:overflow-auto muda:rounded-sm muda:bg-form-background muda:p-0 muda:shadow-lg",
 				style: S({
 					...O(Q),
 					zIndex: O(X)
@@ -172,9 +173,9 @@ var H = { class: "flex flex-col" }, U = {
 			}, [(C(!0), p(s, null, T(Z.value, (t, n) => (C(), p("li", {
 				key: `${String(t.value)}-${n}`,
 				role: "button",
-				class: x(["flex h-10 w-full cursor-pointer items-center px-2 text-base select-none", {
-					"bg-primary-light text-white": Y.value === n,
-					"bg-primary text-white": t.value === y.value
+				class: x(["muda:flex muda:h-10 muda:w-full muda:cursor-pointer muda:items-center muda:px-2 muda:text-base muda:select-none", {
+					"muda:bg-primary-light muda:text-white": Y.value === n,
+					"muda:bg-primary muda:text-white": t.value === y.value
 				}]),
 				onClick: F((e) => $(n), ["prevent"])
 			}, [v.label == null ? (C(), p(s, { key: 1 }, [g(D(t.label), 1)], 64)) : E(e.$slots, "label", { option: t }, void 0, void 0, 0)], 10, J))), 128))], 4)) : f("", !0)]),