@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/context-menu/ContextMenuItem.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+	defineProps<
+		ContextMenuItemProps & {
+			class?: HTMLAttributes['class'];
+			inset?: boolean;
+			variant?: 'default' | 'destructive';
+		}
+	>(),
+	{
+		variant: 'default',
+	}
+);
+const emits = defineEmits<ContextMenuItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ContextMenuItem
+		data-slot="context-menu-item"
+		:data-inset="inset ? '' : undefined"
+		:data-variant="variant"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:text-destructive-foreground! [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</ContextMenuItem>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuLabel.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ContextMenuLabel } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<ContextMenuLabel data-slot="context-menu-label" :data-inset="inset ? '' : undefined" v-bind="delegatedProps" :class="cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)">
+		<slot />
+	</ContextMenuLabel>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuPortal.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuPortalProps } from 'reka-ui';
+import { ContextMenuPortal } from 'reka-ui';
+
+const props = defineProps<ContextMenuPortalProps>();
+</script>
+
+<template>
+	<ContextMenuPortal data-slot="context-menu-portal" v-bind="props">
+		<slot />
+	</ContextMenuPortal>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuRadioGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'reka-ui';
+import { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<ContextMenuRadioGroupProps>();
+const emits = defineEmits<ContextMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<ContextMenuRadioGroup data-slot="context-menu-radio-group" v-bind="forwarded">
+		<slot />
+	</ContextMenuRadioGroup>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Circle } from 'lucide-vue-next';
+import { ContextMenuItemIndicator, ContextMenuRadioItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ContextMenuRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ContextMenuRadioItem
+		data-slot="context-menu-radio-item"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<ContextMenuItemIndicator>
+				<slot name="indicator-icon">
+					<Circle class="size-2 fill-current" />
+				</slot>
+			</ContextMenuItemIndicator>
+		</span>
+		<slot />
+	</ContextMenuRadioItem>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ContextMenuSeparator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<ContextMenuSeparator data-slot="context-menu-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 my-1 h-px', props.class)" />
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<span data-slot="context-menu-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+		<slot />
+	</span>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuSub.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui';
+import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<ContextMenuSubProps>();
+const emits = defineEmits<ContextMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<ContextMenuSub data-slot="context-menu-sub" v-bind="forwarded">
+		<slot />
+	</ContextMenuSub>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuSubContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<ContextMenuSubContent
+		data-slot="context-menu-sub-content"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</ContextMenuSubContent>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronRight } from 'lucide-vue-next';
+import { ContextMenuSubTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<ContextMenuSubTrigger
+		data-slot="context-menu-sub-trigger"
+		:data-inset="inset ? '' : undefined"
+		v-bind="forwardedProps"
+		:class="
+			cn(
+				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<slot />
+		<ChevronRight class="ml-auto" />
+	</ContextMenuSubTrigger>
+</template>

package/src/runtime/components/ui/context-menu/ContextMenuTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from 'reka-ui';
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<ContextMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+	<ContextMenuTrigger data-slot="context-menu-trigger" v-bind="forwardedProps">
+		<slot />
+	</ContextMenuTrigger>
+</template>

package/src/runtime/components/ui/context-menu/index.ts

@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue';
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue';
+export { default as ContextMenuContent } from './ContextMenuContent.vue';
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue';
+export { default as ContextMenuItem } from './ContextMenuItem.vue';
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue';
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue';
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue';
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue';
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue';
+export { default as ContextMenuSub } from './ContextMenuSub.vue';
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue';
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue';
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue';

package/src/runtime/components/ui/dialog/Dialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</DialogRoot>
+</template>

package/src/runtime/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui';
+import { DialogClose } from 'reka-ui';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+	<DialogClose data-slot="dialog-close" v-bind="props">
+		<slot />
+	</DialogClose>
+</template>

package/src/runtime/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { X } from 'lucide-vue-next';
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import DialogOverlay from './DialogOverlay.vue';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes['class']; showCloseButton?: boolean }>(), {
+	showCloseButton: true,
+});
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogContent
+			data-slot="dialog-content"
+			v-bind="{ ...$attrs, ...forwarded }"
+			:class="
+				cn(
+					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+					props.class
+				)
+			"
+		>
+			<slot />
+
+			<DialogClose
+				v-if="showCloseButton"
+				data-slot="dialog-close"
+				class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			>
+				<X />
+				<span class="sr-only">Close</span>
+			</DialogClose>
+		</DialogContent>
+	</DialogPortal>
+</template>

package/src/runtime/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn('text-text-body dark:text-text-body text-sm leading-5 font-normal', props.class)">
+		<slot />
+	</DialogDescription>
+</template>

package/src/runtime/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { DialogClose } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+const props = withDefaults(
+	defineProps<{
+		class?: HTMLAttributes['class'];
+		showCloseButton?: boolean;
+	}>(),
+	{
+		showCloseButton: false,
+	}
+);
+</script>
+
+<template>
+	<div data-slot="dialog-footer" :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)">
+		<slot />
+		<DialogClose v-if="showCloseButton" as-child>
+			<Button color="ghost"> Close </Button>
+		</DialogClose>
+	</div>
+</template>

package/src/runtime/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="dialog-header" :class="cn('flex flex-col text-center sm:text-left', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogOverlay } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<DialogOverlay data-slot="dialog-overlay" v-bind="delegatedProps" :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[#00000099]', props.class)">
+		<slot />
+	</DialogOverlay>
+</template>

package/src/runtime/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { X } from 'lucide-vue-next';
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<DialogPortal>
+		<DialogOverlay class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80">
+			<DialogContent
+				:class="cn('border-border-base dark:border-border-base bg-bg-primary-soft dark:bg-bg-primary-soft relative z-50 my-8 grid w-full max-w-lg gap-4 border p-4 sm:gap-6 sm:rounded-xl sm:p-6 md:w-full', props.class)"
+				v-bind="{ ...$attrs, ...forwarded }"
+				@pointer-down-outside="
+					(event) => {
+						const originalEvent = event.detail.originalEvent;
+						const target = originalEvent.target as HTMLElement;
+						if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+							event.preventDefault();
+						}
+					}
+				"
+			>
+				<slot />
+
+				<DialogClose class="hover:bg-[#0C0E120D]` absolute top-4 right-4 size-9 cursor-pointer justify-items-center rounded-xl bg-[#0C0E120D] p-0.5">
+					<X class="h-4 w-4" />
+					<span class="sr-only">Close</span>
+				</DialogClose>
+			</DialogContent>
+		</DialogOverlay>
+	</DialogPortal>
+</template>

package/src/runtime/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<DialogTitle data-slot="dialog-title" v-bind="forwardedProps" :class="cn('text-text-heading dark:text-text-headin border-border-base border-b pb-4 text-lg leading-7 font-medium sm:pb-6', props.class)">
+		<slot />
+	</DialogTitle>
+</template>

package/src/runtime/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui';
+import { DialogTrigger } from 'reka-ui';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+	<DialogTrigger data-slot="dialog-trigger" v-bind="props">
+		<slot />
+	</DialogTrigger>
+</template>

package/src/runtime/components/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

package/src/runtime/components/ui/drawer/Drawer.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue';
+import { useForwardPropsEmits } from 'reka-ui';
+import { DrawerRoot } from 'vaul-vue';
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+	shouldScaleBackground: true,
+});
+
+const emits = defineEmits<DrawerRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<DrawerRoot v-slot="slotProps" data-slot="drawer" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</DrawerRoot>
+</template>

package/src/runtime/components/ui/drawer/DrawerClose.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { DrawerCloseProps } from 'vaul-vue';
+import { DrawerClose } from 'vaul-vue';
+
+const props = defineProps<DrawerCloseProps>();
+</script>
+
+<template>
+	<DrawerClose data-slot="drawer-close" v-bind="props">
+		<slot />
+	</DrawerClose>
+</template>

package/src/runtime/components/ui/drawer/DrawerContent.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { useForwardPropsEmits } from 'reka-ui';
+import { DrawerContent, DrawerPortal } from 'vaul-vue';
+import { cn } from '@/lib/utils';
+import DrawerOverlay from './DrawerOverlay.vue';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<DrawerPortal>
+		<DrawerOverlay />
+		<DrawerContent
+			data-slot="drawer-content"
+			v-bind="{ ...$attrs, ...forwarded }"
+			:class="
+				cn(
+					'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+					'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
+					'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
+					'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
+					'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
+					props.class
+				)
+			"
+		>
+			<div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+			<slot />
+		</DrawerContent>
+	</DrawerPortal>
+</template>

package/src/runtime/components/ui/drawer/DrawerDescription.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from 'vaul-vue';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DrawerDescription } from 'vaul-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<DrawerDescription data-slot="drawer-description" v-bind="delegatedProps" :class="cn('text-muted-foreground text-sm', props.class)">
+		<slot />
+	</DrawerDescription>
+</template>

package/src/runtime/components/ui/drawer/DrawerFooter.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="drawer-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/drawer/DrawerHeader.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="drawer-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+		<slot />
+	</div>
+</template>