@spavn/ui 0.0.1

package/src/lib/context-menu/ContextMenuShortcut.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

package/src/lib/context-menu/ContextMenuSub.vue

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

package/src/lib/context-menu/ContextMenuSubContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  ContextMenuSubContent,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="$attrs"
+    :class="
+      cn(
+        'z-depth-3 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-depth-3',
+        'animate-in fade-in-0 zoom-in-95',
+        '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',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>

package/src/lib/context-menu/ContextMenuSubTrigger.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ContextMenuSubTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        inset && 'pl-8',
+        props.class
+      )
+    "
+  >
+    <slot />
+    <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="ml-auto h-4 w-4"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  </ContextMenuSubTrigger>
+</template>

package/src/lib/context-menu/ContextMenuTrigger.vue

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

package/src/lib/context-menu/index.ts

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

package/src/lib/data-table/DataTable.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { ref, computed, watch } from 'vue'
+import { cn } from '@/lib/utils'
+import Table from '@/lib/table/Table.vue'
+import TableHeader from '@/lib/table/TableHeader.vue'
+import TableBody from '@/lib/table/TableBody.vue'
+import TableRow from '@/lib/table/TableRow.vue'
+import TableHead from '@/lib/table/TableHead.vue'
+import TableCell from '@/lib/table/TableCell.vue'
+
+export interface DataTableColumn<R = any> {
+  key: string
+  label: string
+  sortable?: boolean
+  filterable?: boolean
+  class?: string
+  headerClass?: string
+  render?: (value: any, row: R) => string
+}
+
+const props = withDefaults(defineProps<{
+  data: T[]
+  columns: DataTableColumn<T>[]
+  pageSize?: number
+  searchable?: boolean
+  searchPlaceholder?: string
+  class?: string
+  striped?: boolean
+  hoverable?: boolean
+}>(), {
+  pageSize: 10,
+  searchable: false,
+  searchPlaceholder: 'Search...',
+  striped: false,
+  hoverable: true,
+})
+
+const emit = defineEmits<{
+  'row-click': [row: T, index: number]
+}>()
+
+// Sort state
+const sortKey = ref<string | null>(null)
+const sortDir = ref<'asc' | 'desc'>('asc')
+
+// Filter state
+const search = ref('')
+const currentPage = ref(1)
+
+// Reset page on search change
+watch(search, () => { currentPage.value = 1 })
+
+// Filtered data
+const filteredData = computed(() => {
+  if (!search.value) return props.data
+  const q = search.value.toLowerCase()
+  const filterCols = props.columns.filter(c => c.filterable !== false)
+  return props.data.filter(row =>
+    filterCols.some(col => {
+      const val = row[col.key]
+      return val != null && String(val).toLowerCase().includes(q)
+    })
+  )
+})
+
+// Sorted data
+const sortedData = computed(() => {
+  if (!sortKey.value) return filteredData.value
+  const key = sortKey.value
+  const dir = sortDir.value === 'asc' ? 1 : -1
+  return [...filteredData.value].sort((a, b) => {
+    const aVal = a[key]
+    const bVal = b[key]
+    if (aVal == null && bVal == null) return 0
+    if (aVal == null) return 1
+    if (bVal == null) return -1
+    if (typeof aVal === 'number' && typeof bVal === 'number') return (aVal - bVal) * dir
+    return String(aVal).localeCompare(String(bVal)) * dir
+  })
+})
+
+// Paginated data
+const totalPages = computed(() => Math.max(1, Math.ceil(sortedData.value.length / props.pageSize)))
+const paginatedData = computed(() => {
+  const start = (currentPage.value - 1) * props.pageSize
+  return sortedData.value.slice(start, start + props.pageSize)
+})
+
+// Visible page numbers
+const visiblePages = computed(() => {
+  const pages: number[] = []
+  const total = totalPages.value
+  const current = currentPage.value
+  const delta = 2
+  for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+    pages.push(i)
+  }
+  return pages
+})
+
+function toggleSort(key: string) {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortDir.value = 'asc'
+  }
+}
+
+function goToPage(page: number) {
+  currentPage.value = Math.max(1, Math.min(page, totalPages.value))
+}
+</script>
+
+<template>
+  <div :class="cn('space-y-4', props.class)">
+    <!-- Toolbar -->
+    <div v-if="searchable || $slots.toolbar" class="flex items-center justify-between gap-4">
+      <div v-if="searchable" class="relative max-w-sm flex-1">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground">
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+        <input
+          v-model="search"
+          type="text"
+          :placeholder="searchPlaceholder"
+          class="flex h-9 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+      </div>
+      <slot name="toolbar" />
+    </div>
+
+    <!-- Table -->
+    <div class="rounded-md border overflow-hidden">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead
+              v-for="col in columns"
+              :key="col.key"
+              :class="cn(col.headerClass)"
+            >
+              <button
+                v-if="col.sortable"
+                class="flex items-center gap-1 hover:text-foreground transition-colors -m-1 p-1"
+                @click="toggleSort(col.key)"
+              >
+                {{ col.label }}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5" :class="sortKey === col.key ? 'text-foreground' : 'text-muted-foreground/40'">
+                  <path v-if="sortKey !== col.key || sortDir === 'asc'" d="m7 15 5 5 5-5" />
+                  <path v-if="sortKey !== col.key || sortDir === 'desc'" d="m7 9 5-5 5 5" />
+                </svg>
+              </button>
+              <span v-else>{{ col.label }}</span>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow
+            v-for="(row, idx) in paginatedData"
+            :key="idx"
+            :class="cn(
+              hoverable && 'cursor-pointer',
+              striped && idx % 2 === 1 && 'bg-muted/30',
+            )"
+            @click="emit('row-click', row, idx)"
+          >
+            <TableCell
+              v-for="col in columns"
+              :key="col.key"
+              :class="cn(col.class)"
+            >
+              <slot :name="`cell-${col.key}`" :value="row[col.key]" :row="row">
+                {{ col.render ? col.render(row[col.key], row) : row[col.key] }}
+              </slot>
+            </TableCell>
+          </TableRow>
+          <TableRow v-if="paginatedData.length === 0">
+            <TableCell :colspan="columns.length" class="h-24 text-center text-muted-foreground">
+              No results.
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="totalPages > 1" class="flex items-center justify-between text-sm">
+      <p class="text-muted-foreground">
+        {{ sortedData.length }} result{{ sortedData.length === 1 ? '' : 's' }}
+        <span v-if="search"> for "{{ search }}"</span>
+      </p>
+
+      <div class="flex items-center gap-1">
+        <button
+          class="inline-flex h-8 w-8 items-center justify-center rounded-md border text-sm transition-colors hover:bg-accent disabled:opacity-50 disabled:pointer-events-none"
+          :disabled="currentPage <= 1"
+          @click="goToPage(currentPage - 1)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m15 18-6-6 6-6"/></svg>
+        </button>
+
+        <button
+          v-for="page in visiblePages"
+          :key="page"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors"
+          :class="page === currentPage
+            ? 'bg-primary text-primary-foreground'
+            : 'hover:bg-accent'"
+          @click="goToPage(page)"
+        >
+          {{ page }}
+        </button>
+
+        <button
+          class="inline-flex h-8 w-8 items-center justify-center rounded-md border text-sm transition-colors hover:bg-accent disabled:opacity-50 disabled:pointer-events-none"
+          :disabled="currentPage >= totalPages"
+          @click="goToPage(currentPage + 1)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="m9 18 6-6-6-6"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/lib/date-range-picker/DateRangePicker.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  DateRangePickerRoot,
+  DateRangePickerCalendar,
+  DateRangePickerGrid,
+  DateRangePickerGridHead,
+  DateRangePickerGridBody,
+  DateRangePickerGridRow,
+  DateRangePickerCell,
+  DateRangePickerCellTrigger,
+  DateRangePickerHeadCell,
+  DateRangePickerHeader,
+  DateRangePickerHeading,
+  DateRangePickerNext,
+  DateRangePickerPrev,
+  DateRangePickerField,
+  DateRangePickerInput,
+  type DateRange,
+} from 'radix-vue'
+import type { DateValue } from '@internationalized/date'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: { start: DateValue; end: DateValue }
+    numberOfMonths?: number
+    placeholder?: { start: DateValue; end: DateValue }
+    class?: string
+    disabled?: boolean
+  }>(),
+  {
+    numberOfMonths: 2,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DateRange]
+}>()
+
+function onUpdate(val: DateRange) {
+  emit('update:modelValue', val)
+}
+</script>
+
+<template>
+  <DateRangePickerRoot
+    v-bind="$attrs"
+    :model-value="modelValue as DateRange"
+    :number-of-months="numberOfMonths"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+  >
+    <DateRangePickerField
+      v-slot="{ segments }"
+      :class="
+        cn(
+          'flex h-10 w-full items-center rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground shadow-depth-1',
+          'ring-offset-background',
+          'focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/20 focus-within:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )
+      "
+    >
+      <template v-for="item in segments" :key="item.part">
+        <DateRangePickerInput
+          v-if="item.part === 'literal'"
+          :part="item.part"
+          :class="cn('text-muted-foreground')"
+        >
+          {{ item.value }}
+        </DateRangePickerInput>
+        <DateRangePickerInput
+          v-else
+          :part="item.part"
+          :class="
+            cn(
+              'inline-flex items-center justify-center rounded-md px-1 text-foreground',
+              'focus:outline-none focus:bg-accent focus:text-accent-foreground',
+            )
+          "
+        >
+          {{ item.value }}
+        </DateRangePickerInput>
+      </template>
+    </DateRangePickerField>
+
+    <DateRangePickerCalendar
+      v-slot="{ weekDays, grid }"
+      class="p-3"
+    >
+      <DateRangePickerHeader class="flex justify-between items-center pt-1 relative">
+        <DateRangePickerPrev
+          :class="
+            cn(
+              'inline-flex h-7 w-7 items-center justify-center rounded-md border-0 bg-transparent',
+              'hover:bg-accent hover:text-accent-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"
+          >
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </DateRangePickerPrev>
+
+        <DateRangePickerHeading class="text-sm font-medium" />
+
+        <DateRangePickerNext
+          :class="
+            cn(
+              'inline-flex h-7 w-7 items-center justify-center rounded-md border-0 bg-transparent',
+              'hover:bg-accent hover:text-accent-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"
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </DateRangePickerNext>
+      </DateRangePickerHeader>
+
+      <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+        <DateRangePickerGrid
+          v-for="month in grid"
+          :key="month.value.toString()"
+          class="w-full border-collapse space-y-1"
+        >
+          <DateRangePickerGridHead>
+            <DateRangePickerGridRow class="flex">
+              <DateRangePickerHeadCell
+                v-for="day in weekDays"
+                :key="day"
+                class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]"
+              >
+                {{ day }}
+              </DateRangePickerHeadCell>
+            </DateRangePickerGridRow>
+          </DateRangePickerGridHead>
+          <DateRangePickerGridBody>
+            <DateRangePickerGridRow
+              v-for="(weekDates, index) in month.rows"
+              :key="`weekDate-${index}`"
+              class="flex"
+            >
+              <DateRangePickerCell
+                v-for="weekDate in weekDates"
+                :key="weekDate.toString()"
+                :date="weekDate"
+                :class="
+                  cn(
+                    'h-8 w-8 text-center text-sm p-0 relative',
+                    'focus-within:relative focus-within:z-20',
+                  )
+                "
+              >
+                <DateRangePickerCellTrigger
+                  :day="weekDate"
+                  :month="month.value"
+                  :class="
+                    cn(
+                      'inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-full text-sm font-normal',
+                      'ring-offset-background transition-colors',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                      'disabled:pointer-events-none disabled:opacity-50',
+                      'hover:bg-accent hover:text-accent-foreground',
+                      'aria-selected:bg-primary aria-selected:text-primary-foreground aria-selected:font-medium',
+                    )
+                  "
+                />
+              </DateRangePickerCell>
+            </DateRangePickerGridRow>
+          </DateRangePickerGridBody>
+        </DateRangePickerGrid>
+      </div>
+    </DateRangePickerCalendar>
+  </DateRangePickerRoot>
+</template>