@filipgutica/ui 1.2.0 → 1.3.0

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

@@ -5,6 +5,7 @@ export interface UiCodeBlockProps {
     copyable?: boolean;
     lineNumbers?: boolean;
     wrap?: boolean;
+    variant?: 'default' | 'compact';
 }
 type __VLS_Slots = {
     actions?(): unknown;

package/dist/index.js

@@ -1,5 +1,5 @@
-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, onMounted as p, onUnmounted as m, openBlock as h, provide as g, readonly as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, shallowRef as ee, toDisplayString as S, unref as C, useId as te, useModel as w, useSlots as T, watch as E, withCtx as D } from "vue";
-import { CheckboxIndicator as O, CheckboxRoot as ne, DialogClose as k, DialogContent as A, DialogDescription as j, DialogOverlay as M, DialogPortal as N, DialogRoot as P, DialogTitle as F, DialogTrigger as I, Primitive as L, ProgressIndicator as R, ProgressRoot as z, RadioGroupItem as B, RadioGroupRoot as V, SliderRange as H, SliderRoot as U, SliderThumb as W, SliderTrack as G } 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, onMounted as p, onUnmounted as m, openBlock as h, provide as g, readonly as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, shallowRef as S, toDisplayString as C, unref as w, useId as T, useModel as E, useSlots as ee, watch as te, withCtx as D } from "vue";
+import { CheckboxIndicator as O, CheckboxRoot as k, DialogClose as A, DialogContent as j, DialogDescription as ne, DialogOverlay as M, DialogPortal as N, DialogRoot as P, DialogTitle as F, DialogTrigger as I, Primitive as L, ProgressIndicator as R, ProgressRoot as z, RadioGroupItem as B, RadioGroupRoot as V, SliderRange as H, SliderRoot as U, SliderThumb as W, SliderTrack as G } from "reka-ui";
 import { useTimeoutFn as K } from "@vueuse/core";
 //#endregion
 //#region src/components/UiButton.vue
@@ -19,7 +19,7 @@ var q = /* @__PURE__ */ c({
 		variant: { default: "primary" }
 	},
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: "button",
 			class: "fg-button",
 			"data-size": e.size,
@@ -57,30 +57,46 @@ var q = /* @__PURE__ */ c({
 		titleTag: { default: "h3" }
 	},
 	setup(e) {
-		let t = T();
+		let t = ee();
 		return (a, s) => (h(), i("div", J, [
 			e.title || t.title || t.actions ? (h(), i("header", Y, [e.title || t.title ? (h(), n(x(e.titleTag), {
 				key: 0,
 				class: "fg-card__title"
 			}, {
-				default: D(() => [b(a.$slots, "title", {}, () => [o(S(e.title), 1)])]),
+				default: D(() => [b(a.$slots, "title", {}, () => [o(C(e.title), 1)])]),
 				_: 3
 			})) : r("", !0), t.actions ? (h(), i("div", X, [b(a.$slots, "actions")])) : r("", !0)])) : r("", !0),
 			t.default ? (h(), i("div", Z, [b(a.$slots, "default")])) : r("", !0),
 			t.footer ? (h(), i("footer", re, [b(a.$slots, "footer")])) : r("", !0)
 		]));
 	}
-}), ae = ["data-wrap", "data-line-numbers"], oe = { class: "fg-code-block__header" }, se = { class: "fg-code-block__title" }, ce = {
+}), ae = [
+	"data-wrap",
+	"data-line-numbers",
+	"data-variant"
+], oe = {
 	key: 0,
+	class: "fg-code-block__header"
+}, se = {
+	key: 0,
+	class: "fg-code-block__title"
+}, ce = {
+	key: 1,
 	class: "fg-code-block__language"
-}, le = { class: "fg-code-block__actions" }, ue = ["disabled"], de = ["aria-label"], fe = {
+}, le = { class: "fg-code-block__actions" }, ue = ["disabled", "title"], de = {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	"aria-hidden": "true"
+}, fe = {
+	key: 0,
+	d: "m5 12 4 4L19 6"
+}, pe = { key: 0 }, me = ["aria-label"], he = {
 	key: 0,
 	class: "fg-code-block__number",
 	"aria-hidden": "true"
-}, pe = { class: "fg-code-block__text" }, me = {
-	class: "fg-code-block__status",
-	role: "status"
-}, he = /* @__PURE__ */ c({
+}, ge = { class: "fg-code-block__text" }, _e = ["data-state"], ve = /* @__PURE__ */ c({
 	__name: "UiCodeBlock",
 	props: {
 		code: {},
@@ -97,10 +113,11 @@ var q = /* @__PURE__ */ c({
 		wrap: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		variant: { default: "default" }
 	},
 	setup(n) {
-		let s = ee(), c = v(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
+		let s = S(), c = v(""), l = t(() => s.value ?? n.code.split("\n").map((e) => [{ content: e }])), u = {
 			vue: "vue",
 			ts: "typescript",
 			typescript: "typescript",
@@ -113,7 +130,7 @@ var q = /* @__PURE__ */ c({
 			sh: "bash",
 			shell: "bash"
 		};
-		E(() => [n.code, n.language], async ([e, t], n, r) => {
+		te(() => [n.code, n.language], async ([e, t], n, r) => {
 			let i = !1;
 			r(() => {
 				i = !0;
@@ -138,7 +155,7 @@ var q = /* @__PURE__ */ c({
 		}, { immediate: !0 });
 		let d = v(!1), { start: p } = K(() => {
 			d.value = !1;
-		}, 1500, { immediate: !1 }), m = v(!1), g = v(""), _ = async () => {
+		}, 1500, { immediate: !1 }), m = v(!1), g = v(""), _ = t(() => d.value && !g.value), x = t(() => n.variant === "compact" && _.value && !c.value), w = t(() => g.value ? g.value : n.variant === "compact" && c.value ? d.value ? `Code copied to clipboard. ${c.value}` : c.value : d.value ? "Code copied to clipboard." : c.value), T = async () => {
 			if (g.value = "", d.value = !1, typeof navigator > "u" || !navigator.clipboard?.writeText) {
 				g.value = "Clipboard unavailable. Select the code to copy it.";
 				return;
@@ -155,32 +172,28 @@ var q = /* @__PURE__ */ c({
 		return (t, s) => (h(), i("div", {
 			class: "fg-code-block",
 			"data-wrap": n.wrap,
-			"data-line-numbers": n.lineNumbers
+			"data-line-numbers": n.lineNumbers,
+			"data-variant": n.variant
 		}, [
-			a("div", oe, [
-				a("span", se, S(n.title || n.language), 1),
-				n.title ? (h(), i("span", ce, S(n.language), 1)) : r("", !0),
+			n.variant === "default" || n.copyable || t.$slots.actions ? (h(), i("div", oe, [
+				n.variant === "default" ? (h(), i("span", se, C(n.title || n.language), 1)) : r("", !0),
+				n.title && n.variant === "default" ? (h(), i("span", ce, C(n.language), 1)) : r("", !0),
 				a("div", le, [b(t.$slots, "actions"), n.copyable ? (h(), i("button", {
 					key: 0,
 					type: "button",
 					class: "fg-code-block__copy",
 					disabled: m.value,
 					"aria-label": "Copy code",
-					onClick: _
-				}, [s[0] ||= a("svg", {
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "1.5",
-					"aria-hidden": "true"
-				}, [a("rect", {
+					title: n.variant === "compact" ? _.value ? "Copied" : "Copy code" : void 0,
+					onClick: T
+				}, [(h(), i("svg", de, [n.variant === "compact" && _.value ? (h(), i("path", fe)) : (h(), i(e, { key: 1 }, [s[0] ||= 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(" " + S(d.value && !g.value ? "Copied" : "Copy"), 1)], 8, ue)) : r("", !0)])
-			]),
+				}, null, -1), s[1] ||= a("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))])), n.variant === "default" ? (h(), i("span", pe, C(_.value ? "Copied" : "Copy"), 1)) : r("", !0)], 8, ue)) : r("", !0)])
+			])) : r("", !0),
 			a("pre", {
 				class: "fg-code-block__pre",
 				tabindex: "0",
@@ -188,18 +201,22 @@ var q = /* @__PURE__ */ c({
 			}, [a("code", null, [(h(!0), i(e, null, y(l.value, (t, s) => (h(), i("span", {
 				key: s,
 				class: "fg-code-block__line"
-			}, [n.lineNumbers ? (h(), i("span", fe, S(s + 1), 1)) : r("", !0), a("span", pe, [(h(!0), i(e, null, y(t, (e, t) => (h(), i("span", {
+			}, [n.lineNumbers ? (h(), i("span", he, C(s + 1), 1)) : r("", !0), a("span", ge, [(h(!0), i(e, null, y(t, (e, t) => (h(), i("span", {
 				key: t,
 				style: f({ color: e.color })
-			}, S(e.content), 5))), 128)), o(S(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, de),
-			a("span", me, S(g.value || (d.value ? "Code copied to clipboard." : c.value)), 1)
+			}, C(e.content), 5))), 128)), o(C(s < l.value.length - 1 ? "\n" : ""), 1)])]))), 128))])], 8, me),
+			a("span", {
+				class: "fg-code-block__status",
+				role: "status",
+				"data-state": x.value ? "success" : void 0
+			}, C(w.value), 9, _e)
 		], 8, ae));
 	}
-}), ge = /* @__PURE__ */ c({
+}), ye = /* @__PURE__ */ c({
 	__name: "UiAlert",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: "div",
 			class: "fg-alert",
 			"data-tone": e.tone,
@@ -209,11 +226,11 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["data-tone", "role"]));
 	}
-}), _e = /* @__PURE__ */ c({
+}), be = /* @__PURE__ */ c({
 	__name: "UiBadge",
 	props: { tone: { default: "neutral" } },
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: "span",
 			class: "fg-badge",
 			"data-tone": e.tone
@@ -222,7 +239,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["data-tone"]));
 	}
-}), ve = ["data-size", "data-disabled"], ye = { class: "fg-checkbox__label" }, be = /* @__PURE__ */ c({
+}), xe = ["data-size", "data-disabled"], Se = { class: "fg-checkbox__label" }, Ce = /* @__PURE__ */ c({
 	__name: "UiCheckbox",
 	props: {
 		disabled: {
@@ -244,23 +261,23 @@ var q = /* @__PURE__ */ c({
 			class: "fg-checkbox",
 			"data-size": e.size,
 			"data-disabled": e.disabled ? "true" : void 0
-		}, [s(C(ne), {
+		}, [s(w(k), {
 			class: "fg-checkbox__control",
 			disabled: e.disabled,
 			"model-value": e.modelValue,
 			"onUpdate:modelValue": r
 		}, {
-			default: D(() => [s(C(O), { class: "fg-checkbox__indicator" }, {
+			default: D(() => [s(w(O), { class: "fg-checkbox__indicator" }, {
 				default: D(() => [...n[0] ||= [o("✓", -1)]]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["disabled", "model-value"]), a("span", ye, [b(t.$slots, "default")])], 8, ve));
+		}, 8, ["disabled", "model-value"]), a("span", Se, [b(t.$slots, "default")])], 8, xe));
 	}
-}), xe = { class: "fg-dialog__header" }, Se = { class: "fg-dialog__body" }, Ce = {
+}), we = { class: "fg-dialog__header" }, Te = { class: "fg-dialog__body" }, Ee = {
 	key: 0,
 	class: "fg-dialog__footer"
-}, we = /* @__PURE__ */ c({
+}, De = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDialog",
 	props: {
@@ -271,34 +288,34 @@ var q = /* @__PURE__ */ c({
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
 		let c = t;
-		return (t, l) => (h(), n(C(P), {
+		return (t, l) => (h(), n(w(P), {
 			open: e.open,
 			"onUpdate:open": l[0] ||= (e) => c("update:open", e)
 		}, {
-			default: D(() => [s(C(N), null, {
-				default: D(() => [s(C(M), { class: "fg-dialog__overlay" }), s(C(A), d({
+			default: D(() => [s(w(N), null, {
+				default: D(() => [s(w(M), { class: "fg-dialog__overlay" }), s(w(j), d({
 					class: "fg-dialog__content",
 					"aria-modal": "true"
 				}, t.$attrs), {
 					default: D(() => [
-						a("div", xe, [a("div", null, [s(C(F), { class: "fg-dialog__title" }, {
-							default: D(() => [o(S(e.title), 1)]),
+						a("div", we, [a("div", null, [s(w(F), { class: "fg-dialog__title" }, {
+							default: D(() => [o(C(e.title), 1)]),
 							_: 1
-						}), e.description ? (h(), n(C(j), {
+						}), e.description ? (h(), n(w(ne), {
 							key: 0,
 							class: "fg-dialog__description"
 						}, {
-							default: D(() => [o(S(e.description), 1)]),
+							default: D(() => [o(C(e.description), 1)]),
 							_: 1
-						})) : r("", !0)]), s(C(k), {
+						})) : r("", !0)]), s(w(A), {
 							class: "fg-dialog__close",
 							"aria-label": "Close dialog"
 						}, {
 							default: D(() => [...l[1] ||= [o(" × ", -1)]]),
 							_: 1
 						})]),
-						a("div", Se, [b(t.$slots, "default")]),
-						t.$slots.footer ? (h(), i("div", Ce, [b(t.$slots, "footer")])) : r("", !0)
+						a("div", Te, [b(t.$slots, "default")]),
+						t.$slots.footer ? (h(), i("div", Ee, [b(t.$slots, "footer")])) : r("", !0)
 					]),
 					_: 3
 				}, 16)]),
@@ -307,7 +324,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), Te = { class: "fg-drawer__header" }, Ee = { class: "fg-drawer__body" }, De = /* @__PURE__ */ c({
+}), Oe = { class: "fg-drawer__header" }, ke = { class: "fg-drawer__body" }, Ae = /* @__PURE__ */ c({
 	inheritAttrs: !1,
 	__name: "UiDrawer",
 	props: {
@@ -317,32 +334,32 @@ var q = /* @__PURE__ */ c({
 	emits: ["update:open", "closeAutoFocus"],
 	setup(e, { emit: t }) {
 		let i = t;
-		return (t, c) => (h(), n(C(P), {
+		return (t, c) => (h(), n(w(P), {
 			open: e.open,
 			"onUpdate:open": c[1] ||= (e) => i("update:open", e)
 		}, {
-			default: D(() => [t.$slots.trigger ? (h(), n(C(I), {
+			default: D(() => [t.$slots.trigger ? (h(), n(w(I), {
 				key: 0,
 				"as-child": ""
 			}, {
 				default: D(() => [b(t.$slots, "trigger")]),
 				_: 3
-			})) : r("", !0), s(C(N), null, {
-				default: D(() => [s(C(M), { class: "fg-drawer__overlay" }), s(C(A), d({
+			})) : r("", !0), s(w(N), null, {
+				default: D(() => [s(w(M), { class: "fg-drawer__overlay" }), s(w(j), d({
 					class: "fg-drawer__content",
 					"aria-modal": "true",
 					"aria-describedby": void 0
 				}, t.$attrs, { onCloseAutoFocus: c[0] ||= (e) => i("closeAutoFocus", e) }), {
-					default: D(() => [a("div", Te, [s(C(F), { class: "fg-drawer__title" }, {
-						default: D(() => [o(S(e.title), 1)]),
+					default: D(() => [a("div", Oe, [s(w(F), { class: "fg-drawer__title" }, {
+						default: D(() => [o(C(e.title), 1)]),
 						_: 1
-					}), s(C(k), {
+					}), s(w(A), {
 						class: "fg-drawer__close",
 						"aria-label": "Close drawer"
 					}, {
 						default: D(() => [...c[2] ||= [o(" × ", -1)]]),
 						_: 1
-					})]), a("div", Ee, [b(t.$slots, "default")])]),
+					})]), a("div", ke, [b(t.$slots, "default")])]),
 					_: 3
 				}, 16)]),
 				_: 3
@@ -350,7 +367,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["open"]));
 	}
-}), Q = Symbol("UiFieldContext"), Oe = ["data-invalid"], ke = ["for"], Ae = ["id"], je = ["id"], Me = /* @__PURE__ */ c({
+}), Q = Symbol("UiFieldContext"), je = ["data-invalid"], Me = ["for"], Ne = ["id"], Pe = ["id"], Fe = /* @__PURE__ */ c({
 	__name: "UiField",
 	props: {
 		controlId: {},
@@ -372,7 +389,7 @@ var q = /* @__PURE__ */ c({
 			a("label", {
 				class: "fg-field__label",
 				for: e.controlId
-			}, S(e.label), 9, ke),
+			}, C(e.label), 9, Me),
 			b(t.$slots, "default", {
 				descriptionId: n.value,
 				errorId: o.value
@@ -382,16 +399,16 @@ var q = /* @__PURE__ */ c({
 				id: n.value,
 				class: "fg-field__description",
 				"data-field-description": ""
-			}, S(e.description), 9, Ae)) : r("", !0),
+			}, C(e.description), 9, Ne)) : r("", !0),
 			e.error ? (h(), i("p", {
 				key: 1,
 				id: o.value,
 				class: "fg-field__error",
 				"data-field-error": ""
-			}, S(e.error), 9, je)) : r("", !0)
-		], 8, Oe));
+			}, C(e.error), 9, Pe)) : r("", !0)
+		], 8, je));
 	}
-}), Ne = /* @__PURE__ */ c({
+}), Ie = /* @__PURE__ */ c({
 	__name: "UiInput",
 	props: {
 		disabled: {
@@ -412,13 +429,13 @@ var q = /* @__PURE__ */ c({
 		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLInputElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (h(), n(C(L), {
-			id: C(r)?.controlId.value ?? e.id,
+		return (t, i) => (h(), n(w(L), {
+			id: w(r)?.controlId.value ?? e.id,
 			as: "input",
 			class: "fg-input",
-			"aria-describedby": C(r)?.descriptionId.value,
-			"aria-errormessage": C(r)?.errorId.value,
-			"aria-invalid": e.invalid || C(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": w(r)?.descriptionId.value,
+			"aria-errormessage": w(r)?.errorId.value,
+			"aria-invalid": e.invalid || w(r)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			type: e.type,
@@ -435,7 +452,7 @@ var q = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), Pe = 100, $ = /* @__PURE__ */ c({
+}), Le = 100, Re = /* @__PURE__ */ c({
 	__name: "UiProgress",
 	props: {
 		label: {},
@@ -444,19 +461,19 @@ var q = /* @__PURE__ */ c({
 	},
 	setup(e) {
 		let r = t(() => {
-			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Pe;
+			let t = Number.isFinite(e.max) && e.max > 0 ? e.max : Le;
 			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) => (h(), n(C(z), {
+		return (t, a) => (h(), n(w(z), {
 			class: "fg-progress",
 			"aria-label": e.label,
 			max: r.value.max,
 			"model-value": r.value.value
 		}, {
-			default: D(() => [s(C(R), {
+			default: D(() => [s(w(R), {
 				class: "fg-progress__indicator",
 				style: f({ transform: `translateX(-${100 - i.value}%)` })
 			}, null, 8, ["style"])]),
@@ -467,7 +484,7 @@ var q = /* @__PURE__ */ c({
 			"model-value"
 		]));
 	}
-}), Fe = { class: "fg-radio-card__content" }, Ie = /* @__PURE__ */ c({
+}), ze = { class: "fg-radio-card__content" }, Be = /* @__PURE__ */ c({
 	__name: "UiRadioCard",
 	props: {
 		disabled: {
@@ -477,7 +494,7 @@ var q = /* @__PURE__ */ c({
 		value: {}
 	},
 	setup(e) {
-		return (t, r) => (h(), n(C(B), {
+		return (t, r) => (h(), n(w(B), {
 			class: "fg-radio-card",
 			disabled: e.disabled,
 			value: e.value
@@ -485,11 +502,11 @@ var q = /* @__PURE__ */ c({
 			default: D(() => [r[0] ||= a("span", {
 				class: "fg-radio-card__indicator",
 				"aria-hidden": "true"
-			}, null, -1), a("span", Fe, [b(t.$slots, "default")])]),
+			}, null, -1), a("span", ze, [b(t.$slots, "default")])]),
 			_: 3
 		}, 8, ["disabled", "value"]));
 	}
-}), Le = /* @__PURE__ */ c({
+}), Ve = /* @__PURE__ */ c({
 	__name: "UiRadioCardGroup",
 	props: /*@__PURE__*/ u({
 		disabled: {
@@ -507,7 +524,7 @@ var q = /* @__PURE__ */ c({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = w(e, "modelValue"), r = (t) => {
+		let t = E(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;
@@ -523,7 +540,7 @@ var q = /* @__PURE__ */ c({
 			let d = o[u];
 			!d || d === r || (t.preventDefault(), d.focus(), d.click());
 		};
-		return (i, a) => (h(), n(C(V), d({
+		return (i, a) => (h(), n(w(V), d({
 			modelValue: t.value,
 			"onUpdate:modelValue": a[0] ||= (e) => t.value = e,
 			class: "fg-radio-card-group",
@@ -538,7 +555,7 @@ var q = /* @__PURE__ */ c({
 			"loop"
 		]));
 	}
-}), Re = /* @__PURE__ */ c({
+}), $ = /* @__PURE__ */ c({
 	__name: "UiSelect",
 	props: {
 		disabled: {
@@ -558,13 +575,13 @@ var q = /* @__PURE__ */ c({
 		let r = l(Q, void 0), i = t, a = (e) => {
 			e.currentTarget instanceof HTMLSelectElement && i("update:modelValue", e.currentTarget.value);
 		};
-		return (t, i) => (h(), n(C(L), {
-			id: C(r)?.controlId.value ?? e.id,
+		return (t, i) => (h(), n(w(L), {
+			id: w(r)?.controlId.value ?? e.id,
 			as: "select",
 			class: "fg-select",
-			"aria-describedby": C(r)?.descriptionId.value,
-			"aria-errormessage": C(r)?.errorId.value,
-			"aria-invalid": e.invalid || C(r)?.invalid.value ? "true" : void 0,
+			"aria-describedby": w(r)?.descriptionId.value,
+			"aria-errormessage": w(r)?.errorId.value,
+			"aria-invalid": e.invalid || w(r)?.invalid.value ? "true" : void 0,
 			"data-size": e.size,
 			disabled: e.disabled,
 			value: e.modelValue,
@@ -582,7 +599,7 @@ var q = /* @__PURE__ */ c({
 			"value"
 		]));
 	}
-}), ze = /* @__PURE__ */ c({
+}), He = /* @__PURE__ */ c({
 	__name: "UiSlider",
 	props: {
 		disabled: {
@@ -615,7 +632,7 @@ var q = /* @__PURE__ */ c({
 				e !== void 0 && o("update:modelValue", e);
 			}
 		});
-		return (t, r) => (h(), n(C(U), {
+		return (t, r) => (h(), n(w(U), {
 			modelValue: c.value,
 			"onUpdate:modelValue": r[0] ||= (e) => c.value = e,
 			class: "fg-slider",
@@ -625,15 +642,15 @@ var q = /* @__PURE__ */ c({
 			min: a.value.min,
 			step: a.value.step
 		}, {
-			default: D(() => [s(C(G), { class: "fg-slider__track" }, {
-				default: D(() => [s(C(H), { class: "fg-slider__range" })]),
+			default: D(() => [s(w(G), { class: "fg-slider__track" }, {
+				default: D(() => [s(w(H), { class: "fg-slider__range" })]),
 				_: 1
-			}), s(C(W), {
-				id: C(i)?.controlId.value ?? e.id,
+			}), s(w(W), {
+				id: w(i)?.controlId.value ?? e.id,
 				class: "fg-slider__thumb",
-				"aria-describedby": C(i)?.descriptionId.value,
-				"aria-errormessage": C(i)?.errorId.value,
-				"aria-invalid": C(i)?.invalid.value ? "true" : void 0,
+				"aria-describedby": w(i)?.descriptionId.value,
+				"aria-errormessage": w(i)?.errorId.value,
+				"aria-invalid": w(i)?.invalid.value ? "true" : void 0,
 				"aria-label": e.label
 			}, null, 8, [
 				"id",
@@ -652,20 +669,20 @@ var q = /* @__PURE__ */ c({
 			"step"
 		]));
 	}
-}), Be = { class: "fg-tabs" }, Ve = ["aria-label"], He = [
+}), Ue = { class: "fg-tabs" }, We = ["aria-label"], Ge = [
 	"id",
 	"aria-controls",
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], Ue = [
+], Ke = [
 	"id",
 	"role",
 	"aria-labelledby",
 	"hidden",
 	"tabindex"
-], We = ["id", "hidden"], Ge = /* @__PURE__ */ c({
+], qe = ["id", "hidden"], Je = /* @__PURE__ */ c({
 	__name: "UiTabs",
 	props: {
 		items: {},
@@ -674,7 +691,7 @@ var q = /* @__PURE__ */ c({
 	},
 	emits: ["update:modelValue"],
 	setup(n, { emit: o }) {
-		let s = o, c = te(), l = v(!1), u = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), d = (e) => `${c}-tab-${encodeURIComponent(e)}`, f = (e) => `${c}-panel-${encodeURIComponent(e)}`, m = (e) => `${c}-heading-${encodeURIComponent(e)}`;
+		let s = o, c = T(), l = v(!1), u = t(() => n.items.some((e) => e.value === n.modelValue) ? n.modelValue : n.items[0]?.value), d = (e) => `${c}-tab-${encodeURIComponent(e)}`, f = (e) => `${c}-panel-${encodeURIComponent(e)}`, m = (e) => `${c}-heading-${encodeURIComponent(e)}`;
 		p(() => {
 			l.value = !0;
 		});
@@ -694,7 +711,7 @@ var q = /* @__PURE__ */ c({
 			let a = getComputedStyle(t).direction === "rtl", o = e.key === (a ? "ArrowRight" : "ArrowLeft"), s = r[e.key === "Home" ? 0 : e.key === "End" ? r.length - 1 : (i + (o ? -1 : 1) + r.length) % r.length];
 			s && (e.preventDefault(), s.focus());
 		};
-		return (t, o) => (h(), i("div", Be, [l.value ? (h(), i("div", {
+		return (t, o) => (h(), i("div", Ue, [l.value ? (h(), i("div", {
 			key: 0,
 			class: "fg-tabs__list",
 			role: "tablist",
@@ -711,7 +728,7 @@ var q = /* @__PURE__ */ c({
 			tabindex: e.value === u.value ? 0 : -1,
 			onClick: (t) => g(e.value),
 			onFocus: (t) => g(e.value)
-		}, S(e.label), 41, He))), 128))], 40, Ve)) : r("", !0), (h(!0), i(e, null, y(n.items, (e) => (h(), i("section", {
+		}, C(e.label), 41, Ge))), 128))], 40, We)) : r("", !0), (h(!0), i(e, null, y(n.items, (e) => (h(), i("section", {
 			id: f(e.value),
 			key: e.value,
 			class: "fg-tabs__panel",
@@ -723,16 +740,16 @@ var q = /* @__PURE__ */ c({
 			id: m(e.value),
 			class: "fg-tabs__heading",
 			hidden: l.value
-		}, S(e.label), 9, We), b(t.$slots, "panel", { value: e.value })], 8, Ue))), 128))]));
+		}, C(e.label), 9, qe), b(t.$slots, "panel", { value: e.value })], 8, Ke))), 128))]));
 	}
-}), Ke = /* @__PURE__ */ c({
+}), Ye = /* @__PURE__ */ c({
 	__name: "UiSurface",
 	props: {
 		as: { default: "section" },
 		padding: { default: "default" }
 	},
 	setup(e) {
-		return (t, r) => (h(), n(C(L), {
+		return (t, r) => (h(), n(w(L), {
 			as: e.as,
 			class: "fg-surface",
 			"data-padding": e.padding
@@ -741,7 +758,7 @@ var q = /* @__PURE__ */ c({
 			_: 3
 		}, 8, ["as", "data-padding"]));
 	}
-}), qe = ({ targetIds: e }) => {
+}), Xe = ({ targetIds: e }) => {
 	let t = v(e[0]), n, r, i;
 	return p(() => {
 		let a = e.flatMap((e) => {
@@ -766,4 +783,4 @@ var q = /* @__PURE__ */ c({
 	}), _(t);
 };
 //#endregion
-export { ge as UiAlert, _e as UiBadge, q as UiButton, ie as UiCard, be as UiCheckbox, he as UiCodeBlock, we as UiDialog, De as UiDrawer, Me as UiField, Ne as UiInput, $ as UiProgress, Ie as UiRadioCard, Le as UiRadioCardGroup, Re as UiSelect, ze as UiSlider, Ke as UiSurface, Ge as UiTabs, qe as useActiveSection };
+export { ye as UiAlert, be as UiBadge, q as UiButton, ie as UiCard, Ce as UiCheckbox, ve as UiCodeBlock, De as UiDialog, Ae as UiDrawer, Fe as UiField, Ie as UiInput, Re as UiProgress, Be as UiRadioCard, Ve as UiRadioCardGroup, $ as UiSelect, He as UiSlider, Ye as UiSurface, Je as UiTabs, Xe as useActiveSection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [

package/src/components.css

@@ -61,6 +61,51 @@
   .fg-code-block[data-wrap="true"] .fg-code-block__text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
   .fg-code-block__status:empty { display: none; }
   .fg-code-block__status:not(:empty) { display: block; padding: 0.5rem 0.75rem; font-size: 0.75rem; }
+  .fg-code-block[data-variant="compact"] {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+  }
+  .fg-code-block[data-variant="compact"] .fg-code-block__header {
+    grid-column: 2;
+    grid-row: 1;
+    min-height: 0;
+    padding: var(--space-1);
+    border: 0;
+    background: transparent;
+  }
+  .fg-code-block[data-variant="compact"] .fg-code-block__actions {
+    gap: var(--space-1);
+    margin-left: 0;
+  }
+  .fg-code-block[data-variant="compact"] .fg-code-block__copy {
+    padding: 0;
+    border-radius: var(--radius-control);
+  }
+  .fg-code-block[data-variant="compact"] .fg-code-block__pre {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    padding: var(--space-2) var(--space-3);
+  }
+  .fg-code-block[data-variant="compact"] .fg-code-block__status:not(:empty) {
+    grid-column: 1 / -1;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    overflow-wrap: anywhere;
+  }
+  .fg-code-block[data-variant="compact"] .fg-code-block__status[data-state="success"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
   .fg-button,
   .fg-input,
   .fg-select,