@revojs/ui 0.2.7 → 0.2.9

package/dist/vue/components/sheet.vue

@@ -1,17 +1,17 @@
 <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"
                     variant="ghost"
-                    icon-prefix="multiplication-sign"
+                    :icon-prefix="CloseIcon"
                     :aria-label="closeLabel"
                     @click="sheet?.close()"
                 />
@@ -29,24 +29,13 @@
 </template>
 
 <script setup lang="ts">
+import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import { useTemplateRef, watchEffect } from "vue";
-import type { SheetSide } from "../../components/sheet.ts";
+import type { SheetProps, SheetSide } from "../../components/sheet";
 import Button from "./button.vue";
 import Card from "./card.vue";
 
-const {
-    modelValue = false,
-    side = "right",
-    title = undefined,
-    description = undefined,
-    closeLabel = "Close",
-} = defineProps<{
-    modelValue?: boolean;
-    side?: SheetSide;
-    title?: string;
-    description?: string;
-    closeLabel?: string;
-}>();
+const { modelValue = false, side = "right", title, description, closeLabel = "Close" } = defineProps<SheetProps>();
 
 defineEmits<{
     "update:modelValue": [value: boolean];
@@ -55,10 +44,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">
@@ -30,21 +27,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { SwitchState } from "../../components/switch.ts";
+import type { SwitchProps, SwitchState } from "../../components/switch";
 
-const {
-    modelValue = false,
-    label = undefined,
-    description = undefined,
-    name = undefined,
-    disabled = false,
-} = defineProps<{
-    modelValue?: boolean;
-    label?: string;
-    description?: string;
-    name?: string;
-    disabled?: boolean;
-}>();
+const { modelValue = false, label, description, name, disabled = false } = defineProps<SwitchProps>();
 
 defineEmits<{
     "update:modelValue": [value: boolean];
@@ -60,8 +45,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/dist/vue/components/upload.vue

@@ -44,26 +44,10 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { UploadState } from "../../components/upload.ts";
+import type { UploadProps, UploadState } from "../../components/upload";
 import Button from "./button.vue";
 
-const {
-    modelValue = undefined,
-    label = undefined,
-    description = undefined,
-    accept = undefined,
-    name = undefined,
-    required = false,
-    disabled = false,
-} = defineProps<{
-    modelValue?: Blob | File;
-    label?: string;
-    description?: string;
-    accept?: string;
-    name?: string;
-    required?: boolean;
-    disabled?: boolean;
-}>();
+const { modelValue, label, description, accept, name, required = false, disabled = false } = defineProps<UploadProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value?: Blob | File];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.2.7",
+    "version": "0.2.9",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -30,15 +30,16 @@
     },
     "scripts": {
         "build": "vite build",
+        "typecheck": "tsc --noEmit -p tsconfig.json",
         "watch": "vite build --watch"
     },
     "dependencies": {
-        "@iconify/types": "^2.0.0",
-        "@iconify/utils": "^3.1.7",
+        "@iconify-json/hugeicons": "^1.2.35",
         "@revojs/client": "*",
         "@tailwindcss/vite": "^4.3.3",
         "revojs": "*",
-        "tailwindcss": "^4.3.3"
+        "tailwindcss": "^4.3.3",
+        "unplugin-icons": "^24.0.0"
     },
     "devDependencies": {
         "@revojs/tsconfig": "*",