@spavn/ui 0.0.1

package/src/lib/button/Button.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { buttonVariants, type ButtonVariants } from './variants'
+
+interface Props {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  elevation?: ButtonVariants['elevation']
+  class?: string
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'button',
+  loading: false,
+})
+</script>
+
+<template>
+  <button
+    :type="type"
+    :class="cn(buttonVariants({ variant, size, elevation }), props.class)"
+    :disabled="disabled || loading"
+  >
+    <!-- Loading Spinner -->
+    <span
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center"
+    >
+      <svg
+        class="animate-spin h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </span>
+    
+    <span
+      :class="{ 'opacity-0': loading }"
+      class="inline-flex items-center justify-center gap-2"
+    >
+      <slot />
+    </span>
+  </button>
+</template>
+
+export { buttonVariants }

package/src/lib/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.vue'
+export { buttonVariants, type ButtonVariants } from './variants'

package/src/lib/button/variants.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest'
+import { buttonVariants } from './variants'
+
+describe('buttonVariants', () => {
+  describe('defaults', () => {
+    it('returns expected classes with no arguments (default variant, size, elevation)', () => {
+      const result = buttonVariants()
+      expect(result).toContain('inline-flex')
+      expect(result).toContain('items-center')
+      expect(result).toContain('bg-primary')
+      expect(result).toContain('text-primary-foreground')
+      expect(result).toContain('h-10')
+      expect(result).toContain('px-4')
+      expect(result).toContain('shadow-depth-1')
+    })
+  })
+
+  describe('variant', () => {
+    it('default variant includes primary background', () => {
+      const result = buttonVariants({ variant: 'default' })
+      expect(result).toContain('bg-primary')
+      expect(result).toContain('text-primary-foreground')
+    })
+
+    it('destructive variant includes destructive background', () => {
+      const result = buttonVariants({ variant: 'destructive' })
+      expect(result).toContain('bg-destructive')
+      expect(result).toContain('text-destructive-foreground')
+    })
+
+    it('outline variant includes border and background', () => {
+      const result = buttonVariants({ variant: 'outline' })
+      expect(result).toContain('border')
+      expect(result).toContain('border-input')
+      expect(result).toContain('bg-background')
+    })
+
+    it('secondary variant includes secondary background', () => {
+      const result = buttonVariants({ variant: 'secondary' })
+      expect(result).toContain('bg-secondary')
+      expect(result).toContain('text-secondary-foreground')
+    })
+
+    it('ghost variant includes hover accent styles', () => {
+      const result = buttonVariants({ variant: 'ghost' })
+      expect(result).toContain('hover:bg-accent')
+      expect(result).toContain('hover:text-accent-foreground')
+      expect(result).not.toContain('bg-primary')
+    })
+
+    it('link variant includes underline offset and primary text', () => {
+      const result = buttonVariants({ variant: 'link' })
+      expect(result).toContain('text-primary')
+      expect(result).toContain('underline-offset-4')
+      expect(result).toContain('hover:underline')
+    })
+  })
+
+  describe('size', () => {
+    it('default size applies h-10 and px-4', () => {
+      const result = buttonVariants({ size: 'default' })
+      expect(result).toContain('h-10')
+      expect(result).toContain('px-4')
+    })
+
+    it('sm size applies h-9 and smaller padding', () => {
+      const result = buttonVariants({ size: 'sm' })
+      expect(result).toContain('h-9')
+      expect(result).toContain('px-3')
+      expect(result).toContain('text-xs')
+    })
+
+    it('lg size applies h-11 and larger padding', () => {
+      const result = buttonVariants({ size: 'lg' })
+      expect(result).toContain('h-11')
+      expect(result).toContain('px-8')
+      expect(result).toContain('text-base')
+    })
+
+    it('icon size applies equal width and height', () => {
+      const result = buttonVariants({ size: 'icon' })
+      expect(result).toContain('h-10')
+      expect(result).toContain('w-10')
+    })
+  })
+
+  describe('elevation', () => {
+    it('flat elevation removes shadows and hover lift', () => {
+      const result = buttonVariants({ elevation: 'flat' })
+      expect(result).toContain('shadow-none')
+      expect(result).toContain('hover:shadow-none')
+    })
+
+    it('raised elevation applies depth-1 shadow', () => {
+      const result = buttonVariants({ elevation: 'raised' })
+      expect(result).toContain('shadow-depth-1')
+    })
+
+    it('elevated elevation applies depth-2 shadow', () => {
+      const result = buttonVariants({ elevation: 'elevated' })
+      expect(result).toContain('shadow-depth-2')
+    })
+  })
+
+  describe('combining variant + size', () => {
+    it('destructive + lg combines both variant and size classes', () => {
+      const result = buttonVariants({ variant: 'destructive', size: 'lg' })
+      expect(result).toContain('bg-destructive')
+      expect(result).toContain('h-11')
+      expect(result).toContain('px-8')
+    })
+
+    it('outline + sm combines both variant and size classes', () => {
+      const result = buttonVariants({ variant: 'outline', size: 'sm' })
+      expect(result).toContain('border')
+      expect(result).toContain('border-input')
+      expect(result).toContain('h-9')
+      expect(result).toContain('px-3')
+    })
+
+    it('ghost + icon combines both variant and size classes', () => {
+      const result = buttonVariants({ variant: 'ghost', size: 'icon' })
+      expect(result).toContain('hover:bg-accent')
+      expect(result).toContain('h-10')
+      expect(result).toContain('w-10')
+    })
+  })
+})

package/src/lib/button/variants.ts

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const buttonVariants = cva(
+  [
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap',
+    'rounded-xl text-sm font-medium',
+    'transition-all duration-150 ease-out',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'disabled:pointer-events-none disabled:opacity-50',
+    'relative overflow-hidden',
+    // Subtle lift on hover for interactive feel
+    'hover:-translate-y-0.5 active:translate-y-0',
+  ].join(' '),
+  {
+    variants: {
+      variant: {
+        default: [
+          'bg-primary text-primary-foreground',
+          'hover:bg-primary/90 hover:shadow-depth-2',
+          'active:bg-primary/95',
+        ].join(' '),
+        destructive: [
+          'bg-destructive text-destructive-foreground',
+          'hover:bg-destructive/90 hover:shadow-depth-2',
+          'active:bg-destructive/95',
+        ].join(' '),
+        outline: [
+          'border border-input bg-background',
+          'hover:bg-accent hover:text-accent-foreground hover:border-accent',
+          'active:bg-accent/80',
+        ].join(' '),
+        secondary: [
+          'bg-secondary text-secondary-foreground',
+          'hover:bg-secondary/80 hover:shadow-depth-2',
+          'active:bg-secondary/70',
+        ].join(' '),
+        ghost: [
+          'hover:bg-accent hover:text-accent-foreground',
+          'active:bg-accent/80',
+        ].join(' '),
+        link: [
+          'text-primary underline-offset-4 hover:underline',
+          'hover:translate-y-0',
+        ].join(' '),
+      },
+      size: {
+        default: 'h-10 px-4 py-2.5',
+        sm: 'h-9 rounded-lg px-3 py-2 text-xs',
+        lg: 'h-11 rounded-xl px-8 py-3 text-base',
+        icon: 'h-10 w-10 p-2',
+      },
+      elevation: {
+        flat: 'shadow-none hover:shadow-none hover:translate-y-0',
+        raised: 'shadow-depth-1 hover:shadow-depth-2',
+        elevated: 'shadow-depth-2 hover:shadow-depth-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      elevation: 'raised',
+    },
+  }
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/lib/button-group/ButtonGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'inline-flex -space-x-px rounded-md shadow-depth-1',
+        '[&>button]:rounded-none [&>button]:shadow-none',
+        '[&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md',
+        '[&>button]:border-r-0 [&>button:last-child]:border-r',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/button-group/index.ts

@@ -0,0 +1 @@
+export { default as ButtonGroup } from './ButtonGroup.vue'

package/src/lib/calendar/Calendar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarRoot } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import CalendarHeader from './CalendarHeader.vue'
+import CalendarHeading from './CalendarHeading.vue'
+import CalendarPrev from './CalendarPrev.vue'
+import CalendarNext from './CalendarNext.vue'
+import CalendarGrid from './CalendarGrid.vue'
+import CalendarGridHead from './CalendarGridHead.vue'
+import CalendarGridBody from './CalendarGridBody.vue'
+import CalendarGridRow from './CalendarGridRow.vue'
+import CalendarHeadCell from './CalendarHeadCell.vue'
+import CalendarCell from './CalendarCell.vue'
+import CalendarCellTrigger from './CalendarCellTrigger.vue'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    v-bind="$attrs"
+    :class="cn('p-3', props.class)"
+  >
+    <CalendarHeader>
+      <CalendarPrev />
+      <CalendarHeading />
+      <CalendarNext />
+    </CalendarHeader>
+
+    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

package/src/lib/calendar/CalendarCell.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarCell } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarCell
+    v-bind="$attrs"
+    :class="
+      cn(
+        'h-8 w-8 text-center text-sm p-0 relative',
+        'focus-within:relative focus-within:z-20',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </CalendarCell>
+</template>

package/src/lib/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarCellTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarCellTrigger
+    v-bind="$attrs"
+    :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',
+        'aria-selected:hover:bg-primary aria-selected:hover:text-primary-foreground',
+        'aria-selected:focus:bg-primary aria-selected:focus:text-primary-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>

package/src/lib/calendar/CalendarGrid.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarGrid } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarGrid
+    v-bind="$attrs"
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+  >
+    <slot />
+  </CalendarGrid>
+</template>

package/src/lib/calendar/CalendarGridBody.vue

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

package/src/lib/calendar/CalendarGridHead.vue

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

package/src/lib/calendar/CalendarGridRow.vue

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

package/src/lib/calendar/CalendarHeadCell.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarHeadCell } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarHeadCell
+    v-bind="$attrs"
+    :class="cn('text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]', props.class)"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>

package/src/lib/calendar/CalendarHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarHeader } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarHeader
+    v-bind="$attrs"
+    :class="cn('flex justify-between items-center pt-1 relative', props.class)"
+  >
+    <slot />
+  </CalendarHeader>
+</template>

package/src/lib/calendar/CalendarHeading.vue

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

package/src/lib/calendar/CalendarNext.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarNext } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarNext
+    v-bind="$attrs"
+    :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',
+        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="h-4 w-4"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </slot>
+  </CalendarNext>
+</template>

package/src/lib/calendar/CalendarPrev.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CalendarPrev } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CalendarPrev
+    v-bind="$attrs"
+    :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',
+        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="h-4 w-4"
+      >
+        <path d="m15 18-6-6 6-6" />
+      </svg>
+    </slot>
+  </CalendarPrev>
+</template>

package/src/lib/calendar/index.ts

@@ -0,0 +1,12 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNext } from './CalendarNext.vue'
+export { default as CalendarPrev } from './CalendarPrev.vue'