@revojs/ui 0.2.9 → 0.2.11

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,4 +1,5 @@
 export type IconComponent = object | ((...args: Array<never>) => unknown);
 export interface IconProps {
     is: IconComponent;
+    size?: number;
 }

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/index.js

@@ -28,7 +28,7 @@ var module_default = defineModule({
 	name: "ui",
 	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,23 +53,23 @@ 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) {

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/vue/components/breadcrumb.vue

@@ -1,18 +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 { BreadcrumbProps } from "../../components/breadcrumb";
 import Link from "./link.vue";
+import Stack from "./stack.vue";
 
 defineProps<BreadcrumbProps>();
 </script>

package/dist/vue/components/button.vue

@@ -1,18 +1,18 @@
 <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" :is="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" :is="iconSuffix" />
+        <Icon v-if="iconSuffix" :is="iconSuffix" :size="iconSize[text]" />
     </component>
 </template>
 
@@ -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,38 +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="center"
+            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">
 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,19 +21,20 @@
             />
         </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,

package/dist/vue/components/collection.vue

@@ -1,22 +1,30 @@
 <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 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, columns = 1, emptyLabel = "Nothing found" } = defineProps<CollectionProps<T>>();
 

package/dist/vue/components/container.vue

@@ -1,13 +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 { ContainerProps, ContainerSize } from "../../components/container";
+import Stack from "./stack.vue";
 
-const { size = "5xl" } = defineProps<ContainerProps>();
+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
@@ -15,7 +15,7 @@
                 @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"
@@ -27,7 +27,7 @@
                 @click="change(step)"
             />
         </div>
-    </div>
+    </Stack>
 </template>
 
 <script setup lang="ts">
@@ -35,6 +35,7 @@ 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,

package/dist/vue/components/dialog.vue

@@ -1,7 +1,7 @@
 <template>
     <dialog
         ref="dialog"
-        class="m-auto w-[min(32rem,calc(100%-2rem))] border-0 bg-transparent p-0 backdrop:bg-black/50"
+        class="m-auto w-full max-w-lg border-0 bg-transparent p-5 backdrop:bg-black/50"
         @close="$emit('update:modelValue', false)"
         @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
     >
@@ -24,6 +24,8 @@ import { useTemplateRef, watchEffect } from "vue";
 import type { DialogProps } from "../../components/dialog";
 import Button from "./button.vue";
 import Card from "./card.vue";
+import { useFocusTrap } from "../utilities/use-focus-trap";
+import { useScrollLock } from "../utilities/use-scroll-lock";
 
 const { modelValue = false, title, description, closeLabel = "Close" } = defineProps<DialogProps>();
 
@@ -33,6 +35,10 @@ const emit = defineEmits<{
 
 const dialog = useTemplateRef("dialog");
 
+useFocusTrap(dialog, () => modelValue);
+
+useScrollLock(() => modelValue);
+
 function open() {
     emit("update:modelValue", true);
 }

package/dist/vue/components/field.vue

@@ -1,6 +1,6 @@
 <template>
-    <fieldset class="flex min-w-0 flex-col gap-2" :disabled="disabled">
-        <legend v-if="label" class="mb-2 text-sm font-medium">
+    <Stack is="fieldset" :disabled="disabled">
+        <legend v-if="label" class="mb-1 text-sm font-medium">
             {{ label }}<span v-if="required" aria-hidden="true"> *</span>
         </legend>
 
@@ -12,11 +12,12 @@
         <p v-else-if="description" class="text-sm opacity-60">
             {{ description }}
         </p>
-    </fieldset>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import type { FieldProps } from "../../components/field";
+import Stack from "./stack.vue";
 
 const { label, description, error, required = false, disabled = false } = defineProps<FieldProps>();
 </script>

package/dist/vue/components/icon.vue

@@ -1,5 +1,9 @@
 <template>
-    <span aria-hidden="true" class="block size-[1em] shrink-0">
+    <span
+        aria-hidden="true"
+        class="block shrink-0"
+        :style="{ height: size === undefined ? '1em' : `${size}px`, width: size === undefined ? '1em' : `${size}px` }"
+    >
         <component :is="is" class="block size-full" />
     </span>
 </template>
@@ -7,5 +11,5 @@
 <script setup lang="ts">
 import type { IconProps } from "../../components/icon";
 
-const { is } = defineProps<IconProps>();
+const { is, size } = defineProps<IconProps>();
 </script>

package/dist/vue/components/input.vue

@@ -1,11 +1,14 @@
 <template>
-    <span
-        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"
+    <Stack
+        is="span"
+        direction="horizontal"
+        align="center"
+        class="min-h-10 w-full cursor-text rounded-ui border border-input px-3 text-sm ring-ring focus-within:ring-2"
         :class="interactionVariants[interaction]"
     >
         <slot name="leading" />
 
-        <Icon v-if="iconPrefix" :is="iconPrefix" />
+        <Icon v-if="iconPrefix" :is="iconPrefix" :size="iconSize" />
 
         <input
             class="w-full min-w-0 appearance-none bg-transparent py-2 outline-none placeholder:opacity-50"
@@ -20,10 +23,10 @@
             @input="input"
         />
 
-        <Icon v-if="iconSuffix" :is="iconSuffix" />
+        <Icon v-if="iconSuffix" :is="iconSuffix" :size="iconSize" />
 
         <slot name="trailing" />
-    </span>
+    </Stack>
 </template>
 
 <script setup lang="ts">
@@ -31,6 +34,7 @@ import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { InputProps } from "../../components/input";
 import Icon from "./icon.vue";
+import Stack from "./stack.vue";
 
 const {
     modelValue,
@@ -45,6 +49,8 @@ const {
     disabled = false,
 } = defineProps<InputProps>();
 
+const iconSize = 20;
+
 const emit = defineEmits<{
     "update:modelValue": [value: string | number];
 }>();

package/dist/vue/components/popover.vue

@@ -1,23 +1,13 @@
 <template>
-    <div ref="container" class="inline-flex">
-        <Button
-            variant="outline"
-            :class="triggerClass"
-            :layout="triggerLayout"
-            :disabled="disabled"
-            :popovertarget="id"
-        >
+    <div ref="container" class="relative inline-flex">
+        <Button variant="outline" :class="triggerClass" :layout="triggerLayout" :disabled="disabled" @click="toggle">
             <slot name="trigger" :open="open" :close="close" :toggle="toggle">{{ triggerLabel }}</slot>
         </Button>
 
         <div
-            :id="id"
-            ref="popover"
-            popover
-            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"
+            v-if="isOpen"
+            class="absolute left-0 top-full z-10 mt-1 max-w-sm rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
+            :class="[contentClass, matchTriggerWidth ? 'w-full' : '']"
         >
             <slot :open="open" :close="close" :toggle="toggle" />
         </div>
@@ -25,16 +15,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useId, useTemplateRef, watchEffect } from "vue";
+import { onUnmounted, ref, useTemplateRef, watch } from "vue";
 import type { PopoverProps } from "../../components/popover";
 import Button from "./button.vue";
+import { useFocusTrap } from "../utilities/use-focus-trap";
 
 const {
     modelValue = false,
     triggerLabel = "Open",
     triggerClass,
     triggerLayout = "center",
-    contentClass = "p-4",
+    contentClass = "flex flex-col gap-1 p-1",
     matchTriggerWidth = false,
     disabled = false,
 } = defineProps<PopoverProps>();
@@ -43,62 +34,69 @@ const emit = defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
-const id = `popover-${useId()}`;
-
 const container = useTemplateRef("container");
 
-const popover = useTemplateRef("popover");
+const isOpen = ref(modelValue);
+
+useFocusTrap(container, isOpen);
+
+function setOpen(value: boolean) {
+    isOpen.value = value;
 
-const position = ref<Record<string, string>>({});
+    emit("update:modelValue", value);
+}
 
 function open() {
-    popover.value?.showPopover();
+    setOpen(true);
 }
 
 function close() {
-    popover.value?.hidePopover();
+    setOpen(false);
 }
 
 function toggle() {
-    popover.value?.togglePopover();
+    setOpen(!isOpen.value);
 }
 
-function handleToggle(event: Event) {
-    const element = event.currentTarget as HTMLElement;
-    const open = element.matches(":popover-open");
-
-    if (open) {
-        const trigger = container.value?.querySelector("button");
-
-        if (trigger) {
-            const bounds = trigger.getBoundingClientRect();
-            const width = matchTriggerWidth ? bounds.width : element.offsetWidth;
-            const left = Math.min(Math.max(8, bounds.left), window.innerWidth - width - 8);
-            const top =
-                bounds.bottom + element.offsetHeight + 8 <= window.innerHeight
-                    ? bounds.bottom + 8
-                    : bounds.top - element.offsetHeight - 8;
-
-            position.value = {
-                bottom: "auto",
-                left: `${left}px`,
-                right: "auto",
-                top: `${Math.max(8, top)}px`,
-                position: "fixed",
-                width: matchTriggerWidth ? `${width}px` : "auto",
-            };
-        }
+function handlePointerDown(event: PointerEvent) {
+    if (!container.value?.contains(event.target as Node)) {
+        close();
     }
-
-    emit("update:modelValue", open);
 }
 
-watchEffect(() => {
-    if (modelValue && !popover.value?.matches(":popover-open")) {
-        popover.value?.showPopover();
-    } else if (!modelValue && popover.value?.matches(":popover-open")) {
-        popover.value.hidePopover();
+function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+        close();
     }
+}
+
+watch(
+    isOpen,
+    (value) => {
+        if (value) {
+            document.addEventListener("pointerdown", handlePointerDown);
+
+            document.addEventListener("keydown", handleKeyDown);
+        } else {
+            document.removeEventListener("pointerdown", handlePointerDown);
+
+            document.removeEventListener("keydown", handleKeyDown);
+        }
+    },
+    { immediate: true },
+);
+
+watch(
+    () => modelValue,
+    (value) => {
+        isOpen.value = value;
+    },
+);
+
+onUnmounted(() => {
+    document.removeEventListener("pointerdown", handlePointerDown);
+
+    document.removeEventListener("keydown", handleKeyDown);
 });
 
 defineExpose({ open, close, toggle });