@cfasim-ui/components 0.1.9 → 0.2.0

package/dist/index.js

@@ -0,0 +1,700 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, getCurrentInstance as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useModel as x, vModelText as S, watch as C, withCtx as w, withDirectives as T, withKeys as E, withModifiers as D } from "vue";
+import { CollapsibleContent as O, CollapsibleRoot as k, CollapsibleTrigger as A, Primitive as j, SelectContent as M, SelectItem as N, SelectItemIndicator as P, SelectItemText as F, SelectPortal as I, SelectRoot as L, SelectTrigger as R, SelectValue as z, SelectViewport as B, SliderRange as V, SliderRoot as H, SliderThumb as U, SliderTrack as W, SwitchRoot as G, SwitchThumb as K, TabsIndicator as q, TabsList as J, TabsRoot as Y, TabsTrigger as ee, TooltipArrow as te, TooltipContent as ne, TooltipPortal as re, TooltipProvider as ie, TooltipRoot as ae, TooltipTrigger as oe, useId as se } from "reka-ui";
+//#region src/Box/Box.vue?vue&type=script&setup=true&lang.ts
+var ce = ["role"], le = /* @__PURE__ */ c({
+	__name: "Box",
+	props: {
+		variant: {},
+		bgColor: {},
+		textColor: {},
+		role: {}
+	},
+	setup(e) {
+		return (t, n) => (h(), i("div", {
+			class: d(["box", e.variant ? `box-${e.variant}` : void 0]),
+			style: f({
+				backgroundColor: e.bgColor,
+				color: e.textColor
+			}),
+			role: e.role
+		}, [v(t.$slots, "default", {}, void 0, !0)], 14, ce));
+	}
+}), X = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, ue = /* @__PURE__ */ X(le, [["__scopeId", "data-v-d7342c02"]]), de = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "Button",
+	props: {
+		label: {},
+		variant: { default: "primary" },
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	emits: ["click"],
+	setup(e) {
+		return (t, r) => (h(), n(b(j), {
+			class: "button",
+			"data-variant": e.variant,
+			as: e.as,
+			"as-child": e.asChild,
+			onClick: r[0] ||= (e) => t.$emit("click", e)
+		}, {
+			default: w(() => [v(t.$slots, "default", {}, () => [o(y(e.label), 1)], !0)]),
+			_: 3
+		}, 8, [
+			"data-variant",
+			"as",
+			"as-child"
+		]));
+	}
+}), [["__scopeId", "data-v-250eab18"]]), fe = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "Expander",
+	props: /* @__PURE__ */ u({ label: {} }, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(e) {
+		let t = x(e, "open");
+		return (r, i) => (h(), n(b(k), {
+			open: t.value,
+			"onUpdate:open": i[0] ||= (e) => t.value = e,
+			class: "expander"
+		}, {
+			default: w(() => [s(b(A), { class: "expander-trigger" }, {
+				default: w(() => [a("span", { class: d(["expander-caret", { open: t.value }]) }, null, 2), v(r.$slots, "label", {}, () => [o(y(e.label), 1)], !0)]),
+				_: 3
+			}), s(b(O), { class: "expander-content" }, {
+				default: w(() => [v(r.$slots, "default", {}, void 0, !0)]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+}), [["__scopeId", "data-v-39e4acd0"]]), pe = [
+	"data-size",
+	"data-fill",
+	"data-inline",
+	"aria-hidden",
+	"aria-label",
+	"role"
+], Z = /* @__PURE__ */ c({
+	__name: "Icon",
+	props: {
+		icon: {},
+		size: { default: "md" },
+		fill: {
+			type: Boolean,
+			default: !1
+		},
+		weight: {},
+		grade: {},
+		decorative: {
+			type: Boolean,
+			default: !0
+		},
+		ariaLabel: {},
+		inline: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let n = e, r = t(() => typeof n.size == "string" ? n.size : void 0), a = t(() => typeof n.size == "number" ? n.size : void 0), o = t(() => {
+			let e = {};
+			return a.value !== void 0 && (e.fontSize = `${a.value}px`, e["--icon-opsz"] = a.value), n.weight !== void 0 && (e["--icon-weight"] = n.weight), n.grade !== void 0 && (e["--icon-grade"] = n.grade), e;
+		});
+		return (t, n) => (h(), i("span", {
+			class: "Icon",
+			"data-size": r.value,
+			"data-fill": e.fill ? "true" : void 0,
+			"data-inline": e.inline ? "true" : void 0,
+			style: f(o.value),
+			"aria-hidden": e.decorative ? !0 : void 0,
+			"aria-label": e.decorative ? void 0 : e.ariaLabel,
+			role: e.decorative ? void 0 : "img"
+		}, y(e.icon), 13, pe));
+	}
+}), Q = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "Hint",
+	props: { text: {} },
+	setup(e) {
+		return (t, r) => (h(), n(b(ie), null, {
+			default: w(() => [s(b(ae), {
+				"delay-duration": 0,
+				"disable-closing-trigger": ""
+			}, {
+				default: w(() => [s(b(oe), { "as-child": "" }, {
+					default: w(() => [a("button", {
+						type: "button",
+						class: "HintTrigger",
+						"aria-label": "More info",
+						onPointerdown: r[0] ||= D(() => {}, ["prevent"])
+					}, [s(Z, {
+						icon: "help",
+						size: 16
+					})], 32)]),
+					_: 1
+				}), s(b(re), null, {
+					default: w(() => [s(b(ne), {
+						class: "HintContent",
+						side: "top",
+						"side-offset": 4
+					}, {
+						default: w(() => [o(y(e.text) + " ", 1), s(b(te), {
+							class: "HintArrow",
+							width: 10,
+							height: 5
+						})]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-9dbf1c25"]]), me = ["aria-label"], $ = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "LightDarkToggle",
+	setup(e) {
+		let t = g(window.matchMedia("(prefers-color-scheme: dark)").matches);
+		function n(e) {
+			document.documentElement.classList.toggle("dark", e), document.documentElement.classList.toggle("light", !e);
+		}
+		return n(t.value), C(t, n), (e, n) => (h(), i("button", {
+			class: "light-dark-toggle",
+			type: "button",
+			"aria-label": t.value ? "Switch to light mode" : "Switch to dark mode",
+			onClick: n[0] ||= (e) => t.value = !t.value
+		}, [s(Z, {
+			icon: t.value ? "dark_mode" : "light_mode",
+			size: "sm"
+		}, null, 8, ["icon"])], 8, me));
+	}
+}), [["__scopeId", "data-v-4c423498"]]), he = {
+	key: 0,
+	class: "input-label"
+}, ge = { class: "input-label-row" }, _e = {
+	key: 0,
+	class: "input-wrapper"
+}, ve = [
+	"inputmode",
+	"placeholder",
+	"aria-invalid"
+], ye = {
+	key: 0,
+	class: "input-suffix"
+}, be = {
+	key: 1,
+	class: "input-error",
+	role: "alert"
+}, xe = {
+	key: 2,
+	class: "slider-container"
+}, Se = { class: "slider-current" }, Ce = { class: "slider-labels" }, we = { key: 1 }, Te = {
+	key: 0,
+	class: "input-wrapper"
+}, Ee = [
+	"inputmode",
+	"placeholder",
+	"aria-invalid"
+], De = {
+	key: 0,
+	class: "input-suffix"
+}, Oe = {
+	key: 1,
+	class: "input-error",
+	role: "alert"
+}, ke = {
+	key: 2,
+	class: "slider-container"
+}, Ae = { class: "slider-current" }, je = { class: "slider-labels" }, Me = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "NumberInput",
+	props: /* @__PURE__ */ u({
+		label: {},
+		placeholder: {},
+		step: {},
+		min: {},
+		max: {},
+		hint: {},
+		percent: { type: Boolean },
+		slider: { type: Boolean },
+		live: { type: Boolean },
+		numberType: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let c = x(e, "modelValue"), l = e, u = t(() => l.min ?? (l.percent, 0)), d = t(() => l.max ?? (l.percent ? 1 : 100)), f = t(() => l.step ?? (l.percent ? .01 : 1));
+		function p(e) {
+			return e == null ? "" : l.percent ? (e * 100).toFixed(0) + "%" : e.toLocaleString("en-US");
+		}
+		function m(e) {
+			return e == null ? e : l.percent ? Math.round(e * 1e4) / 100 : e;
+		}
+		function _(e) {
+			return l.percent ? e / 100 : e;
+		}
+		function v(e) {
+			if (l.numberType !== "integer") return e;
+			let t = m(e);
+			return t == null ? e : _(Math.trunc(t));
+		}
+		function D(e) {
+			return e == null ? "" : e.toLocaleString("en-US");
+		}
+		function O(e) {
+			let t = D(e);
+			return l.numberType === "float" && e != null && Number.isInteger(e) ? t + ".0" : t;
+		}
+		function k(e) {
+			return e.replace(/,/g, "");
+		}
+		let A = g(O(m(c.value))), j = g(c.value), M = g();
+		C(c, (e) => {
+			A.value = O(m(e)), j.value = e;
+		});
+		function N(e) {
+			let t = e.target, n = k(t.value);
+			if (n === "" || n === "-" || n.endsWith(".") || n.includes(".") && n.endsWith("0")) return;
+			let r = Number(n);
+			if (Number.isNaN(r)) return;
+			let i = D(r);
+			if (i === t.value) return;
+			let a = t.selectionStart ?? 0, o = (t.value.slice(0, a).match(/,/g) || []).length;
+			A.value = i, requestAnimationFrame(() => {
+				let e = a - o, n = 0, r = 0;
+				for (let t = 0; t < i.length; t++) if (i[t] !== "," && r++, r >= e) {
+					n = t + 1;
+					break;
+				}
+				r < e && (n = i.length), t.setSelectionRange(n, n);
+			});
+		}
+		function P() {
+			z();
+			let e = Number(k(A.value));
+			Number.isNaN(e) || (A.value = O(e));
+		}
+		let F = null;
+		function I() {
+			!l.live || l.slider || (F && clearTimeout(F), F = setTimeout(z, 300));
+		}
+		function L() {
+			!l.live || l.slider || (F && clearTimeout(F), z());
+		}
+		function R(e) {
+			if (J.value != null && e < J.value) return `Min ${J.value}${l.percent ? "%" : ""}`;
+			if (Y.value != null && e > Y.value) return `Max ${Y.value}${l.percent ? "%" : ""}`;
+		}
+		function z() {
+			let e = Number(k(A.value));
+			if (Number.isNaN(e)) return;
+			l.numberType === "integer" && (e = Math.trunc(e), A.value = O(e));
+			let t = R(e);
+			M.value = t, !t && (c.value = _(e), j.value = c.value);
+		}
+		function B(e) {
+			if (!e) return;
+			let t = v(e[0]);
+			j.value = t, A.value = O(m(t)), l.live && (c.value = t);
+		}
+		function G(e) {
+			e && (c.value = v(e[0]));
+		}
+		let K = t(() => l.step == null ? 1 : l.percent ? l.step * 100 : l.step);
+		function q(e, t) {
+			e.preventDefault();
+			let n = Number(k(A.value)), r = (Number.isNaN(n) ? 0 : n) + K.value * (e.shiftKey ? 10 : 1) * t;
+			l.numberType === "integer" && (r = Math.trunc(r)), J.value != null && (r = Math.max(r, J.value)), Y.value != null && (r = Math.min(r, Y.value)), A.value = O(r), M.value = void 0, c.value = _(r), j.value = c.value;
+		}
+		let J = t(() => l.min == null ? l.percent ? 0 : void 0 : l.percent ? l.min * 100 : l.min), Y = t(() => l.max == null ? l.percent ? 100 : void 0 : l.percent ? l.max * 100 : l.max);
+		return (e, t) => l.label ? (h(), i("label", he, [
+			a("span", ge, [o(y(l.label) + " ", 1), l.hint ? (h(), n(Q, {
+				key: 0,
+				text: l.hint
+			}, null, 8, ["text"])) : r("", !0)]),
+			l.slider ? r("", !0) : (h(), i("span", _e, [T(a("input", {
+				type: "text",
+				inputmode: l.numberType === "integer" ? "numeric" : "decimal",
+				"onUpdate:modelValue": t[0] ||= (e) => A.value = e,
+				placeholder: l.placeholder,
+				"aria-invalid": !!M.value,
+				onBlur: P,
+				onKeydown: [
+					E(z, ["enter"]),
+					t[1] ||= E((e) => q(e, 1), ["up"]),
+					t[2] ||= E((e) => q(e, -1), ["down"])
+				],
+				onInput: t[3] ||= (e) => {
+					N(e), I();
+				},
+				onChange: L
+			}, null, 40, ve), [[S, A.value]]), l.percent ? (h(), i("span", ye, "%")) : r("", !0)])),
+			M.value ? (h(), i("span", be, y(M.value), 1)) : r("", !0),
+			l.slider ? (h(), i("div", xe, [s(b(H), {
+				class: "slider-root",
+				"model-value": j.value == null ? [u.value] : [j.value],
+				min: u.value,
+				max: d.value,
+				step: f.value,
+				"onUpdate:modelValue": B,
+				onValueCommit: G
+			}, {
+				default: w(() => [s(b(W), { class: "slider-track" }, {
+					default: w(() => [s(b(V), { class: "slider-range" })]),
+					_: 1
+				}), s(b(U), {
+					class: "slider-thumb",
+					"aria-label": l.label
+				}, {
+					default: w(() => [a("span", Se, y(p(j.value)), 1)]),
+					_: 1
+				}, 8, ["aria-label"])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"min",
+				"max",
+				"step"
+			]), a("div", Ce, [a("span", null, y(p(u.value)), 1), a("span", null, y(p(d.value)), 1)])])) : r("", !0)
+		])) : (h(), i("div", we, [
+			l.slider ? r("", !0) : (h(), i("span", Te, [T(a("input", {
+				type: "text",
+				inputmode: l.numberType === "integer" ? "numeric" : "decimal",
+				"onUpdate:modelValue": t[4] ||= (e) => A.value = e,
+				placeholder: l.placeholder,
+				"aria-invalid": !!M.value,
+				onBlur: P,
+				onKeydown: [
+					E(z, ["enter"]),
+					t[5] ||= E((e) => q(e, 1), ["up"]),
+					t[6] ||= E((e) => q(e, -1), ["down"])
+				],
+				onInput: t[7] ||= (e) => {
+					N(e), I();
+				},
+				onChange: L
+			}, null, 40, Ee), [[S, A.value]]), l.percent ? (h(), i("span", De, "%")) : r("", !0)])),
+			M.value ? (h(), i("span", Oe, y(M.value), 1)) : r("", !0),
+			l.slider ? (h(), i("div", ke, [s(b(H), {
+				class: "slider-root",
+				"model-value": j.value == null ? [u.value] : [j.value],
+				min: u.value,
+				max: d.value,
+				step: f.value,
+				"onUpdate:modelValue": B,
+				onValueCommit: G
+			}, {
+				default: w(() => [s(b(W), { class: "slider-track" }, {
+					default: w(() => [s(b(V), { class: "slider-range" })]),
+					_: 1
+				}), s(b(U), {
+					class: "slider-thumb",
+					"aria-label": l.label
+				}, {
+					default: w(() => [a("span", Ae, y(p(j.value)), 1)]),
+					_: 1
+				}, 8, ["aria-label"])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"min",
+				"max",
+				"step"
+			]), a("div", je, [a("span", null, y(p(u.value)), 1), a("span", null, y(p(d.value)), 1)])])) : r("", !0)
+		]));
+	}
+}), [["__scopeId", "data-v-cecbdacc"]]), Ne = { class: "select-box" }, Pe = ["id"], Fe = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "SelectBox",
+	props: /* @__PURE__ */ u({
+		label: {},
+		ariaLabel: {},
+		options: {},
+		placeholder: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(t) {
+		let c = x(t, "modelValue"), l = t, u = se();
+		return (d, f) => (h(), i("div", Ne, [t.label ? (h(), i("label", {
+			key: 0,
+			id: `${b(u)}-label`,
+			class: "select-label"
+		}, y(t.label), 9, Pe)) : r("", !0), s(b(L), {
+			modelValue: c.value,
+			"onUpdate:modelValue": f[0] ||= (e) => c.value = e
+		}, {
+			default: w(() => [s(b(R), {
+				class: "select-trigger",
+				"aria-labelledby": l.label ? `${b(u)}-label` : void 0,
+				"aria-label": l.label ? void 0 : l.ariaLabel
+			}, {
+				default: w(() => [s(b(z), { placeholder: t.placeholder }, null, 8, ["placeholder"]), f[1] ||= a("span", {
+					class: "select-icon",
+					"aria-hidden": "true"
+				}, [a("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, [a("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]),
+				_: 1
+			}, 8, ["aria-labelledby", "aria-label"]), s(b(I), null, {
+				default: w(() => [s(b(M), {
+					class: "select-content",
+					position: "popper",
+					"side-offset": 4,
+					"body-lock": !1
+				}, {
+					default: w(() => [s(b(B), { class: "select-viewport" }, {
+						default: w(() => [(h(!0), i(e, null, _(t.options, (e) => (h(), n(b(N), {
+							key: e.value,
+							value: e.value,
+							class: "select-item"
+						}, {
+							default: w(() => [s(b(F), null, {
+								default: w(() => [o(y(e.label), 1)]),
+								_: 2
+							}, 1024), s(b(P), { class: "select-indicator" }, {
+								default: w(() => [...f[2] ||= [a("svg", {
+									width: "12",
+									height: "12",
+									viewBox: "0 0 12 12",
+									fill: "none",
+									stroke: "currentColor",
+									"stroke-width": "2",
+									"stroke-linecap": "round",
+									"stroke-linejoin": "round"
+								}, [a("path", { d: "M2 6L5 9L10 3" })], -1)]]),
+								_: 1
+							})]),
+							_: 2
+						}, 1032, ["value"]))), 128))]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["modelValue"])]));
+	}
+}), [["__scopeId", "data-v-fa2f5d92"]]), Ie = ["data-collapsed"], Le = { class: "SidebarRail" }, Re = { class: "Sidebar" }, ze = { class: "SidebarScroll" }, Be = { class: "SidebarHeader" }, Ve = { class: "Main" }, He = { class: "TabsBar" }, Ue = { class: "TabsBarEnd" }, We = { class: "MainScroll" }, Ge = { class: "MainContent" }, Ke = { class: "Topbar" }, qe = { class: "TopbarEnd" }, Je = { class: "MainScroll" }, Ye = { class: "MainContent" }, Xe = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "SidebarLayout",
+	props: /* @__PURE__ */ u({
+		hideTopbar: { type: Boolean },
+		tabs: {}
+	}, {
+		tab: {},
+		tabModifiers: {}
+	}),
+	emits: ["update:tab"],
+	setup(c) {
+		let u = l(), d = u?.appContext.config.globalProperties.$router, f = u?.appContext.config.globalProperties.$route, S = c, T = x(c, "tab"), E = window.matchMedia("(max-width: 767px)"), D = g(E.matches), O = g(E.matches);
+		function k(e) {
+			D.value = e.matches, O.value = e.matches;
+		}
+		p(() => {
+			E.addEventListener("change", k);
+		}), m(() => {
+			E.removeEventListener("change", k);
+		});
+		function A() {
+			O.value = !O.value;
+		}
+		let j = t(() => !!d && S.tabs?.some((e) => e.to)), M = t({
+			get() {
+				return T.value ?? S.tabs?.[0]?.value;
+			},
+			set(e) {
+				if (e && (T.value = e, j.value && d)) {
+					let t = S.tabs?.find((t) => t.value === e);
+					t?.to && d.push(t.to);
+				}
+			}
+		});
+		return f && C(() => f.path, () => {
+			if (j.value) {
+				let e = S.tabs?.find((e) => e.to === f.path);
+				e && (T.value = e.value);
+			}
+		}, { immediate: !0 }), (t, l) => (h(), i("div", {
+			class: "SidebarLayout",
+			"data-collapsed": O.value
+		}, [a("div", Le, [a("aside", Re, [a("div", ze, [a("div", Be, [a("button", {
+			type: "button",
+			class: "Toggle",
+			"aria-label": "Collapse sidebar",
+			title: "Collapse sidebar",
+			onClick: A
+		}, [s(Z, {
+			icon: "keyboard_double_arrow_left",
+			size: "sm"
+		})])]), v(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
+			type: "button",
+			class: "Toggle Toggle--expand",
+			"aria-label": "Expand sidebar",
+			title: "Expand sidebar",
+			onClick: A
+		}, [s(Z, {
+			icon: "keyboard_double_arrow_right",
+			size: "sm"
+		})])]), a("main", Ve, [c.tabs?.length ? (h(), n(b(Y), {
+			key: 0,
+			"model-value": M.value,
+			class: "TabsLayout",
+			"onUpdate:modelValue": l[0] ||= (e) => M.value = e
+		}, {
+			default: w(() => [a("div", He, [
+				D.value && O.value ? (h(), i("button", {
+					key: 0,
+					type: "button",
+					class: "Toggle",
+					"aria-label": "Expand sidebar",
+					title: "Expand sidebar",
+					onClick: A
+				}, [s(Z, {
+					icon: "keyboard_double_arrow_right",
+					size: "sm"
+				})])) : r("", !0),
+				s(b(J), {
+					class: "TabsList",
+					"aria-label": "Tabs"
+				}, {
+					default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(ee), {
+						key: e.value,
+						value: e.value,
+						class: "TabsTrigger"
+					}, {
+						default: w(() => [o(y(e.label), 1)]),
+						_: 2
+					}, 1032, ["value"]))), 128)), s(b(q), {
+						class: "TabsIndicator",
+						style: {
+							width: "var(--reka-tabs-indicator-size)",
+							left: "var(--reka-tabs-indicator-position)"
+						}
+					})]),
+					_: 1
+				}),
+				a("div", Ue, [v(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n($, { key: 0 }))])
+			]), a("div", We, [a("div", Ge, [v(t.$slots, "default", {}, void 0, !0)])])]),
+			_: 3
+		}, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", Ke, [D.value && O.value ? (h(), i("button", {
+			key: 0,
+			type: "button",
+			class: "Toggle",
+			"aria-label": "Expand sidebar",
+			title: "Expand sidebar",
+			onClick: A
+		}, [s(Z, {
+			icon: "keyboard_double_arrow_right",
+			size: "sm"
+		})])) : r("", !0), a("div", qe, [v(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n($, { key: 0 }))])]), a("div", Je, [a("div", Ye, [v(t.$slots, "default", {}, void 0, !0)])])], 64))])], 8, Ie));
+	}
+}), [["__scopeId", "data-v-b7035d57"]]), Ze = ["data-size", "aria-label"], Qe = /* @__PURE__ */ c({
+	__name: "Spinner",
+	props: {
+		size: { default: "sm" },
+		label: {}
+	},
+	setup(e) {
+		return (t, n) => (h(), i("span", {
+			class: "Spinner",
+			"data-size": e.size,
+			role: "status",
+			"aria-label": e.label ?? "Loading"
+		}, null, 8, Ze));
+	}
+}), $e = {
+	key: 0,
+	class: "input-label"
+}, et = { class: "input-label-row" }, tt = ["placeholder"], nt = { key: 1 }, rt = ["placeholder"], it = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "TextInput",
+	props: /* @__PURE__ */ u({
+		label: {},
+		placeholder: {},
+		hint: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = x(e, "modelValue"), s = g(t.value);
+		C(t, (e) => {
+			s.value = e;
+		});
+		function c() {
+			t.value = s.value;
+		}
+		let l = e;
+		return (e, t) => l.label ? (h(), i("label", $e, [a("span", et, [o(y(l.label) + " ", 1), l.hint ? (h(), n(Q, {
+			key: 0,
+			text: l.hint
+		}, null, 8, ["text"])) : r("", !0)]), T(a("input", {
+			type: "text",
+			"onUpdate:modelValue": t[0] ||= (e) => s.value = e,
+			placeholder: l.placeholder,
+			onBlur: c,
+			onKeydown: E(c, ["enter"])
+		}, null, 40, tt), [[S, s.value]])])) : (h(), i("div", nt, [T(a("input", {
+			type: "text",
+			"onUpdate:modelValue": t[1] ||= (e) => s.value = e,
+			placeholder: l.placeholder,
+			onBlur: c,
+			onKeydown: E(c, ["enter"])
+		}, null, 40, rt), [[S, s.value]])]));
+	}
+}), [["__scopeId", "data-v-2810bbb3"]]), at = { class: "toggle" }, ot = ["for"], st = /* @__PURE__ */ X(/* @__PURE__ */ c({
+	__name: "Toggle",
+	props: /* @__PURE__ */ u({
+		label: {},
+		hint: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: { type: Boolean },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = x(e, "modelValue"), o = e, c = se();
+		return (l, u) => (h(), i("div", at, [
+			a("label", { for: b(c) }, y(e.label), 9, ot),
+			o.hint ? (h(), n(Q, {
+				key: 0,
+				text: o.hint
+			}, null, 8, ["text"])) : r("", !0),
+			s(b(G), {
+				id: b(c),
+				modelValue: t.value,
+				"onUpdate:modelValue": u[0] ||= (e) => t.value = e,
+				disabled: e.disabled,
+				class: "switch"
+			}, {
+				default: w(() => [s(b(K), { class: "thumb" })]),
+				_: 1
+			}, 8, [
+				"id",
+				"modelValue",
+				"disabled"
+			])
+		]));
+	}
+}), [["__scopeId", "data-v-9916c71e"]]);
+//#endregion
+export { ue as Box, de as Button, fe as Expander, Q as Hint, Z as Icon, $ as LightDarkToggle, Me as NumberInput, Fe as SelectBox, Xe as SidebarLayout, Qe as Spinner, it as TextInput, st as Toggle };