@revojs/ui 0.2.7 → 0.2.9

package/dist/components/button.d.ts

@@ -1,12 +1,13 @@
+import type { IconComponent } from "./icon";
 export type ButtonType = "button" | "submit";
 export type ButtonSize = "default" | "icon";
 export type ButtonFont = "normal" | "medium" | "semibold";
 export type ButtonLayout = "left" | "center" | "right";
 export type ButtonText = "sm" | "md";
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "danger" | "text";
+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,63 +26,53 @@ var radii = {
 };
 var module_default = defineModule({
 	name: "ui",
-	modules: [client],
+	modules: [client, icons_default],
 	config: () => ({
 		radius: "rounded-md",
 		light: {
 			background: "white",
-			foreground: "neutral-950",
+			foreground: "zinc-950",
 			card: "white",
-			cardForeground: "neutral-950",
+			cardForeground: "zinc-950",
 			popover: "white",
-			popoverForeground: "neutral-950",
-			primary: "neutral-900",
-			primaryForeground: "neutral-50",
-			secondary: "neutral-100",
-			secondaryForeground: "neutral-900",
-			muted: "neutral-100",
-			mutedForeground: "neutral-500",
-			accent: "neutral-100",
-			accentForeground: "neutral-900",
+			popoverForeground: "zinc-950",
+			primary: "green-600",
+			primaryForeground: "zinc-50",
+			secondary: "zinc-100",
+			secondaryForeground: "zinc-900",
+			muted: "zinc-100",
+			mutedForeground: "zinc-500",
+			accent: "zinc-100",
+			accentForeground: "zinc-900",
 			destructive: "red-600",
-			destructiveForeground: "white",
-			border: "neutral-200",
-			input: "neutral-200",
-			ring: "neutral-400"
+			destructiveForeground: "zinc-50",
+			border: "zinc-200",
+			input: "zinc-200",
+			ring: "zinc-400"
 		},
 		dark: {
-			background: "neutral-950",
-			foreground: "neutral-50",
-			card: "neutral-900",
-			cardForeground: "neutral-50",
-			popover: "neutral-900",
-			popoverForeground: "neutral-50",
-			primary: "neutral-200",
-			primaryForeground: "neutral-900",
-			secondary: "neutral-800",
-			secondaryForeground: "neutral-50",
-			muted: "neutral-800",
-			mutedForeground: "neutral-400",
-			accent: "neutral-800",
-			accentForeground: "neutral-50",
-			destructive: "red-400",
-			destructiveForeground: "white",
-			border: "white/10",
-			input: "white/15",
-			ring: "neutral-500"
+			background: "zinc-950",
+			foreground: "zinc-50",
+			card: "zinc-900",
+			cardForeground: "zinc-50",
+			popover: "zinc-900",
+			popoverForeground: "zinc-50",
+			primary: "green-500",
+			primaryForeground: "zinc-950",
+			secondary: "zinc-900",
+			secondaryForeground: "zinc-50",
+			muted: "zinc-800",
+			mutedForeground: "zinc-400",
+			accent: "zinc-900",
+			accentForeground: "zinc-50",
+			destructive: "red-600",
+			destructiveForeground: "zinc-50",
+			border: "zinc-700",
+			input: "zinc-700",
+			ring: "zinc-500"
 		}
 	}),
 	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

@@ -1,49 +1,49 @@
 <template>
     <component
         :is="is"
-        class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui border border-transparent font-[inherit] font-medium leading-normal 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="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui border font-[inherit] font-medium leading-normal no-underline outline-ring transition-[background-color,border-color,color,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
         :class="[fonts[font], layouts[layout], sizes[size], texts[text], variants[variant]]"
         :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();
 
@@ -76,12 +76,12 @@ const texts: Record<ButtonText, string> = {
 };
 
 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",
+    primary: "border-transparent bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+    secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
+    outline:
+        "border-transparent bg-secondary text-secondary-foreground ring-1 ring-border ring-inset hover:bg-secondary/90 active:bg-secondary/80",
+    ghost: "border-transparent bg-transparent text-foreground hover:bg-accent active:bg-accent/80",
+    destructive:
+        "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
 };
 </script>

package/dist/vue/components/card.vue

@@ -8,7 +8,10 @@
         >
             <slot name="header">
                 <div class="flex flex-col gap-1.5">
-                    <h3 v-if="label || title" class="text-lg font-semibold leading-none">{{ label ?? title }}</h3>
+                    <p v-if="label" class="text-xs font-semibold uppercase tracking-widest opacity-50">{{ label }}</p>
+
+                    <h3 v-if="title" class="text-lg font-semibold leading-none">{{ title }}</h3>
+
                     <p v-if="description" class="text-sm opacity-70">{{ description }}</p>
                 </div>
             </slot>
@@ -29,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

@@ -1,7 +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 text-primary"
+            class="peer sr-only"
             type="checkbox"
             :checked="modelValue"
             :name="name"
@@ -10,6 +10,17 @@
             @change="$emit('update:modelValue', ($event.currentTarget as HTMLInputElement).checked)"
         />
 
+        <span
+            aria-hidden="true"
+            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md border transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
+            :class="modelValue ? 'border-transparent bg-primary' : 'border-input bg-background'"
+        >
+            <span
+                v-if="modelValue"
+                class="mb-px h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 border-primary-foreground"
+            />
+        </span>
+
         <span v-if="label || description || $slots.default" class="flex flex-col gap-0.5">
             <span class="text-sm font-medium"
                 ><slot>{{ label }}</slot></span
@@ -21,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>