@revojs/ui 0.2.8 → 0.2.9

package/dist/components/button.d.ts

@@ -1,3 +1,4 @@
+import type { IconComponent } from "./icon";
 export type ButtonType = "button" | "submit";
 export type ButtonSize = "default" | "icon";
 export type ButtonFont = "normal" | "medium" | "semibold";
@@ -5,8 +6,8 @@ export type ButtonLayout = "left" | "center" | "right";
 export type ButtonText = "sm" | "md";
 export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
 export interface ButtonProps {
-    iconPrefix?: string;
-    iconSuffix?: string;
+    iconPrefix?: IconComponent;
+    iconSuffix?: IconComponent;
     label?: string;
     font?: ButtonFont;
     layout?: ButtonLayout;

package/dist/components/icon.d.ts

@@ -1,3 +1,4 @@
+export type IconComponent = object | ((...args: Array<never>) => unknown);
 export interface IconProps {
-    name: string;
+    is: IconComponent;
 }

package/dist/components/input.d.ts

@@ -1,8 +1,9 @@
+import type { IconComponent } from "./icon";
 export interface InputProps {
     modelValue?: string | number;
     type?: string;
-    iconPrefix?: string;
-    iconSuffix?: string;
+    iconPrefix?: IconComponent;
+    iconSuffix?: IconComponent;
     placeholder?: string;
     name?: string;
     spellcheck?: boolean;

package/dist/components/navigate.d.ts

@@ -1,7 +1,8 @@
+import type { IconComponent } from "./icon";
 export interface NavigateProps {
     href: string;
     label?: string;
-    iconPrefix?: string;
-    iconSuffix?: string;
+    iconPrefix?: IconComponent;
+    iconSuffix?: IconComponent;
     active?: boolean;
 }

package/dist/module/icons.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("revojs/module").Module<"ui-icons", Record<string, never>, []>;
+export default _default;

package/dist/module/icons.js

@@ -0,0 +1,12 @@
+import { addTypes, defineModule } from "revojs/module";
+import icons from "unplugin-icons/vite";
+//#region src/module/icons.ts
+var icons_default = defineModule({
+	name: "ui-icons",
+	setup(config) {
+		addTypes(config, "ui-icons", () => "import \"unplugin-icons/types/vue3\";");
+		return { vite: { plugins: [icons({ compiler: "vue3" })] } };
+	}
+});
+//#endregion
+export { icons_default as default };

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, readonly [import("revojs/module").Module<"client", import("@revojs/client/module").ClientConfig, []>]>;
+declare const _default: import("revojs/module").Module<"ui", UiConfig, readonly [import("revojs/module").Module<"client", import("@revojs/client/module").ClientConfig, []>, import("revojs/module").Module<"ui-icons", Record<string, never>, []>]>;
 export default _default;

package/dist/module/index.js

@@ -1,7 +1,7 @@
+import icons_default from "./icons.js";
+import { defineModule } 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 themeVariables(theme) {
@@ -26,7 +26,7 @@ var radii = {
 };
 var module_default = defineModule({
 	name: "ui",
-	modules: [client],
+	modules: [client, icons_default],
 	config: () => ({
 		radius: "rounded-md",
 		light: {
@@ -73,16 +73,6 @@ var module_default = defineModule({
 		}
 	}),
 	setup(config) {
-		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();
-		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; }");
 		return {
 			client: { html: { head: { children: [{
 				tagName: "script",

package/dist/types/index.d.ts

@@ -5,13 +5,6 @@ declare module "#config/ui" {
     export default config;
 }
 
-declare module "#ui/icons" {
-    import type { IconifyJSON } from "@iconify/types";
-
-    const icons: Record<string, () => Promise<IconifyJSON>>;
-    export default icons;
-}
-
 declare module "*.vue" {
     import type { DefineComponent } from "vue";
 

package/dist/vue/components/breadcrumb.vue

@@ -11,10 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import type { BreadcrumbRoute } from "../../components/breadcrumb.ts";
+import type { BreadcrumbProps } from "../../components/breadcrumb";
 import Link from "./link.vue";
 
-defineProps<{
-    routes: Array<BreadcrumbRoute>;
-}>();
+defineProps<BreadcrumbProps>();
 </script>

package/dist/vue/components/button.vue

@@ -6,44 +6,44 @@
         :type="attributes.type ?? 'button'"
         :disabled="disabled"
     >
-        <Icon v-if="iconPrefix" :name="iconPrefix" />
+        <Icon v-if="iconPrefix" :is="iconPrefix" />
 
         <slot>
             <span v-if="label" class="truncate px-1" :class="labelLayouts[layout]">{{ label }}</span>
         </slot>
 
-        <Icon v-if="iconSuffix" :name="iconSuffix" />
+        <Icon v-if="iconSuffix" :is="iconSuffix" />
     </component>
 </template>
 
 <script setup lang="ts">
 import { useAttrs, type Component } from "vue";
-import type { ButtonFont, ButtonLayout, ButtonSize, ButtonText, ButtonVariant } from "../../components/button.ts";
+import type {
+    ButtonFont,
+    ButtonLayout,
+    ButtonProps,
+    ButtonSize,
+    ButtonText,
+    ButtonVariant,
+} from "../../components/button";
 import Icon from "./icon.vue";
 
 const {
     is = "button",
-    iconPrefix = undefined,
-    iconSuffix = undefined,
-    label = undefined,
+    iconPrefix,
+    iconSuffix,
+    label,
     font = "medium",
     layout = "center",
     size = "default",
     text = "sm",
     variant = "primary",
     disabled = false,
-} = defineProps<{
-    is?: string | Component;
-    iconPrefix?: string;
-    iconSuffix?: string;
-    label?: string;
-    font?: ButtonFont;
-    layout?: ButtonLayout;
-    size?: ButtonSize;
-    text?: ButtonText;
-    variant?: ButtonVariant;
-    disabled?: boolean;
-}>();
+} = defineProps<
+    Omit<ButtonProps, "type"> & {
+        is?: string | Component;
+    }
+>();
 
 const attributes = useAttrs();
 

package/dist/vue/components/card.vue

@@ -32,13 +32,7 @@
 </template>
 
 <script setup lang="ts">
-const {
-    label = undefined,
-    title = undefined,
-    description = undefined,
-} = defineProps<{
-    label?: string;
-    title?: string;
-    description?: string;
-}>();
+import type { CardProps } from "../../components/card";
+
+const { label, title, description } = defineProps<CardProps>();
 </script>

package/dist/vue/components/checkbox.vue

@@ -32,23 +32,17 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+import type { CheckboxProps } from "../../components/checkbox";
 import type { ControlInteraction } from "../../components/control.ts";
 
 const {
     modelValue = false,
-    label = undefined,
-    description = undefined,
-    name = undefined,
+    label,
+    description,
+    name,
     required = false,
     disabled = false,
-} = defineProps<{
-    modelValue?: boolean;
-    label?: string;
-    description?: string;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+} = defineProps<CheckboxProps>();
 
 defineEmits<{
     "update:modelValue": [value: boolean];

package/dist/vue/components/collection.vue

@@ -16,17 +16,9 @@
 </template>
 
 <script setup generic="T" lang="ts">
-import type { CollectionColumns } from "../../components/collection.ts";
+import type { CollectionColumns, CollectionProps } from "../../components/collection";
 
-const {
-    items = undefined,
-    columns = 1,
-    emptyLabel = "Nothing found",
-} = defineProps<{
-    items?: Array<T>;
-    columns?: CollectionColumns;
-    emptyLabel?: string;
-}>();
+const { items, columns = 1, emptyLabel = "Nothing found" } = defineProps<CollectionProps<T>>();
 
 defineSlots<{
     default: (() => unknown) & ((props: { item: T; index: number }) => unknown);

package/dist/vue/components/container.vue

@@ -5,11 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import type { ContainerSize } from "../../components/container.ts";
+import type { ContainerProps, ContainerSize } from "../../components/container";
 
-const { size = "5xl" } = defineProps<{
-    size?: ContainerSize;
-}>();
+const { size = "5xl" } = defineProps<ContainerProps>();
 
 const sizes: Record<ContainerSize, string> = {
     "3xl": "max-w-3xl",

package/dist/vue/components/counter.vue

@@ -9,7 +9,7 @@
                 class="text-lg"
                 size="icon"
                 variant="ghost"
-                icon-prefix="minus-sign"
+                :icon-prefix="MinusIcon"
                 :disabled="disabled || modelValue <= min"
                 aria-label="Decrease"
                 @click="change(-step)"
@@ -21,7 +21,7 @@
                 class="text-lg"
                 size="icon"
                 variant="ghost"
-                icon-prefix="add-01"
+                :icon-prefix="AddIcon"
                 :disabled="disabled || modelValue >= max"
                 aria-label="Increase"
                 @click="change(step)"
@@ -31,23 +31,19 @@
 </template>
 
 <script setup lang="ts">
+import AddIcon from "~icons/hugeicons/add-01";
+import MinusIcon from "~icons/hugeicons/minus-sign";
+import type { CounterProps } from "../../components/counter";
 import Button from "./button.vue";
 
 const {
     modelValue = 0,
-    label = undefined,
+    label,
     min = -Infinity,
     max = Infinity,
     step = 1,
     disabled = false,
-} = defineProps<{
-    modelValue?: number;
-    label?: string;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-}>();
+} = defineProps<CounterProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: number];

package/dist/vue/components/dialog.vue

@@ -7,13 +7,7 @@
     >
         <Card :title="title" :description="description" class="shadow-2xl">
             <template #actions>
-                <Button
-                    size="icon"
-                    variant="ghost"
-                    icon-prefix="multiplication-sign"
-                    :aria-label="closeLabel"
-                    @click="close"
-                />
+                <Button size="icon" variant="ghost" :icon-prefix="CloseIcon" :aria-label="closeLabel" @click="close" />
             </template>
             <slot :open="open" :close="close" :toggle="toggle" />
 
@@ -25,21 +19,13 @@
 </template>
 
 <script setup lang="ts">
+import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import { useTemplateRef, watchEffect } from "vue";
+import type { DialogProps } from "../../components/dialog";
 import Button from "./button.vue";
 import Card from "./card.vue";
 
-const {
-    modelValue = false,
-    title = undefined,
-    description = undefined,
-    closeLabel = "Close",
-} = defineProps<{
-    modelValue?: boolean;
-    title?: string;
-    description?: string;
-    closeLabel?: string;
-}>();
+const { modelValue = false, title, description, closeLabel = "Close" } = defineProps<DialogProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean];

package/dist/vue/components/field.vue

@@ -16,17 +16,7 @@
 </template>
 
 <script setup lang="ts">
-const {
-    label = undefined,
-    description = undefined,
-    error = undefined,
-    required = false,
-    disabled = false,
-} = defineProps<{
-    label?: string;
-    description?: string;
-    error?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+import type { FieldProps } from "../../components/field";
+
+const { label, description, error, required = false, disabled = false } = defineProps<FieldProps>();
 </script>

package/dist/vue/components/heading.vue

@@ -6,19 +6,18 @@
 
 <script setup lang="ts">
 import type { Component } from "vue";
-import type { HeadingLayout, HeadingText } from "../../components/heading.ts";
+import type { HeadingLayout, HeadingProps, HeadingText } from "../../components/heading";
 
 const {
     is = "h2",
-    label = undefined,
+    label,
     text = "xl",
     layout = "left",
-} = defineProps<{
-    is?: string | Component;
-    label?: string;
-    text?: HeadingText;
-    layout?: HeadingLayout;
-}>();
+} = defineProps<
+    HeadingProps & {
+        is?: string | Component;
+    }
+>();
 
 const layouts: Record<HeadingLayout, string> = {
     left: "text-left",

package/dist/vue/components/icon.vue

@@ -1,49 +1,11 @@
 <template>
     <span aria-hidden="true" class="block size-[1em] shrink-0">
-        <component :is="icon" class="block size-full" />
+        <component :is="is" class="block size-full" />
     </span>
 </template>
 
 <script setup lang="ts">
-import iconSets from "#ui/icons";
-import { getIconData, iconToSVG, replaceIDs } from "@iconify/utils";
-import { computed, defineAsyncComponent, h, markRaw } from "vue";
+import type { IconProps } from "../../components/icon";
 
-const { name } = defineProps<{
-    name: string;
-}>();
-
-const icon = computed(() => {
-    const separator = name.indexOf(":");
-    const prefix = separator === -1 ? undefined : name.slice(0, separator);
-    const iconName = separator === -1 ? name : name.slice(separator + 1);
-
-    return defineAsyncComponent(async () => {
-        for (const [key, resolve] of Object.entries(iconSets)) {
-            if (prefix && key !== prefix) {
-                continue;
-            }
-
-            const set = await resolve();
-
-            if (prefix && set.prefix !== prefix) {
-                continue;
-            }
-
-            const data = getIconData(set, iconName);
-
-            if (data) {
-                const svg = iconToSVG(data);
-                const body = replaceIDs(svg.body);
-
-                return markRaw({
-                    name: `${set.prefix}-${iconName}`,
-                    render: () => h("svg", { ...svg.attributes, innerHTML: body }),
-                });
-            }
-        }
-
-        return markRaw({ render: () => null });
-    });
-});
+const { is } = defineProps<IconProps>();
 </script>

package/dist/vue/components/input.vue

@@ -5,7 +5,7 @@
     >
         <slot name="leading" />
 
-        <Icon v-if="iconPrefix" :name="iconPrefix" />
+        <Icon v-if="iconPrefix" :is="iconPrefix" />
 
         <input
             class="w-full min-w-0 appearance-none bg-transparent py-2 outline-none placeholder:opacity-50"
@@ -20,7 +20,7 @@
             @input="input"
         />
 
-        <Icon v-if="iconSuffix" :name="iconSuffix" />
+        <Icon v-if="iconSuffix" :is="iconSuffix" />
 
         <slot name="trailing" />
     </span>
@@ -29,31 +29,21 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
+import type { InputProps } from "../../components/input";
 import Icon from "./icon.vue";
 
 const {
-    modelValue = undefined,
+    modelValue,
     type = "text",
-    iconPrefix = undefined,
-    iconSuffix = undefined,
-    placeholder = undefined,
-    name = undefined,
+    iconPrefix,
+    iconSuffix,
+    placeholder,
+    name,
     spellcheck = undefined,
     required = false,
     readonly = false,
     disabled = false,
-} = defineProps<{
-    modelValue?: string | number;
-    type?: string;
-    iconPrefix?: string;
-    iconSuffix?: string;
-    placeholder?: string;
-    name?: string;
-    spellcheck?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-}>();
+} = defineProps<InputProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: string | number];

package/dist/vue/components/link.vue

@@ -11,19 +11,18 @@
 
 <script setup lang="ts">
 import type { Component } from "vue";
-import type { LinkVariant } from "../../components/link.ts";
+import type { LinkProps, LinkVariant } from "../../components/link";
 
 const {
     is = "a",
-    href = undefined,
-    label = undefined,
+    href,
+    label,
     variant = "primary",
-} = defineProps<{
-    is?: string | Component;
-    href?: string;
-    label?: string;
-    variant?: LinkVariant;
-}>();
+} = defineProps<
+    LinkProps & {
+        is?: string | Component;
+    }
+>();
 
 const variants: Record<LinkVariant, string> = {
     primary: "text-foreground",

package/dist/vue/components/navigate.vue

@@ -12,19 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import type { NavigateProps } from "../../components/navigate";
 import Button from "./button.vue";
 
-const {
-    href,
-    label = undefined,
-    iconPrefix = undefined,
-    iconSuffix = undefined,
-    active = false,
-} = defineProps<{
-    href: string;
-    label?: string;
-    iconPrefix?: string;
-    iconSuffix?: string;
-    active?: boolean;
-}>();
+const { href, label, iconPrefix, iconSuffix, active = false } = defineProps<NavigateProps>();
 </script>

package/dist/vue/components/popover.vue

@@ -26,26 +26,18 @@
 
 <script setup lang="ts">
 import { ref, useId, useTemplateRef, watchEffect } from "vue";
-import type { ButtonLayout } from "../../components/button.ts";
+import type { PopoverProps } from "../../components/popover";
 import Button from "./button.vue";
 
 const {
     modelValue = false,
     triggerLabel = "Open",
-    triggerClass = undefined,
+    triggerClass,
     triggerLayout = "center",
     contentClass = "p-4",
     matchTriggerWidth = false,
     disabled = false,
-} = defineProps<{
-    modelValue?: boolean;
-    triggerLabel?: string;
-    triggerClass?: string;
-    triggerLayout?: ButtonLayout;
-    contentClass?: string;
-    matchTriggerWidth?: boolean;
-    disabled?: boolean;
-}>();
+} = defineProps<PopoverProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean];

package/dist/vue/components/progress.vue

@@ -23,16 +23,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+import type { ProgressProps } from "../../components/progress";
 
-const {
-    value = 0,
-    max = 100,
-    label = undefined,
-} = defineProps<{
-    value?: number;
-    max?: number;
-    label?: string;
-}>();
+const { value = 0, max = 100, label } = defineProps<ProgressProps>();
 
 const percent = computed(() => (max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0));
 </script>

package/dist/vue/components/radio.vue

@@ -32,25 +32,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { RadioValue } from "../../components/radio.ts";
+import type { RadioProps, RadioValue } from "../../components/radio";
 
-const {
-    modelValue = undefined,
-    value,
-    label = undefined,
-    description = undefined,
-    name = undefined,
-    required = false,
-    disabled = false,
-} = defineProps<{
-    modelValue?: RadioValue;
-    value: RadioValue;
-    label?: string;
-    description?: string;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+const { modelValue, value, label, description, name, required = false, disabled = false } = defineProps<RadioProps>();
 
 defineEmits<{
     "update:modelValue": [value: RadioValue];

package/dist/vue/components/range.vue

@@ -38,22 +38,9 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
+import type { RangeProps } from "../../components/range";
 
-const {
-    modelValue = 0,
-    label = undefined,
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-} = defineProps<{
-    modelValue?: number;
-    label?: string;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-}>();
+const { modelValue = 0, label, min = 0, max = 100, step = 1, disabled = false } = defineProps<RangeProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: number];

package/dist/vue/components/rating.vue

@@ -16,30 +16,19 @@
                 :disabled="readonly || disabled"
                 @click="$emit('update:modelValue', value)"
             >
-                <Icon name="star" />
+                <Icon :is="StarIcon" />
             </Button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import StarIcon from "~icons/hugeicons/star";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
-import type { RatingState } from "../../components/rating.ts";
+import type { RatingProps, RatingState } from "../../components/rating";
 
-const {
-    modelValue = 0,
-    max = 5,
-    label = undefined,
-    readonly = false,
-    disabled = false,
-} = defineProps<{
-    modelValue?: number;
-    max?: number;
-    label?: string;
-    readonly?: boolean;
-    disabled?: boolean;
-}>();
+const { modelValue = 0, max = 5, label, readonly = false, disabled = false } = defineProps<RatingProps>();
 
 defineEmits<{
     "update:modelValue": [value: number];

package/dist/vue/components/select.vue

@@ -38,7 +38,7 @@
                     :disabled="disabled"
                     @click.stop="open = !open"
                 >
-                    <Icon name="arrow-down-01" />
+                    <Icon :is="ArrowDownIcon" />
                 </button>
             </div>
 
@@ -68,7 +68,7 @@
                             {{ option.label }}
                         </slot>
 
-                        <Icon v-if="option.value === modelValue" name="tick-02" />
+                        <Icon v-if="option.value === modelValue" :is="TickIcon" />
                     </span>
                 </Button>
 
@@ -81,30 +81,23 @@
 </template>
 
 <script setup lang="ts">
+import ArrowDownIcon from "~icons/hugeicons/arrow-down-01";
+import TickIcon from "~icons/hugeicons/tick-02";
 import { computed, nextTick, onMounted, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
-import type { SelectOption, SelectValue } from "../../components/select.ts";
+import type { SelectOption, SelectProps, SelectValue } from "../../components/select";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
 
 const {
-    modelValue = undefined,
+    modelValue,
     options,
-    label = undefined,
-    placeholder = undefined,
+    label,
+    placeholder,
     emptyLabel = "No results found",
-    name = undefined,
+    name,
     required = false,
     disabled = false,
-} = defineProps<{
-    modelValue?: SelectValue;
-    options: Array<SelectOption>;
-    label?: string;
-    placeholder?: string;
-    emptyLabel?: string;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+} = defineProps<SelectProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: SelectValue];

package/dist/vue/components/separator.vue

@@ -9,17 +9,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import type { DividerVariant, SeparatorOrientation } from "../../components/separator.ts";
+import type { SeparatorOrientation, SeparatorProps } from "../../components/separator";
 
-const {
-    orientation = "horizontal",
-    variant = undefined,
-    decorative = false,
-} = defineProps<{
-    orientation?: SeparatorOrientation;
-    variant?: DividerVariant;
-    decorative?: boolean;
-}>();
+const { orientation = "horizontal", variant, decorative = false } = defineProps<SeparatorProps>();
 
 const selected = computed(() => variant ?? orientation);
 

package/dist/vue/components/sheet.vue

@@ -11,7 +11,7 @@
                 <Button
                     size="icon"
                     variant="ghost"
-                    icon-prefix="multiplication-sign"
+                    :icon-prefix="CloseIcon"
                     :aria-label="closeLabel"
                     @click="sheet?.close()"
                 />
@@ -29,24 +29,13 @@
 </template>
 
 <script setup lang="ts">
+import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import { useTemplateRef, watchEffect } from "vue";
-import type { SheetSide } from "../../components/sheet.ts";
+import type { SheetProps, SheetSide } from "../../components/sheet";
 import Button from "./button.vue";
 import Card from "./card.vue";
 
-const {
-    modelValue = false,
-    side = "right",
-    title = undefined,
-    description = undefined,
-    closeLabel = "Close",
-} = defineProps<{
-    modelValue?: boolean;
-    side?: SheetSide;
-    title?: string;
-    description?: string;
-    closeLabel?: string;
-}>();
+const { modelValue = false, side = "right", title, description, closeLabel = "Close" } = defineProps<SheetProps>();
 
 defineEmits<{
     "update:modelValue": [value: boolean];

package/dist/vue/components/switch.vue

@@ -27,21 +27,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { SwitchState } from "../../components/switch.ts";
+import type { SwitchProps, SwitchState } from "../../components/switch";
 
-const {
-    modelValue = false,
-    label = undefined,
-    description = undefined,
-    name = undefined,
-    disabled = false,
-} = defineProps<{
-    modelValue?: boolean;
-    label?: string;
-    description?: string;
-    name?: string;
-    disabled?: boolean;
-}>();
+const { modelValue = false, label, description, name, disabled = false } = defineProps<SwitchProps>();
 
 defineEmits<{
     "update:modelValue": [value: boolean];

package/dist/vue/components/upload.vue

@@ -44,26 +44,10 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { UploadState } from "../../components/upload.ts";
+import type { UploadProps, UploadState } from "../../components/upload";
 import Button from "./button.vue";
 
-const {
-    modelValue = undefined,
-    label = undefined,
-    description = undefined,
-    accept = undefined,
-    name = undefined,
-    required = false,
-    disabled = false,
-} = defineProps<{
-    modelValue?: Blob | File;
-    label?: string;
-    description?: string;
-    accept?: string;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+const { modelValue, label, description, accept, name, required = false, disabled = false } = defineProps<UploadProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value?: Blob | File];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.2.8",
+    "version": "0.2.9",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -30,15 +30,16 @@
     },
     "scripts": {
         "build": "vite build",
+        "typecheck": "tsc --noEmit -p tsconfig.json",
         "watch": "vite build --watch"
     },
     "dependencies": {
-        "@iconify/types": "^2.0.0",
-        "@iconify/utils": "^3.1.7",
+        "@iconify-json/hugeicons": "^1.2.35",
         "@revojs/client": "*",
         "@tailwindcss/vite": "^4.3.3",
         "revojs": "*",
-        "tailwindcss": "^4.3.3"
+        "tailwindcss": "^4.3.3",
+        "unplugin-icons": "^24.0.0"
     },
     "devDependencies": {
         "@revojs/tsconfig": "*",