iryx-ui 0.21.0 → 0.22.0

package/dist/components/RadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,15 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { useFormField as t } from "../composables/form.js";
-import { radioGroupTheme as n } from "../theme/radio-group.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
-import { Label as b, RadioGroupIndicator as x, RadioGroupItem as S, RadioGroupRoot as C, useForwardPropsEmits as w, useId as T } from "reka-ui";
+import t from "./Icon.js";
+import { useFormField as n } from "../composables/form.js";
+import { radioGroupTheme as r } from "../theme/radio-group.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, openBlock as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+import { Label as x, RadioGroupIndicator as S, RadioGroupItem as C, RadioGroupRoot as w, useForwardPropsEmits as T, useId as E } from "reka-ui";
 //#region src/components/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var E = ["id"], D = /*@__PURE__*/ d({
+var D = ["id"], O = ["id"], k = ["id"], A = /*@__PURE__*/ f({
 	__name: "RadioGroup",
 	props: {
 		items: {},
+		variant: {},
 		size: {},
 		invalid: {
 			type: Boolean,
@@ -36,37 +38,38 @@ var E = ["id"], D = /*@__PURE__*/ d({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(d, { emit: D }) {
-		let O = d, k = D, A = w(i(() => {
-			let { items: e, size: t, invalid: n, unstyled: r, class: i, ui: a, ...o } = O;
-			return o;
-		}), k), j = i(() => (O.items ?? []).map((e) => typeof e == "string" ? {
+	setup(f, { emit: A }) {
+		let j = f, M = A, N = T(a(() => {
+			let { items: e, variant: t, size: n, invalid: r, unstyled: i, class: a, ui: o, ...s } = j;
+			return s;
+		}), M), P = a(() => (j.items ?? []).map((e) => typeof e == "string" ? {
 			label: e,
 			value: e
-		} : e)), M = T(), N = t();
-		N && (N.id.value = void 0);
-		let P = i(() => O.invalid ?? N?.invalid.value ?? !1), F = e(), I = i(() => O.unstyled ?? F.unstyled), L = i(() => n({
-			size: O.size,
-			orientation: O.orientation ?? "vertical",
-			invalid: P.value
-		})), R = i(() => I.value ? [O.ui?.root, O.class] : L.value.root({ class: [O.ui?.root, O.class] })), z = i(() => I.value ? O.ui?.item : L.value.item({ class: O.ui?.item })), B = i(() => I.value ? O.ui?.label : L.value.label({ class: O.ui?.label })), V = i(() => I.value ? O.ui?.description : L.value.description({ class: O.ui?.description }));
-		return (e, t) => (m(), a(v(C), f(v(A), {
-			"aria-labelledby": v(N)?.labelId.value,
-			"aria-invalid": P.value || void 0,
-			"aria-describedby": v(N)?.describedBy.value,
-			class: R.value
+		} : e)), F = E(), I = n();
+		I && (I.id.value = void 0);
+		let L = a(() => j.invalid ?? I?.invalid.value ?? !1), R = e(), z = a(() => j.unstyled ?? R.unstyled), B = a(() => r({
+			variant: j.variant,
+			size: j.size,
+			orientation: j.orientation ?? "vertical",
+			invalid: L.value
+		})), V = a(() => z.value ? [j.ui?.root, j.class] : B.value.root({ class: [j.ui?.root, j.class] })), H = a(() => z.value ? j.ui?.item : B.value.item({ class: j.ui?.item })), U = a(() => z.value ? j.ui?.label : B.value.label({ class: j.ui?.label })), W = a(() => z.value ? j.ui?.description : B.value.description({ class: j.ui?.description })), G = a(() => z.value ? j.ui?.content : B.value.content({ class: j.ui?.content })), K = a(() => z.value ? j.ui?.mark : B.value.mark({ class: j.ui?.mark })), q = a(() => z.value ? j.ui?.icon : B.value.icon({ class: j.ui?.icon }));
+		return (e, n) => (h(), o(y(w), p(y(N), {
+			"aria-labelledby": y(I)?.labelId.value,
+			"aria-invalid": L.value || void 0,
+			"aria-describedby": y(I)?.describedBy.value,
+			class: V.value
 		}), {
-			default: y(() => [g(e.$slots, "default", {}, () => [(m(!0), s(r, null, h(j.value, (e) => (m(), s("div", {
-				key: e.value,
-				class: p(I.value ? void 0 : L.value.wrapper())
-			}, [u(v(S), {
-				id: `${v(M)}-${e.value}`,
+			default: b(() => [_(e.$slots, "default", {}, () => [(h(!0), c(i, null, g(P.value, (e) => (h(), c(i, { key: e.value }, [(j.variant ?? "radio") === "radio" ? (h(), c("div", {
+				key: 0,
+				class: m(z.value ? void 0 : B.value.wrapper())
+			}, [d(y(C), {
+				id: `${y(F)}-${e.value}`,
 				value: e.value,
 				disabled: e.disabled,
-				"aria-describedby": e.description ? `${v(M)}-${e.value}-description` : void 0,
-				class: p(z.value)
+				"aria-describedby": e.description ? `${y(F)}-${e.value}-description` : void 0,
+				class: m(H.value)
 			}, {
-				default: y(() => [u(v(x), { class: p(I.value ? void 0 : L.value.indicator()) }, null, 8, ["class"])]),
+				default: b(() => [d(y(S), { class: m(z.value ? void 0 : B.value.indicator()) }, null, 8, ["class"])]),
 				_: 1
 			}, 8, [
 				"id",
@@ -74,17 +77,48 @@ var E = ["id"], D = /*@__PURE__*/ d({
 				"disabled",
 				"aria-describedby",
 				"class"
-			]), c("div", { class: p(I.value ? void 0 : L.value.content()) }, [u(v(b), {
-				for: `${v(M)}-${e.value}`,
-				class: p(B.value)
+			]), l("div", { class: m(G.value) }, [d(y(x), {
+				for: `${y(F)}-${e.value}`,
+				class: m(U.value)
 			}, {
-				default: y(() => [l(_(e.label), 1)]),
+				default: b(() => [u(v(e.label), 1)]),
 				_: 2
-			}, 1032, ["for", "class"]), e.description ? (m(), s("p", {
+			}, 1032, ["for", "class"]), e.description ? (h(), c("p", {
 				key: 0,
-				id: `${v(M)}-${e.value}-description`,
-				class: p(V.value)
-			}, _(e.description), 11, E)) : o("", !0)], 2)], 2))), 128))])]),
+				id: `${y(F)}-${e.value}-description`,
+				class: m(W.value)
+			}, v(e.description), 11, D)) : s("", !0)], 2)], 2)) : (h(), o(y(C), {
+				key: 1,
+				value: e.value,
+				disabled: e.disabled,
+				"aria-labelledby": `${y(F)}-${e.value}-label`,
+				"aria-describedby": e.description ? `${y(F)}-${e.value}-description` : void 0,
+				class: m([H.value, "group/item"])
+			}, {
+				default: b(() => [j.variant === "card" ? (h(), c("span", {
+					key: 0,
+					class: m(K.value)
+				}, [d(y(S), { class: m(z.value ? void 0 : B.value.indicator()) }, null, 8, ["class"])], 2)) : e.icon ? (h(), o(t, {
+					key: 1,
+					icon: e.icon,
+					"data-slot": "icon",
+					class: m(q.value)
+				}, null, 8, ["icon", "class"])) : s("", !0), l("span", { class: m(G.value) }, [l("span", {
+					id: `${y(F)}-${e.value}-label`,
+					class: m(U.value)
+				}, v(e.label), 11, O), e.description ? (h(), c("span", {
+					key: 0,
+					id: `${y(F)}-${e.value}-description`,
+					class: m(W.value)
+				}, v(e.description), 11, k)) : s("", !0)], 2)]),
+				_: 2
+			}, 1032, [
+				"value",
+				"disabled",
+				"aria-labelledby",
+				"aria-describedby",
+				"class"
+			]))], 64))), 128))])]),
 			_: 3
 		}, 16, [
 			"aria-labelledby",
@@ -95,4 +129,4 @@ var E = ["id"], D = /*@__PURE__*/ d({
 	}
 });
 //#endregion
-export { D as default };
+export { A as default };

package/dist/components/Switch.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { useFormField as t } from "../composables/form.js";
 import { switchTheme as n } from "../theme/switch.js";
-import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
-import { Label as v, SwitchRoot as y, SwitchThumb as b, useForwardPropsEmits as x, useId as S } from "reka-ui";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, useSlots as _, withCtx as v } from "vue";
+import { Label as y, SwitchRoot as b, SwitchThumb as x, useForwardPropsEmits as S, useId as C } from "reka-ui";
 //#region src/components/Switch.vue?vue&type=script&setup=true&lang.ts
-var C = ["id"], w = /*@__PURE__*/ u({
+var w = ["id"], T = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "Switch",
 	props: {
@@ -39,56 +39,56 @@ var C = ["id"], w = /*@__PURE__*/ u({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(u, { emit: w }) {
-		let T = u, E = w, D = x(r(() => {
-			let { label: e, description: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = T;
+	setup(u, { emit: T }) {
+		let E = u, D = T, O = S(r(() => {
+			let { label: e, description: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = E;
 			return c;
-		}), E), O = S(), k = t(), A = r(() => T.invalid ?? k?.invalid.value ?? !1), j = r(() => T.id ?? k?.id.value ?? O);
-		k && (k.id.value = j.value);
-		let M = r(() => !!(T.label || T.description)), N = e(), P = r(() => T.unstyled ?? N.unstyled), F = r(() => n({
-			size: T.size,
-			withText: M.value,
-			invalid: A.value
-		})), I = r(() => P.value ? T.ui?.wrapper : F.value.wrapper({ class: T.ui?.wrapper })), L = r(() => P.value ? [T.ui?.root, T.class] : F.value.root({ class: [T.ui?.root, T.class] })), R = r(() => P.value ? T.ui?.thumb : F.value.thumb({ class: T.ui?.thumb })), z = r(() => P.value ? T.ui?.content : F.value.content({ class: T.ui?.content })), B = r(() => P.value ? T.ui?.label : F.value.label({ class: T.ui?.label })), V = r(() => P.value ? T.ui?.description : F.value.description({ class: T.ui?.description }));
-		return (e, t) => M.value ? (p(), o("div", {
+		}), D), k = _(), A = C(), j = t(), M = r(() => E.invalid ?? j?.invalid.value ?? !1), N = r(() => E.id ?? j?.id.value ?? A);
+		j && (j.id.value = N.value);
+		let P = r(() => !!(E.description || k.description)), F = r(() => !!(E.label || k.label || P.value)), I = r(() => P.value ? `${N.value}-description` : void 0), L = e(), R = r(() => E.unstyled ?? L.unstyled), z = r(() => n({
+			size: E.size,
+			withText: F.value,
+			invalid: M.value
+		})), B = r(() => R.value ? E.ui?.wrapper : z.value.wrapper({ class: E.ui?.wrapper })), V = r(() => R.value ? [E.ui?.root, E.class] : z.value.root({ class: [E.ui?.root, E.class] })), H = r(() => R.value ? E.ui?.thumb : z.value.thumb({ class: E.ui?.thumb })), U = r(() => R.value ? E.ui?.content : z.value.content({ class: E.ui?.content })), W = r(() => R.value ? E.ui?.label : z.value.label({ class: E.ui?.label })), G = r(() => R.value ? E.ui?.description : z.value.description({ class: E.ui?.description }));
+		return (e, t) => F.value ? (p(), o("div", {
 			key: 0,
-			class: f(I.value)
-		}, [l(g(y), d({ id: j.value }, {
-			...g(D),
+			class: f(B.value)
+		}, [l(g(b), d({ id: N.value }, {
+			...g(O),
 			...e.$attrs
 		}, {
-			"aria-invalid": A.value || void 0,
-			"aria-describedby": T.description ? `${j.value}-description` : void 0,
-			class: L.value
+			"aria-invalid": M.value || void 0,
+			"aria-describedby": I.value,
+			class: V.value
 		}), {
-			default: _(() => [l(g(b), { class: f(R.value) }, null, 8, ["class"])]),
+			default: v(() => [l(g(x), { class: f(H.value) }, null, 8, ["class"])]),
 			_: 1
 		}, 16, [
 			"id",
 			"aria-invalid",
 			"aria-describedby",
 			"class"
-		]), s("div", { class: f(z.value) }, [l(g(v), {
-			for: j.value,
-			class: f(B.value)
+		]), s("div", { class: f(U.value) }, [l(g(y), {
+			for: N.value,
+			class: f(W.value)
 		}, {
-			default: _(() => [m(e.$slots, "label", {}, () => [c(h(T.label), 1)])]),
+			default: v(() => [m(e.$slots, "label", {}, () => [c(h(E.label), 1)])]),
 			_: 3
-		}, 8, ["for", "class"]), T.description || e.$slots.description ? (p(), o("p", {
+		}, 8, ["for", "class"]), P.value ? (p(), o("p", {
 			key: 0,
-			id: `${j.value}-description`,
-			class: f(V.value)
-		}, [m(e.$slots, "description", {}, () => [c(h(T.description), 1)])], 10, C)) : a("", !0)], 2)], 2)) : (p(), i(g(y), d({
+			id: `${N.value}-description`,
+			class: f(G.value)
+		}, [m(e.$slots, "description", {}, () => [c(h(E.description), 1)])], 10, w)) : a("", !0)], 2)], 2)) : (p(), i(g(b), d({
 			key: 1,
-			id: j.value
+			id: N.value
 		}, {
-			...g(D),
+			...g(O),
 			...e.$attrs
 		}, {
-			"aria-invalid": A.value || void 0,
-			class: L.value
+			"aria-invalid": M.value || void 0,
+			class: V.value
 		}), {
-			default: _(() => [l(g(b), { class: f(R.value) }, null, 8, ["class"])]),
+			default: v(() => [l(g(x), { class: f(H.value) }, null, 8, ["class"])]),
 			_: 1
 		}, 16, [
 			"id",
@@ -98,4 +98,4 @@ var C = ["id"], w = /*@__PURE__*/ u({
 	}
 });
 //#endregion
-export { w as default };
+export { T as default };

package/dist/theme/checkbox.d.ts

@@ -1,96 +1,99 @@
 export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
+    variant: {
+        checkbox: {
             root: string;
-            indicator: string;
         };
-        md: {
+        card: {
             root: string;
-            indicator: string;
         };
-        lg: {
+        tile: {
             root: string;
-            indicator: string;
+            content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     withText: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
     invalid: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
 }, {
     wrapper: string;
     root: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;
 }, undefined, {
-    size: {
-        sm: {
+    variant: {
+        checkbox: {
             root: string;
-            indicator: string;
         };
-        md: {
+        card: {
             root: string;
-            indicator: string;
         };
-        lg: {
+        tile: {
             root: string;
-            indicator: string;
+            content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     withText: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
     invalid: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
 }, {
     wrapper: string;
     root: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        sm: {
+    variant: {
+        checkbox: {
             root: string;
-            indicator: string;
         };
-        md: {
+        card: {
             root: string;
-            indicator: string;
         };
-        lg: {
+        tile: {
             root: string;
-            indicator: string;
+            content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
     withText: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
     invalid: {
-        true: {
-            root: string;
-        };
+        true: {};
     };
 }, {
     wrapper: string;
     root: string;
+    mark: string;
     indicator: string;
+    icon: string;
     content: string;
     label: string;
     description: string;

package/dist/theme/checkbox.js

@@ -3,36 +3,138 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "peer flex shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-background text-primary-foreground transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
+		root: "peer cursor-pointer transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50",
+		mark: "flex shrink-0 items-center justify-center rounded border border-border bg-background text-primary-foreground transition-[color,background-color,border-color] group-data-[state=checked]/item:border-primary group-data-[state=checked]/item:bg-primary group-data-[state=indeterminate]/item:border-primary group-data-[state=indeterminate]/item:bg-primary",
 		indicator: "flex items-center justify-center text-current",
+		icon: "text-muted-foreground transition-colors",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",
 		description: "text-sm leading-snug text-muted-foreground"
 	},
 	variants: {
+		variant: {
+			checkbox: { root: "flex shrink-0 items-center justify-center rounded border border-border bg-background text-primary-foreground data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary" },
+			card: { root: "flex w-full items-start gap-3 rounded-lg border border-border bg-background text-left hover:bg-accent/50 data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=indeterminate]:border-primary" },
+			tile: {
+				root: "flex w-full flex-col items-center gap-2 rounded-lg border border-border bg-background text-center hover:bg-accent/50 data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:[&_[data-slot=icon]]:text-primary",
+				content: "justify-items-center gap-0.5"
+			}
+		},
 		size: {
-			sm: {
+			sm: {},
+			md: {},
+			lg: {}
+		},
+		withText: { true: {} },
+		invalid: { true: {} }
+	},
+	compoundVariants: [
+		{
+			variant: "checkbox",
+			size: "sm",
+			class: {
 				root: "size-3.5",
 				indicator: "[&_svg]:size-2.5"
-			},
-			md: {
+			}
+		},
+		{
+			variant: "checkbox",
+			size: "md",
+			class: {
 				root: "size-4",
 				indicator: "[&_svg]:size-3"
-			},
-			lg: {
+			}
+		},
+		{
+			variant: "checkbox",
+			size: "lg",
+			class: {
 				root: "size-5",
 				indicator: "[&_svg]:size-3.5"
 			}
 		},
-		withText: { true: { root: "mt-0.5" } },
-		invalid: { true: { root: "border-red-500 focus-visible:ring-red-500/40" } }
-	},
-	compoundVariants: [{
-		size: "lg",
-		withText: !0,
-		class: { root: "mt-0" }
-	}],
-	defaultVariants: { size: "md" }
+		{
+			variant: "checkbox",
+			withText: !0,
+			class: { root: "mt-0.5" }
+		},
+		{
+			variant: "checkbox",
+			size: "lg",
+			withText: !0,
+			class: { root: "mt-0" }
+		},
+		{
+			variant: "checkbox",
+			invalid: !0,
+			class: { root: "border-red-500 focus-visible:ring-red-500/40" }
+		},
+		{
+			variant: "card",
+			size: "sm",
+			class: {
+				root: "p-3",
+				mark: "mt-0.5 size-3.5",
+				indicator: "[&_svg]:size-2.5"
+			}
+		},
+		{
+			variant: "card",
+			size: "md",
+			class: {
+				root: "p-4",
+				mark: "mt-0.5 size-4",
+				indicator: "[&_svg]:size-3"
+			}
+		},
+		{
+			variant: "card",
+			size: "lg",
+			class: {
+				root: "p-5",
+				mark: "size-5",
+				indicator: "[&_svg]:size-3.5"
+			}
+		},
+		{
+			variant: "card",
+			invalid: !0,
+			class: { root: "border-red-500 focus-visible:ring-red-500/40" }
+		},
+		{
+			variant: "tile",
+			size: "sm",
+			class: {
+				root: "p-3",
+				icon: "size-5"
+			}
+		},
+		{
+			variant: "tile",
+			size: "md",
+			class: {
+				root: "p-4",
+				icon: "size-6"
+			}
+		},
+		{
+			variant: "tile",
+			size: "lg",
+			class: {
+				root: "p-5",
+				icon: "size-7"
+			}
+		},
+		{
+			variant: "tile",
+			invalid: !0,
+			class: { root: "border-red-500 focus-visible:ring-red-500/40" }
+		}
+	],
+	defaultVariants: {
+		variant: "checkbox",
+		size: "md"
+	}
 });
 //#endregion
 export { t as checkboxTheme };

package/dist/theme/presets.d.ts

@@ -33,8 +33,14 @@ export interface ThemeColors {
 }
 /** A theme provides token values per appearance mode. Omitted tokens keep the defaults from theme.css. */
 export interface Theme {
-    light: ThemeColors;
-    dark: ThemeColors;
+    light?: ThemeColors;
+    dark?: ThemeColors;
+    /**
+     * Corner radius for the whole library — what `rounded-lg` resolves to, with
+     * the rest of the scale derived from it. One value rather than one per mode:
+     * corners do not change between light and dark.
+     */
+    radius?: string;
 }
 /**
  * Built-in theme presets. Each swaps only the brand primary (solid colour +

package/dist/theme/presets.js

@@ -66,8 +66,8 @@ function r(t) {
 }
 function i(e) {
 	if (typeof document > "u") return;
-	let i = typeof e == "string" ? t[e] : e, a = document.getElementById(n);
-	a || (a = document.createElement("style"), a.id = n, document.head.appendChild(a)), a.textContent = `:root { ${r(i.light)} }\n.dark { ${r(i.dark)} }`;
+	let i = typeof e == "string" ? t[e] : e, a = i.radius == null ? "" : `--iryx-radius: ${i.radius}; `, o = document.getElementById(n);
+	o || (o = document.createElement("style"), o.id = n, document.head.appendChild(o)), o.textContent = `:root { ${a}${r(i.light ?? {})} }\n.dark { ${r(i.dark ?? {})} }`;
 }
 function a() {
 	typeof document > "u" || document.getElementById(n)?.remove();