✨ feat (ui): add radix vue components library

app/components/pub/ui/drawer/Drawer.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import { useForwardPropsEmits } from 'radix-vue'
+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-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>

app/components/pub/ui/drawer/DrawerContent.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import DrawerOverlay from './DrawerOverlay.vue'
+
+const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded" :class="cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        props.class,
+      )"
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>

app/components/pub/ui/drawer/DrawerDescription.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from 'vaul-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DrawerDescription } from 'vaul-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerDescription v-bind="delegatedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DrawerDescription>
+</template>

app/components/pub/ui/drawer/DrawerFooter.vue

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

app/components/pub/ui/drawer/DrawerHeader.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>

app/components/pub/ui/drawer/DrawerOverlay.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from 'radix-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DrawerOverlay } from 'vaul-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>

app/components/pub/ui/drawer/DrawerTitle.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from 'vaul-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DrawerTitle } from 'vaul-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DrawerTitle>
+</template>

app/components/pub/ui/drawer/index.ts

@@ -0,0 +1,8 @@
+export { default as Drawer } from './Drawer.vue'
+export { default as DrawerContent } from './DrawerContent.vue'
+export { default as DrawerDescription } from './DrawerDescription.vue'
+export { default as DrawerFooter } from './DrawerFooter.vue'
+export { default as DrawerHeader } from './DrawerHeader.vue'
+export { default as DrawerOverlay } from './DrawerOverlay.vue'
+export { default as DrawerTitle } from './DrawerTitle.vue'
+export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'