@revojs/ui 0.2.8 → 0.2.10

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/container.d.ts

@@ -1,4 +1,6 @@
+import type { StackGap } from "./stack";
 export type ContainerSize = "3xl" | "5xl" | "7xl";
 export interface ContainerProps {
     size?: ContainerSize;
+    padding?: StackGap;
 }

package/dist/components/icon.d.ts

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

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/components/separator.d.ts

@@ -1,11 +1,6 @@
 export type SeparatorOrientation = "horizontal" | "vertical";
-export type DividerVariant = SeparatorOrientation;
 export interface SeparatorProps {
     orientation?: SeparatorOrientation;
-    variant?: DividerVariant;
-    decorative?: boolean;
-}
-export interface DividerProps {
-    variant?: DividerVariant;
+    variant?: SeparatorOrientation;
     decorative?: boolean;
 }

package/dist/components/stack.d.ts

@@ -0,0 +1,12 @@
+export type StackDirection = "vertical" | "horizontal";
+export type StackGap = "0" | "1" | "3" | "5" | "7";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type StackJustify = "start" | "center" | "end" | "between";
+export interface StackProps {
+    direction?: StackDirection;
+    gap?: StackGap;
+    padding?: StackGap;
+    align?: StackAlign;
+    justify?: StackJustify;
+    wrap?: boolean;
+}

package/dist/components/stack.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -21,5 +21,6 @@ export type * from "./components/rating";
 export type * from "./components/select";
 export type * from "./components/separator";
 export type * from "./components/sheet";
+export type * from "./components/stack";
 export type * from "./components/switch";
 export type * from "./components/upload";

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,9 +26,9 @@ var radii = {
 };
 var module_default = defineModule({
 	name: "ui",
-	modules: [client],
+	modules: [client, icons_default],
 	config: () => ({
-		radius: "rounded-md",
+		radius: "rounded-none",
 		light: {
 			background: "white",
 			foreground: "zinc-950",
@@ -36,15 +36,15 @@ var module_default = defineModule({
 			cardForeground: "zinc-950",
 			popover: "white",
 			popoverForeground: "zinc-950",
-			primary: "green-600",
-			primaryForeground: "zinc-50",
+			primary: "zinc-950",
+			primaryForeground: "white",
 			secondary: "zinc-100",
 			secondaryForeground: "zinc-900",
 			muted: "zinc-100",
 			mutedForeground: "zinc-500",
 			accent: "zinc-100",
 			accentForeground: "zinc-900",
-			destructive: "red-600",
+			destructive: "red-500",
 			destructiveForeground: "zinc-50",
 			border: "zinc-200",
 			input: "zinc-200",
@@ -53,36 +53,26 @@ var module_default = defineModule({
 		dark: {
 			background: "zinc-950",
 			foreground: "zinc-50",
-			card: "zinc-900",
+			card: "zinc-950",
 			cardForeground: "zinc-50",
-			popover: "zinc-900",
+			popover: "zinc-950",
 			popoverForeground: "zinc-50",
-			primary: "green-500",
+			primary: "white",
 			primaryForeground: "zinc-950",
 			secondary: "zinc-900",
 			secondaryForeground: "zinc-50",
-			muted: "zinc-800",
+			muted: "zinc-900",
 			mutedForeground: "zinc-400",
 			accent: "zinc-900",
 			accentForeground: "zinc-50",
-			destructive: "red-600",
+			destructive: "red-500",
 			destructiveForeground: "zinc-50",
 			border: "zinc-700",
 			input: "zinc-700",
-			ring: "zinc-500"
+			ring: "zinc-700"
 		}
 	}),
 	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/style.css

@@ -25,6 +25,13 @@
     --radius-ui: var(--ui-radius);
 }
 
+@theme {
+    --shadow-sheet-top: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-sheet-right: -25px 0 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-sheet-bottom: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-sheet-left: 25px 0 50px -12px rgb(0 0 0 / 0.25);
+}
+
 @layer base {
     * {
         @apply border-border outline-ring;

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

@@ -1,20 +1,26 @@
 <template>
     <nav aria-label="Breadcrumb">
-        <ol class="flex flex-wrap items-center gap-2 text-sm">
-            <li v-for="([label, href], index) in routes" :key="href" class="flex items-center gap-2">
+        <Stack is="ol" direction="horizontal" align="center" gap="3" wrap class="text-sm">
+            <Stack
+                is="li"
+                v-for="([label, href], index) in routes"
+                :key="href"
+                direction="horizontal"
+                align="center"
+                gap="3"
+            >
                 <span v-if="index" aria-hidden="true" class="opacity-40"> / </span>
 
                 <Link :href="href" :label="label" :variant="index === routes.length - 1 ? 'primary' : 'muted'" />
-            </li>
-        </ol>
+            </Stack>
+        </Stack>
     </nav>
 </template>
 
 <script setup lang="ts">
-import type { BreadcrumbRoute } from "../../components/breadcrumb.ts";
+import type { BreadcrumbProps } from "../../components/breadcrumb";
 import Link from "./link.vue";
+import Stack from "./stack.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 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="inline-flex cursor-pointer items-center justify-center gap-1 rounded-ui border font-[inherit] font-medium leading-normal no-underline outline-ring transition-[background-color,border-color,color,opacity] duration-150 select-none 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" :size="iconSize[text]" />
 
         <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" :size="iconSize[text]" />
     </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();
 
@@ -75,6 +75,11 @@ const texts: Record<ButtonText, string> = {
     md: "text-base",
 };
 
+const iconSize: Record<ButtonText, number> = {
+    sm: 20,
+    md: 24,
+};
+
 const variants: Record<ButtonVariant, string> = {
     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",

package/dist/vue/components/card.vue

@@ -1,44 +1,41 @@
 <template>
-    <section
-        class="flex flex-col overflow-hidden rounded-ui border border-border bg-card text-card-foreground shadow-sm"
-    >
-        <header
+    <Stack is="section" gap="0" class="rounded-ui border border-border bg-card text-card-foreground shadow-sm">
+        <Stack
             v-if="label || title || description || $slots.header || $slots.actions"
-            class="flex items-start justify-between gap-4 border-b border-border p-5"
+            is="header"
+            direction="horizontal"
+            align="start"
+            justify="between"
+            class="border-b border-border p-5"
         >
             <slot name="header">
-                <div class="flex flex-col gap-1.5">
+                <Stack>
                     <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>
+                </Stack>
             </slot>
 
-            <div v-if="$slots.actions" class="flex shrink-0 items-center gap-1">
+            <Stack v-if="$slots.actions" direction="horizontal" align="center" class="shrink-0">
                 <slot name="actions" />
-            </div>
-        </header>
+            </Stack>
+        </Stack>
 
-        <div class="flex flex-1 flex-col gap-4 p-5">
+        <Stack gap="5" padding="5" class="flex-1">
             <slot />
-        </div>
+        </Stack>
 
-        <footer v-if="$slots.footer" class="flex items-center gap-3 px-5 pb-5">
+        <Stack v-if="$slots.footer" is="footer" direction="horizontal" align="center" gap="3" class="px-5 pb-5">
             <slot name="footer" />
-        </footer>
-    </section>
+        </Stack>
+    </Stack>
 </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";
+import Stack from "./stack.vue";
+
+const { label, title, description } = defineProps<CardProps>();
 </script>

package/dist/vue/components/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <label class="inline-flex items-start gap-3" :class="interactionVariants[interaction]">
+    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
         <input
             class="peer sr-only"
             type="checkbox"
@@ -12,7 +12,7 @@
 
         <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="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui 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
@@ -21,34 +21,29 @@
             />
         </span>
 
-        <span v-if="label || description || $slots.default" class="flex flex-col gap-0.5">
+        <Stack is="span" v-if="label || description || $slots.default" gap="0">
             <span class="text-sm font-medium"
                 ><slot>{{ label }}</slot></span
             >
             <span v-if="description" class="text-sm opacity-60">{{ description }}</span>
-        </span>
-    </label>
+        </Stack>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import type { CheckboxProps } from "../../components/checkbox";
 import type { ControlInteraction } from "../../components/control.ts";
+import Stack from "./stack.vue";
 
 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

@@ -1,32 +1,32 @@
 <template>
-    <div
+    <Stack
         v-if="items"
-        class="flex w-full flex-col divide-y divide-border overflow-hidden rounded-ui border border-border bg-card"
+        gap="0"
+        class="w-full 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">
                 <slot :item="item" :index="index" />
             </div>
         </template>
-        <div v-else class="flex flex-col items-center p-5 text-sm opacity-60">{{ emptyLabel }}</div>
-    </div>
-    <div v-else class="grid gap-4" :class="columnsClass[columns]">
+        <Stack v-else align="center" padding="5" class="text-sm opacity-60">
+            <Icon :is="SearchIcon" class="text-2xl" />
+
+            <span>{{ emptyLabel }}</span>
+        </Stack>
+    </Stack>
+    <div v-else class="grid gap-5" :class="columnsClass[columns]">
         <slot />
     </div>
 </template>
 
 <script setup generic="T" lang="ts">
-import type { CollectionColumns } from "../../components/collection.ts";
+import SearchIcon from "~icons/hugeicons/search-01";
+import type { CollectionColumns, CollectionProps } from "../../components/collection";
+import Icon from "./icon.vue";
+import Stack from "./stack.vue";
 
-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

@@ -1,15 +1,14 @@
 <template>
-    <div class="mx-auto flex w-full flex-col gap-5 p-5" :class="sizes[size]">
+    <Stack gap="5" :padding="padding" :class="sizes[size]" class="mx-auto w-full">
         <slot />
-    </div>
+    </Stack>
 </template>
 
 <script setup lang="ts">
-import type { ContainerSize } from "../../components/container.ts";
+import type { ContainerProps, ContainerSize } from "../../components/container";
+import Stack from "./stack.vue";
 
-const { size = "5xl" } = defineProps<{
-    size?: ContainerSize;
-}>();
+const { size = "5xl", padding = "5" } = defineProps<ContainerProps>();
 
 const sizes: Record<ContainerSize, string> = {
     "3xl": "max-w-3xl",

package/dist/vue/components/counter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="inline-flex flex-col gap-2">
+    <Stack>
         <span v-if="label" class="text-sm font-medium">{{ label }}</span>
 
         <div
@@ -9,45 +9,42 @@
                 class="text-lg"
                 size="icon"
                 variant="ghost"
-                icon-prefix="minus-sign"
+                :icon-prefix="MinusIcon"
                 :disabled="disabled || modelValue <= min"
                 aria-label="Decrease"
                 @click="change(-step)"
             />
 
-            <output class="px-2 text-center tabular-nums">{{ modelValue }}</output>
+            <output class="px-1 text-center tabular-nums">{{ modelValue }}</output>
 
             <Button
                 class="text-lg"
                 size="icon"
                 variant="ghost"
-                icon-prefix="add-01"
+                :icon-prefix="AddIcon"
                 :disabled="disabled || modelValue >= max"
                 aria-label="Increase"
                 @click="change(step)"
             />
         </div>
-    </div>
+    </Stack>
 </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";
+import Stack from "./stack.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];