@mudakit/ui 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.6.0
+
+### Minor Changes
+
+- a663c3f: Add the useMudaColors composable.
+
+## 0.5.0
+
+### Minor Changes
+
+- fcbbcb8: - Add a public `@mudakit/ui/composables` entrypoint.
+  - Add outline-* and link-* variants to MudaButton
+  - Add the MudaSidebar component.
+  - Refresh the light and dark theme color palettes.
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/MudaButton-B9EAJW32.js

@@ -0,0 +1,57 @@
+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": !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 muda:text-secondary muda:shadow-xs muda:disabled:text-secondary/40": s.variant === "default",
+				"muda:border muda:border-primary-dark muda:bg-primary muda:fill-white muda:text-white muda:shadow-xs 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:shadow-xs 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:shadow-xs 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:shadow-xs 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:shadow-xs 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:shadow-xs 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",
+				"muda:border muda:border-secondary-light muda:text-secondary muda:disabled:text-secondary/40": s.variant === "outline-default",
+				"muda:border muda:border-primary muda:text-primary muda:enabled:hover:bg-primary muda:enabled:hover:fill-white muda:enabled:hover:text-white muda:disabled:border-primary/20 muda:disabled:text-primary/40": s.variant === "outline-primary",
+				"muda:border muda:border-secondary muda:text-secondary muda:enabled:hover:bg-secondary muda:enabled:hover:fill-white muda:enabled:hover:text-white muda:disabled:border-secondary/20 muda:disabled:text-secondary/40": s.variant === "outline-secondary",
+				"muda:border muda:border-success muda:text-success muda:enabled:hover:bg-success muda:enabled:hover:fill-white muda:enabled:hover:text-white muda:disabled:border-success/20 muda:disabled:text-success/40": s.variant === "outline-success",
+				"muda:border muda:border-warning muda:text-warning muda:enabled:hover:bg-warning muda:enabled:hover:fill-white muda:enabled:hover:text-white muda:disabled:border-warning/20 muda:disabled:text-warning/40": s.variant === "outline-warning",
+				"muda:border muda:border-danger muda:text-danger muda:enabled:hover:bg-danger muda:enabled:hover:fill-white muda:enabled:hover:text-white muda:disabled:border-danger/20 muda:disabled:text-danger/40": s.variant === "outline-danger",
+				"muda:border muda:border-info muda:text-info muda:enabled:hover:bg-info muda:enabled:hover:fill-white muda:enabled:hover:text-white muda:disabled:border-info/20 muda:disabled:text-info/40": s.variant === "outline-info",
+				"muda:text-secondary muda:disabled:text-secondary/40": s.variant === "link-default",
+				"muda:text-primary muda:enabled:hover:text-primary-dark muda:disabled:text-primary/40": s.variant === "link-primary",
+				"muda:text-secondary muda:enabled:hover:text-secondary-dark muda:disabled:text-secondary/40": s.variant === "link-secondary",
+				"muda:text-success muda:enabled:hover:text-success-dark muda:disabled:text-success/40": s.variant === "link-success",
+				"muda:text-warning muda:enabled:hover:text-warning-dark muda:disabled:text-warning/40": s.variant === "link-warning",
+				"muda:text-danger muda:enabled:hover:text-danger-dark muda:disabled:text-danger/40": s.variant === "link-danger",
+				"muda:text-info muda:enabled:hover:text-info-dark muda:disabled:text-info/40": s.variant === "link-info"
+			}]
+		}), {
+			default: o(() => [i(t.$slots, "default")]),
+			_: 3
+		}, 16, ["disabled", "class"]));
+	}
+});
+//#endregion
+export { s as t };

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

@@ -1,10 +1,10 @@
-import { t as e } from "./MudaButton-CWY0U8WO.js";
-import { t } from "./keymap-BzfMgdJH.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 { t as e } from "./useKeyDown-B1jmp4nA.js";
+import { t } from "./MudaButton-B9EAJW32.js";
+import { t as n } from "./keymap-BzfMgdJH.js";
+import { t as r } from "./MudaIcon-BwqQQnti.js";
+import { t as i } from "./MudaFormInput-D1-kQq9y.js";
+import { t as a } from "./MudaPopover-C1fDWbPf.js";
+import { t as o } from "./_plugin-vue_export-helper-B3ysoDQm.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";
 import { ColorPickerCanvas as T, ColorPickerHueCursor as E, ColorPickerSaturationCursor as D, useColorPicker as O } from "@wattanx/vue-color-picker";
 //#region src/common/components.ts
@@ -57,7 +57,7 @@ var k = {
 			_: 1
 		}, 8, ["onChangePosition"])], 4));
 	}
-}), j = /*#__PURE__*/ a(A, [["__scopeId", "data-v-bdb328ef"]]), M = { class: "muda:flex muda:flex-col muda:gap-2" }, N = /* @__PURE__ */ f({
+}), j = /*#__PURE__*/ o(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({
@@ -71,21 +71,21 @@ var k = {
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a) {
-		let c = a, f = b(a, "modelValue"), p = _(), S = _(f.value), T = _(!1);
+	setup(o) {
+		let c = o, f = b(o, "modelValue"), p = _(), S = _(f.value), T = _(!1);
 		x(f, (e) => {
 			T.value || (S.value = e);
-		}), o((e) => {
+		}), e((e) => {
 			if (T.value) switch (e.key) {
-				case t.Escape: T.value = !1, p.value?.input?.blur();
+				case n.Escape: T.value = !1, p.value?.input?.blur();
 			}
 		});
 		let E = () => {
 			f.value = S.value, T.value = !1;
 		};
-		return (t, a) => (g(), s(y(i), {
+		return (e, n) => (g(), s(y(a), {
 			modelValue: T.value,
-			"onUpdate:modelValue": a[4] ||= (e) => T.value = e,
+			"onUpdate:modelValue": n[4] ||= (e) => T.value = e,
 			placement: "bottom-start",
 			"append-to-body": c.appendToBody
 		}, {
@@ -93,8 +93,8 @@ var k = {
 				key: c.size,
 				"initial-color": f.value,
 				size: y(k)[c.size],
-				onChange: a[3] ||= (e) => S.value = e
-			}, null, 8, ["initial-color", "size"])), d(y(e), {
+				onChange: n[3] ||= (e) => S.value = e
+			}, null, 8, ["initial-color", "size"])), d(y(t), {
 				type: "button",
 				variant: "primary",
 				size: "small",
@@ -104,19 +104,19 @@ var k = {
 				default: C(() => [u(v(c.buttonLabel ?? S.value), 1)]),
 				_: 1
 			}, 8, ["style"])])]),
-			default: C(() => [d(y(r), m({
+			default: C(() => [d(y(i), m({
 				ref_key: "inputRef",
 				ref: p
-			}, t.$attrs, {
+			}, e.$attrs, {
 				modelValue: f.value,
-				"onUpdate:modelValue": a[0] ||= (e) => f.value = e,
+				"onUpdate:modelValue": n[0] ||= (e) => f.value = e,
 				disabled: c.disabled,
 				"is-invalid": c.isInvalid,
 				readonly: "",
-				onFocus: a[1] ||= (e) => T.value = !0,
-				"onClick:before": a[2] ||= (e) => T.value = !0
+				onFocus: n[1] ||= (e) => T.value = !0,
+				"onClick:before": n[2] ||= (e) => T.value = !0
 			}), {
-				before: C(() => [d(y(n), {
+				before: C(() => [d(y(r), {
 					icon: "palette:outlined",
 					color: f.value
 				}, null, 8, ["color"])]),

package/dist/MudaDialog-dQSFVdgu.js

@@ -0,0 +1,55 @@
+import { t as e } from "./useBodyScrollLock-4K-3lAFL.js";
+import { t } from "./useKeyDown-B1jmp4nA.js";
+import { t as n } from "./useZIndex-DWnsohLZ.js";
+import { t as r } from "./keymap-BzfMgdJH.js";
+import { t as i } from "./MudaFocusTrap-CGlvV_MC.js";
+import { Teleport as a, Transition as o, createBlock as s, createCommentVNode as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeStyle as p, openBlock as m, renderSlot as h, unref as g, useModel as _, useTemplateRef as v, withCtx as y, withModifiers as b } from "vue";
+//#region src/components/MudaDialog/MudaDialog.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "muda:fixed muda:inset-0 muda:w-screen muda:overflow-y-auto muda:py-6" }, S = { class: "muda:flex muda:min-h-full muda:items-center muda:justify-center" }, C = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "MudaDialog",
+	props: {
+		modelValue: {
+			type: Boolean,
+			required: !0
+		},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(d) {
+		let C = _(d, "modelValue"), w = v("dialog"), T = n();
+		e(C), t((e) => {
+			if (C.value) switch (e.key) {
+				case r.Escape: C.value = !1, e.preventDefault();
+			}
+		});
+		let E = (e) => {
+			w.value?.contains(e.target) || (C.value = !1);
+		};
+		return (e, t) => (m(), s(a, { to: "body" }, [u(o, {
+			"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: y(() => [C.value ? (m(), s(g(i), {
+				key: 0,
+				role: "dialog",
+				class: "muda:fixed muda:inset-0 muda:bg-gray-500/30 muda:backdrop-blur-xs muda:transition-opacity",
+				style: p({ zIndex: g(T) }),
+				onClickCapture: E,
+				onWheel: t[0] ||= b(() => {}, ["stop"])
+			}, {
+				default: y(() => [l("div", x, [l("div", S, [l("div", f(e.$attrs, {
+					class: "muda:rounded-lg muda:bg-background muda:p-4 muda:focus:outline-hidden",
+					tabindex: "0",
+					ref: "dialog"
+				}), [h(e.$slots, "default")], 16)])])]),
+				_: 3
+			}, 8, ["style"])) : c("", !0)]),
+			_: 3
+		})]));
+	}
+});
+//#endregion
+export { C as t };

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

@@ -1,9 +1,9 @@
-import { t as e } from "./keymap-BzfMgdJH.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 e } from "./useClickOutside-B6tdxsc3.js";
+import { t } from "./useKeyDown-B1jmp4nA.js";
+import { t as n } from "./useZIndex-DWnsohLZ.js";
+import { t as r } from "./keymap-BzfMgdJH.js";
+import { t as i } from "./MudaIcon-BwqQQnti.js";
+import { t as a } from "./MudaFormInput-D1-kQq9y.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";
@@ -24,39 +24,39 @@ var H = { class: "muda:flex muda:flex-col" }, U = {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let r = e, i = A(), a = k(e, "modelValue"), c = w(""), l = u(() => {
+		let t = e, n = A(), r = k(e, "modelValue"), c = w(""), l = u(() => {
 			let e = c.value.trim().toLowerCase();
-			return e === "" ? r.options : r.options.filter((t) => t.label.toLowerCase().includes(e));
+			return e === "" ? t.options : t.options.filter((t) => t.label.toLowerCase().includes(e));
 		}), h = () => {
-			c.value.length > 0 ? c.value = "" : a.value = [];
+			c.value.length > 0 ? c.value = "" : r.value = [];
 		};
-		return (e, u) => (C(), p("div", H, [_(O(n), b(e.$attrs, {
+		return (e, u) => (C(), p("div", H, [_(O(a), b(e.$attrs, {
 			modelValue: c.value,
 			"onUpdate:modelValue": u[0] ||= (e) => c.value = e,
-			placeholder: r.placeholder,
+			placeholder: t.placeholder,
 			"onClick:after": h,
-			disabled: r.disabled
+			disabled: t.disabled
 		}), {
-			after: P(() => [c.value.length > 0 ? (C(), d(O(t), {
+			after: P(() => [c.value.length > 0 ? (C(), d(O(i), {
 				key: 0,
 				icon: "close:outlined"
-			})) : a.value.length > 0 ? (C(), p(s, { key: 1 }, [g(D(a.value.length) + " ", 1), _(O(t), { icon: "close:outlined" })], 64)) : f("", !0)]),
+			})) : r.value.length > 0 ? (C(), p(s, { key: 1 }, [g(D(r.value.length) + " ", 1), _(O(i), { icon: "close:outlined" })], 64)) : f("", !0)]),
 			_: 1
 		}, 16, [
 			"modelValue",
 			"placeholder",
 			"disabled"
-		]), !r.disabled && l.value.length > 0 ? (C(), p("div", U, [m("ul", W, [(C(!0), p(s, null, T(l.value, (t) => (C(), p("li", { key: t.value }, [m("label", G, [_(O(o), {
-			modelValue: a.value,
-			"onUpdate:modelValue": u[1] ||= (e) => a.value = e,
+		]), !t.disabled && l.value.length > 0 ? (C(), p("div", U, [m("ul", W, [(C(!0), p(s, null, T(l.value, (i) => (C(), p("li", { key: i.value }, [m("label", G, [_(O(o), {
+			modelValue: r.value,
+			"onUpdate:modelValue": u[1] ||= (e) => r.value = e,
 			size: "small",
-			value: t.value,
-			disabled: r.disabled
+			value: i.value,
+			disabled: t.disabled
 		}, null, 8, [
 			"modelValue",
 			"value",
 			"disabled"
-		]), i.label == null ? (C(), p(s, { key: 1 }, [g(D(t.label), 1)], 64)) : E(e.$slots, "label", { option: t }, void 0, void 0, 0)])]))), 128))])])) : f("", !0)]));
+		]), n.label == null ? (C(), p(s, { key: 1 }, [g(D(i.label), 1)], 64)) : E(e.$slots, "label", { option: i }, void 0, void 0, 0)])]))), 128))])])) : f("", !0)]));
 	}
 }), q = {
 	ref: "root",
@@ -75,7 +75,7 @@ var H = { class: "muda:flex muda:flex-col" }, U = {
 	}),
 	emits: ["update:modelValue"],
 	setup(o) {
-		let m = o, v = A(), y = k(o, "modelValue"), H = w(m.options.find(({ value: e }) => e === y.value)?.label ?? ""), U = j("root"), W = j("list"), G = w(), K = w(!1), Y = w(null), X = i(), Z = u(() => {
+		let m = o, v = A(), y = k(o, "modelValue"), H = w(m.options.find(({ value: e }) => e === y.value)?.label ?? ""), U = j("root"), W = j("list"), G = w(), K = w(!1), Y = w(null), X = n(), Z = u(() => {
 			let e = H.value.trim().toLowerCase();
 			return e === "" ? m.options : m.options.filter((t) => t.label.toLowerCase().includes(e));
 		}), { floatingStyles: Q } = V(U, W, {
@@ -97,30 +97,30 @@ var H = { class: "muda:flex muda:flex-col" }, U = {
 		}, ee = (e) => {
 			e.preventDefault(), H.value = "", y.value = void 0;
 		};
-		return r([U, W], () => {
+		return e([U, W], () => {
 			K.value &&= !1;
-		}), a((t) => {
-			if (K.value && !t.isComposing) switch (t.key) {
-				case e.Enter:
-				case e.Tab:
-					Y.value != null && ($(Y.value), t.preventDefault());
+		}), t((e) => {
+			if (K.value && !e.isComposing) switch (e.key) {
+				case r.Enter:
+				case r.Tab:
+					Y.value != null && ($(Y.value), e.preventDefault());
 					break;
-				case e.Escape:
+				case r.Escape:
 					K.value = !1;
 					break;
-				case e.ArrowDown:
+				case r.ArrowDown:
 					if (Z.value.length === 0) {
 						Y.value = null;
 						break;
 					}
-					Y.value = Y.value == null ? 0 : (Y.value + 1) % Z.value.length, t.preventDefault();
+					Y.value = Y.value == null ? 0 : (Y.value + 1) % Z.value.length, e.preventDefault();
 					break;
-				case e.ArrowUp:
+				case r.ArrowUp:
 					if (Z.value.length === 0) {
 						Y.value = null;
 						break;
 					}
-					Y.value = Y.value == null ? Z.value.length - 1 : (Y.value + Z.value.length - 1) % Z.value.length, t.preventDefault();
+					Y.value = Y.value == null ? Z.value.length - 1 : (Y.value + Z.value.length - 1) % Z.value.length, e.preventDefault();
 			}
 		}), N(() => {
 			Y.value != null && W.value?.children[Y.value]?.scrollIntoView({
@@ -133,19 +133,19 @@ var H = { class: "muda:flex muda:flex-col" }, U = {
 			e || G.value?.input?.blur(), Y.value = e && Z.value.length > 0 ? 0 : null;
 		}), M([y, () => m.options], ([e]) => {
 			H.value = m.options.find(({ value: t }) => t === e)?.label ?? "";
-		}, { deep: !0 }), (e, r) => (C(), p("div", q, [_(O(n), b(e.$attrs, {
+		}, { deep: !0 }), (e, t) => (C(), p("div", q, [_(O(a), b(e.$attrs, {
 			modelValue: H.value,
-			"onUpdate:modelValue": r[0] ||= (e) => H.value = e,
+			"onUpdate:modelValue": t[0] ||= (e) => H.value = e,
 			ref_key: "inputRef",
 			ref: G,
-			onFocus: r[1] ||= (e) => K.value = !0,
+			onFocus: t[1] ||= (e) => K.value = !0,
 			"onClick:after": ee,
 			disabled: m.disabled,
 			placeholder: m.placeholder,
 			"is-invalid": m.isInvalid
 		}), h({ _: 2 }, [H.value.length > 0 ? {
 			name: "after",
-			fn: P(() => [_(O(t), { icon: "close:outlined" })]),
+			fn: P(() => [_(O(i), { icon: "close:outlined" })]),
 			key: "0"
 		} : void 0]), 1040, [
 			"modelValue",

package/dist/MudaSidebar-DvKS4VtE.js

@@ -0,0 +1,141 @@
+import { Fragment as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, openBlock as p, provide as m, renderList as h, renderSlot as g, toRefs as _, unref as v, useModel as y, useSlots as b, vShow as x, withCtx as S, withDirectives as C } from "vue";
+//#region src/components/MudaSidebar/MudaSidebar.types.ts
+var w = "64px", T = "360px", E = Symbol("MUDA_SIDEBAR_CONTEXT");
+function D() {
+	return l(E);
+}
+//#endregion
+//#region src/components/MudaSidebar/MudaSidebarDrawer.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "muda:flex muda:items-center" }, k = { class: "muda:flex muda:w-full muda:items-center muda:justify-center" }, A = /* @__PURE__ */ c({
+	__name: "MudaSidebarDrawer",
+	props: { item: {} },
+	setup(e) {
+		let r = e, c = b(), { selectedItem: l, mode: u, position: m, paneWidth: h, contentWidth: _, size: y } = D(), w = n(() => c.content != null), T = n(() => r.item.name === l.value), E = (e) => {
+			switch (r.item.type) {
+				case "pane":
+					l.value = l.value === r.item.name ? null : r.item.name;
+					break;
+				case "button": e.preventDefault(), r.item.onClick();
+			}
+		};
+		return (e, n) => (p(), a("div", O, [o("div", k, [o("button", {
+			type: "button",
+			class: d(["muda-button-reset muda:flex muda:cursor-pointer muda:items-center muda:justify-center muda:text-xs muda:hover:fill-primary-light muda:hover:text-primary-light", {
+				"muda:rounded-md muda:fill-primary muda:text-primary": T.value,
+				"muda:fill-secondary muda:text-secondary": !T.value,
+				"muda:size-8": v(y) === "small",
+				"muda:size-9": v(y) === "medium",
+				"muda:size-10": v(y) === "large"
+			}]),
+			onClick: E
+		}, [g(e.$slots, "label", { isActive: T.value })], 2)]), w.value ? (p(), a("div", {
+			key: 0,
+			class: d(["muda:absolute muda:top-0 muda:bottom-0 muda:z-100 muda:overflow-hidden", {
+				"muda:right-full": v(u) === "absolute" && v(m) === "right",
+				"muda:left-full": v(u) === "absolute" && v(m) === "left"
+			}]),
+			style: f({
+				left: v(u) === "static" && v(m) === "left" ? v(h) : void 0,
+				right: v(u) === "static" && v(m) === "right" ? v(h) : void 0
+			})
+		}, [s(t, {
+			"enter-active-class": "muda:transition-transform muda:duration-300 muda:ease-out muda:overflow-x-hidden",
+			"enter-from-class": v(m) === "left" ? "muda:-translate-x-full" : "muda:translate-x-full",
+			"enter-to-class": "muda:translate-x-0",
+			"leave-active-class": "muda:transition-transform muda:duration-300 muda:ease-out muda:overflow-x-hidden",
+			"leave-from-class": "muda:translate-x-0",
+			"leave-to-class": v(m) === "left" ? "muda:-translate-x-full" : "muda:translate-x-full"
+		}, {
+			default: S(() => [C(o("div", {
+				class: "muda:relative muda:h-full muda:overflow-hidden",
+				style: f({ width: v(_) })
+			}, [o("div", { class: d(["muda:absolute muda:inset-0 muda:z-100 muda:border-secondary-light muda:bg-foreground", {
+				"muda:before:absolute muda:before:top-0 muda:before:bottom-0 muda:before:z-50 muda:before:w-2 muda:before:from-black muda:before:opacity-10 muda:before:content-['']": v(u) === "absolute",
+				"muda:left-2 muda:border-l muda:before:-left-2 muda:before:bg-linear-to-l": v(u) === "absolute" && v(m) === "right",
+				"muda:right-2 muda:border-r muda:before:-right-2 muda:before:bg-linear-to-r": v(u) === "absolute" && v(m) === "left",
+				"muda:left-0 muda:border-l": v(u) !== "absolute" && v(m) === "right",
+				"muda:right-0 muda:border-r": v(u) !== "absolute" && v(m) === "left"
+			}]) }, [g(e.$slots, "content", { isActive: T.value })], 2)], 4), [[x, T.value]])]),
+			_: 3
+		}, 8, ["enter-from-class", "leave-to-class"])], 6)) : i("", !0)]));
+	}
+}), j = { class: "muda:flex muda:h-full muda:flex-col" }, M = { class: "muda:flex muda:h-full muda:flex-col muda:justify-end" }, N = /* @__PURE__ */ c({
+	__name: "MudaSidebar",
+	props: /*@__PURE__*/ u({
+		items: {},
+		size: { default: "medium" },
+		position: { default: "left" },
+		mode: { default: "absolute" },
+		contentWidth: { default: T },
+		paneWidth: { default: w }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(t) {
+		let i = t, s = y(t, "modelValue"), { contentWidth: c, mode: l, paneWidth: u, position: v, size: b } = _(i);
+		m(E, {
+			selectedItem: s,
+			contentWidth: c,
+			mode: l,
+			paneWidth: u,
+			position: v,
+			size: b
+		});
+		let x = n(() => ({
+			mode: l.value,
+			position: v.value,
+			size: b.value
+		})), C = n(() => i.items.filter((e) => e.position === "top")), w = n(() => i.items.filter((e) => e.position === "bottom"));
+		return (t, n) => (p(), a("div", {
+			class: d(["muda:relative muda:flex muda:h-full muda:bg-transparent muda:transition-[width] muda:duration-300 muda:ease-out", {
+				"muda:justify-end": i.position === "right",
+				"muda:justify-start": i.position === "left"
+			}]),
+			style: f({ width: i.mode === "static" && s.value != null ? `calc(${i.contentWidth} + ${i.paneWidth})` : i.paneWidth })
+		}, [o("div", {
+			class: d(["muda:flex muda:h-full muda:flex-col muda:bg-foreground muda:py-4", {
+				"muda:border-l muda:border-l-secondary-light": i.position === "right",
+				"muda:border-r muda:border-r-secondary-light": i.position === "left"
+			}]),
+			style: f({ width: i.paneWidth })
+		}, [o("div", j, [(p(!0), a(e, null, h(C.value, (e, n) => (p(), r(A, {
+			key: e.name,
+			item: e
+		}, {
+			label: S(({ isActive: r }) => [g(t.$slots, `${e.name}-label`, {
+				item: e,
+				index: n,
+				isActive: r,
+				context: x.value
+			})]),
+			content: S(({ isActive: r }) => [g(t.$slots, e.name, {
+				item: e,
+				index: n,
+				isActive: r,
+				context: x.value
+			})]),
+			_: 2
+		}, 1032, ["item"]))), 128))]), o("div", M, [(p(!0), a(e, null, h(w.value, (e, n) => (p(), r(A, {
+			key: e.name,
+			item: e
+		}, {
+			label: S(({ isActive: r }) => [g(t.$slots, `${e.name}-label`, {
+				item: e,
+				index: n,
+				isActive: r,
+				context: x.value
+			})]),
+			content: S(({ isActive: r }) => [g(t.$slots, e.name, {
+				item: e,
+				index: n,
+				isActive: r,
+				context: x.value
+			})]),
+			_: 2
+		}, 1032, ["item"]))), 128))])], 6)], 6));
+	}
+});
+//#endregion
+export { T as n, w as r, N as t };

package/dist/components/MudaButton/MudaButton.types.d.ts

@@ -0,0 +1,2 @@
+import type { MudaComponentVariant } from "../../common/components";
+export type MudaButtonVariant = MudaComponentVariant | `outline-${MudaComponentVariant}` | `link-${MudaComponentVariant}`;

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

@@ -1,7 +1,8 @@
-import type { MudaComponentSize, MudaComponentVariant } from "../../common/components";
+import type { MudaComponentSize } from "../../common/components";
+import { MudaButtonVariant } from "./MudaButton.types";
 type __VLS_Props = {
     size?: MudaComponentSize;
-    variant?: MudaComponentVariant;
+    variant?: MudaButtonVariant;
     disabled?: boolean;
     as?: "button" | "a";
 };
@@ -11,7 +12,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: MudaComponentSize;
-    variant: MudaComponentVariant;
+    variant: MudaButtonVariant;
     disabled: boolean;
     as: "button" | "a";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/MudaButton/index.d.ts

@@ -1 +1,2 @@
+export * from "./MudaButton.types";
 export { default as MudaButton } from "./MudaButton.vue";

package/dist/components/MudaButton/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../MudaButton-CWY0U8WO.js";
+import { t as e } from "../../MudaButton-B9EAJW32.js";
 export { e as MudaButton };

package/dist/components/MudaColorPicker/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../MudaColorPicker-CnB1MYB3.js";
+import { n as e, t } from "../../MudaColorPicker-D9BhgHf9.js";
 export { t as MudaColorPicker, e as MudaColorPickerControl };

package/dist/components/MudaDialog/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../MudaDialog-D0VZdP3Y.js";
+import { t as e } from "../../MudaDialog-dQSFVdgu.js";
 export { e as MudaDialog };

package/dist/components/MudaFormCombobox/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../MudaFormCombobox-DqH-EyMV.js";
+import { n as e, t } from "../../MudaFormCombobox-CK2De6Rv.js";
 export { e as MudaFormComboboxMultiple, t as MudaFormComboboxSingle };

package/dist/components/MudaSidebar/MudaSidebar.types.d.ts

@@ -0,0 +1,16 @@
+export type MudaSidebarMode = "absolute" | "static";
+export type MudaSidebarPosition = "left" | "right";
+export type MudaSidebarItemPosition = "top" | "bottom";
+interface MudaSidebarItemBase<T extends string> {
+    name: T;
+    position: MudaSidebarItemPosition;
+}
+export type MudaSidebarItem<T extends string> = MudaSidebarItemBase<T> & ({
+    type: "pane";
+} | {
+    type: "button";
+    onClick: () => void;
+});
+export declare const MUDA_SIDEBAR_DEFAULT_PANE_WIDTH = "64px";
+export declare const MUDA_SIDEBAR_DEFAULT_CONTENT_WIDTH = "360px";
+export {};

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

@@ -0,0 +1,67 @@
+import { MudaComponentSize } from "../../common/components";
+import { type MudaSidebarItem, type MudaSidebarMode, type MudaSidebarPosition } from "./MudaSidebar.types";
+declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        items: MudaSidebarItem<T>[];
+        size?: MudaComponentSize;
+        position?: MudaSidebarPosition;
+        mode?: MudaSidebarMode;
+        contentWidth?: string;
+        paneWidth?: string;
+    } & {
+        modelValue: T | null;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | null) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: { [K in `${T}-label`]?: ((props: {
+        item: MudaSidebarItem<T>;
+        index: number;
+        isActive: boolean;
+        context: {
+            mode: MudaSidebarMode;
+            position: MudaSidebarPosition;
+            size: MudaComponentSize;
+        };
+    }) => any) | undefined; } & { [K_1 in T]?: ((props: {
+        item: MudaSidebarItem<T>;
+        index: number;
+        isActive: boolean;
+        context: {
+            mode: MudaSidebarMode;
+            position: MudaSidebarPosition;
+            size: MudaComponentSize;
+        };
+    }) => any) | undefined; } & { [K_2 in `${T}-label`]?: ((props: {
+        item: MudaSidebarItem<T>;
+        index: number;
+        isActive: boolean;
+        context: {
+            mode: MudaSidebarMode;
+            position: MudaSidebarPosition;
+            size: MudaComponentSize;
+        };
+    }) => any) | undefined; } & { [K_3 in T]?: ((props: {
+        item: MudaSidebarItem<T>;
+        index: number;
+        isActive: boolean;
+        context: {
+            mode: MudaSidebarMode;
+            position: MudaSidebarPosition;
+            size: MudaComponentSize;
+        };
+    }) => any) | undefined; };
+    emit: (event: "update:modelValue", value: T | null) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};