@spavn/ui 0.0.1

package/src/lib/stats-card/StatsCard.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { cn } from '@/lib/utils'
+import { Card, CardContent, CardHeader, CardTitle } from '@/lib/card'
+import { Badge } from '@/lib/badge'
+
+export interface StatsCardProps {
+  /** Card title displayed in the header */
+  title: string
+  /** Main value/metric to display */
+  value: string | number
+  /** Optional subtitle text (e.g., "remaining of $10,000") */
+  subtitle?: string
+  /** Progress value (0-100) for the progress bar */
+  progress?: number
+  /** Badge text to display in the header */
+  badge?: string
+  /** Badge variant style */
+  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  /** Icon component to display next to the title */
+  icon?: Component
+  /** Trend indicator showing value change */
+  trend?: {
+    value: number
+    direction: 'up' | 'down'
+  }
+  /** Footer text displayed at the bottom */
+  footer?: string
+  /** Custom class for the card */
+  class?: string
+  /** Card elevation/shadow level */
+  elevation?: 0 | 1 | 2 | 3
+  /** Progress bar color based on thresholds */
+  progressColor?: 'default' | 'warning' | 'danger' | 'success' | 'auto'
+}
+
+const props = withDefaults(defineProps<StatsCardProps>(), {
+  badgeVariant: 'default',
+  elevation: 2,
+  progressColor: 'auto',
+})
+
+/**
+ * Determines the progress bar color based on the progress value
+ * when progressColor is set to 'auto'
+ * - 0-50: Success (green)
+ * - 51-75: Warning (yellow)
+ * - 76-100: Danger (red)
+ */
+const progressBarClass = computed(() => {
+  const progress = props.progress ?? 0
+
+  if (props.progressColor !== 'auto') {
+    const colorMap: Record<string, string> = {
+      default: 'bg-primary',
+      warning: 'bg-muted',
+      danger: 'bg-destructive',
+      success: 'bg-success',
+    }
+    return colorMap[props.progressColor] || 'bg-primary'
+  }
+
+  // Auto color based on progress value
+  if (progress >= 76) return 'bg-destructive'
+  if (progress >= 51) return 'bg-muted'
+  return 'bg-success'
+})
+
+/**
+ * Trend indicator classes based on direction
+ */
+const trendClasses = computed(() => {
+  if (!props.trend) return ''
+  return props.trend.direction === 'up'
+    ? 'text-success'
+    : 'text-destructive'
+})
+</script>
+
+<template>
+  <Card
+    :class="cn('stats-card overflow-hidden', props.class)"
+    :elevation="elevation"
+  >
+    <CardHeader class="flex flex-row items-center justify-between pb-2">
+      <CardTitle
+        :class="
+          cn(
+            'text-sm font-medium text-card-foreground flex items-center gap-2'
+          )
+        "
+      >
+        <component
+          :is="icon"
+          v-if="icon"
+          class="h-4 w-4 text-muted-foreground"
+        />
+        {{ title }}
+      </CardTitle>
+      <Badge v-if="badge" :variant="badgeVariant">
+        {{ badge }}
+      </Badge>
+    </CardHeader>
+
+    <CardContent class="space-y-3">
+      <!-- Progress bar -->
+      <div v-if="progress !== undefined" class="progress-wrapper">
+        <div class="relative h-1 w-full overflow-hidden rounded-full bg-muted">
+          <div
+            class="h-full w-full flex-1 transition-all duration-500 ease-out"
+            :class="progressBarClass"
+            :style="{ transform: `translateX(-${100 - progress}%)` }"
+          />
+        </div>
+      </div>
+
+      <!-- Value display with trend -->
+      <div class="flex items-baseline gap-2">
+        <span class="text-3xl font-bold tracking-tight text-card-foreground">
+          {{ value }}
+        </span>
+        <span
+          v-if="trend"
+          class="flex items-center text-sm font-medium"
+          :class="trendClasses"
+        >
+          <svg
+            v-if="trend.direction === 'up'"
+            class="mr-0.5 h-3 w-3"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m18 15-6-6-6 6" />
+          </svg>
+          <svg
+            v-else
+            class="mr-0.5 h-3 w-3"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+          {{ trend.value }}%
+        </span>
+      </div>
+
+      <!-- Subtitle -->
+      <p v-if="subtitle" class="text-sm text-muted-foreground">
+        {{ subtitle }}
+      </p>
+
+      <!-- Footer -->
+      <p
+        v-if="footer"
+        class="pt-2 text-xs text-muted-foreground border-t border-border/50"
+      >
+        {{ footer }}
+      </p>
+    </CardContent>
+  </Card>
+</template>
+
+<style scoped>
+.stats-card {
+  /* Custom styles if needed */
+}
+
+.progress-wrapper {
+  margin-bottom: 0.75rem;
+}
+</style>

package/src/lib/stats-card/index.ts

@@ -0,0 +1,2 @@
+export { default as StatsCard } from './StatsCard.vue'
+export type { StatsCardProps } from './StatsCard.vue'

package/src/lib/styles.ts

@@ -0,0 +1,133 @@
+/**
+ * CSS Variables for Depth Design System
+ * Include these in your :root and .dark selectors
+ */
+
+export const baseStyles = `
+:root {
+  /* Background - warm light gray */
+  --background: 0 0% 96%;
+  --foreground: 0 0% 9%;
+
+  /* Card surfaces - pure white with elevated variants */
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --card-elevated-1: 0 0% 100%;
+  --card-elevated-2: 0 0% 100%;
+
+  /* Interactive surfaces */
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+
+  /* Primary colors - black */
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+
+  /* Secondary colors - light gray */
+  --secondary: 0 0% 93%;
+  --secondary-foreground: 0 0% 9%;
+
+  /* Muted - lighter gray */
+  --muted: 0 0% 93%;
+  --muted-foreground: 0 0% 45%;
+
+  /* Accent */
+  --accent: 0 0% 93%;
+  --accent-foreground: 0 0% 9%;
+
+  /* Destructive - red */
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+
+  /* Success - green */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 98%;
+
+  /* Borders & Inputs */
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 9%;
+
+  /* Radius - updated to match design system */
+  --radius: 1rem;
+
+  /* Elevation opacity overlays for depth perception - softer values */
+  --elevation-overlay-1: rgba(0, 0, 0, 0.02);
+  --elevation-overlay-2: rgba(0, 0, 0, 0.04);
+  --elevation-overlay-3: rgba(0, 0, 0, 0.05);
+  --elevation-overlay-4: rgba(0, 0, 0, 0.05);
+  --elevation-overlay-5: rgba(0, 0, 0, 0.1);
+
+  /* Shadow tokens */
+  --shadow-depth-1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-depth-2: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
+  --shadow-depth-3: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.02);
+  --shadow-depth-4: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
+  --shadow-depth-5: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+}
+
+.dark {
+  /* Background - near black */
+  --background: 0 0% 7%;
+  --foreground: 0 0% 98%;
+
+  /* Card surfaces - dark gray */
+  --card: 0 0% 10%;
+  --card-foreground: 0 0% 98%;
+  --card-elevated-1: 0 0% 13%;
+  --card-elevated-2: 0 0% 16%;
+
+  /* Interactive surfaces */
+  --popover: 0 0% 10%;
+  --popover-foreground: 0 0% 98%;
+
+  /* Primary colors - white */
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+
+  /* Secondary colors - dark gray */
+  --secondary: 0 0% 15%;
+  --secondary-foreground: 0 0% 98%;
+
+  /* Muted */
+  --muted: 0 0% 15%;
+  --muted-foreground: 0 0% 65%;
+
+  /* Accent */
+  --accent: 0 0% 15%;
+  --accent-foreground: 0 0% 98%;
+
+  /* Destructive */
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 98%;
+
+  /* Success */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 7%;
+
+  /* Borders & Inputs */
+  --border: 0 0% 20%;
+  --input: 0 0% 20%;
+  --ring: 0 0% 80%;
+
+  /* Elevation opacity overlays for depth perception (inverted for dark mode) */
+  --elevation-overlay-1: rgba(255, 255, 255, 0.03);
+  --elevation-overlay-2: rgba(255, 255, 255, 0.06);
+  --elevation-overlay-3: rgba(255, 255, 255, 0.08);
+  --elevation-overlay-4: rgba(255, 255, 255, 0.1);
+  --elevation-overlay-5: rgba(255, 255, 255, 0.14);
+
+  /* Shadow tokens for dark mode */
+  --shadow-depth-1: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
+  --shadow-depth-2: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
+  --shadow-depth-3: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
+  --shadow-depth-4: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-depth-5: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+`
+
+export const baseStylesWithCSSVariables = `
+@layer base {
+  ${baseStyles}
+}
+`

package/src/lib/switch/Switch.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Switch from './Switch.vue'
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Switch)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders with checked prop', () => {
+    const wrapper = mount(Switch, {
+      props: { checked: true },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders unchecked by default', () => {
+    const wrapper = mount(Switch, {
+      props: { checked: false },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('passes disabled attribute', () => {
+    const wrapper = mount(Switch, {
+      attrs: { disabled: true },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('has correct data-state when checked', () => {
+    const wrapper = mount(Switch, {
+      props: { checked: true },
+    })
+    expect(wrapper.html()).toContain('data-state="checked"')
+  })
+
+  it('has correct data-state when unchecked', () => {
+    const wrapper = mount(Switch, {
+      props: { checked: false },
+    })
+    expect(wrapper.html()).toContain('data-state="unchecked"')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Switch, {
+      props: { class: 'custom-switch' },
+    })
+    expect(wrapper.html()).toContain('custom-switch')
+  })
+})

package/src/lib/switch/Switch.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  SwitchRoot,
+  SwitchThumb,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  checked?: boolean
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="$attrs"
+    :checked="checked"
+    :class="
+      cn(
+        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-depth-1',
+        'bg-muted data-[state=checked]:bg-primary',
+        'ring-offset-background transition-all duration-150 ease-out',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'hover:shadow-depth-2',
+        props.class
+      )
+    "
+  >
+    <SwitchThumb
+      :class="
+        cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-depth-2',
+          'ring-0 transition-transform duration-150 ease-out',
+          'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+        )
+      "
+    />
+  </SwitchRoot>
+</template>

package/src/lib/table/Table.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Table from './Table.vue'
+import TableHeader from './TableHeader.vue'
+import TableBody from './TableBody.vue'
+import TableRow from './TableRow.vue'
+import TableHead from './TableHead.vue'
+import TableCell from './TableCell.vue'
+
+describe('Table', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Table)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('table').exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Table, {
+      slots: { default: '<tbody><tr><td>Cell</td></tr></tbody>' },
+    })
+    expect(wrapper.text()).toContain('Cell')
+  })
+
+  it('applies custom class to table element', () => {
+    const wrapper = mount(Table, {
+      props: { class: 'my-table' },
+    })
+    expect(wrapper.find('table').classes()).toContain('my-table')
+  })
+})
+
+describe('TableHeader', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(TableHeader, {
+      slots: { default: '<tr><th>Header</th></tr>' },
+    })
+    expect(wrapper.element.tagName).toBe('THEAD')
+    expect(wrapper.text()).toContain('Header')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(TableHeader, {
+      props: { class: 'header-class' },
+      slots: { default: '<tr><th>H</th></tr>' },
+    })
+    expect(wrapper.classes()).toContain('header-class')
+  })
+})
+
+describe('TableBody', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(TableBody, {
+      slots: { default: '<tr><td>Body</td></tr>' },
+    })
+    expect(wrapper.element.tagName).toBe('TBODY')
+    expect(wrapper.text()).toContain('Body')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(TableBody, {
+      props: { class: 'body-class' },
+      slots: { default: '<tr><td>B</td></tr>' },
+    })
+    expect(wrapper.classes()).toContain('body-class')
+  })
+})
+
+describe('TableRow', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(TableRow, {
+      slots: { default: '<td>Row</td>' },
+    })
+    expect(wrapper.element.tagName).toBe('TR')
+    expect(wrapper.text()).toContain('Row')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(TableRow, {
+      props: { class: 'row-class' },
+      slots: { default: '<td>R</td>' },
+    })
+    expect(wrapper.classes()).toContain('row-class')
+  })
+})
+
+describe('TableHead', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(TableHead, {
+      slots: { default: 'Column' },
+    })
+    expect(wrapper.element.tagName).toBe('TH')
+    expect(wrapper.text()).toContain('Column')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(TableHead, {
+      props: { class: 'head-class' },
+      slots: { default: 'H' },
+    })
+    expect(wrapper.classes()).toContain('head-class')
+  })
+})
+
+describe('TableCell', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(TableCell, {
+      slots: { default: 'Data' },
+    })
+    expect(wrapper.element.tagName).toBe('TD')
+    expect(wrapper.text()).toContain('Data')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(TableCell, {
+      props: { class: 'cell-class' },
+      slots: { default: 'D' },
+    })
+    expect(wrapper.classes()).toContain('cell-class')
+  })
+})
+
+describe('Table composed', () => {
+  it('renders a full table with all sub-components', () => {
+    const wrapper = mount(Table, {
+      slots: {
+        default: {
+          template: `
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Age</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell>Alice</TableCell>
+                <TableCell>30</TableCell>
+              </TableRow>
+            </TableBody>
+          `,
+          components: { TableHeader, TableBody, TableRow, TableHead, TableCell },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Name')
+    expect(wrapper.text()).toContain('Age')
+    expect(wrapper.text()).toContain('Alice')
+    expect(wrapper.text()).toContain('30')
+  })
+})

package/src/lib/table/Table.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>

package/src/lib/table/TableBody.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>

package/src/lib/table/TableCaption.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>

package/src/lib/table/TableCell.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <td :class="cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </td>
+</template>

package/src/lib/table/TableFooter.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>

package/src/lib/table/TableHead.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </th>
+</template>

package/src/lib/table/TableHeader.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>

package/src/lib/table/TableRow.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>

package/src/lib/table/index.ts

@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableRow } from './TableRow.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableCaption } from './TableCaption.vue'