@revojs/ui 0.2.9 → 0.2.10

package/dist/vue/components/progress.vue

@@ -1,29 +1,30 @@
 <template>
-    <div class="flex flex-col gap-2">
-        <div v-if="label" class="flex items-center justify-between gap-4 text-sm">
+    <Stack>
+        <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
             <span class="font-medium">{{ label }}</span>
 
             <span class="tabular-nums opacity-60">{{ Math.round(percent) }}%</span>
-        </div>
+        </Stack>
 
         <progress class="sr-only" :value="value" :max="max">{{ percent }}%</progress>
 
         <div
-            class="h-2 w-full overflow-hidden rounded-full bg-input"
+            class="h-2 w-full overflow-hidden rounded-ui bg-input"
             role="progressbar"
             :aria-label="label"
             :aria-valuenow="value"
             aria-valuemin="0"
             :aria-valuemax="max"
         >
-            <div class="h-full rounded-full bg-primary transition-[width]" :style="{ width: `${percent}%` }" />
+            <div class="h-full rounded-ui bg-primary transition-[width]" :style="{ width: `${percent}%` }" />
         </div>
-    </div>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ProgressProps } from "../../components/progress";
+import Stack from "./stack.vue";
 
 const { value = 0, max = 100, label } = defineProps<ProgressProps>();
 

package/dist/vue/components/radio.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="radio"
@@ -13,26 +13,27 @@
 
         <span
             aria-hidden="true"
-            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full 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 === value ? 'border-primary bg-background' : 'border-input bg-background'"
         >
-            <span v-if="modelValue === value" class="size-2 rounded-full bg-primary" />
+            <span v-if="modelValue === value" class="size-2 rounded-ui bg-primary" />
         </span>
 
-        <span class="flex flex-col gap-0.5">
+        <Stack is="span" 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 { ControlInteraction } from "../../components/control.ts";
 import type { RadioProps, RadioValue } from "../../components/radio";
+import Stack from "./stack.vue";
 
 const { modelValue, value, label, description, name, required = false, disabled = false } = defineProps<RadioProps>();
 

package/dist/vue/components/range.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="flex flex-col gap-2" :class="interactionVariants[interaction]">
-        <span v-if="label" class="flex items-center justify-between gap-4 text-sm">
+    <Stack :class="interactionVariants[interaction]">
+        <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
             <span class="font-medium"> {{ label }} </span>
 
             <output class="tabular-nums opacity-60">
                 {{ modelValue }}
             </output>
-        </span>
+        </Stack>
 
         <div
             ref="track"
-            class="relative h-2 w-full touch-none rounded-full bg-input outline-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+            class="relative h-2 w-full touch-none rounded-ui bg-input outline-ring focus-visible:outline-2 focus-visible:outline-offset-2"
             :class="disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
             role="slider"
             :tabindex="disabled ? -1 : 0"
@@ -28,17 +28,18 @@
             <div class="absolute inset-y-0 left-0 rounded-full bg-primary" :style="{ width: `${percent}%` }" />
 
             <span
-                class="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow"
+                class="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-ui border-2 border-primary bg-background shadow"
                 :style="{ left: `${percent}%` }"
             />
         </div>
-    </div>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { RangeProps } from "../../components/range";
+import Stack from "./stack.vue";
 
 const { modelValue = 0, label, min = 0, max = 100, step = 1, disabled = false } = defineProps<RangeProps>();
 

package/dist/vue/components/rating.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="inline-flex flex-col gap-2">
+    <Stack>
         <span v-if="label" class="text-sm font-medium">{{ label }}</span>
 
-        <div class="flex items-center" role="radiogroup" :aria-label="label">
+        <Stack direction="horizontal" align="center" gap="0" role="radiogroup" :aria-label="label">
             <Button
                 v-for="value in max"
                 :key="value"
-                class="text-2xl transition-transform hover:scale-110 disabled:hover:scale-100"
+                class="text-2xl"
                 :class="variants[state(value)]"
                 size="icon"
                 variant="ghost"
@@ -18,14 +18,15 @@
             >
                 <Icon :is="StarIcon" />
             </Button>
-        </div>
-    </div>
+        </Stack>
+    </Stack>
 </template>
 
 <script setup lang="ts">
 import StarIcon from "~icons/hugeicons/star";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
+import Stack from "./stack.vue";
 import type { RatingProps, RatingState } from "../../components/rating";
 
 const { modelValue = 0, max = 5, label, readonly = false, disabled = false } = defineProps<RatingProps>();

package/dist/vue/components/select.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col gap-2">
+    <Stack>
         <span v-if="label" class="text-sm font-medium">
             {{ label }}
         </span>
@@ -7,9 +7,10 @@
         <input v-if="name" type="hidden" :name="name" :value="modelValue" :required="required" />
 
         <div ref="container" class="relative">
-            <div
-                ref="trigger"
-                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
+                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="disabled ? 'cursor-not-allowed opacity-50' : ''"
                 @click="search?.focus()"
             >
@@ -21,13 +22,15 @@
                     :placeholder="placeholder ?? 'Select'"
                     :aria-expanded="open"
                     :aria-controls="listboxId"
+                    :aria-activedescendant="activeId"
                     aria-autocomplete="list"
                     :disabled="disabled"
                     @focus="open = true"
-                    @input="open = true"
-                    @keydown.enter.prevent="open ? filtered.length > 0 && select(filtered[0]) : (open = true)"
+                    @input="input"
+                    @keydown.enter.prevent="confirm"
                     @keydown.escape="open = false"
-                    @keydown.arrow-down.prevent="open = true"
+                    @keydown.arrow-down.prevent="stepHighlight(1)"
+                    @keydown.arrow-up.prevent="stepHighlight(-1)"
                 />
 
                 <button
@@ -38,24 +41,22 @@
                     :disabled="disabled"
                     @click.stop="open = !open"
                 >
-                    <Icon :is="ArrowDownIcon" />
+                    <Icon :is="ArrowDownIcon" :size="iconSize" />
                 </button>
-            </div>
+            </Stack>
 
             <div
-                ref="dropdown"
-                :popover="popoverSupported ? 'manual' : undefined"
+                v-if="open"
                 :id="listboxId"
                 role="listbox"
                 :aria-label="label"
-                class="m-0 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover p-1 text-popover-foreground shadow-xl"
-                :class="fallbackClass"
-                :style="popoverSupported ? panel : undefined"
+                class="absolute inset-x-0 top-full z-10 mt-1 max-h-[min(16rem,50vh)] overflow-y-auto rounded-ui border border-border bg-popover p-1 text-popover-foreground shadow-xl"
             >
                 <Button
-                    v-for="option in filtered"
+                    v-for="(option, index) in filtered"
                     :key="option.value"
-                    class="w-full"
+                    :id="`${listboxId}-${index}`"
+                    :class="['w-full', highlighted === index ? 'bg-accent!' : '']"
                     variant="ghost"
                     layout="left"
                     :disabled="option.disabled"
@@ -63,30 +64,32 @@
                     :aria-selected="option.value === modelValue"
                     @click="select(option)"
                 >
-                    <span class="flex w-full items-center justify-between gap-4 text-left">
+                    <Stack direction="horizontal" align="center" justify="between" gap="1" class="w-full text-left">
                         <slot name="option" :option="option" :selected="option.value === modelValue">
                             {{ option.label }}
                         </slot>
 
-                        <Icon v-if="option.value === modelValue" :is="TickIcon" />
-                    </span>
+                        <Icon v-if="option.value === modelValue" :is="TickIcon" :size="iconSize" />
+                    </Stack>
                 </Button>
 
-                <p v-if="filtered.length === 0" class="px-2 py-6 text-center text-sm opacity-60">
+                <p v-if="filtered.length === 0" class="px-1 py-5 text-center text-sm opacity-60">
                     {{ emptyLabel }}
                 </p>
             </div>
         </div>
-    </div>
+    </Stack>
 </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 { computed, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
 import type { SelectOption, SelectProps, SelectValue } from "../../components/select";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
+import Stack from "./stack.vue";
+import { useFocusTrap } from "../utilities/use-focus-trap";
 
 const {
     modelValue,
@@ -107,40 +110,32 @@ const open = ref(false);
 
 const container = useTemplateRef("container");
 
-const trigger = useTemplateRef("trigger");
+useFocusTrap(container, open);
 
 const search = useTemplateRef("search");
 
-const dropdown = useTemplateRef("dropdown");
-
 const listboxId = `select-${useId()}`;
 
-const popoverSupported = ref(true);
+const iconSize = 20;
 
 const selected = computed(() => options.find((option) => option.value === modelValue));
 
 const query = ref(selected.value?.label ?? "");
 
-const panel = ref<Record<string, string>>({});
-
 const filtered = computed(() => {
     const term = query.value.trim().toLowerCase();
 
     return term === "" ? options : options.filter((option) => option.label.toLowerCase().includes(term));
 });
 
-const fallbackClass = computed(() => {
-    if (popoverSupported.value) {
-        return undefined;
-    }
+const highlighted = ref(-1);
 
-    return open.value ? "absolute inset-x-0 top-full z-50 mt-2" : "hidden";
-});
+const activeId = computed(() =>
+    open.value && highlighted.value >= 0 ? `${listboxId}-${highlighted.value}` : undefined,
+);
 
 function handlePointerDown(event: PointerEvent) {
-    const target = event.target as Node;
-
-    if (!container.value?.contains(target) && !dropdown.value?.contains(target)) {
+    if (!container.value?.contains(event.target as Node)) {
         open.value = false;
     }
 }
@@ -152,65 +147,71 @@ function select(option: SelectOption) {
     }
 }
 
-function updatePanel() {
-    const anchor = trigger.value;
-    const list = dropdown.value;
+function highlight(step: 1 | -1) {
+    const count = filtered.value.length;
 
-    if (!anchor || !list) {
+    if (count === 0) {
         return;
     }
 
-    const height = window.visualViewport?.height ?? window.innerHeight;
-    const width = window.visualViewport?.width ?? window.innerWidth;
-    const bounds = anchor.getBoundingClientRect();
-    const listHeight = list.offsetHeight;
-    const listWidth = bounds.width;
-    const left = Math.max(8, Math.min(Math.max(8, bounds.left), width - listWidth - 8));
-    const top = bounds.bottom + listHeight + 8 <= height ? bounds.bottom + 8 : Math.max(8, bounds.top - listHeight - 8);
-
-    panel.value = {
-        bottom: "auto",
-        left: `${left}px`,
-        position: "fixed",
-        right: "auto",
-        top: `${top}px`,
-        width: `${listWidth}px`,
-    };
+    let index = highlighted.value;
+
+    for (let round = 0; round < count; round++) {
+        index = (index + step + count) % count;
+
+        if (!filtered.value[index].disabled) {
+            highlighted.value = index;
+
+            document.getElementById(`${listboxId}-${index}`)?.scrollIntoView({ block: "nearest" });
+
+            return;
+        }
+    }
 }
 
-watch(selected, (value) => {
+function stepHighlight(step: 1 | -1) {
     if (!open.value) {
-        query.value = value?.label ?? "";
+        open.value = true;
+
+        return;
     }
-});
 
-watch(open, async (value) => {
-    const list = dropdown.value;
+    highlight(step);
+}
+
+function confirm() {
+    if (!open.value) {
+        open.value = true;
 
-    if (!list) {
         return;
     }
 
-    if (value) {
-        query.value = "";
-
-        document.addEventListener("pointerdown", handlePointerDown);
+    const option = filtered.value[highlighted.value] ?? filtered.value[0];
 
-        window.addEventListener("resize", updatePanel);
+    if (option) {
+        select(option);
+    }
+}
 
-        window.addEventListener("scroll", updatePanel, true);
+function input() {
+    open.value = true;
 
-        window.visualViewport?.addEventListener("resize", updatePanel);
+    highlighted.value = -1;
+}
 
-        if (popoverSupported.value && !list.matches(":popover-open")) {
-            list.showPopover();
-        }
+watch(selected, (value) => {
+    if (!open.value) {
+        query.value = value?.label ?? "";
+    }
+});
 
-        await nextTick();
+watch(open, (value) => {
+    if (value) {
+        query.value = "";
 
-        updatePanel();
+        highlighted.value = filtered.value.findIndex((option) => option.value === modelValue);
 
-        requestAnimationFrame(updatePanel);
+        document.addEventListener("pointerdown", handlePointerDown);
 
         if (document.activeElement !== search.value) {
             search.value?.focus();
@@ -218,31 +219,13 @@ watch(open, async (value) => {
     } else {
         document.removeEventListener("pointerdown", handlePointerDown);
 
-        window.removeEventListener("resize", updatePanel);
-
-        window.removeEventListener("scroll", updatePanel, true);
-
-        window.visualViewport?.removeEventListener("resize", updatePanel);
-
-        if (popoverSupported.value && list.matches(":popover-open")) {
-            list.hidePopover();
-        }
+        highlighted.value = -1;
 
         query.value = selected.value?.label ?? "";
     }
 });
 
-onMounted(() => {
-    popoverSupported.value = typeof dropdown.value?.showPopover === "function";
-});
-
 onUnmounted(() => {
     document.removeEventListener("pointerdown", handlePointerDown);
-
-    window.removeEventListener("resize", updatePanel);
-
-    window.removeEventListener("scroll", updatePanel, true);
-
-    window.visualViewport?.removeEventListener("resize", updatePanel);
 });
 </script>

package/dist/vue/components/sheet.vue

@@ -34,6 +34,8 @@ import { useTemplateRef, watchEffect } from "vue";
 import type { SheetProps, SheetSide } from "../../components/sheet";
 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, side = "right", title, description, closeLabel = "Close" } = defineProps<SheetProps>();
 
@@ -43,6 +45,10 @@ defineEmits<{
 
 const sheet = useTemplateRef("sheet");
 
+useFocusTrap(sheet, () => modelValue);
+
+useScrollLock(() => modelValue);
+
 const positions: Record<SheetSide, string> = {
     top: "bottom-auto left-0 right-0 top-0 h-auto w-full",
     right: "bottom-0 left-auto right-0 top-0 h-full max-h-full w-[min(28rem,90vw)]",
@@ -51,10 +57,10 @@ const positions: Record<SheetSide, string> = {
 };
 
 const cardClasses: Record<SheetSide, string> = {
-    top: "max-h-[85vh] w-full shadow-2xl",
-    right: "h-full w-full shadow-2xl",
-    bottom: "max-h-[85vh] w-full shadow-2xl",
-    left: "h-full w-full shadow-2xl",
+    top: "max-h-[85vh] w-full border-l-0 border-r-0 border-t-0 shadow-sheet-top",
+    right: "h-full w-full border-b-0 border-r-0 border-t-0 shadow-sheet-right",
+    bottom: "max-h-[85vh] w-full border-b-0 border-l-0 border-r-0 shadow-sheet-bottom",
+    left: "h-full w-full border-b-0 border-l-0 border-t-0 shadow-sheet-left",
 };
 
 watchEffect(() => {

package/dist/vue/components/stack.vue

@@ -0,0 +1,70 @@
+<template>
+    <component
+        :is="is"
+        class="flex min-w-0"
+        :class="[
+            directions[direction],
+            gaps[gap],
+            paddings[padding],
+            aligns[align],
+            justifies[justify],
+            wrap ? 'flex-wrap' : '',
+        ]"
+    >
+        <slot />
+    </component>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { StackAlign, StackDirection, StackGap, StackJustify, StackProps } from "../../components/stack";
+
+const {
+    is = "div",
+    direction = "vertical",
+    gap = "1",
+    padding = "0",
+    align = "stretch",
+    justify = "start",
+    wrap = false,
+} = defineProps<
+    StackProps & {
+        is?: string | Component;
+    }
+>();
+
+const directions: Record<StackDirection, string> = {
+    horizontal: "flex-row",
+    vertical: "flex-col",
+};
+
+const gaps: Record<StackGap, string> = {
+    "0": "gap-0",
+    "1": "gap-1",
+    "3": "gap-3",
+    "5": "gap-5",
+    "7": "gap-7",
+};
+
+const paddings: Record<StackGap, string> = {
+    "0": "p-0",
+    "1": "p-1",
+    "3": "p-3",
+    "5": "p-5",
+    "7": "p-7",
+};
+
+const aligns: Record<StackAlign, string> = {
+    center: "items-center",
+    end: "items-end",
+    start: "items-start",
+    stretch: "items-stretch",
+};
+
+const justifies: Record<StackJustify, string> = {
+    between: "justify-between",
+    center: "justify-center",
+    end: "justify-end",
+    start: "justify-start",
+};
+</script>

package/dist/vue/components/switch.vue

@@ -1,9 +1,9 @@
 <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 v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
 
         <button
-            class="relative mt-0.5 flex h-6 w-11 shrink-0 items-center rounded-full outline-ring transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
+            class="relative mt-0.5 flex h-6 w-11 shrink-0 items-center rounded-ui outline-ring transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
             :class="variants[state]"
             type="button"
             role="switch"
@@ -11,23 +11,24 @@
             :disabled="disabled"
             @click="$emit('update:modelValue', !modelValue)"
         >
-            <span class="block size-5 rounded-full shadow transition-transform" :class="thumbVariants[state]" />
+            <span class="block size-5 rounded-ui shadow transition-transform" :class="thumbVariants[state]" />
         </button>
 
-        <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 { ControlInteraction } from "../../components/control.ts";
 import type { SwitchProps, SwitchState } from "../../components/switch";
+import Stack from "./stack.vue";
 
 const { modelValue = false, label, description, name, disabled = false } = defineProps<SwitchProps>();
 
@@ -46,7 +47,7 @@ const interactionVariants: Record<ControlInteraction, string> = {
 
 const thumbVariants: Record<SwitchState, string> = {
     checked: "translate-x-5 bg-primary-foreground",
-    unchecked: "translate-x-0.5 bg-white",
+    unchecked: "translate-x-1 bg-white",
 };
 
 const variants: Record<SwitchState, string> = {

package/dist/vue/components/upload.vue

@@ -1,11 +1,14 @@
 <template>
-    <div class="flex w-full flex-col gap-2">
+    <Stack>
         <span v-if="label" class="text-sm font-medium">
             {{ label }}<span v-if="required" aria-hidden="true"> *</span>
         </span>
 
-        <div
-            class="relative flex min-h-32 flex-col items-center justify-center gap-3 rounded-ui border border-input border-dashed p-5 text-center transition-colors"
+        <Stack
+            align="center"
+            justify="center"
+            gap="3"
+            class="relative min-h-32 rounded-ui border border-input border-dashed p-5 text-center transition-colors"
             :class="[variants[state], interactionVariants[interaction]]"
             @dragenter.prevent="isOver = true"
             @dragover.prevent="isOver = true"
@@ -35,10 +38,10 @@
                 :disabled="disabled"
                 @change="change"
             />
-        </div>
+        </Stack>
 
         <span v-if="description" class="text-sm opacity-60">{{ description }}</span>
-    </div>
+    </Stack>
 </template>
 
 <script setup lang="ts">
@@ -46,6 +49,7 @@ import { computed, ref, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { UploadProps, UploadState } from "../../components/upload";
 import Button from "./button.vue";
+import Stack from "./stack.vue";
 
 const { modelValue, label, description, accept, name, required = false, disabled = false } = defineProps<UploadProps>();