Add Button and Dialog (and AlertDialog which is embedded in the Dialog through the priority attribute)

components/Button.vue

@@ -0,0 +1,6 @@
+<template>
+    <button class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex h-[35px] items-center justify-center bg-light-25 dark:bg-dark-25 px-[15px] leading-none outline-none
+    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40">
+        <slot />
+    </button>
+</template>

components/Dialog.vue

@@ -0,0 +1,38 @@
+<template>
+    <DialogRoot v-if="!priority">
+        <DialogTrigger asChild><Button>{{ label }}</Button></DialogTrigger>
+        <DialogPortal v-if="!disabled">
+            <DialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
+            <DialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
+                <DialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</DialogTitle>
+                <DialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</DialogDescription>
+                <slot />
+                <DialogClose v-if="iconClose" class="text-light-100 dark:text-dark-100 absolute top-2 right-2 inline-flex h-6 w-6 appearance-none items-center justify-center outline-none text-xl" aria-label="Close">
+                    <span aria-hidden>×</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+    <AlertDialogRoot v-else>
+        <AlertDialogTrigger asChild><Button>{{ label }}</Button></AlertDialogTrigger>
+        <AlertDialogPortal v-if="!disabled">
+            <AlertDialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
+            <AlertDialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
+                <AlertDialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</AlertDialogTitle>
+                <AlertDialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</AlertDialogDescription>
+                <slot />
+            </AlertDialogContent>
+        </AlertDialogPortal>
+    </AlertDialogRoot>
+</template>
+
+<script setup lang="ts">
+const { label, title, description, priority = false, disabled = false, iconClose = true } = defineProps<{
+    label?: string
+    title?: string
+    description?: string
+    priority?: boolean
+    disabled?: boolean
+    iconClose?: boolean
+}>();
+</script>

components/HoverCard.vue

@@ -3,7 +3,7 @@
         <HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
             <slot></slot>
         </HoverCardTrigger>
-        <HoverCardPortal :disabled="disabled">
+        <HoverCardPortal v-if="!disabled">
             <HoverCardContent :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
                 <slot name="content"></slot>
                 <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />

components/Switch.vue

@@ -1,5 +1,4 @@
 <template>
-    <div>
     <Label class="flex justify-center items-center my-2">{{ label }}
         <SwitchRoot v-model:checked="model" :disabled="disabled"
             class="mx-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
@@ -10,7 +9,6 @@
                 data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
         </SwitchRoot>
     </Label>
-    </div>
 </template>
 
 <script setup lang="ts">

nuxt.config.ts

@@ -33,12 +33,17 @@ export default defineNuxtConfig({
               from: { opacity: '0', transform: 'translateX(-2px)' },
               to: { opacity: '1', transform: 'translateX(0)' },
             },
+            contentShow: {
+              from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+              to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+            },
           },
           animation: {
             slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
             slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
             slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
             slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+            contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
           },
         },
         colors: {

pages/index.vue

@@ -20,6 +20,13 @@ const open = ref(false), username = ref(""), price = ref(750), disabled = ref(fa
                     <div>Test de HoverCard</div>
                 </template>
             </HoverCard>
+            <Dialog label="Open" title="Titre" description="Description courte de la popup">
+                <div class="flex flex-col items-start">
+                    <Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
+                    <span>Contenu special</span>
+                    <Switch label="Theme sombre ?" />
+                </div>
+            </Dialog>
         </div>
     </div>
 </template>