arvue-ui 0.1.0

package/src/dialog/DialogContent.vue

@@ -0,0 +1,94 @@
+<style>
+@import './dialog-content.css';
+</style>
+
+<template>
+    <DialogPortal>
+        <AnimatePresence as="div">
+            <DialogOverlay as-child>
+                <Motion
+                    :initial="{ opacity: 0 }"
+                    :animate="{ opacity: 1 }"
+                    :exit="{ opacity: 0 }"
+                    :transition="{
+                        duration: .2,
+                        ease: 'easeInOut',
+                    }"
+                />
+            </DialogOverlay>
+            <DialogContent
+                v-bind="{ ...$attrs, ...forwarded }"
+                :class="clsx('arvue-dialog-content', props.class)"
+                as-child
+            >
+                <Motion
+                    :initial="{
+                        y: '2rem',
+                        opacity: 0,
+                    }"
+                    :animate="{
+                        y: 0,
+                        opacity: 1,
+                    }"
+                    :exit="{
+                        y: '2rem',
+                        opacity: 0,
+                    }"
+                    :transition="{
+                        duration: .2,
+                        ease: 'easeInOut',
+                    }"
+                >
+                    <slot/>
+                    <DialogClose
+                        v-if="showCloseButton"
+                        class="arvue-dialog-close-button icon"
+                    >
+                        <i class="fas fa-times"/>
+                    </DialogClose>
+                </Motion>
+            </DialogContent>
+        </AnimatePresence>
+    </DialogPortal>
+</template>
+
+<script lang="ts">
+import type {
+    DialogContentEmits as RekaDialogContentEmits,
+    DialogContentProps as RekaDialogContentProps,
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DialogContentProps extends RekaDialogContentProps {
+    class?: HTMLAttributes['class']
+    showCloseButton?: boolean
+}
+
+export interface DialogContentEmits extends RekaDialogContentEmits {
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AnimatePresence, Motion } from 'motion-v'
+import {
+    DialogContent,
+    DialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { DialogClose, DialogOverlay } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps>(), {
+    showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/dialog/DialogDescription.vue

@@ -0,0 +1,25 @@
+<style>
+@import "./dialog-description.css";
+</style>
+
+<template>
+    <Primitive :class="clsx('arvue-dialog-description', props.class)">
+        <slot/>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import type { DialogDescriptionProps as RekaDialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DialogDescriptionProps extends RekaDialogDescriptionProps{
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { clsx } from 'clsx'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<DialogDescriptionProps>()
+</script>

package/src/dialog/DialogFooter.vue

@@ -0,0 +1,24 @@
+<style>
+@import "./dialog-footer.css";
+</style>
+
+<template>
+    <Primitive :class="clsx('arvue-dialog-footer', props.class)">
+        <slot/>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+export interface DialogFooterProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { clsx } from 'clsx'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<DialogFooterProps>()
+</script>

package/src/dialog/DialogHeader.vue

@@ -0,0 +1,24 @@
+<style>
+@import "./dialog-header.css";
+</style>
+
+<template>
+    <Primitive :class="clsx('arvue-dialog-header', props.class)">
+        <slot/>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+export interface DialogHeaderProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { clsx } from 'clsx'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<DialogHeaderProps>()
+</script>

package/src/dialog/DialogOverlay.vue

@@ -0,0 +1,31 @@
+<style>
+@import './dialog-overlay.css';
+</style>
+
+<template>
+    <DialogOverlay
+        v-bind="delegatedProps"
+        :class="clsx('arvue-dialog-overlay', props.class)"
+    >
+        <slot/>
+    </DialogOverlay>
+</template>
+
+<script lang="ts">
+import type { DialogOverlayProps as RekaDialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DialogOverlayProps extends RekaDialogOverlayProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { DialogOverlay } from 'reka-ui'
+
+const props = defineProps<DialogOverlayProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/dialog/DialogTitle.vue

@@ -0,0 +1,25 @@
+<style>
+@import "./dialog-title.css";
+</style>
+
+<template>
+    <Primitive :class="clsx('arvue-dialog-title', props.class)">
+        <slot/>
+    </Primitive>
+</template>
+
+<script lang="ts">
+import type { DialogTitleProps as RekaDialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface DialogTitleProps extends RekaDialogTitleProps{
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { clsx } from 'clsx'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<DialogTitleProps>()
+</script>

package/src/dialog/DialogTrigger.vue

@@ -0,0 +1,17 @@
+<template>
+    <DialogTrigger v-bind="props">
+        <slot/>
+    </DialogTrigger>
+</template>
+
+<script lang="ts">
+import type { DialogTriggerProps as RekaDialogTriggerProps } from 'reka-ui'
+
+export interface DialogTriggerProps extends RekaDialogTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>

package/src/dialog/dialog-content.css

@@ -0,0 +1,42 @@
+.arvue-dialog-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    z-index: 10;
+    display: grid;
+    width: 100%;
+    max-width: calc(100% - 2rem);
+    gap: 2rem;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    box-shadow: 0 0 70px  var(--dialog-shadow-color);
+    background: var(--background-color-blank);
+    box-sizing: border-box;
+}
+
+@media (min-width: 760px) {
+    .arvue-dialog-content {
+        max-width: 600px;
+    }
+}
+
+.arvue-dialog-content .arvue-dialog-close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    border-radius: 0.125rem;
+    opacity: 0.7;
+    transition: opacity var(--timing-fast) ease-in-out;
+    width: 1rem;
+    height: 1rem;
+    color: inherit;
+}
+
+.arvue-dialog-content .arvue-dialog-close-button:hover {
+    opacity: 1;
+}
+
+.arvue-dialog-content .arvue-dialog-close-button:disabled {
+    pointer-events: none;
+}

package/src/dialog/dialog-description.css

@@ -0,0 +1,3 @@
+.arvue-dialog-description {
+    font-size: 0.875rem;
+}

package/src/dialog/dialog-footer.css

@@ -0,0 +1,16 @@
+.arvue-dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+}
+
+.arvue-dialog-footer button {
+    margin-right: 0;
+}
+
+@media (min-width: 760px) {
+    .arvue-dialog-footer {
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+}

package/src/dialog/dialog-header.css

@@ -0,0 +1,12 @@
+.arvue-dialog-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+}
+
+@media (min-width: 760px) {
+    .arvue-dialog-header {
+        text-align: left;
+    }
+}

package/src/dialog/dialog-overlay.css

@@ -0,0 +1,12 @@
+.arvue-dialog-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: var(--dialog-background-color);
+}

package/src/dialog/dialog-title.css

@@ -0,0 +1,5 @@
+.arvue-dialog-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--text-color-stronger);
+}

package/src/dialog/index.ts

@@ -0,0 +1,38 @@
+export {
+    default as Dialog,
+    type DialogEmits,
+    type DialogProps,
+} from './Dialog.vue'
+export {
+    default as DialogClose,
+    type DialogCloseProps,
+} from './DialogClose.vue'
+export {
+    default as DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+} from './DialogContent.vue'
+export {
+    default as DialogDescription,
+    type DialogDescriptionProps,
+} from './DialogDescription.vue'
+export {
+    default as DialogFooter,
+    type DialogFooterProps,
+} from './DialogFooter.vue'
+export {
+    default as DialogHeader,
+    type DialogHeaderProps,
+} from './DialogHeader.vue'
+export {
+    default as DialogOverlay,
+    type DialogOverlayProps,
+} from './DialogOverlay.vue'
+export {
+    default as DialogTitle,
+    type DialogTitleProps,
+} from './DialogTitle.vue'
+export {
+    default as DialogTrigger,
+    type DialogTriggerProps,
+} from './DialogTrigger.vue'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './dialog'