@revojs/ui 0.1.58 → 0.2.1

package/dist/module/index.d.ts

@@ -31,5 +31,5 @@ export interface UiConfig {
     light: UiTheme;
     dark: UiTheme;
 }
-declare const _default: import("revojs/module").Module<"ui", UiConfig, []>;
+declare const _default: import("revojs/module").Module<"ui", UiConfig, readonly [import("revojs/module").Module<"client", import("@revojs/client/module").ClientConfig, []>]>;
 export default _default;

package/dist/module/index.js

@@ -1,17 +1,32 @@
-import { readFileSync, readdirSync } from "fs";
-import { addTypes, addVirtual, defineModule, useModule } from "revojs/module";
+import client from "@revojs/client/module";
+import tailwindcss from "@tailwindcss/vite";
+import { readFileSync } from "fs";
+import { addTypes, addVirtual, defineModule } from "revojs/module";
+import colors from "tailwindcss/colors";
 //#region src/module/index.ts
-function resolveUiClasses(source, ui) {
-	const classes = new Array();
-	for (const [, inner] of source.matchAll(/`([^`]*config\.[^`]*)`/g)) for (const token of inner.replace(/\$\{config\.([^}]+)\}/g, (_match, path) => String(path.split(".").reduce((value, key) => value[key], ui))).split(/\s+/)) if (token) classes.push(token);
-	for (const [, path] of source.replace(/`[^`]*`/g, "").matchAll(/config\.([A-Za-z0-9_.]+)/g)) {
-		const value = path.split(".").reduce((current, key) => current[key], ui);
-		if (typeof value === "string" && value) classes.push(value);
-	}
-	return classes;
+function themeVariables(theme) {
+	return Object.entries(theme).map(([key, value]) => {
+		const [palette, opacity] = value.split("/");
+		const [name, shade] = palette.split("-");
+		const color = shade ? colors[name][shade] : colors[name];
+		return `--ui-${key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}: ${opacity ? `color-mix(in oklab, ${color} ${opacity}%, transparent)` : color};`;
+	}).join("\n");
 }
+var radii = {
+	"rounded-none": "0",
+	"rounded-xs": "0.125rem",
+	"rounded-sm": "0.25rem",
+	"rounded-md": "0.375rem",
+	"rounded-lg": "0.5rem",
+	"rounded-xl": "0.75rem",
+	"rounded-2xl": "1rem",
+	"rounded-3xl": "1.5rem",
+	"rounded-4xl": "2rem",
+	"rounded-full": "9999px"
+};
 var module_default = defineModule({
 	name: "ui",
+	modules: [client],
 	config: () => ({
 		radius: "rounded-md",
 		light: {
@@ -58,65 +73,28 @@ var module_default = defineModule({
 		}
 	}),
 	setup(config) {
-		const { fromModule } = useModule(import.meta.url);
-		const ui = config.ui;
-		const classes = /* @__PURE__ */ new Set();
 		const manifest = JSON.parse(readFileSync("package.json", "utf8"));
 		const iconPackages = [...new Set(Object.keys({
 			...manifest.dependencies,
 			...manifest.devDependencies,
 			...manifest.optionalDependencies
 		}).filter((name) => name.startsWith("@iconify-json/")))].sort();
-		let componentsDir = "";
 		addVirtual(config, "ui/icons", () => {
 			return `export default {${iconPackages.map((name) => `${JSON.stringify(name.slice(14))}: () => import(${JSON.stringify(`${name}/icons.json`)}).then((module) => module.default)`).join(",")}};`;
 		});
 		addTypes(config, "ui-icons", () => "declare module \"#ui/icons\" { import type { IconifyJSON } from \"@iconify/types\"; const icons: Record<string, () => Promise<IconifyJSON>>; export default icons; }");
-		for (const directory of [fromModule("../vue/components"), fromModule("../../src/vue/components")]) {
-			let entries;
-			try {
-				entries = readdirSync(directory).filter((entry) => entry.endsWith(".vue"));
-			} catch {
-				continue;
-			}
-			componentsDir = directory;
-			for (const entry of entries) for (const token of resolveUiClasses(readFileSync(`${directory}/${entry}`, "utf8"), ui)) classes.add(token);
-			break;
-		}
-		if (!componentsDir) return;
-		const dynamics = [...classes].join(" ");
-		return { vite: { plugins: [{
-			name: "@revojs/ui",
-			enforce: "pre",
-			transform(code, key) {
-				if (!key.split("?", 1)[0].endsWith(".css")) return;
-				if (!code.includes("@import \"tailwindcss\"") && !code.includes("@import 'tailwindcss'")) return;
-				const sourceDirective = `@source "${componentsDir}";`;
-				const inlineDirective = `@source inline("${dynamics}");`;
-				const baseDirective = `@layer base {
-    * {
-        @apply border-${ui.light.border} outline-${ui.light.ring};
-
-        @variant dark {
-            @apply border-${ui.dark.border} outline-${ui.dark.ring};
-        }
-    }
-
-    body {
-        @apply bg-${ui.light.background} text-${ui.light.foreground};
-
-        @variant dark {
-            @apply bg-${ui.dark.background} text-${ui.dark.foreground};
-        }
-    }
-}`;
-				let result = code;
-				if (!result.includes(sourceDirective)) result += `\n${sourceDirective}`;
-				if (dynamics && !result.includes(inlineDirective)) result += `\n${inlineDirective}`;
-				if (!result.includes(baseDirective)) result += `\n${baseDirective}`;
-				if (result !== code) return result;
-			}
-		}] } };
+		return {
+			client: { html: { head: { children: [{
+				tagName: "script",
+				attributes: { type: "module" },
+				children: ["import \"@revojs/ui/style.css\";"]
+			}, {
+				tagName: "style",
+				attributes: {},
+				children: [`:root { --ui-radius: ${radii[config.ui.radius]}; ${themeVariables(config.ui.light)} } @media (prefers-color-scheme: dark) { :root { ${themeVariables(config.ui.dark)} } }`]
+			}] } } },
+			vite: { plugins: [tailwindcss()] }
+		};
 	}
 });
 //#endregion

package/dist/style.css

@@ -0,0 +1,36 @@
+@import "tailwindcss";
+
+@source "./vue/components";
+
+@theme inline {
+    --color-background: var(--ui-background);
+    --color-foreground: var(--ui-foreground);
+    --color-card: var(--ui-card);
+    --color-card-foreground: var(--ui-card-foreground);
+    --color-popover: var(--ui-popover);
+    --color-popover-foreground: var(--ui-popover-foreground);
+    --color-primary: var(--ui-primary);
+    --color-primary-foreground: var(--ui-primary-foreground);
+    --color-secondary: var(--ui-secondary);
+    --color-secondary-foreground: var(--ui-secondary-foreground);
+    --color-muted: var(--ui-muted);
+    --color-muted-foreground: var(--ui-muted-foreground);
+    --color-accent: var(--ui-accent);
+    --color-accent-foreground: var(--ui-accent-foreground);
+    --color-destructive: var(--ui-destructive);
+    --color-destructive-foreground: var(--ui-destructive-foreground);
+    --color-border: var(--ui-border);
+    --color-input: var(--ui-input);
+    --color-ring: var(--ui-ring);
+    --radius-ui: var(--ui-radius);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

package/dist/vue/components/button.vue

@@ -1,17 +1,8 @@
 <template>
     <component
         :is="is"
-        class="inline-flex cursor-pointer items-center justify-center gap-2 border border-transparent font-[inherit] font-medium leading-none no-underline transition-[background-color,border-color,color,opacity] duration-150 hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:opacity-50"
-        :class="[
-            config.radius,
-            `outline-${config.light.ring}`,
-            `dark:outline-${config.dark.ring}`,
-            fonts[font],
-            layouts[layout],
-            sizes[size],
-            texts[text],
-            variants[variant],
-        ]"
+        class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui border border-transparent font-[inherit] font-medium leading-none no-underline outline-ring transition-[background-color,border-color,color,opacity] duration-150 hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:opacity-50"
+        :class="[fonts[font], layouts[layout], sizes[size], texts[text], variants[variant]]"
         :type="attributes.type ?? 'button'"
         :disabled="disabled"
     >
@@ -26,7 +17,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { useAttrs, type Component } from "vue";
 import type { ButtonFont, ButtonLayout, ButtonSize, ButtonText, ButtonVariant } from "../../components/button.ts";
 import Icon from "./icon.vue";
@@ -85,40 +75,13 @@ const texts: Record<ButtonText, string> = {
     md: "text-base",
 };
 
-const variants: Record<ButtonVariant, Array<string>> = {
-    primary: [
-        `bg-${config.light.primary}`,
-        `text-${config.light.primaryForeground}`,
-        `dark:bg-${config.dark.primary}`,
-        `dark:text-${config.dark.primaryForeground}`,
-    ],
-    secondary: [
-        `bg-${config.light.secondary}`,
-        `text-${config.light.secondaryForeground}`,
-        `dark:bg-${config.dark.secondary}`,
-        `dark:text-${config.dark.secondaryForeground}`,
-    ],
-    outline: [
-        `border-${config.light.border}`,
-        `bg-${config.light.background}`,
-        `text-${config.light.foreground}`,
-        `dark:border-${config.dark.border}`,
-        `dark:bg-${config.dark.background}`,
-        `dark:text-${config.dark.foreground}`,
-    ],
-    ghost: [`text-${config.light.foreground}`, `dark:text-${config.dark.foreground}`],
-    destructive: [
-        `bg-${config.light.destructive}`,
-        `text-${config.light.destructiveForeground}`,
-        `dark:bg-${config.dark.destructive}`,
-        `dark:text-${config.dark.destructiveForeground}`,
-    ],
-    danger: [
-        `bg-${config.light.destructive}`,
-        `text-${config.light.destructiveForeground}`,
-        `dark:bg-${config.dark.destructive}`,
-        `dark:text-${config.dark.destructiveForeground}`,
-    ],
-    text: [`text-${config.light.foreground}`, `dark:text-${config.dark.foreground}`],
+const variants: Record<ButtonVariant, string> = {
+    primary: "bg-primary text-primary-foreground",
+    secondary: "bg-secondary text-secondary-foreground",
+    outline: "border-border bg-background text-foreground",
+    ghost: "text-foreground",
+    destructive: "bg-destructive text-destructive-foreground",
+    danger: "bg-destructive text-destructive-foreground",
+    text: "text-foreground",
 };
 </script>

package/dist/vue/components/card.vue

@@ -1,20 +1,10 @@
 <template>
     <section
-        class="flex flex-col overflow-hidden border shadow-sm"
-        :class="[
-            config.radius,
-            `border-${config.light.border}`,
-            `bg-${config.light.card}`,
-            `text-${config.light.cardForeground}`,
-            `dark:border-${config.dark.border}`,
-            `dark:bg-${config.dark.card}`,
-            `dark:text-${config.dark.cardForeground}`,
-        ]"
+        class="flex flex-col overflow-hidden rounded-ui border border-border bg-card text-card-foreground shadow-sm"
     >
         <header
             v-if="label || title || description || $slots.header || $slots.actions"
-            class="flex items-start justify-between gap-4 border-b p-5"
-            :class="[`border-${config.light.border}`, `dark:border-${config.dark.border}`]"
+            class="flex items-start justify-between gap-4 border-b border-border p-5"
         >
             <slot name="header">
                 <div class="flex flex-col gap-1.5">
@@ -39,8 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
-
 const {
     label = undefined,
     title = undefined,

package/dist/vue/components/checkbox.vue

@@ -1,8 +1,7 @@
 <template>
     <label class="inline-flex items-start gap-3" :class="interactionVariants[interaction]">
         <input
-            class="mt-0.5 size-5 shrink-0 cursor-inherit accent-current"
-            :class="[`text-${config.light.primary}`, `dark:text-${config.dark.primary}`]"
+            class="mt-0.5 size-5 shrink-0 cursor-inherit accent-current text-primary"
             type="checkbox"
             :checked="modelValue"
             :name="name"
@@ -21,7 +20,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 

package/dist/vue/components/collection.vue

@@ -1,16 +1,7 @@
 <template>
     <div
         v-if="items"
-        class="flex w-full flex-col divide-y overflow-hidden border"
-        :class="[
-            config.radius,
-            `divide-${config.light.border}`,
-            `border-${config.light.border}`,
-            `bg-${config.light.card}`,
-            `dark:divide-${config.dark.border}`,
-            `dark:border-${config.dark.border}`,
-            `dark:bg-${config.dark.card}`,
-        ]"
+        class="flex w-full flex-col divide-y divide-border overflow-hidden rounded-ui border border-border bg-card"
     >
         <template v-if="items.length">
             <div v-for="(item, index) in items" :key="index">
@@ -25,7 +16,6 @@
 </template>
 
 <script setup generic="T" lang="ts">
-import config from "#config/ui";
 import type { CollectionColumns } from "../../components/collection.ts";
 
 const {

package/dist/vue/components/counter.vue

@@ -3,8 +3,7 @@
         <span v-if="label" class="text-sm font-medium">{{ label }}</span>
 
         <div
-            class="grid h-10 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center overflow-hidden border"
-            :class="[config.radius, `border-${config.light.input}`, `dark:border-${config.dark.input}`]"
+            class="grid h-10 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center overflow-hidden rounded-ui border border-input"
         >
             <Button
                 class="text-lg"
@@ -32,7 +31,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import Button from "./button.vue";
 
 const {

package/dist/vue/components/field.vue

@@ -6,11 +6,7 @@
 
         <slot />
 
-        <p
-            v-if="error"
-            class="text-sm"
-            :class="[`text-${config.light.destructive}`, `dark:text-${config.dark.destructive}`]"
-        >
+        <p v-if="error" class="text-sm text-destructive">
             {{ error }}
         </p>
         <p v-else-if="description" class="text-sm opacity-60">
@@ -20,8 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
-
 const {
     label = undefined,
     description = undefined,

package/dist/vue/components/input.vue

@@ -1,14 +1,7 @@
 <template>
     <span
-        class="flex min-h-10 w-full cursor-text items-center gap-2 border px-3 text-sm focus-within:ring-2"
-        :class="[
-            config.radius,
-            `border-${config.light.input}`,
-            `ring-${config.light.ring}`,
-            `dark:border-${config.dark.input}`,
-            `dark:ring-${config.dark.ring}`,
-            interactionVariants[interaction],
-        ]"
+        class="flex min-h-10 w-full cursor-text items-center gap-2 rounded-ui border border-input px-3 text-sm ring-ring focus-within:ring-2"
+        :class="interactionVariants[interaction]"
     >
         <slot name="leading" />
 
@@ -34,7 +27,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import Icon from "./icon.vue";

package/dist/vue/components/link.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import type { Component } from "vue";
 import type { LinkVariant } from "../../components/link.ts";
 
@@ -26,8 +25,8 @@ const {
     variant?: LinkVariant;
 }>();
 
-const variants: Record<LinkVariant, Array<string>> = {
-    primary: [`text-${config.light.foreground}`, `dark:text-${config.dark.foreground}`],
-    muted: [`text-${config.light.mutedForeground}`, `dark:text-${config.dark.mutedForeground}`],
+const variants: Record<LinkVariant, string> = {
+    primary: "text-foreground",
+    muted: "text-muted-foreground",
 };
 </script>

package/dist/vue/components/popover.vue

@@ -14,17 +14,8 @@
             :id="id"
             ref="popover"
             popover
-            class="m-0 mt-2 max-w-sm border shadow-xl"
-            :class="[
-                config.radius,
-                `border-${config.light.border}`,
-                `bg-${config.light.popover}`,
-                `text-${config.light.popoverForeground}`,
-                `dark:border-${config.dark.border}`,
-                `dark:bg-${config.dark.popover}`,
-                `dark:text-${config.dark.popoverForeground}`,
-                contentClass,
-            ]"
+            class="m-0 mt-2 max-w-sm rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
+            :class="contentClass"
             :style="position"
             @toggle="handleToggle"
         >
@@ -34,7 +25,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { ref, useId, useTemplateRef, watchEffect } from "vue";
 import type { ButtonLayout } from "../../components/button.ts";
 import Button from "./button.vue";

package/dist/vue/components/progress.vue

@@ -9,25 +9,19 @@
         <progress class="sr-only" :value="value" :max="max">{{ percent }}%</progress>
 
         <div
-            class="h-2 w-full overflow-hidden rounded-full"
-            :class="[`bg-${config.light.secondary}`, `dark:bg-${config.dark.secondary}`]"
+            class="h-2 w-full overflow-hidden rounded-full bg-secondary"
             role="progressbar"
             :aria-label="label"
             :aria-valuenow="value"
             aria-valuemin="0"
             :aria-valuemax="max"
         >
-            <div
-                class="h-full rounded-full transition-[width]"
-                :class="[`bg-${config.light.primary}`, `dark:bg-${config.dark.primary}`]"
-                :style="{ width: `${percent}%` }"
-            />
+            <div class="h-full rounded-full bg-primary transition-[width]" :style="{ width: `${percent}%` }" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed } from "vue";
 
 const {

package/dist/vue/components/radio.vue

@@ -1,8 +1,7 @@
 <template>
     <label class="inline-flex items-start gap-3" :class="interactionVariants[interaction]">
         <input
-            class="mt-0.5 size-5 shrink-0 cursor-inherit accent-current"
-            :class="[`text-${config.light.primary}`, `dark:text-${config.dark.primary}`]"
+            class="mt-0.5 size-5 shrink-0 cursor-inherit accent-current text-primary"
             type="radio"
             :checked="modelValue === value"
             :value="value"
@@ -23,7 +22,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { RadioValue } from "../../components/radio.ts";

package/dist/vue/components/range.vue

@@ -9,8 +9,7 @@
         </span>
 
         <input
-            class="h-2 w-full cursor-pointer accent-current disabled:cursor-not-allowed"
-            :class="[`text-${config.light.primary}`, `dark:text-${config.dark.primary}`]"
+            class="h-2 w-full cursor-pointer accent-current text-primary disabled:cursor-not-allowed"
             type="range"
             :value="modelValue"
             :min="min"
@@ -23,7 +22,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 

package/dist/vue/components/separator.vue

@@ -1,14 +1,13 @@
 <template>
     <div
-        class="shrink-0"
-        :class="[`bg-${config.light.border}`, `dark:bg-${config.dark.border}`, variants[selected]]"
+        class="shrink-0 bg-border"
+        :class="variants[selected]"
         :role="decorative ? 'none' : 'separator'"
         :aria-orientation="decorative ? undefined : selected"
     />
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed } from "vue";
 import type { DividerVariant, SeparatorOrientation } from "../../components/separator.ts";
 

package/dist/vue/components/switch.vue

@@ -3,8 +3,8 @@
         <input v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
 
         <button
-            class="relative mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
-            :class="[variants[state], `outline-${config.light.ring}`, `dark:outline-${config.dark.ring}`]"
+            class="relative mt-0.5 h-6 w-11 shrink-0 rounded-full outline-ring transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
+            :class="variants[state]"
             type="button"
             role="switch"
             :aria-checked="modelValue"
@@ -28,7 +28,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { SwitchState } from "../../components/switch.ts";
@@ -65,8 +64,8 @@ const thumbVariants: Record<SwitchState, string> = {
     unchecked: "",
 };
 
-const variants: Record<SwitchState, Array<string>> = {
-    checked: [`bg-${config.light.primary}`, `dark:bg-${config.dark.primary}`],
-    unchecked: [`bg-${config.light.input}`, `dark:bg-${config.dark.input}`],
+const variants: Record<SwitchState, string> = {
+    checked: "bg-primary",
+    unchecked: "bg-input",
 };
 </script>

package/dist/vue/components/upload.vue

@@ -5,14 +5,8 @@
         </span>
 
         <div
-            class="relative flex min-h-32 flex-col items-center justify-center gap-3 border border-dashed p-5 text-center transition-colors"
-            :class="[
-                config.radius,
-                `border-${config.light.input}`,
-                variants[state],
-                `dark:border-${config.dark.input}`,
-                interactionVariants[interaction],
-            ]"
+            class="relative flex min-h-32 flex-col items-center justify-center gap-3 rounded-ui border border-input border-dashed p-5 text-center transition-colors"
+            :class="[variants[state], interactionVariants[interaction]]"
             @dragenter.prevent="isOver = true"
             @dragover.prevent="isOver = true"
             @dragleave="leave"
@@ -48,7 +42,6 @@
 </template>
 
 <script setup lang="ts">
-import config from "#config/ui";
 import { computed, ref, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { UploadState } from "../../components/upload.ts";
@@ -89,9 +82,9 @@ const interactionVariants: Record<ControlInteraction, string> = {
     enabled: "",
 };
 
-const variants: Record<UploadState, Array<string>> = {
-    idle: [`bg-${config.light.muted}`, `dark:bg-${config.dark.muted}`],
-    over: [`bg-${config.light.accent}`, `dark:bg-${config.dark.accent}`],
+const variants: Record<UploadState, string> = {
+    idle: "bg-muted",
+    over: "bg-accent",
 };
 
 function change() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.1.58",
+    "version": "0.2.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -25,7 +25,8 @@
         "./vue": {
             "types": "./dist/vue/index.d.ts",
             "import": "./dist/vue/index.js"
-        }
+        },
+        "./style.css": "./dist/style.css"
     },
     "scripts": {
         "build": "vite build",
@@ -34,7 +35,10 @@
     "dependencies": {
         "@iconify/types": "^2.0.0",
         "@iconify/utils": "^3.1.7",
-        "revojs": "*"
+        "@revojs/client": "*",
+        "@tailwindcss/vite": "^4.3.3",
+        "revojs": "*",
+        "tailwindcss": "^4.3.3"
     },
     "devDependencies": {
         "@revojs/tsconfig": "*",