@filipgutica/ui 0.3.0 → 1.0.0

package/dist/index.js

@@ -1,8 +1,9 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, inject as c, normalizeStyle as l, openBlock as u, provide as d, renderSlot as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
-import { CheckboxIndicator as g, CheckboxRoot as _, DialogClose as v, DialogContent as y, DialogDescription as b, DialogOverlay as x, DialogPortal as S, DialogRoot as C, DialogTitle as w, Primitive as T, ProgressIndicator as E, ProgressRoot as D } from "reka-ui";
+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, inject as l, mergeModels as u, mergeProps as d, normalizeStyle as f, openBlock as p, provide as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, shallowRef as ee, toDisplayString as y, unref as b, useModel as x, useSlots as S, watch as te, withCtx as C } from "vue";
+import { CheckboxIndicator as w, CheckboxRoot as T, DialogClose as E, DialogContent as D, DialogDescription as O, DialogOverlay as k, DialogPortal as A, DialogRoot as j, DialogTitle as M, Primitive as N, ProgressIndicator as P, ProgressRoot as F, RadioGroupItem as I, RadioGroupRoot as L, SliderRange as R, SliderRoot as z, SliderThumb as B, SliderTrack as V } from "reka-ui";
+import { useTimeoutFn as H } from "@vueuse/core";
 //#endregion
 //#region src/components/UiButton.vue
-var O = /* @__PURE__ */ s({
+var U = /* @__PURE__ */ c({
 	__name: "UiButton",
 	props: {
 		disabled: {
@@ -13,12 +14,12 @@ var O = /* @__PURE__ */ s({
 			type: Boolean,
 			default: !1
 		},
-		size: { default: "default" },
+		size: { default: "md" },
 		type: { default: "button" },
 		variant: { default: "primary" }
 	},
 	setup(e) {
-		return (n, r) => (u(), t(m(T), {
+		return (t, r) => (p(), n(b(N), {
 			as: "button",
 			class: "fg-button",
 			"data-size": e.size,
@@ -27,7 +28,7 @@ var O = /* @__PURE__ */ s({
 			disabled: e.disabled || e.loading,
 			type: e.type
 		}, {
-			default: h(() => [f(n.$slots, "default")]),
+			default: C(() => [_(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"data-size",
@@ -37,34 +38,191 @@ var O = /* @__PURE__ */ s({
 			"type"
 		]));
 	}
-}), k = /* @__PURE__ */ s({
+}), W = { class: "fg-card" }, G = {
+	key: 0,
+	class: "fg-card__header"
+}, K = {
+	key: 1,
+	class: "fg-card__actions"
+}, q = {
+	key: 1,
+	class: "fg-card__body"
+}, J = {
+	key: 2,
+	class: "fg-card__footer"
+}, Y = /* @__PURE__ */ c({
+	__name: "UiCard",
+	props: {
+		title: { default: () => void 0 },
+		titleTag: { default: "h3" }
+	},
+	setup(e) {
+		let t = S();
+		return (a, s) => (p(), i("div", W, [
+			e.title || t.title || t.actions ? (p(), i("header", G, [e.title || t.title ? (p(), n(v(e.titleTag), {
+				key: 0,
+				class: "fg-card__title"
+			}, {
+				default: C(() => [_(a.$slots, "title", {}, () => [o(y(e.title), 1)])]),
+				_: 3
+			})) : r("", !0), t.actions ? (p(), i("div", K, [_(a.$slots, "actions")])) : r("", !0)])) : r("", !0),
+			t.default ? (p(), i("div", q, [_(a.$slots, "default")])) : r("", !0),
+			t.footer ? (p(), i("footer", J, [_(a.$slots, "footer")])) : r("", !0)
+		]));
+	}
+}), X = ["data-wrap", "data-line-numbers"], Z = { class: "fg-code-block__header" }, ne = { class: "fg-code-block__title" }, re = {
+	key: 0,
+	class: "fg-code-block__language"
+}, ie = { class: "fg-code-block__actions" }, ae = ["disabled"], oe = ["aria-label"], se = {
+	key: 0,
+	class: "fg-code-block__number",
+	"aria-hidden": "true"
+}, ce = { class: "fg-code-block__text" }, le = {
+	class: "fg-code-block__status",
+	role: "status"
+}, ue = /* @__PURE__ */ c({
+	__name: "UiCodeBlock",
+	props: {
+		code: {},
+		language: { default: "text" },
+		title: { default: "" },
+		copyable: {
+			type: Boolean,
+			default: !0
+		},
+		lineNumbers: {
+			type: Boolean,
+			default: !1
+		},
+		wrap: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let s = ee(), c = h(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
+			vue: "vue",
+			ts: "typescript",
+			typescript: "typescript",
+			js: "javascript",
+			javascript: "javascript",
+			json: "json",
+			css: "css",
+			html: "html",
+			bash: "bash",
+			sh: "bash",
+			shell: "bash"
+		};
+		te(() => [n.code, n.language], async ([e, t], n, r) => {
+			let i = !1;
+			r(() => {
+				i = !0;
+			}), s.value = void 0, c.value = "";
+			let a = t.trim().toLowerCase(), o = Object.hasOwn(u, a) ? u[a] : void 0;
+			if (o) try {
+				let { highlightCode: t } = await import("./code-highlight-BuTmXL3w.js");
+				if (i) return;
+				let n = await t({
+					code: e,
+					language: o
+				});
+				if (i) return;
+				let r = e.split("\n");
+				s.value = r.map((e, t) => {
+					let r = n[t] ?? [];
+					return e.endsWith("\r") ? [...r, { content: "\r" }] : r;
+				});
+			} catch {
+				i || (c.value = "Syntax highlighting unavailable. Showing plain text.");
+			}
+		}, { immediate: !0 });
+		let d = h(!1), { start: m } = H(() => {
+			d.value = !1;
+		}, 1500, { immediate: !1 }), v = h(!1), b = h(""), x = async () => {
+			if (b.value = "", d.value = !1, typeof navigator > "u" || !navigator.clipboard?.writeText) {
+				b.value = "Clipboard unavailable. Select the code to copy it.";
+				return;
+			}
+			v.value = !0;
+			try {
+				await navigator.clipboard.writeText(n.code), d.value = !0, m();
+			} catch {
+				b.value = "Could not copy. Select the code to copy it.";
+			} finally {
+				v.value = !1;
+			}
+		};
+		return (t, s) => (p(), i("div", {
+			class: "fg-code-block",
+			"data-wrap": n.wrap,
+			"data-line-numbers": n.lineNumbers
+		}, [
+			a("div", Z, [
+				a("span", ne, y(n.title || n.language), 1),
+				n.title ? (p(), i("span", re, y(n.language), 1)) : r("", !0),
+				a("div", ie, [_(t.$slots, "actions"), n.copyable ? (p(), i("button", {
+					key: 0,
+					type: "button",
+					class: "fg-code-block__copy",
+					disabled: v.value,
+					"aria-label": "Copy code",
+					onClick: x
+				}, [s[0] ||= a("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"aria-hidden": "true"
+				}, [a("rect", {
+					x: "8",
+					y: "8",
+					width: "12",
+					height: "13",
+					rx: "2"
+				}), a("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" })], -1), o(" " + y(d.value && !b.value ? "Copied" : "Copy"), 1)], 8, ae)) : r("", !0)])
+			]),
+			a("pre", {
+				class: "fg-code-block__pre",
+				tabindex: "0",
+				"aria-label": n.title || `${n.language} code`
+			}, [a("code", null, [(p(!0), i(e, null, g(l.value, (t, s) => (p(), i("span", {
+				key: s,
+				class: "fg-code-block__line"
+			}, [n.lineNumbers ? (p(), i("span", se, y(s + 1), 1)) : r("", !0), a("span", ce, [(p(!0), i(e, null, g(t, (e, t) => (p(), i("span", {
+				key: t,
+				style: f({ color: e.color })
+			}, y(e.content), 5))), 128)), o(y(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, oe),
+			a("span", le, y(b.value || (d.value ? "Code copied to clipboard." : c.value)), 1)
+		], 8, X));
+	}
+}), de = /* @__PURE__ */ c({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (n, r) => (u(), t(m(T), {
+		return (t, r) => (p(), n(b(N), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
 			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
 		}, {
-			default: h(() => [f(n.$slots, "default")]),
+			default: C(() => [_(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), A = /* @__PURE__ */ s({
+}), fe = /* @__PURE__ */ c({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (n, r) => (u(), t(m(T), {
+		return (t, r) => (p(), n(b(N), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
 		}, {
-			default: h(() => [f(n.$slots, "default")]),
+			default: C(() => [_(t.$slots, "default")]),
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), j = ["data-disabled"], M = { class: "fg-checkbox__label" }, N = /* @__PURE__ */ s({
+}), pe = ["data-size", "data-disabled"], me = { class: "fg-checkbox__label" }, he = /* @__PURE__ */ c({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -74,70 +232,72 @@ var O = /* @__PURE__ */ s({
 		modelValue: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		size: { default: "md" }
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = t, s = (e) => {
+		let n = t, r = (e) => {
 			n("update:modelValue", e === !0);
 		};
-		return (t, n) => (u(), r("label", {
+		return (t, n) => (p(), i("label", {
 			class: "fg-checkbox",
+			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [o(m(_), {
+		}, [s(b(T), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
-			"onUpdate:modelValue": s
+			"onUpdate:modelValue": r
 		}, {
-			default: h(() => [o(m(g), { class: "fg-checkbox__indicator" }, {
-				default: h(() => [...n[0] ||= [a("✓", -1)]]),
+			default: C(() => [s(b(w), { class: "fg-checkbox__indicator" }, {
+				default: C(() => [...n[0] ||= [o("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), i("span", M, [f(t.$slots, "default")])], 8, j));
+		}, 8, ["disabled", "model-value"]), a("span", me, [_(t.$slots, "default")])], 8, pe));
 	}
-}), P = { class: "fg-dialog__header" }, F = { class: "fg-dialog__body" }, I = {
+}), ge = { class: "fg-dialog__header" }, _e = { class: "fg-dialog__body" }, ve = {
 	key: 0,
 	class: "fg-dialog__footer"
-}, L = /* @__PURE__ */ s({
+}, ye = /* @__PURE__ */ c({
 	__name: "UiDialog",
 	props: {
-		description: {},
+		description: { default: () => void 0 },
 		open: { type: Boolean },
 		title: {}
 	},
 	emits: ["update:open"],
-	setup(e, { emit: s }) {
-		let c = s;
-		return (s, l) => (u(), t(m(C), {
+	setup(e, { emit: t }) {
+		let c = t;
+		return (t, l) => (p(), n(b(j), {
 			open: e.open,
 			"onUpdate:open": l[0] ||= (e) => c("update:open", e)
 		}, {
-			default: h(() => [o(m(S), null, {
-				default: h(() => [o(m(x), { class: "fg-dialog__overlay" }), o(m(y), {
+			default: C(() => [s(b(A), null, {
+				default: C(() => [s(b(k), { class: "fg-dialog__overlay" }), s(b(D), {
 					class: "fg-dialog__content",
 					"aria-modal": "true"
 				}, {
-					default: h(() => [
-						i("div", P, [i("div", null, [o(m(w), { class: "fg-dialog__title" }, {
-							default: h(() => [a(p(e.title), 1)]),
+					default: C(() => [
+						a("div", ge, [a("div", null, [s(b(M), { class: "fg-dialog__title" }, {
+							default: C(() => [o(y(e.title), 1)]),
 							_: 1
-						}), e.description ? (u(), t(m(b), {
+						}), e.description ? (p(), n(b(O), {
 							key: 0,
 							class: "fg-dialog__description"
 						}, {
-							default: h(() => [a(p(e.description), 1)]),
+							default: C(() => [o(y(e.description), 1)]),
 							_: 1
-						})) : n("", !0)]), o(m(v), {
+						})) : r("", !0)]), s(b(E), {
 							class: "fg-dialog__close",
 							"aria-label": "Close dialog"
 						}, {
-							default: h(() => [...l[1] ||= [a("×", -1)]]),
+							default: C(() => [...l[1] ||= [o(" × ", -1)]]),
 							_: 1
 						})]),
-						i("div", F, [f(s.$slots, "default")]),
-						s.$slots.footer ? (u(), r("div", I, [f(s.$slots, "footer")])) : n("", !0)
+						a("div", _e, [_(t.$slots, "default")]),
+						t.$slots.footer ? (p(), i("div", ve, [_(t.$slots, "footer")])) : r("", !0)
 					]),
 					_: 3
 				})]),
@@ -146,74 +306,76 @@ var O = /* @__PURE__ */ s({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), R = Symbol("UiFieldContext"), z = ["data-invalid"], B = ["for"], V = ["id"], H = ["id"], U = /* @__PURE__ */ s({
+}), Q = Symbol("UiFieldContext"), be = ["data-invalid"], $ = ["for"], xe = ["id"], Se = ["id"], Ce = /* @__PURE__ */ c({
 	__name: "UiField",
 	props: {
 		controlId: {},
-		description: {},
-		error: {},
+		description: { default: () => void 0 },
+		error: { default: () => void 0 },
 		label: {}
 	},
-	setup(t) {
-		let a = t, o = e(() => a.description && !a.error ? `${a.controlId}-description` : void 0), s = e(() => a.error ? `${a.controlId}-error` : void 0), c = e(() => !!a.error);
-		return d(R, {
-			controlId: e(() => a.controlId),
-			descriptionId: o,
-			errorId: s,
-			invalid: c
-		}), (e, a) => (u(), r("div", {
+	setup(e) {
+		let n = t(() => e.description && !e.error ? `${e.controlId}-description` : void 0), o = t(() => e.error ? `${e.controlId}-error` : void 0), s = t(() => !!e.error);
+		return m(Q, {
+			controlId: t(() => e.controlId),
+			descriptionId: n,
+			errorId: o,
+			invalid: s
+		}), (t, s) => (p(), i("div", {
 			class: "fg-field",
-			"data-invalid": t.error ? "true" : void 0
+			"data-invalid": e.error ? "true" : void 0
 		}, [
-			i("label", {
+			a("label", {
 				class: "fg-field__label",
-				for: t.controlId
-			}, p(t.label), 9, B),
-			f(e.$slots, "default", {
-				descriptionId: o.value,
-				errorId: s.value
+				for: e.controlId
+			}, y(e.label), 9, $),
+			_(t.$slots, "default", {
+				descriptionId: n.value,
+				errorId: o.value
 			}),
-			t.description && !t.error ? (u(), r("p", {
+			e.description && !e.error ? (p(), i("p", {
 				key: 0,
-				id: o.value,
+				id: n.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, p(t.description), 9, V)) : n("", !0),
-			t.error ? (u(), r("p", {
+			}, y(e.description), 9, xe)) : r("", !0),
+			e.error ? (p(), i("p", {
 				key: 1,
-				id: s.value,
+				id: o.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, p(t.error), 9, H)) : n("", !0)
-		], 8, z));
+			}, y(e.error), 9, Se)) : r("", !0)
+		], 8, be));
 	}
-}), W = /* @__PURE__ */ s({
+}), we = /* @__PURE__ */ c({
 	__name: "UiInput",
 	props: {
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		id: {},
+		id: { default: () => void 0 },
 		invalid: {
 			type: Boolean,
 			default: !1
 		},
 		modelValue: { default: "" },
+		size: { default: "md" },
 		type: { default: "text" }
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: n }) {
-		let r = c(R, void 0), i = n, a = (e) => {
+	setup(e, { emit: t }) {
+		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLInputElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (n, i) => (u(), t(m(T), {
+		return (t, i) => (p(), n(b(N), {
+			id: b(r)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
-			id: e.id ?? m(r)?.controlId.value,
-			"aria-describedby": m(r)?.descriptionId.value,
-			"aria-errormessage": m(r)?.errorId.value,
-			"aria-invalid": e.invalid || m(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": b(r)?.descriptionId.value,
+			"aria-errormessage": b(r)?.errorId.value,
+			"aria-invalid": e.invalid || b(r)?.invalid.value ? "true" : void 0,
+			"data-size": e.size,
 			disabled: e.disabled,
 			type: e.type,
 			value: e.modelValue,
@@ -223,29 +385,36 @@ var O = /* @__PURE__ */ s({
 			"aria-describedby",
 			"aria-errormessage",
 			"aria-invalid",
+			"data-size",
 			"disabled",
 			"type",
 			"value"
 		]));
 	}
-}), G = /* @__PURE__ */ s({
+}), Te = 100, Ee = /* @__PURE__ */ c({
 	__name: "UiProgress",
 	props: {
 		label: {},
 		max: {},
 		value: {}
 	},
-	setup(n) {
-		let r = n, i = e(() => r.value === null || r.max <= 0 ? 0 : Math.min(100, Math.max(0, r.value / r.max * 100)));
-		return (e, r) => (u(), t(m(D), {
+	setup(e) {
+		let r = t(() => {
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Te;
+			return {
+				max: t,
+				value: e.value === null || !Number.isFinite(e.value) ? null : Math.min(t, Math.max(0, e.value))
+			};
+		}), i = t(() => r.value.value === null ? 0 : r.value.value / r.value.max * 100);
+		return (t, a) => (p(), n(b(F), {
 			class: "fg-progress",
-			"aria-label": n.label,
-			max: n.max,
-			"model-value": n.value
+			"aria-label": e.label,
+			max: r.value.max,
+			"model-value": r.value.value
 		}, {
-			default: h(() => [o(m(E), {
+			default: C(() => [s(b(P), {
 				class: "fg-progress__indicator",
-				style: l({ transform: `translateX(-${100 - i.value}%)` })
+				style: f({ transform: `translateX(-${100 - i.value}%)` })
 			}, null, 8, ["style"])]),
 			_: 1
 		}, 8, [
@@ -254,63 +423,207 @@ var O = /* @__PURE__ */ s({
 			"model-value"
 		]));
 	}
-}), K = /* @__PURE__ */ s({
+}), De = { class: "fg-radio-card__content" }, Oe = /* @__PURE__ */ c({
+	__name: "UiRadioCard",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		value: {}
+	},
+	setup(e) {
+		return (t, r) => (p(), n(b(I), {
+			class: "fg-radio-card",
+			disabled: e.disabled,
+			value: e.value
+		}, {
+			default: C(() => [r[0] ||= a("span", {
+				class: "fg-radio-card__indicator",
+				"aria-hidden": "true"
+			}, null, -1), a("span", De, [_(t.$slots, "default")])]),
+			_: 3
+		}, 8, ["disabled", "value"]));
+	}
+}), ke = /* @__PURE__ */ c({
+	__name: "UiRadioCardGroup",
+	props: /*@__PURE__*/ u({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loop: {
+			type: Boolean,
+			default: !0
+		},
+		orientation: { default: () => void 0 }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = x(e, "modelValue"), r = (t) => {
+			if (t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
+			let n = t.currentTarget, r = t.target;
+			if (!(n instanceof HTMLElement) || !(r instanceof HTMLElement)) return;
+			let i = t.key === "ArrowLeft" || t.key === "ArrowRight", a = t.key === "ArrowUp" || t.key === "ArrowDown";
+			if (!i && !a && t.key !== "Home" && t.key !== "End" || e.orientation === "horizontal" && a || e.orientation === "vertical" && i) return;
+			let o = [...n.querySelectorAll("[role=\"radio\"]")].filter((e) => !e.hasAttribute("data-disabled") && e.getAttribute("aria-disabled") !== "true"), s = o.indexOf(r);
+			if (s < 0 || o.length === 0) return;
+			let c = getComputedStyle(n).direction === "rtl", l = t.key === "ArrowUp" || t.key === "ArrowLeft" && !c || t.key === "ArrowRight" && c, u = t.key === "Home" ? 0 : t.key === "End" ? o.length - 1 : s + (l ? -1 : 1);
+			if (u < 0 || u >= o.length) {
+				if (!e.loop) return;
+				u = (u + o.length) % o.length;
+			}
+			let d = o[u];
+			!d || d === r || (t.preventDefault(), d.focus(), d.click());
+		};
+		return (i, a) => (p(), n(b(L), d({
+			modelValue: t.value,
+			"onUpdate:modelValue": a[0] ||= (e) => t.value = e,
+			class: "fg-radio-card-group",
+			disabled: e.disabled,
+			loop: e.loop
+		}, e.orientation === void 0 ? {} : { orientation: e.orientation }, { onKeydown: r }), {
+			default: C(() => [_(i.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"modelValue",
+			"disabled",
+			"loop"
+		]));
+	}
+}), Ae = /* @__PURE__ */ c({
 	__name: "UiSelect",
 	props: {
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		id: {},
+		id: { default: () => void 0 },
 		invalid: {
 			type: Boolean,
 			default: !1
 		},
-		modelValue: { default: "" }
+		modelValue: { default: "" },
+		size: { default: "md" }
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: n }) {
-		let r = c(R, void 0), i = n, a = (e) => {
+	setup(e, { emit: t }) {
+		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLSelectElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (n, i) => (u(), t(m(T), {
+		return (t, i) => (p(), n(b(N), {
+			id: b(r)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
-			id: e.id ?? m(r)?.controlId.value,
-			"aria-describedby": m(r)?.descriptionId.value,
-			"aria-errormessage": m(r)?.errorId.value,
-			"aria-invalid": e.invalid || m(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": b(r)?.descriptionId.value,
+			"aria-errormessage": b(r)?.errorId.value,
+			"aria-invalid": e.invalid || b(r)?.invalid.value ? "true" : void 0,
+			"data-size": e.size,
 			disabled: e.disabled,
 			value: e.modelValue,
 			onChange: a
 		}, {
-			default: h(() => [f(n.$slots, "default")]),
+			default: C(() => [_(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
 			"aria-describedby",
 			"aria-errormessage",
 			"aria-invalid",
+			"data-size",
 			"disabled",
 			"value"
 		]));
 	}
-}), q = /* @__PURE__ */ s({
+}), je = /* @__PURE__ */ c({
+	__name: "UiSlider",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		id: { default: () => void 0 },
+		label: {},
+		max: { default: 100 },
+		min: { default: 0 },
+		modelValue: { default: () => void 0 },
+		size: { default: "md" },
+		step: { default: 1 }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: r }) {
+		let i = l(Q, void 0), a = t(() => {
+			let t = Number.isFinite(e.min) ? e.min : 0;
+			return {
+				max: Number.isFinite(e.max) && e.max > t ? e.max : t + 100,
+				min: t,
+				step: Number.isFinite(e.step) && e.step > 0 ? e.step : 1
+			};
+		}), o = r, c = t({
+			get: () => {
+				let t = e.modelValue !== void 0 && Number.isFinite(e.modelValue) ? e.modelValue : a.value.min;
+				return [Math.min(a.value.max, Math.max(a.value.min, t))];
+			},
+			set: ([e]) => {
+				e !== void 0 && o("update:modelValue", e);
+			}
+		});
+		return (t, r) => (p(), n(b(z), {
+			modelValue: c.value,
+			"onUpdate:modelValue": r[0] ||= (e) => c.value = e,
+			class: "fg-slider",
+			"data-size": e.size,
+			disabled: e.disabled,
+			max: a.value.max,
+			min: a.value.min,
+			step: a.value.step
+		}, {
+			default: C(() => [s(b(V), { class: "fg-slider__track" }, {
+				default: C(() => [s(b(R), { class: "fg-slider__range" })]),
+				_: 1
+			}), s(b(B), {
+				id: b(i)?.controlId.value ?? e.id,
+				class: "fg-slider__thumb",
+				"aria-describedby": b(i)?.descriptionId.value,
+				"aria-errormessage": b(i)?.errorId.value,
+				"aria-invalid": b(i)?.invalid.value ? "true" : void 0,
+				"aria-label": e.label
+			}, null, 8, [
+				"id",
+				"aria-describedby",
+				"aria-errormessage",
+				"aria-invalid",
+				"aria-label"
+			])]),
+			_: 1
+		}, 8, [
+			"modelValue",
+			"data-size",
+			"disabled",
+			"max",
+			"min",
+			"step"
+		]));
+	}
+}), Me = /* @__PURE__ */ c({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (n, r) => (u(), t(m(T), {
+		return (t, r) => (p(), n(b(N), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
 		}, {
-			default: h(() => [f(n.$slots, "default")]),
+			default: C(() => [_(t.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
 });
 //#endregion
-export { k as UiAlert, A as UiBadge, O as UiButton, N as UiCheckbox, L as UiDialog, U as UiField, W as UiInput, G as UiProgress, K as UiSelect, q as UiSurface };
+export { de as UiAlert, fe as UiBadge, U as UiButton, Y as UiCard, he as UiCheckbox, ue as UiCodeBlock, ye as UiDialog, Ce as UiField, we as UiInput, Ee as UiProgress, Oe as UiRadioCard, ke as UiRadioCardGroup, Ae as UiSelect, je as UiSlider, Me as UiSurface };