@revojs/ui 0.2.11 → 0.2.12

package/dist/components/card.d.ts

@@ -1,5 +1,3 @@
 export interface CardProps {
     label?: string;
-    title?: string;
-    description?: string;
 }

package/dist/components/dialog.d.ts

@@ -1,6 +1,5 @@
 export interface DialogProps {
     modelValue?: boolean;
-    title?: string;
-    description?: string;
+    label?: string;
     closeLabel?: string;
 }

package/dist/components/field.d.ts

@@ -1,7 +1,9 @@
+export type FieldText = "sm" | "md";
 export interface FieldProps {
     label?: string;
     description?: string;
     error?: string;
+    text?: FieldText;
     required?: boolean;
     disabled?: boolean;
 }

package/dist/components/input.d.ts

@@ -1,7 +1,9 @@
 import type { IconComponent } from "./icon";
+export type InputText = "sm" | "md";
 export interface InputProps {
     modelValue?: string | number;
     type?: string;
+    text?: InputText;
     iconPrefix?: IconComponent;
     iconSuffix?: IconComponent;
     placeholder?: string;

package/dist/components/sheet.d.ts

@@ -2,7 +2,6 @@ export type SheetSide = "top" | "right" | "bottom" | "left";
 export interface SheetProps {
     modelValue?: boolean;
     side?: SheetSide;
-    title?: string;
-    description?: string;
+    label?: string;
     closeLabel?: string;
 }

package/dist/components/upload.d.ts

@@ -1,8 +1,10 @@
 export type UploadState = "idle" | "over";
+export type UploadText = "sm" | "md";
 export interface UploadProps {
     modelValue?: Blob | File;
     label?: string;
     description?: string;
+    text?: UploadText;
     accept?: string;
     name?: string;
     required?: boolean;

package/dist/module/index.d.ts

@@ -13,14 +13,22 @@ export interface UiTheme {
     popover: TailwindColor;
     popoverForeground: TailwindColor;
     primary: TailwindColor;
+    primaryHover: TailwindColor;
+    primaryActive: TailwindColor;
     primaryForeground: TailwindColor;
     secondary: TailwindColor;
+    secondaryHover: TailwindColor;
+    secondaryActive: TailwindColor;
     secondaryForeground: TailwindColor;
     muted: TailwindColor;
     mutedForeground: TailwindColor;
     accent: TailwindColor;
     accentForeground: TailwindColor;
+    ghostHover: TailwindColor;
+    ghostActive: TailwindColor;
     destructive: TailwindColor;
+    destructiveHover: TailwindColor;
+    destructiveActive: TailwindColor;
     destructiveForeground: TailwindColor;
     border: TailwindColor;
     input: TailwindColor;

package/dist/module/index.js

@@ -37,14 +37,22 @@ var module_default = defineModule({
 			popover: "white",
 			popoverForeground: "zinc-950",
 			primary: "zinc-950",
+			primaryHover: "zinc-900",
+			primaryActive: "zinc-800",
 			primaryForeground: "white",
 			secondary: "zinc-100",
+			secondaryHover: "zinc-200",
+			secondaryActive: "zinc-300",
 			secondaryForeground: "zinc-900",
 			muted: "zinc-100",
 			mutedForeground: "zinc-500",
 			accent: "zinc-100",
 			accentForeground: "zinc-900",
+			ghostHover: "zinc-100",
+			ghostActive: "zinc-200",
 			destructive: "red-500",
+			destructiveHover: "red-600",
+			destructiveActive: "red-700",
 			destructiveForeground: "zinc-50",
 			border: "zinc-200",
 			input: "zinc-200",
@@ -58,14 +66,22 @@ var module_default = defineModule({
 			popover: "zinc-950",
 			popoverForeground: "zinc-50",
 			primary: "white",
+			primaryHover: "zinc-100",
+			primaryActive: "zinc-200",
 			primaryForeground: "zinc-950",
 			secondary: "zinc-900",
+			secondaryHover: "zinc-800",
+			secondaryActive: "zinc-700",
 			secondaryForeground: "zinc-50",
 			muted: "zinc-900",
 			mutedForeground: "zinc-400",
 			accent: "zinc-900",
 			accentForeground: "zinc-50",
+			ghostHover: "zinc-900",
+			ghostActive: "zinc-800",
 			destructive: "red-500",
+			destructiveHover: "red-600",
+			destructiveActive: "red-700",
 			destructiveForeground: "zinc-50",
 			border: "zinc-700",
 			input: "zinc-700",

package/dist/style.css

@@ -10,14 +10,22 @@
     --color-popover: var(--ui-popover);
     --color-popover-foreground: var(--ui-popover-foreground);
     --color-primary: var(--ui-primary);
+    --color-primary-hover: var(--ui-primary-hover);
+    --color-primary-active: var(--ui-primary-active);
     --color-primary-foreground: var(--ui-primary-foreground);
     --color-secondary: var(--ui-secondary);
+    --color-secondary-hover: var(--ui-secondary-hover);
+    --color-secondary-active: var(--ui-secondary-active);
     --color-secondary-foreground: var(--ui-secondary-foreground);
     --color-muted: var(--ui-muted);
     --color-muted-foreground: var(--ui-muted-foreground);
     --color-accent: var(--ui-accent);
     --color-accent-foreground: var(--ui-accent-foreground);
+    --color-ghost-hover: var(--ui-ghost-hover);
+    --color-ghost-active: var(--ui-ghost-active);
     --color-destructive: var(--ui-destructive);
+    --color-destructive-hover: var(--ui-destructive-hover);
+    --color-destructive-active: var(--ui-destructive-active);
     --color-destructive-foreground: var(--ui-destructive-foreground);
     --color-border: var(--ui-border);
     --color-input: var(--ui-input);

package/dist/vue/components/button.vue

@@ -1,7 +1,7 @@
 <template>
     <component
         :is="is"
-        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="inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 truncate rounded-ui font-[inherit] no-underline outline-ring 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"
@@ -33,7 +33,7 @@ const {
     iconPrefix,
     iconSuffix,
     label,
-    font = "medium",
+    font = "semibold",
     layout = "center",
     size = "default",
     text = "sm",
@@ -66,8 +66,8 @@ const labelLayouts: Record<ButtonLayout, string> = {
 };
 
 const sizes: Record<ButtonSize, string> = {
-    default: "min-h-10 px-4 py-2",
-    icon: "size-10 shrink-0 p-0",
+    default: "p-3",
+    icon: "p-3",
 };
 
 const texts: Record<ButtonText, string> = {
@@ -81,12 +81,11 @@ const iconSize: Record<ButtonText, number> = {
 };
 
 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",
+    primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active",
     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",
+        "bg-secondary text-secondary-foreground ring-1 ring-border ring-inset hover:bg-secondary-hover active:bg-secondary-active",
+    ghost: "bg-transparent text-foreground hover:bg-ghost-hover active:bg-ghost-active",
+    destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover active:bg-destructive-active",
 };
 </script>

package/dist/vue/components/card.vue

@@ -1,33 +1,27 @@
 <template>
-    <Stack is="section" gap="0" class="rounded-ui border border-border bg-card text-card-foreground shadow-sm">
+    <Stack is="section" gap="0" class="w-full rounded-ui border border-border bg-card text-card-foreground">
         <Stack
-            v-if="label || title || description || $slots.header || $slots.actions"
+            v-if="label || $slots.header || $slots.actions"
             is="header"
             direction="horizontal"
             align="center"
             justify="between"
-            class="border-b border-border p-5"
+            class="shrink-0 border-b border-border"
         >
             <slot name="header">
-                <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>
-                </Stack>
+                <span v-if="label" class="min-w-0 flex-1 px-5 py-3 text-sm/5 font-normal"> {{ label }} </span>
             </slot>
 
-            <Stack v-if="$slots.actions" direction="horizontal" align="center" class="shrink-0">
+            <Stack v-if="$slots.actions" direction="horizontal" align="center" class="ml-auto shrink-0">
                 <slot name="actions" />
             </Stack>
         </Stack>
 
-        <Stack gap="5" padding="5" class="flex-1">
+        <Stack gap="5" padding="5" class="min-h-0 flex-1">
             <slot />
         </Stack>
 
-        <Stack v-if="$slots.footer" is="footer" direction="horizontal" align="center" gap="3" class="px-5 pb-5">
+        <Stack v-if="$slots.footer" is="footer" direction="horizontal" align="center" class="shrink-0 px-5 pb-5">
             <slot name="footer" />
         </Stack>
     </Stack>
@@ -37,5 +31,5 @@
 import type { CardProps } from "../../components/card";
 import Stack from "./stack.vue";
 
-const { label, title, description } = defineProps<CardProps>();
+const { label } = defineProps<CardProps>();
 </script>

package/dist/vue/components/checkbox.vue

@@ -1,5 +1,12 @@
 <template>
-    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
+    <Stack
+        is="label"
+        direction="horizontal"
+        align="start"
+        gap="3"
+        class="group"
+        :class="interactionVariants[interaction]"
+    >
         <input
             class="peer sr-only"
             type="checkbox"
@@ -12,8 +19,15 @@
 
         <span
             aria-hidden="true"
-            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'"
+            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border 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',
+                disabled
+                    ? ''
+                    : modelValue
+                      ? 'group-hover:bg-primary-hover group-active:bg-primary-active'
+                      : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
+            ]"
         >
             <span
                 v-if="modelValue"
@@ -22,7 +36,7 @@
         </span>
 
         <Stack is="span" v-if="label || description || $slots.default" gap="0">
-            <span class="text-sm font-medium"
+            <span class="text-sm font-normal"
                 ><slot>{{ label }}</slot></span
             >
             <span v-if="description" class="text-sm opacity-60">{{ description }}</span>

package/dist/vue/components/collection.vue

@@ -9,7 +9,7 @@
                 <slot :item="item" :index="index" />
             </div>
         </template>
-        <Stack v-else align="center" padding="5" class="text-sm opacity-60">
+        <Stack v-else align="center" padding="5">
             <Icon :is="SearchIcon" class="text-2xl" />
 
             <span>{{ emptyLabel }}</span>

package/dist/vue/components/container.vue

@@ -1,5 +1,10 @@
 <template>
-    <Stack gap="5" :padding="padding" :class="sizes[size]" class="mx-auto w-full">
+    <Stack
+        gap="5"
+        :padding="padding"
+        :class="sizes[size]"
+        class="mx-auto w-full overflow-y-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
         <slot />
     </Stack>
 </template>

package/dist/vue/components/counter.vue

@@ -1,10 +1,8 @@
 <template>
     <Stack>
-        <span v-if="label" class="text-sm font-medium">{{ label }}</span>
+        <span v-if="label" class="text-sm font-normal">{{ label }}</span>
 
-        <div
-            class="grid h-10 grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center overflow-hidden rounded-ui border border-input"
-        >
+        <div class="relative grid grid-cols-[auto_minmax(0,1fr)_auto] items-center overflow-hidden rounded-ui">
             <Button
                 class="text-lg"
                 size="icon"
@@ -26,6 +24,11 @@
                 aria-label="Increase"
                 @click="change(step)"
             />
+
+            <span
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 rounded-ui ring-1 ring-input ring-inset"
+            />
         </div>
     </Stack>
 </template>

package/dist/vue/components/dialog.vue

@@ -1,11 +1,11 @@
 <template>
     <dialog
         ref="dialog"
-        class="m-auto w-full max-w-lg border-0 bg-transparent p-5 backdrop:bg-black/50"
+        class="fixed inset-0 m-0 h-full max-h-none w-full max-w-none flex-col items-center overflow-y-auto border-0 bg-transparent p-5 backdrop:bg-black/50 open:flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         @close="$emit('update:modelValue', false)"
         @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
     >
-        <Card :title="title" :description="description" class="shadow-2xl">
+        <Card :label="label" class="my-auto max-w-3xl shrink-0 shadow-2xl">
             <template #actions>
                 <Button size="icon" variant="ghost" :icon-prefix="CloseIcon" :aria-label="closeLabel" @click="close" />
             </template>
@@ -27,7 +27,7 @@ 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>();
+const { modelValue = false, label, closeLabel = "Close" } = defineProps<DialogProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean];

package/dist/vue/components/field.vue

@@ -1,23 +1,28 @@
 <template>
-    <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>
+    <Stack is="fieldset" :disabled="disabled" :class="texts[text]">
+        <legend v-if="label" class="mb-1 font-normal">
+            {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
         </legend>
 
         <slot />
 
-        <p v-if="error" class="text-sm text-destructive">
+        <p v-if="error" class="text-destructive">
             {{ error }}
         </p>
-        <p v-else-if="description" class="text-sm opacity-60">
+        <p v-else-if="description" class="opacity-60">
             {{ description }}
         </p>
     </Stack>
 </template>
 
 <script setup lang="ts">
-import type { FieldProps } from "../../components/field";
+import type { FieldProps, FieldText } from "../../components/field";
 import Stack from "./stack.vue";
 
-const { label, description, error, required = false, disabled = false } = defineProps<FieldProps>();
+const { label, description, error, text = "sm", required = false, disabled = false } = defineProps<FieldProps>();
+
+const texts: Record<FieldText, string> = {
+    sm: "text-sm",
+    md: "text-base",
+};
 </script>

package/dist/vue/components/input.vue

@@ -3,15 +3,16 @@
         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]"
+        gap="0"
+        class="w-full cursor-text rounded-ui bg-secondary p-3 ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
+        :class="[texts[text], interactionVariants[interaction]]"
     >
         <slot name="leading" />
 
         <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"
+            class="w-full min-w-0 appearance-none bg-transparent px-1 outline-none placeholder:opacity-50"
             :value="modelValue"
             :type="type"
             :name="name"
@@ -32,13 +33,14 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { InputProps } from "../../components/input";
+import type { InputProps, InputText } from "../../components/input";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
 
 const {
     modelValue,
     type = "text",
+    text = "sm",
     iconPrefix,
     iconSuffix,
     placeholder,
@@ -49,7 +51,12 @@ const {
     disabled = false,
 } = defineProps<InputProps>();
 
-const iconSize = 20;
+const iconSize = computed(() => (text === "sm" ? 20 : 24));
+
+const texts: Record<InputText, string> = {
+    sm: "text-sm",
+    md: "text-base",
+};
 
 const emit = defineEmits<{
     "update:modelValue": [value: string | number];

package/dist/vue/components/link.vue

@@ -1,7 +1,7 @@
 <template>
     <component
         :is="is"
-        class="cursor-pointer underline-offset-4 transition-colors hover:underline"
+        class="cursor-pointer underline-offset-4 hover:underline"
         :class="variants[variant]"
         :href="href"
     >

package/dist/vue/components/popover.vue

@@ -1,12 +1,16 @@
 <template>
-    <div ref="container" class="relative inline-flex">
+    <div ref="container" class="relative w-full">
         <Button variant="outline" :class="triggerClass" :layout="triggerLayout" :disabled="disabled" @click="toggle">
-            <slot name="trigger" :open="open" :close="close" :toggle="toggle">{{ triggerLabel }}</slot>
+            <slot name="trigger" :open="open" :close="close" :toggle="toggle">
+                <span class="truncate px-1" :class="triggerLayout === 'center' ? '' : 'flex-1'">{{
+                    triggerLabel
+                }}</span>
+            </slot>
         </Button>
 
         <div
             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="absolute left-0 top-full z-10 mt-1 max-w-xs rounded-ui border border-border bg-popover text-popover-foreground shadow-xl"
             :class="[contentClass, matchTriggerWidth ? 'w-full' : '']"
         >
             <slot :open="open" :close="close" :toggle="toggle" />
@@ -26,7 +30,7 @@ const {
     triggerClass,
     triggerLayout = "center",
     contentClass = "flex flex-col gap-1 p-1",
-    matchTriggerWidth = false,
+    matchTriggerWidth = true,
     disabled = false,
 } = defineProps<PopoverProps>();
 

package/dist/vue/components/progress.vue

@@ -1,7 +1,7 @@
 <template>
     <Stack>
         <Stack v-if="label" direction="horizontal" align="center" justify="between" gap="1" class="text-sm">
-            <span class="font-medium">{{ label }}</span>
+            <span class="font-normal">{{ label }}</span>
 
             <span class="tabular-nums opacity-60">{{ Math.round(percent) }}%</span>
         </Stack>
@@ -16,7 +16,7 @@
             aria-valuemin="0"
             :aria-valuemax="max"
         >
-            <div class="h-full rounded-ui bg-primary transition-[width]" :style="{ width: `${percent}%` }" />
+            <div class="h-full rounded-ui bg-primary" :style="{ width: `${percent}%` }" />
         </div>
     </Stack>
 </template>

package/dist/vue/components/radio.vue

@@ -1,5 +1,12 @@
 <template>
-    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
+    <Stack
+        is="label"
+        direction="horizontal"
+        align="start"
+        gap="3"
+        class="group"
+        :class="interactionVariants[interaction]"
+    >
         <input
             class="peer sr-only"
             type="radio"
@@ -13,14 +20,21 @@
 
         <span
             aria-hidden="true"
-            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'"
+            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border 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',
+                disabled ? '' : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
+            ]"
         >
-            <span v-if="modelValue === value" class="size-2 rounded-ui bg-primary" />
+            <span
+                v-if="modelValue === value"
+                class="size-2 rounded-ui bg-primary"
+                :class="disabled ? '' : 'group-hover:bg-secondary-foreground group-active:bg-secondary-foreground'"
+            />
         </span>
 
         <Stack is="span" gap="0">
-            <span class="text-sm font-medium">
+            <span class="text-sm font-normal">
                 <slot> {{ label }}</slot>
             </span>
 

package/dist/vue/components/range.vue

@@ -1,7 +1,7 @@
 <template>
     <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>
+            <span class="font-normal"> {{ label }} </span>
 
             <output class="tabular-nums opacity-60">
                 {{ modelValue }}

package/dist/vue/components/rating.vue

@@ -1,6 +1,6 @@
 <template>
     <Stack>
-        <span v-if="label" class="text-sm font-medium">{{ label }}</span>
+        <span v-if="label" class="text-sm font-normal">{{ label }}</span>
 
         <Stack direction="horizontal" align="center" gap="0" role="radiogroup" :aria-label="label">
             <Button
@@ -16,7 +16,7 @@
                 :disabled="readonly || disabled"
                 @click="$emit('update:modelValue', value)"
             >
-                <Icon :is="StarIcon" />
+                <Icon :is="StarIcon" :class="{ '[&_path]:fill-current': value <= modelValue }" />
             </Button>
         </Stack>
     </Stack>

package/dist/vue/components/select.vue

@@ -1,6 +1,6 @@
 <template>
     <Stack>
-        <span v-if="label" class="text-sm font-medium">
+        <span v-if="label" class="text-sm font-normal">
             {{ label }}
         </span>
 
@@ -10,22 +10,26 @@
             <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="w-full cursor-text rounded-ui bg-secondary p-3 text-sm font-semibold ring-1 ring-input ring-inset focus-within:ring-2 focus-within:ring-ring"
                 :class="disabled ? 'cursor-not-allowed opacity-50' : ''"
-                @click="search?.focus()"
+                @click="
+                    if (!disabled) {
+                        open = true;
+                        search?.focus();
+                    }
+                "
             >
                 <input
                     ref="search"
                     v-model="query"
                     role="combobox"
-                    class="w-full min-w-0 bg-transparent py-2 outline-none placeholder:opacity-50"
+                    class="w-full min-w-0 bg-transparent px-1 outline-none placeholder:opacity-50"
                     :placeholder="placeholder ?? 'Select'"
                     :aria-expanded="open"
                     :aria-controls="listboxId"
                     :aria-activedescendant="activeId"
                     aria-autocomplete="list"
                     :disabled="disabled"
-                    @focus="open = true"
                     @input="input"
                     @keydown.enter.prevent="confirm"
                     @keydown.escape="open = false"
@@ -33,24 +37,18 @@
                     @keydown.arrow-up.prevent="stepHighlight(-1)"
                 />
 
-                <button
-                    type="button"
-                    tabindex="-1"
-                    class="shrink-0 opacity-60 transition-transform"
-                    :class="open ? 'rotate-180' : ''"
-                    :disabled="disabled"
-                    @click.stop="open = !open"
-                >
-                    <Icon :is="ArrowDownIcon" :size="iconSize" />
+                <button type="button" tabindex="-1" class="shrink-0" :disabled="disabled" @click.stop="open = !open">
+                    <Icon :is="open ? ArrowUpIcon : ArrowDownIcon" :size="iconSize" />
                 </button>
             </Stack>
 
-            <div
+            <Stack
                 v-if="open"
                 :id="listboxId"
                 role="listbox"
                 :aria-label="label"
-                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"
+                padding="1"
+                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 text-popover-foreground shadow-xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
             >
                 <Button
                     v-for="(option, index) in filtered"
@@ -66,7 +64,7 @@
                 >
                     <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 }}
+                            <span class="min-w-0 flex-1 truncate px-1">{{ option.label }}</span>
                         </slot>
 
                         <Icon v-if="option.value === modelValue" :is="TickIcon" :size="iconSize" />
@@ -76,13 +74,14 @@
                 <p v-if="filtered.length === 0" class="px-1 py-5 text-center text-sm opacity-60">
                     {{ emptyLabel }}
                 </p>
-            </div>
+            </Stack>
         </div>
     </Stack>
 </template>
 
 <script setup lang="ts">
 import ArrowDownIcon from "~icons/hugeicons/arrow-down-01";
+import ArrowUpIcon from "~icons/hugeicons/arrow-up-01";
 import TickIcon from "~icons/hugeicons/tick-02";
 import { computed, onUnmounted, ref, useId, useTemplateRef, watch } from "vue";
 import type { SelectOption, SelectProps, SelectValue } from "../../components/select";
@@ -122,8 +121,10 @@ const selected = computed(() => options.find((option) => option.value === modelV
 
 const query = ref(selected.value?.label ?? "");
 
+const searching = ref(false);
+
 const filtered = computed(() => {
-    const term = query.value.trim().toLowerCase();
+    const term = searching.value ? query.value.trim().toLowerCase() : "";
 
     return term === "" ? options : options.filter((option) => option.label.toLowerCase().includes(term));
 });
@@ -194,6 +195,8 @@ function confirm() {
 }
 
 function input() {
+    searching.value = true;
+
     open.value = true;
 
     highlighted.value = -1;
@@ -207,8 +210,6 @@ watch(selected, (value) => {
 
 watch(open, (value) => {
     if (value) {
-        query.value = "";
-
         highlighted.value = filtered.value.findIndex((option) => option.value === modelValue);
 
         document.addEventListener("pointerdown", handlePointerDown);
@@ -221,6 +222,8 @@ watch(open, (value) => {
 
         highlighted.value = -1;
 
+        searching.value = false;
+
         query.value = selected.value?.label ?? "";
     }
 });

package/dist/vue/components/separator.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="shrink-0 bg-border"
+        class="shrink-0 self-center bg-border"
         :class="variants[selected]"
         :role="decorative ? 'none' : 'separator'"
         :aria-orientation="decorative ? undefined : selected"
@@ -17,6 +17,6 @@ const selected = computed(() => variant ?? orientation);
 
 const variants: Record<SeparatorOrientation, string> = {
     horizontal: "h-px w-full",
-    vertical: "h-full min-h-5 w-px",
+    vertical: "h-5 w-px",
 };
 </script>

package/dist/vue/components/sheet.vue

@@ -1,12 +1,12 @@
 <template>
     <dialog
         ref="sheet"
-        class="m-0 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 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         :class="positions[side]"
         @close="$emit('update:modelValue', false)"
         @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
     >
-        <Card :title="title" :description="description" :class="cardClasses[side]">
+        <Card :label="label" :class="cardClasses[side]">
             <template #actions>
                 <Button
                     size="icon"
@@ -17,7 +17,7 @@
                 />
             </template>
 
-            <div class="flex-1 overflow-auto">
+            <div class="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                 <slot />
             </div>
 
@@ -37,7 +37,7 @@ 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>();
+const { modelValue = false, side = "right", label, closeLabel = "Close" } = defineProps<SheetProps>();
 
 defineEmits<{
     "update:modelValue": [value: boolean];

package/dist/vue/components/switch.vue

@@ -1,21 +1,35 @@
 <template>
-    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
+    <Stack
+        is="label"
+        direction="horizontal"
+        align="center"
+        gap="3"
+        class="group"
+        :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-ui outline-ring transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
-            :class="variants[state]"
+            class="relative flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ui p-0.5 outline-ring focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
+            :class="[
+                variants[state],
+                disabled
+                    ? ''
+                    : modelValue
+                      ? 'group-hover:bg-primary-hover group-active:bg-primary-active'
+                      : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
+            ]"
             type="button"
             role="switch"
             :aria-checked="modelValue"
             :disabled="disabled"
             @click="$emit('update:modelValue', !modelValue)"
         >
-            <span class="block size-5 rounded-ui shadow transition-transform" :class="thumbVariants[state]" />
+            <span class="block size-5 rounded-ui shadow" :class="thumbVariants[state]" />
         </button>
 
         <Stack is="span" v-if="label || description || $slots.default" gap="0">
-            <span class="text-sm font-medium">
+            <span class="text-sm font-normal">
                 <slot> {{ label }} </slot>
             </span>
 
@@ -47,11 +61,11 @@ const interactionVariants: Record<ControlInteraction, string> = {
 
 const thumbVariants: Record<SwitchState, string> = {
     checked: "translate-x-5 bg-primary-foreground",
-    unchecked: "translate-x-1 bg-white",
+    unchecked: "translate-x-0 bg-foreground",
 };
 
 const variants: Record<SwitchState, string> = {
     checked: "bg-primary",
-    unchecked: "bg-input",
+    unchecked: "bg-background ring-1 ring-input ring-inset",
 };
 </script>

package/dist/vue/components/upload.vue

@@ -1,32 +1,42 @@
 <template>
-    <Stack>
-        <span v-if="label" class="text-sm font-medium">
-            {{ label }}<span v-if="required" aria-hidden="true"> *</span>
+    <Stack class="w-full" :class="texts[text]">
+        <span v-if="label" class="font-normal">
+            {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
         </span>
 
         <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"
+            gap="0"
+            class="relative rounded-ui"
             :class="[variants[state], interactionVariants[interaction]]"
             @dragenter.prevent="isOver = true"
             @dragover.prevent="isOver = true"
             @dragleave="leave"
             @drop.prevent="drop"
         >
-            <template v-if="modelValue">
-                <span class="max-w-full truncate text-sm">
-                    {{ "name" in modelValue ? modelValue.name : "File selected" }}
+            <Stack v-if="modelValue" direction="horizontal" align="center" justify="between" gap="0">
+                <span class="min-w-0 flex-1 p-3">
+                    <span class="block truncate px-1">{{
+                        "name" in modelValue ? modelValue.name : "File selected"
+                    }}</span>
                 </span>
 
-                <Button label="Remove" variant="ghost" :disabled="disabled" @click="remove" />
-            </template>
-            <template v-else>
+                <Button
+                    size="icon"
+                    variant="secondary"
+                    :text="text"
+                    :icon-prefix="CloseIcon"
+                    aria-label="Remove file"
+                    :disabled="disabled"
+                    @click="remove"
+                />
+            </Stack>
+            <Stack v-else align="center" gap="3" padding="5" class="text-center">
+                <Icon :is="UploadIcon" :size="24" />
+
                 <span class="text-sm opacity-60"> Drag and drop a file here </span>
 
                 <Button label="Browse files" variant="outline" :disabled="disabled" @click="input?.click()" />
-            </template>
+            </Stack>
 
             <input
                 ref="input"
@@ -38,20 +48,37 @@
                 :disabled="disabled"
                 @change="change"
             />
+
+            <span
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 rounded-ui ring-1 ring-input ring-inset"
+            />
         </Stack>
 
-        <span v-if="description" class="text-sm opacity-60">{{ description }}</span>
+        <span v-if="description" class="opacity-60">{{ description }}</span>
     </Stack>
 </template>
 
 <script setup lang="ts">
+import UploadIcon from "~icons/hugeicons/file-upload";
+import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import { computed, ref, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { UploadProps, UploadState } from "../../components/upload";
+import type { UploadProps, UploadState, UploadText } from "../../components/upload";
 import Button from "./button.vue";
+import Icon from "./icon.vue";
 import Stack from "./stack.vue";
 
-const { modelValue, label, description, accept, name, required = false, disabled = false } = defineProps<UploadProps>();
+const {
+    modelValue,
+    label,
+    description,
+    text = "sm",
+    accept,
+    name,
+    required = false,
+    disabled = false,
+} = defineProps<UploadProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value?: Blob | File];
@@ -71,10 +98,15 @@ const interactionVariants: Record<ControlInteraction, string> = {
 };
 
 const variants: Record<UploadState, string> = {
-    idle: "bg-muted",
+    idle: "bg-secondary",
     over: "bg-accent",
 };
 
+const texts: Record<UploadText, string> = {
+    sm: "text-sm",
+    md: "text-base",
+};
+
 function change() {
     const file = input.value?.files?.item(0);
 

package/package.json

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