@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/dist/static/index.es.js

@@ -0,0 +1,732 @@
+//#region src/static/escape.ts
+function e(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function t(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+//#endregion
+//#region src/static/classes.ts
+function n(e) {
+	return e.replace(/-([a-z])/g, (e, t) => t.toUpperCase());
+}
+function r(e, t) {
+	let r = [e.base];
+	if (e.kind && typeof t.kind == "string" && r.push(`sk-${t.kind}`), e.size && typeof t.size == "string" && (r.push(`sk-${t.size}`), r.push(`sk-size-${t.size}`)), e.variant && typeof t.variant == "string" && r.push(`sk-${t.variant}`), e.booleanFlags) for (let i of e.booleanFlags) t[n(i)] === !0 && r.push(`sk-${i}`);
+	if (e.listFlags) for (let { prop: n, family: i } of e.listFlags) {
+		let e = t[n];
+		if (Array.isArray(e)) for (let t of e) typeof t == "string" && r.push(`sk-${i}-${t}`);
+	}
+	if (e.singleChoiceFlags) for (let { prop: n, family: i } of e.singleChoiceFlags) {
+		let e = t[n];
+		typeof e == "string" && r.push(`sk-${i}-${e}`);
+	}
+	return r.join(" ");
+}
+//#endregion
+//#region src/static/render.ts
+function i(t, n, i) {
+	let a = [`class="${e(r(t.classSpec, n))}"`];
+	if (t.tag === "button" && a.push("type=\"button\""), t.extraAttrs) for (let [n, r] of Object.entries(t.extraAttrs)) a.push(`${n}="${e(r)}"`);
+	let o = [];
+	if (t.customColorVars) {
+		let { base: r, text: i } = t.customColorVars;
+		r && typeof n.baseColor == "string" && o.push(`${r}: ${e(n.baseColor)};`), i && typeof n.textColor == "string" && o.push(`${i}: ${e(n.textColor)};`);
+	}
+	o.length > 0 && a.push(`style="${o.join(" ")}"`);
+	let s = a.join(" ");
+	return t.void ? `<${t.tag} ${s} />` : `<${t.tag} ${s}>${i}</${t.tag}>`;
+}
+//#endregion
+//#region src/static/specs.ts
+var a = {
+	panel: {
+		tag: "div",
+		classSpec: {
+			base: "sk-panel",
+			kind: !0,
+			size: !0,
+			booleanFlags: ["no-border", "no-decoration"],
+			listFlags: [{
+				prop: "corners",
+				family: "cut"
+			}],
+			singleChoiceFlags: [{
+				prop: "decorationCorner",
+				family: "decoration"
+			}]
+		},
+		customColorVars: {
+			base: "--sk-panel-color-base",
+			text: "--sk-panel-fg"
+		}
+	},
+	card: {
+		tag: "div",
+		classSpec: {
+			base: "sk-card",
+			kind: !0
+		},
+		customColorVars: {
+			base: "--sk-panel-color-base",
+			text: "--sk-panel-fg"
+		}
+	},
+	alert: {
+		tag: "div",
+		classSpec: {
+			base: "sk-alert",
+			kind: !0,
+			booleanFlags: ["subtle"]
+		},
+		extraAttrs: { role: "alert" },
+		customColorVars: {
+			base: "--sk-alert-color-base",
+			text: "--sk-alert-fg"
+		}
+	},
+	divider: {
+		tag: "div",
+		classSpec: {
+			base: "sk-divider",
+			kind: !0,
+			booleanFlags: ["subtle"],
+			singleChoiceFlags: [{
+				prop: "orientation",
+				family: "orientation"
+			}]
+		},
+		extraAttrs: { role: "separator" }
+	},
+	page: {
+		tag: "div",
+		classSpec: {
+			base: "sk-page",
+			booleanFlags: [
+				"flush",
+				"fixed-header",
+				"fixed-footer"
+			]
+		}
+	},
+	group: {
+		tag: "div",
+		classSpec: {
+			base: "sk-group",
+			singleChoiceFlags: [{
+				prop: "orientation",
+				family: "orientation"
+			}]
+		}
+	},
+	skeleton: {
+		tag: "div",
+		classSpec: {
+			base: "sk-skeleton",
+			singleChoiceFlags: [{
+				prop: "variant",
+				family: "shape"
+			}],
+			booleanFlags: ["shimmer", "pulse"]
+		}
+	},
+	progress: {
+		tag: "progress",
+		classSpec: {
+			base: "sk-progress",
+			kind: !0,
+			size: !0,
+			booleanFlags: ["indeterminate"]
+		},
+		void: !0
+	},
+	spinner: {
+		tag: "div",
+		classSpec: {
+			base: "sk-spinner",
+			kind: !0,
+			size: !0
+		}
+	},
+	navBar: {
+		tag: "nav",
+		classSpec: {
+			base: "sk-navbar",
+			kind: !0,
+			booleanFlags: ["sticky"]
+		}
+	},
+	toolbar: {
+		tag: "div",
+		classSpec: {
+			base: "sk-toolbar",
+			kind: !0,
+			singleChoiceFlags: [{
+				prop: "orientation",
+				family: "orientation"
+			}]
+		},
+		extraAttrs: { role: "toolbar" }
+	},
+	sidebar: {
+		tag: "aside",
+		classSpec: {
+			base: "sk-sidebar",
+			kind: !0,
+			booleanFlags: ["dense"]
+		}
+	},
+	breadcrumbs: {
+		tag: "nav",
+		classSpec: {
+			base: "sk-breadcrumbs",
+			kind: !0
+		},
+		extraAttrs: { "aria-label": "Breadcrumbs" }
+	},
+	pagination: {
+		tag: "nav",
+		classSpec: {
+			base: "sk-pagination",
+			kind: !0
+		},
+		extraAttrs: { "aria-label": "Pagination" }
+	},
+	tag: {
+		tag: "span",
+		classSpec: {
+			base: "sk-tag",
+			kind: !0,
+			size: !0,
+			variant: !0,
+			booleanFlags: ["removable"]
+		}
+	},
+	avatar: {
+		tag: "div",
+		classSpec: {
+			base: "sk-avatar",
+			kind: !0,
+			size: !0,
+			singleChoiceFlags: [{
+				prop: "shape",
+				family: "shape"
+			}]
+		}
+	},
+	field: {
+		tag: "div",
+		classSpec: {
+			base: "sk-field",
+			booleanFlags: ["has-error"],
+			singleChoiceFlags: [{
+				prop: "labelPosition",
+				family: "label-position"
+			}]
+		}
+	},
+	table: {
+		tag: "table",
+		classSpec: {
+			base: "sk-table",
+			kind: !0,
+			variant: !0,
+			booleanFlags: [
+				"striped",
+				"bordered",
+				"compact",
+				"comfortable"
+			]
+		}
+	},
+	tooltip: {
+		tag: "div",
+		classSpec: {
+			base: "sk-tooltip",
+			kind: !0,
+			variant: !0,
+			singleChoiceFlags: [{
+				prop: "placement",
+				family: "placement"
+			}]
+		},
+		extraAttrs: { role: "tooltip" }
+	},
+	input: {
+		tag: "input",
+		classSpec: {
+			base: "sk-input",
+			kind: !0,
+			size: !0
+		},
+		void: !0
+	},
+	textarea: {
+		tag: "textarea",
+		classSpec: {
+			base: "sk-textarea",
+			kind: !0,
+			size: !0
+		}
+	},
+	select: {
+		tag: "select",
+		classSpec: {
+			base: "sk-select",
+			kind: !0,
+			size: !0
+		}
+	},
+	slider: {
+		tag: "input",
+		classSpec: {
+			base: "sk-slider",
+			kind: !0,
+			size: !0,
+			singleChoiceFlags: [{
+				prop: "orientation",
+				family: "orientation"
+			}]
+		},
+		void: !0,
+		extraAttrs: { type: "range" }
+	},
+	colorPicker: {
+		tag: "input",
+		classSpec: {
+			base: "sk-color-picker",
+			size: !0
+		},
+		void: !0,
+		extraAttrs: { type: "color" }
+	},
+	dropdown: {
+		tag: "details",
+		classSpec: {
+			base: "sk-dropdown",
+			kind: !0,
+			size: !0
+		}
+	}
+};
+//#endregion
+//#region src/static/components/panel.ts
+function o(e = {}, t = "") {
+	return i(a.panel, e, t);
+}
+//#endregion
+//#region src/static/components/card.ts
+function s(e = {}, t = "") {
+	return i(a.card, e, t);
+}
+//#endregion
+//#region src/static/components/alert.ts
+var c = new Set([
+	"info",
+	"success",
+	"warning",
+	"danger"
+]), l = {
+	info: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><circle cx=\"12\" cy=\"8\" r=\"0.5\" fill=\"currentColor\"></circle></svg>",
+	success: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path><polyline points=\"22 4 12 14.01 9 11.01\"></polyline></svg>",
+	warning: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"></path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line><circle cx=\"12\" cy=\"17\" r=\"0.5\" fill=\"currentColor\"></circle></svg>",
+	danger: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line></svg>"
+};
+function u(t = {}, n = "") {
+	let i = t.kind ?? "info", a = [`class="${e(r({
+		base: "sk-alert",
+		kind: !0,
+		booleanFlags: ["subtle"]
+	}, {
+		...t,
+		kind: i
+	}))}"`, "role=\"alert\""], o = [];
+	typeof t.baseColor == "string" && o.push(`--sk-alert-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && o.push(`--sk-alert-fg: ${e(t.textColor)};`), o.length > 0 && a.push(`style="${o.join(" ")}"`);
+	let s = "";
+	if (t.icon !== !1) {
+		let e = typeof t.icon == "string" ? t.icon : c.has(i) ? l[i] ?? "" : null;
+		e !== null && (s = `<div class="sk-alert-icon">${e}</div>`);
+	}
+	let u = `<div class="sk-alert-content">${n}</div>`;
+	return `<div ${a.join(" ")}>${s}${u}</div>`;
+}
+//#endregion
+//#region src/static/components/divider.ts
+function d(t = {}) {
+	let n = t.orientation ?? "horizontal", r = t.kind ?? "neutral", i = t.size ?? "md", a = [
+		"sk-divider",
+		`sk-${n}`,
+		`sk-${r}`,
+		`sk-${i}`
+	];
+	return t.variant === "subtle" && a.push("sk-subtle"), `<hr class="${e(a.join(" "))}" role="separator">`;
+}
+//#endregion
+//#region src/static/components/page.ts
+function f(e = {}, t = "") {
+	return i(a.page, e, t);
+}
+//#endregion
+//#region src/static/components/group.ts
+function p(e = {}, t = "") {
+	return i(a.group, e, t);
+}
+//#endregion
+//#region src/static/components/skeleton.ts
+function m(t = {}) {
+	let n = t.variant ?? "text", r = t.animation ?? "shimmer", i = ["sk-skeleton", `sk-${n}`];
+	r !== "none" && i.push(`sk-${r}`);
+	let a = [`class="${e(i.join(" "))}"`], o = [], s = t.height ?? ((n === "circular" || n === "square") && t.width ? t.width : void 0);
+	return typeof t.width == "string" && o.push(`width: ${e(t.width)};`), typeof s == "string" && o.push(`height: ${e(s)};`), o.length > 0 && a.push(`style="${o.join(" ")}"`), `<div ${a.join(" ")}></div>`;
+}
+//#endregion
+//#region src/static/components/progress.ts
+function h(e = {}, t = "") {
+	return i(a.progress, e, t);
+}
+//#endregion
+//#region src/static/components/spinner.ts
+function g(e) {
+	switch (e) {
+		case "circular": return "<div class=\"sk-spinner-circular\"><div class=\"sk-arc sk-arc-large\"></div><div class=\"sk-arc sk-arc-small\"></div></div>";
+		case "dots": return "<div class=\"sk-spinner-dots\"><div class=\"sk-dot\"></div><div class=\"sk-dot\"></div><div class=\"sk-dot\"></div></div>";
+		case "crosshair": return "<div class=\"sk-crosshair-loader\"></div>";
+	}
+}
+function _(t = {}) {
+	let n = t.kind ?? "primary", r = t.size ?? "md", i = t.variant ?? "circular", a = [
+		`class="${e([
+			"sk-spinner",
+			`sk-${n}`,
+			`sk-${r}`,
+			`sk-variant-${i}`
+		].join(" "))}"`,
+		"role=\"status\"",
+		"aria-live=\"polite\"",
+		"aria-label=\"Loading\""
+	];
+	return typeof t.color == "string" && a.push(`style="--sk-spinner-color: ${e(t.color)};"`), `<div ${a.join(" ")}>${g(i)}</div>`;
+}
+//#endregion
+//#region src/static/components/navBar.ts
+function v(t = {}, n = "") {
+	let i = t.sticky !== !1, a = r({
+		base: "sk-navbar",
+		kind: !0
+	}, t), o = [`class="${e(i ? `${a} sk-sticky` : a)}"`], s = [];
+	typeof t.baseColor == "string" && s.push(`--sk-navbar-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && s.push(`--sk-navbar-fg: ${e(t.textColor)};`), s.length > 0 && o.push(`style="${s.join(" ")}"`);
+	let c = "";
+	t.leading && (c += `<div class="sk-navbar-leading">${t.leading}</div>`), t.brand && (c += `<div class="sk-navbar-brand">${t.brand}</div>`), n && (c += `<div class="sk-navbar-nav">${n}</div>`), t.actions && (c += `<div class="sk-navbar-actions">${t.actions}</div>`);
+	let l = `<div class="sk-navbar-content">${c}</div>`;
+	return `<nav ${o.join(" ")}>${l}</nav>`;
+}
+//#endregion
+//#region src/static/components/toolbar.ts
+var y = [
+	"top-left",
+	"top-right",
+	"bottom-right",
+	"bottom-left"
+];
+function b(t = {}, n = "") {
+	let r = t.kind, i = t.orientation ?? "horizontal", a = t.corners ?? y, o = ["sk-toolbar"];
+	typeof r == "string" && o.push(`sk-${r}`), o.push(`sk-${i}`);
+	for (let e of a) o.push(`sk-cut-${e}`);
+	let s = [`class="${e(o.join(" "))}"`, "role=\"toolbar\""], c = [];
+	return typeof t.baseColor == "string" && c.push(`--sk-toolbar-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && c.push(`--sk-toolbar-fg: ${e(t.textColor)};`), c.length > 0 && s.push(`style="${c.join(" ")}"`), `<div ${s.join(" ")}>${n}</div>`;
+}
+//#endregion
+//#region src/static/components/sidebar.ts
+function x(t = {}, n = "") {
+	let r = t.kind ?? "neutral", i = t.side ?? "left", a = ["sk-sidebar", `sk-${r}`];
+	i === "right" && a.push("sk-sidebar-right"), t.dense === !0 && a.push("sk-dense");
+	let o = i === "right" ? "bottom-left" : "bottom-right", s = [
+		"sk-panel",
+		`sk-${r}`,
+		"sk-md",
+		`sk-cut-${o}`,
+		`sk-decoration-${o}`,
+		"sk-sidebar-panel"
+	], c = `class="${e(a.join(" "))}"`, l = `class="${e(s.join(" "))}"`, u = [];
+	return typeof t.baseColor == "string" && u.push(`--sk-sidebar-color-base: ${e(t.baseColor)};`), `<aside ${c}${u.length > 0 ? ` style="${u.join(" ")}"` : ""}><div ${l}>${`<div class="sk-panel-scroll-content"><nav class="sk-sidebar-nav">${n}</nav></div>`}</div></aside>`;
+}
+//#endregion
+//#region src/static/components/breadcrumbs.ts
+function S(e = {}, t = "") {
+	return i(a.breadcrumbs, e, t);
+}
+//#endregion
+//#region src/static/components/pagination.ts
+function C(e = {}, t = "") {
+	return i(a.pagination, e, t);
+}
+//#endregion
+//#region src/static/components/tag.ts
+var w = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>";
+function T(t = {}, n = "") {
+	let r = t.kind ?? "neutral", i = t.variant ?? "solid", a = t.size ?? "md", o = [
+		"sk-tag",
+		`sk-${r}`,
+		`sk-${i}`,
+		`sk-${a}`
+	];
+	t.removable && o.push("sk-removable");
+	let s = [`class="${e(o.join(" "))}"`], c = [];
+	typeof t.baseColor == "string" && c.push(`--sk-tag-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && c.push(`--sk-tag-fg: ${e(t.textColor)};`), c.length > 0 && s.push(`style="${c.join(" ")}"`);
+	let l = `<span class="sk-tag-content">${n}</span>`, u = t.removable ? `<button type="button" class="sk-tag-remove" aria-label="Remove">${w}</button>` : "";
+	return `<span ${s.join(" ")}>${l}${u}</span>`;
+}
+//#endregion
+//#region src/static/components/avatar.ts
+var E = "<svg class=\"sk-avatar-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"></path></svg>";
+function D(t = {}) {
+	let n = t.kind ?? "neutral", r = t.size ?? "md", i = [`class="${e([
+		"sk-avatar",
+		`sk-${n}`,
+		`sk-${r}`
+	].join(" "))}"`], a = [];
+	typeof t.baseColor == "string" && a.push(`--sk-avatar-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && a.push(`--sk-avatar-fg: ${e(t.textColor)};`), a.length > 0 && i.push(`style="${a.join(" ")}"`);
+	let o;
+	if (t.src) {
+		let n = t.alt ?? "";
+		o = `<img src="${e(t.src)}" alt="${e(n)}" class="sk-avatar-image">`;
+	} else o = t.initials ? `<span class="sk-avatar-initials">${e(t.initials.slice(0, 2).toUpperCase())}</span>` : E;
+	return `<div ${i.join(" ")}>${o}</div>`;
+}
+//#endregion
+//#region src/static/components/field.ts
+function O(t = {}, n = "") {
+	let r = ["sk-field", `sk-label-${t.labelPosition ?? "top"}`];
+	t.error && r.push("sk-has-error");
+	let i = `class="${e(r.join(" "))}"`, a = "";
+	if (t.label) {
+		let n = t.id ? ` for="${e(t.id)}"` : "", r = t.required ? "<span class=\"sk-field-required\">*</span>" : "";
+		a = `<label${n} class="sk-field-label">${e(t.label)}${r}</label>`;
+	}
+	let o = `<div class="sk-field-input-wrapper">${n}</div>`, s = "";
+	t.description && !t.error && (s = `<p${t.id ? ` id="${e(t.id)}-description"` : ""} class="sk-field-description">${e(t.description)}</p>`);
+	let c = "";
+	return t.error && (c = `<p${t.id ? ` id="${e(t.id)}-error"` : ""} class="sk-field-error">${e(t.error)}</p>`), `<div ${i}>${a}${o}${s}${c}</div>`;
+}
+//#endregion
+//#region src/static/components/table.ts
+function k(t = {}, n = "") {
+	let r = t.kind ?? "neutral", i = t.variant ?? "default", a = t.hoverable !== !1, o = t.bordered !== !1, s = t.innerBorders === !0, c = t.subtle === !0, l = t.darkBackground === !0, u = t.striped === !0, d = ["sk-table-wrapper", `sk-table-wrapper-${r}`];
+	l && d.push("sk-dark-background"), c && d.push("sk-subtle");
+	let f = [
+		"sk-table",
+		`sk-${r}`,
+		`sk-${i}`
+	];
+	u && f.push("sk-striped"), a && f.push("sk-hoverable"), o && f.push("sk-bordered"), s || f.push("sk-no-inner-borders"), c && f.push("sk-subtle");
+	let p = [`class="${e(f.join(" "))}"`], m = [];
+	return typeof t.baseColor == "string" && m.push(`--sk-table-color-base: ${e(t.baseColor)};`), typeof t.textColor == "string" && m.push(`--sk-table-fg: ${e(t.textColor)};`), m.length > 0 && p.push(`style="${m.join(" ")}"`), `<div ${`class="${e(d.join(" "))}"`}><table ${p.join(" ")}>${n}</table></div>`;
+}
+//#endregion
+//#region src/static/components/tooltip.ts
+function A(e = {}, t = "") {
+	return i(a.tooltip, e, t);
+}
+//#endregion
+//#region src/static/components/button.ts
+function j(t = {}, n = "") {
+	let i = [`class="${e(r({
+		base: "sk-button",
+		kind: !0,
+		size: !0,
+		variant: !0,
+		booleanFlags: [
+			"loading",
+			"pressed",
+			"dense"
+		]
+	}, t))}"`], a = typeof t.href == "string";
+	if (a) i.push(`href="${e(t.href ?? "")}"`);
+	else {
+		let n = t.type ?? "button";
+		i.push(`type="${e(n)}"`);
+	}
+	t.disabled && i.push(a ? "aria-disabled=\"true\"" : "disabled"), t.loading && i.push("aria-busy=\"true\""), t.pressed && i.push("aria-pressed=\"true\"");
+	let o = a ? "a" : "button", s = `<span class="sk-button-chrome">${n}</span>`;
+	return `<${o} ${i.join(" ")}>${s}</${o}>`;
+}
+//#endregion
+//#region src/static/components/input.ts
+function M(t = {}) {
+	let n = [`class="${e(r({
+		base: "sk-input",
+		kind: !0,
+		size: !0
+	}, t))}"`];
+	for (let r of [
+		"type",
+		"value",
+		"placeholder",
+		"name",
+		"id"
+	]) {
+		let i = t[r];
+		typeof i == "string" && n.push(`${r}="${e(i)}"`);
+	}
+	for (let e of [
+		"disabled",
+		"readonly",
+		"required"
+	]) t[e] === !0 && n.push(e);
+	return `<input ${n.join(" ")} />`;
+}
+//#endregion
+//#region src/static/components/textarea.ts
+function N(t = {}, n = "") {
+	let i = [`class="${e(r({
+		base: "sk-textarea",
+		kind: !0,
+		size: !0
+	}, t))}"`];
+	for (let n of [
+		"placeholder",
+		"name",
+		"id"
+	]) {
+		let r = t[n];
+		typeof r == "string" && i.push(`${n}="${e(r)}"`);
+	}
+	for (let e of [
+		"disabled",
+		"readonly",
+		"required"
+	]) t[e] === !0 && i.push(e);
+	return `<textarea ${i.join(" ")}>${n}</textarea>`;
+}
+//#endregion
+//#region src/static/components/select.ts
+function P(t = {}, n = "") {
+	let i = [`class="${e(r({
+		base: "sk-select",
+		kind: !0,
+		size: !0
+	}, t))}"`];
+	for (let n of ["name", "id"]) {
+		let r = t[n];
+		typeof r == "string" && i.push(`${n}="${e(r)}"`);
+	}
+	for (let e of ["disabled", "required"]) t[e] === !0 && i.push(e);
+	return `<select ${i.join(" ")}>${n}</select>`;
+}
+//#endregion
+//#region src/static/components/slider.ts
+function F(t = {}) {
+	let n = [`class="${e(r({
+		base: "sk-slider",
+		kind: !0,
+		size: !0
+	}, t))}"`, "type=\"range\""];
+	for (let r of [
+		"min",
+		"max",
+		"step",
+		"value",
+		"name"
+	]) {
+		let i = t[r];
+		typeof i == "string" && n.push(`${r}="${e(i)}"`);
+	}
+	return t.disabled === !0 && n.push("disabled"), `<input ${n.join(" ")} />`;
+}
+//#endregion
+//#region src/static/components/colorPicker.ts
+function I(t = {}) {
+	let n = [`class="${e(r({
+		base: "sk-color-picker",
+		size: !0
+	}, t))}"`, "type=\"color\""];
+	for (let r of ["value", "name"]) {
+		let i = t[r];
+		typeof i == "string" && n.push(`${r}="${e(i)}"`);
+	}
+	return t.disabled === !0 && n.push("disabled"), `<input ${n.join(" ")} />`;
+}
+//#endregion
+//#region src/static/components/checkbox.ts
+function L(t = {}, n = "") {
+	let i = r({
+		base: "sk-checkbox",
+		kind: !0,
+		size: !0
+	}, t), a = ["type=\"checkbox\""];
+	t.name && a.push(`name="${e(t.name)}"`), t.checked === !0 && a.push("checked"), t.disabled === !0 && a.push("disabled"), t.required === !0 && a.push("required");
+	let o = `<input ${a.join(" ")} />`, s = `<span class="sk-checkbox-label">${n}</span>`;
+	return `<label class="${e(i)}">${o}<span class="sk-checkbox-box"></span>${s}</label>`;
+}
+//#endregion
+//#region src/static/components/radio.ts
+function R(t = {}, n = "") {
+	let i = r({
+		base: "sk-radio",
+		kind: !0,
+		size: !0
+	}, t), a = ["type=\"radio\""];
+	t.name && a.push(`name="${e(t.name)}"`), t.value !== void 0 && a.push(`value="${e(t.value)}"`), t.checked === !0 && a.push("checked"), t.disabled === !0 && a.push("disabled"), t.required === !0 && a.push("required");
+	let o = `<input ${a.join(" ")} />`, s = `<span class="sk-radio-label">${n}</span>`;
+	return `<label class="${e(i)}">${o}<span class="sk-radio-dot"></span>${s}</label>`;
+}
+//#endregion
+//#region src/static/components/switchInput.ts
+function z(t = {}, n = "") {
+	let i = r({
+		base: "sk-switch",
+		kind: !0,
+		size: !0
+	}, t), a = ["type=\"checkbox\""];
+	t.name && a.push(`name="${e(t.name)}"`), t.checked === !0 && a.push("checked"), t.disabled === !0 && a.push("disabled"), t.required === !0 && a.push("required");
+	let o = `<input ${a.join(" ")} />`, s = `<span class="sk-switch-label">${n}</span>`;
+	return `<label class="${e(i)}">${o}<span class="sk-switch-track"><span class="sk-switch-thumb"></span></span>${s}</label>`;
+}
+//#endregion
+//#region src/static/components/numberInput.ts
+function B(t = {}) {
+	let n = r({
+		base: "sk-number-input-wrapper",
+		kind: !0,
+		size: !0
+	}, t), i = ["class=\"sk-number-input-field\"", "type=\"number\""];
+	for (let n of [
+		"value",
+		"min",
+		"max",
+		"step",
+		"name",
+		"placeholder"
+	]) {
+		let r = t[n];
+		typeof r == "string" && i.push(`${n}="${e(r)}"`);
+	}
+	for (let e of [
+		"disabled",
+		"readonly",
+		"required"
+	]) t[e] === !0 && i.push(e);
+	let a = `<input ${i.join(" ")} />`;
+	return `<div class="${e(n)}">${a}</div>`;
+}
+//#endregion
+//#region src/static/components/tagsInput.ts
+function V(t = {}, n = "") {
+	return `<div class="${e(r({
+		base: "sk-tags-input",
+		kind: !0,
+		size: !0
+	}, t))}">${n}</div>`;
+}
+//#endregion
+//#region src/static/components/dropdown.ts
+function H(t, n = "") {
+	let i = [`class="${e(r({
+		base: "sk-dropdown",
+		kind: !0,
+		size: !0
+	}, t))}"`];
+	return t.open && i.push("open"), `<details ${i.join(" ")}><summary>${e(t.summary)}</summary>${n}</details>`;
+}
+//#endregion
+export { u as alert, D as avatar, S as breadcrumbs, j as button, s as card, L as checkbox, I as colorPicker, r as composeClasses, d as divider, H as dropdown, e as escapeAttr, O as field, p as group, M as input, v as navBar, B as numberInput, f as page, C as pagination, o as panel, h as progress, R as radio, i as render, P as select, x as sidebar, m as skeleton, F as slider, _ as spinner, z as switchInput, k as table, T as tag, V as tagsInput, t as text, N as textarea, b as toolbar, A as tooltip };