@spavn/ui 0.0.1

package/src/lib/date-time-picker/DateTimePicker.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CalendarDateTime } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
+import { CalendarIcon } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import Calendar from '@/lib/calendar/Calendar.vue'
+import TimePicker from '@/lib/time-picker/TimePicker.vue'
+import Separator from '@/lib/separator/Separator.vue'
+import { PopoverRoot, PopoverTrigger, PopoverContent, PopoverPortal } from 'radix-vue'
+
+interface Props {
+  modelValue?: CalendarDateTime
+  hour12?: boolean
+  granularity?: 'minute' | 'second'
+  class?: string
+  disabled?: boolean
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hour12: false,
+  granularity: 'minute',
+  placeholder: 'Pick date and time',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: CalendarDateTime): void
+}>()
+
+const formattedValue = computed(() => {
+  if (!props.modelValue) return ''
+  const dt = props.modelValue
+  const date = `${dt.year}-${String(dt.month).padStart(2, '0')}-${String(dt.day).padStart(2, '0')}`
+
+  let time: string
+  if (props.hour12) {
+    const h = dt.hour % 12
+    const displayH = h === 0 ? 12 : h
+    const period = dt.hour >= 12 ? 'PM' : 'AM'
+    time = `${displayH}:${String(dt.minute).padStart(2, '0')}`
+    if (props.granularity === 'second') {
+      time += `:${String(dt.second).padStart(2, '0')}`
+    }
+    time += ` ${period}`
+  } else {
+    time = `${String(dt.hour).padStart(2, '0')}:${String(dt.minute).padStart(2, '0')}`
+    if (props.granularity === 'second') {
+      time += `:${String(dt.second).padStart(2, '0')}`
+    }
+  }
+
+  return `${date} ${time}`
+})
+
+const calendarValue = computed(() => props.modelValue as DateValue | undefined)
+
+const timeValue = computed(() => {
+  if (!props.modelValue) return { hour: 0, minute: 0, second: 0 }
+  return {
+    hour: props.modelValue.hour,
+    minute: props.modelValue.minute,
+    second: props.modelValue.second,
+  }
+})
+
+function onCalendarUpdate(date: DateValue | undefined) {
+  if (!date) return
+
+  const current = props.modelValue
+  const hour = current?.hour ?? 0
+  const minute = current?.minute ?? 0
+  const second = current?.second ?? 0
+
+  const updated = new CalendarDateTime(
+    date.year,
+    date.month,
+    date.day,
+    hour,
+    minute,
+    second,
+  )
+  emit('update:modelValue', updated)
+}
+
+function onTimeUpdate(time: { hour: number; minute: number; second?: number }) {
+  const current = props.modelValue
+  const year = current?.year ?? new Date().getFullYear()
+  const month = current?.month ?? (new Date().getMonth() + 1)
+  const day = current?.day ?? new Date().getDate()
+
+  const updated = new CalendarDateTime(
+    year,
+    month,
+    day,
+    time.hour,
+    time.minute,
+    time.second ?? 0,
+  )
+  emit('update:modelValue', updated)
+}
+</script>
+
+<template>
+  <PopoverRoot>
+    <PopoverTrigger as-child>
+      <button
+        type="button"
+        :disabled="disabled"
+        :class="
+          cn(
+            'h-10 w-full rounded-lg border border-input bg-background px-3 text-sm shadow-depth-1 text-left flex items-center gap-2',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            'transition-all duration-150 ease-out',
+            !modelValue && 'text-muted-foreground',
+            props.class,
+          )
+        "
+      >
+        <CalendarIcon class="h-4 w-4 shrink-0 text-muted-foreground" />
+        <span>{{ formattedValue || placeholder }}</span>
+      </button>
+    </PopoverTrigger>
+
+    <PopoverPortal>
+      <PopoverContent
+        :side-offset="4"
+        align="start"
+        :class="
+          cn(
+            'z-depth-3 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-depth-3 outline-none',
+            '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',
+          )
+        "
+      >
+        <Calendar
+          :model-value="calendarValue"
+          @update:model-value="onCalendarUpdate"
+        />
+
+        <Separator class="my-3" />
+
+        <div class="flex items-center justify-center">
+          <TimePicker
+            :model-value="timeValue"
+            :hour12="hour12"
+            :granularity="granularity"
+            :disabled="disabled"
+            @update:model-value="onTimeUpdate"
+          />
+        </div>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

package/src/lib/dialog/Dialog.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import Dialog from './Dialog.vue'
+import DialogTrigger from './DialogTrigger.vue'
+import DialogContent from './DialogContent.vue'
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('Dialog', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Dialog, {
+      slots: { default: 'Dialog content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('accepts open prop', () => {
+    const wrapper = mount(Dialog, {
+      props: { open: true },
+      slots: { default: 'Dialog content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('emits update:open event', () => {
+    const wrapper = mount(Dialog, {
+      props: { open: false },
+      slots: { default: 'Dialog content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+})
+
+describe('DialogTrigger', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(Dialog, {
+      props: { open: false },
+      slots: {
+        default: () => h(DialogTrigger, null, { default: () => 'Open Dialog' }),
+      },
+    })
+    expect(wrapper.text()).toContain('Open Dialog')
+  })
+
+  it('renders as a button by default', () => {
+    const wrapper = mount(Dialog, {
+      props: { open: false },
+      slots: {
+        default: () => h(DialogTrigger, null, { default: () => 'Click me' }),
+      },
+    })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+})
+
+describe('DialogContent', () => {
+  it('mounts without errors when dialog is open', () => {
+    // DialogContent uses DialogPortal (teleport to body). In jsdom with
+    // useForwardPropsEmits, the portal may not fully render the dialog content.
+    // We verify the component tree mounts without throwing.
+    const wrapper = mount(Dialog, {
+      props: { open: true },
+      slots: {
+        default: () => h(DialogContent, null, { default: () => 'Content here' }),
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts custom class prop', () => {
+    // Verify DialogContent accepts class prop without error
+    const wrapper = mount(Dialog, {
+      props: { open: true },
+      slots: {
+        default: () => h(DialogContent, { class: 'custom-dialog' }, { default: () => 'Content' }),
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+})

package/src/lib/dialog/Dialog.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

package/src/lib/dialog/DialogClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

package/src/lib/dialog/DialogContent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { DialogContent, DialogPortal, DialogOverlay, DialogClose, type DialogContentProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: string }>()
+const emits = defineEmits()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4',
+          'border bg-background p-6 shadow-depth-5 duration-200',
+          '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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+          'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+          'sm:rounded-lg',
+          props.class
+        )
+      "
+    >
+      <slot />
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4"
+          aria-hidden="true"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/lib/dialog/DialogDescription.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="props"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

package/src/lib/dialog/DialogFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/dialog/DialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/dialog/DialogOverlay.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { DialogOverlay, type DialogOverlayProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogOverlay
+    v-bind="props"
+    :class="
+      cn(
+        'fixed inset-0 z-50 bg-black/80',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+      )
+    "
+  />
+</template>

package/src/lib/dialog/DialogPortal.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogPortal, type DialogPortalProps } from 'radix-vue'
+
+const props = defineProps<DialogPortalProps>()
+</script>
+
+<template>
+  <DialogPortal v-bind="props">
+    <slot />
+  </DialogPortal>
+</template>

package/src/lib/dialog/DialogTitle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="props"
+    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/src/lib/dialog/DialogTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

package/src/lib/dialog/index.ts

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

package/src/lib/direction/Direction.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+
+const props = withDefaults(defineProps<{ dir?: 'ltr' | 'rtl' }>(), { dir: 'ltr' })
+
+provide('direction', props.dir)
+</script>
+
+<template>
+  <div :dir="props.dir">
+    <slot />
+  </div>
+</template>

package/src/lib/drawer/Drawer.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DialogRoot } from 'radix-vue'
+</script>
+
+<template>
+  <DialogRoot v-bind="$attrs">
+    <slot />
+  </DialogRoot>
+</template>

package/src/lib/drawer/DrawerClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DialogClose } from 'radix-vue'
+</script>
+
+<template>
+  <DialogClose v-bind="$attrs">
+    <slot />
+  </DialogClose>
+</template>

package/src/lib/drawer/DrawerContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  DialogContent,
+  DialogPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import DrawerOverlay from './DrawerOverlay.vue'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DialogPortal>
+    <DrawerOverlay />
+    <DialogContent
+      v-bind="$attrs"
+      :class="
+        cn(
+          'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background shadow-depth-5',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          props.class
+        )
+      "
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/lib/drawer/DrawerDescription.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DialogDescription } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="$attrs"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

package/src/lib/drawer/DrawerFooter.vue

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

package/src/lib/drawer/DrawerHeader.vue

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

package/src/lib/drawer/DrawerOverlay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DialogOverlay } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DialogOverlay
+    v-bind="$attrs"
+    :class="
+      cn(
+        'fixed inset-0 z-50 bg-black/80',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+      )
+    "
+  />
+</template>

package/src/lib/drawer/DrawerTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DialogTitle } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="$attrs"
+    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/src/lib/drawer/DrawerTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { DialogTrigger } from 'radix-vue'
+</script>
+
+<template>
+  <DialogTrigger v-bind="$attrs">
+    <slot />
+  </DialogTrigger>
+</template>

package/src/lib/drawer/index.ts

@@ -0,0 +1,9 @@
+export { default as Drawer } from './Drawer.vue'
+export { default as DrawerClose } from './DrawerClose.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 { default as DrawerTrigger } from './DrawerTrigger.vue'