@revojs/ui 0.2.7 → 0.2.8

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ 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;

package/dist/module/index.js

@@ -31,45 +31,45 @@ var module_default = defineModule({
 		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) {

package/dist/vue/components/button.vue

@@ -1,7 +1,7 @@
 <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"
@@ -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>

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

package/dist/vue/components/navigate.vue

@@ -4,7 +4,7 @@
         :href="href"
         font="normal"
         layout="left"
-        :variant="active ? 'secondary' : 'text'"
+        :variant="active ? 'secondary' : 'ghost'"
         :icon-prefix="iconPrefix"
         :icon-suffix="iconSuffix"
         :label="label"

package/dist/vue/components/progress.vue

@@ -9,7 +9,7 @@
         <progress class="sr-only" :value="value" :max="max">{{ percent }}%</progress>
 
         <div
-            class="h-2 w-full overflow-hidden rounded-full bg-secondary"
+            class="h-2 w-full overflow-hidden rounded-full bg-input"
             role="progressbar"
             :aria-label="label"
             :aria-valuenow="value"

package/dist/vue/components/radio.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="radio"
             :checked="modelValue === value"
             :value="value"
@@ -11,6 +11,14 @@
             @change="$emit('update:modelValue', value)"
         />
 
+        <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="modelValue === value ? 'border-primary bg-background' : 'border-input bg-background'"
+        >
+            <span v-if="modelValue === value" class="size-2 rounded-full bg-primary" />
+        </span>
+
         <span class="flex flex-col gap-0.5">
             <span class="text-sm font-medium">
                 <slot> {{ label }}</slot>

package/dist/vue/components/range.vue

@@ -1,5 +1,5 @@
 <template>
-    <label class="flex flex-col gap-2" :class="interactionVariants[interaction]">
+    <div class="flex flex-col gap-2" :class="interactionVariants[interaction]">
         <span v-if="label" class="flex items-center justify-between gap-4 text-sm">
             <span class="font-medium"> {{ label }} </span>
 
@@ -8,21 +8,35 @@
             </output>
         </span>
 
-        <input
-            class="h-2 w-full cursor-pointer accent-current text-primary disabled:cursor-not-allowed"
-            type="range"
-            :value="modelValue"
-            :min="min"
-            :max="max"
-            :step="step"
-            :disabled="disabled"
-            @input="$emit('update:modelValue', Number(($event.currentTarget as HTMLInputElement).value))"
-        />
-    </label>
+        <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="disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
+            role="slider"
+            :tabindex="disabled ? -1 : 0"
+            :aria-valuemin="min"
+            :aria-valuemax="max"
+            :aria-valuenow="modelValue"
+            :aria-label="label"
+            :aria-disabled="disabled"
+            @pointerdown="onPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="onPointerUp"
+            @pointercancel="onPointerUp"
+            @keydown="onKeyDown"
+        >
+            <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"
+                :style="{ left: `${percent}%` }"
+            />
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 
 const {
@@ -41,7 +55,7 @@ const {
     disabled?: boolean;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
     "update:modelValue": [value: number];
 }>();
 
@@ -51,4 +65,73 @@ const interactionVariants: Record<ControlInteraction, string> = {
     disabled: "cursor-not-allowed opacity-50",
     enabled: "",
 };
+
+const track = useTemplateRef("track");
+
+const percent = computed(() => (max > min ? Math.min(100, Math.max(0, ((modelValue - min) / (max - min)) * 100)) : 0));
+
+let dragging = false;
+
+function commit(raw: number) {
+    const decimals = (String(step).split(".")[1] ?? "").length;
+    const snapped = min + Math.round((raw - min) / step) * step;
+    const rounded = Number(snapped.toFixed(decimals));
+    const value = Math.min(max, Math.max(min, rounded));
+
+    if (value !== modelValue) {
+        emit("update:modelValue", value);
+    }
+}
+
+function setValueFromClientX(clientX: number) {
+    if (!track.value) {
+        return;
+    }
+
+    const rect = track.value.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+
+    commit(min + ratio * (max - min));
+}
+
+function onPointerDown(event: PointerEvent) {
+    if (disabled || !track.value) {
+        return;
+    }
+
+    dragging = true;
+    track.value.setPointerCapture(event.pointerId);
+    track.value.focus({ preventScroll: true });
+    setValueFromClientX(event.clientX);
+}
+
+function onPointerMove(event: PointerEvent) {
+    if (dragging) {
+        setValueFromClientX(event.clientX);
+    }
+}
+
+function onPointerUp() {
+    dragging = false;
+}
+
+function onKeyDown(event: KeyboardEvent) {
+    if (disabled) {
+        return;
+    }
+
+    if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+        commit(modelValue + step);
+        event.preventDefault();
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+        commit(modelValue - step);
+        event.preventDefault();
+    } else if (event.key === "Home") {
+        commit(min);
+        event.preventDefault();
+    } else if (event.key === "End") {
+        commit(max);
+        event.preventDefault();
+    }
+}
 </script>

package/dist/vue/components/rating.vue

@@ -50,7 +50,7 @@ function state(value: number): RatingState {
 }
 
 const variants: Record<RatingState, string> = {
-    active: "text-amber-400",
-    inactive: "text-neutral-300 dark:text-neutral-700",
+    active: "text-primary",
+    inactive: "text-input",
 };
 </script>

package/dist/vue/components/select.vue

@@ -6,7 +6,7 @@
 
         <input v-if="name" type="hidden" :name="name" :value="modelValue" :required="required" />
 
-        <div ref="container">
+        <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"
@@ -41,46 +41,47 @@
                     <Icon name="arrow-down-01" />
                 </button>
             </div>
-        </div>
 
-        <div
-            ref="dropdown"
-            popover="manual"
-            :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"
-            :style="panel"
-        >
-            <Button
-                v-for="option in filtered"
-                :key="option.value"
-                class="w-full"
-                variant="ghost"
-                layout="left"
-                :disabled="option.disabled"
-                role="option"
-                :aria-selected="option.value === modelValue"
-                @click="select(option)"
+            <div
+                ref="dropdown"
+                :popover="popoverSupported ? 'manual' : undefined"
+                :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"
             >
-                <span class="flex w-full items-center justify-between gap-4 text-left">
-                    <slot name="option" :option="option" :selected="option.value === modelValue">
-                        {{ option.label }}
-                    </slot>
-
-                    <Icon v-if="option.value === modelValue" name="tick-02" />
-                </span>
-            </Button>
-
-            <p v-if="filtered.length === 0" class="px-2 py-6 text-center text-sm opacity-60">
-                {{ emptyLabel }}
-            </p>
+                <Button
+                    v-for="option in filtered"
+                    :key="option.value"
+                    class="w-full"
+                    variant="ghost"
+                    layout="left"
+                    :disabled="option.disabled"
+                    role="option"
+                    :aria-selected="option.value === modelValue"
+                    @click="select(option)"
+                >
+                    <span class="flex w-full items-center justify-between gap-4 text-left">
+                        <slot name="option" :option="option" :selected="option.value === modelValue">
+                            {{ option.label }}
+                        </slot>
+
+                        <Icon v-if="option.value === modelValue" name="tick-02" />
+                    </span>
+                </Button>
+
+                <p v-if="filtered.length === 0" class="px-2 py-6 text-center text-sm opacity-60">
+                    {{ emptyLabel }}
+                </p>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
 import type { SelectOption, SelectValue } from "../../components/select.ts";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
@@ -121,6 +122,8 @@ const dropdown = useTemplateRef("dropdown");
 
 const listboxId = `select-${useId()}`;
 
+const popoverSupported = ref(true);
+
 const selected = computed(() => options.find((option) => option.value === modelValue));
 
 const query = ref(selected.value?.label ?? "");
@@ -133,6 +136,14 @@ const filtered = computed(() => {
     return term === "" ? options : options.filter((option) => option.label.toLowerCase().includes(term));
 });
 
+const fallbackClass = computed(() => {
+    if (popoverSupported.value) {
+        return undefined;
+    }
+
+    return open.value ? "absolute inset-x-0 top-full z-50 mt-2" : "hidden";
+});
+
 function handlePointerDown(event: PointerEvent) {
     const target = event.target as Node;
 
@@ -156,12 +167,13 @@ function updatePanel() {
         return;
     }
 
+    const height = window.visualViewport?.height ?? window.innerHeight;
+    const width = window.visualViewport?.width ?? window.innerWidth;
     const bounds = anchor.getBoundingClientRect();
-    const height = list.offsetHeight;
-    const width = bounds.width;
-    const left = Math.min(Math.max(8, bounds.left), window.innerWidth - width - 8);
-    const top =
-        bounds.bottom + height + 8 <= window.innerHeight ? bounds.bottom + 8 : Math.max(8, bounds.top - height - 8);
+    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",
@@ -169,7 +181,7 @@ function updatePanel() {
         position: "fixed",
         right: "auto",
         top: `${top}px`,
-        width: `${width}px`,
+        width: `${listWidth}px`,
     };
 }
 
@@ -186,7 +198,7 @@ watch(open, async (value) => {
         return;
     }
 
-    if (value && !list.matches(":popover-open")) {
+    if (value) {
         query.value = "";
 
         document.addEventListener("pointerdown", handlePointerDown);
@@ -195,31 +207,49 @@ watch(open, async (value) => {
 
         window.addEventListener("scroll", updatePanel, true);
 
-        list.showPopover();
+        window.visualViewport?.addEventListener("resize", updatePanel);
+
+        if (popoverSupported.value && !list.matches(":popover-open")) {
+            list.showPopover();
+        }
 
         await nextTick();
 
         updatePanel();
 
-        search.value?.focus();
-    } else if (!value && list.matches(":popover-open")) {
+        requestAnimationFrame(updatePanel);
+
+        if (document.activeElement !== search.value) {
+            search.value?.focus();
+        }
+    } else {
         document.removeEventListener("pointerdown", handlePointerDown);
 
         window.removeEventListener("resize", updatePanel);
 
         window.removeEventListener("scroll", updatePanel, true);
 
-        list.hidePopover();
+        window.visualViewport?.removeEventListener("resize", updatePanel);
+
+        if (popoverSupported.value && list.matches(":popover-open")) {
+            list.hidePopover();
+        }
 
         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

@@ -1,12 +1,12 @@
 <template>
     <dialog
         ref="sheet"
-        class="m-0 h-full max-h-none max-w-none border-0 bg-transparent p-0 backdrop:bg-black/50"
+        class="m-0 max-w-none border-0 bg-transparent p-0 backdrop:bg-black/50"
         :class="positions[side]"
         @close="$emit('update:modelValue', false)"
         @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
     >
-        <Card :title="title" :description="description" class="h-full w-full shadow-2xl">
+        <Card :title="title" :description="description" :class="cardClasses[side]">
             <template #actions>
                 <Button
                     size="icon"
@@ -55,10 +55,17 @@ defineEmits<{
 const sheet = useTemplateRef("sheet");
 
 const positions: Record<SheetSide, string> = {
-    top: "inset-x-0 top-0 h-auto w-full max-h-[85vh]",
-    right: "inset-y-0 right-0 w-[min(28rem,90vw)]",
-    bottom: "inset-x-0 bottom-0 h-auto w-full max-h-[85vh]",
-    left: "inset-y-0 left-0 w-[min(28rem,90vw)]",
+    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)]",
+    bottom: "bottom-0 left-0 right-0 top-auto h-auto w-full",
+    left: "bottom-0 left-0 right-auto top-0 h-full max-h-full w-[min(28rem,90vw)]",
+};
+
+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",
 };
 
 watchEffect(() => {

package/dist/vue/components/switch.vue

@@ -3,7 +3,7 @@
         <input v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
 
         <button
-            class="relative mt-0.5 h-6 w-11 shrink-0 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-full 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,10 +11,7 @@
             :disabled="disabled"
             @click="$emit('update:modelValue', !modelValue)"
         >
-            <span
-                class="block size-5 translate-x-0.5 rounded-full bg-white shadow transition-transform"
-                :class="thumbVariants[state]"
-            />
+            <span class="block size-5 rounded-full shadow transition-transform" :class="thumbVariants[state]" />
         </button>
 
         <span v-if="label || description || $slots.default" class="flex flex-col gap-0.5">
@@ -60,8 +57,8 @@ const interactionVariants: Record<ControlInteraction, string> = {
 };
 
 const thumbVariants: Record<SwitchState, string> = {
-    checked: "translate-x-5",
-    unchecked: "",
+    checked: "translate-x-5 bg-primary-foreground",
+    unchecked: "translate-x-0.5 bg-white",
 };
 
 const variants: Record<SwitchState, string> = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.2.7",
+    "version": "0.2.8",
     "license": "MIT",
     "repository": {
         "type": "git",