@spavn/ui 0.0.1

package/src/lib/typography/TypographyH1.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <h1 :class="cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', props.class)">
+    <slot />
+  </h1>
+</template>

package/src/lib/typography/TypographyH2.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <h2 :class="cn('scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0', props.class)">
+    <slot />
+  </h2>
+</template>

package/src/lib/typography/TypographyH3.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <h3 :class="cn('scroll-m-20 text-2xl font-semibold tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

package/src/lib/typography/TypographyH4.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <h4 :class="cn('scroll-m-20 text-xl font-semibold tracking-tight', props.class)">
+    <slot />
+  </h4>
+</template>

package/src/lib/typography/TypographyInlineCode.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <code :class="cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold', props.class)">
+    <slot />
+  </code>
+</template>

package/src/lib/typography/TypographyLarge.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('text-lg font-semibold', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/typography/TypographyLead.vue

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

package/src/lib/typography/TypographyMuted.vue

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

package/src/lib/typography/TypographyP.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <p :class="cn('leading-7 [&:not(:first-child)]:mt-6', props.class)">
+    <slot />
+  </p>
+</template>

package/src/lib/typography/TypographySmall.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <small :class="cn('text-sm font-medium leading-none', props.class)">
+    <slot />
+  </small>
+</template>

package/src/lib/typography/index.ts

@@ -0,0 +1,11 @@
+export { default as TypographyH1 } from './TypographyH1.vue'
+export { default as TypographyH2 } from './TypographyH2.vue'
+export { default as TypographyH3 } from './TypographyH3.vue'
+export { default as TypographyH4 } from './TypographyH4.vue'
+export { default as TypographyP } from './TypographyP.vue'
+export { default as TypographyBlockquote } from './TypographyBlockquote.vue'
+export { default as TypographyInlineCode } from './TypographyInlineCode.vue'
+export { default as TypographyLead } from './TypographyLead.vue'
+export { default as TypographyLarge } from './TypographyLarge.vue'
+export { default as TypographySmall } from './TypographySmall.vue'
+export { default as TypographyMuted } from './TypographyMuted.vue'

package/src/lib/utils.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { cn } from './utils'
+
+describe('cn', () => {
+  it('merges multiple class strings', () => {
+    const result = cn('px-2', 'py-1', 'bg-red-500')
+    expect(result).toBe('px-2 py-1 bg-red-500')
+  })
+
+  it('handles falsy values (undefined, null, false, empty string)', () => {
+    const result = cn('px-2', undefined, null, false, '', 'py-1')
+    expect(result).toBe('px-2 py-1')
+  })
+
+  it('resolves Tailwind conflicts by keeping the last class', () => {
+    expect(cn('p-4', 'p-2')).toBe('p-2')
+    expect(cn('bg-red-500', 'bg-blue-500')).toBe('bg-blue-500')
+    expect(cn('text-sm', 'text-lg')).toBe('text-lg')
+  })
+
+  it('handles conditional classes', () => {
+    const isActive = true
+    const isDisabled = false
+    const result = cn(
+      'base-class',
+      isActive && 'active-class',
+      isDisabled && 'disabled-class'
+    )
+    expect(result).toBe('base-class active-class')
+  })
+
+  it('returns empty string for no arguments', () => {
+    expect(cn()).toBe('')
+  })
+
+  it('handles array inputs', () => {
+    const result = cn(['px-2', 'py-1'])
+    expect(result).toBe('px-2 py-1')
+  })
+
+  it('handles object inputs for conditional classes', () => {
+    const result = cn({ 'px-2': true, 'py-1': false, 'bg-red-500': true })
+    expect(result).toBe('px-2 bg-red-500')
+  })
+})

package/src/lib/utils.ts

@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx for conditional classes with tailwind-merge for conflict resolution
+ * 
+ * @example
+ * cn('px-2 py-1', 'bg-red-500', isActive && 'bg-blue-500')
+ * // → 'px-2 py-1 bg-blue-500' (when isActive is true)
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/lib/variants.ts

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+/**
+ * Elevation variants for depth design
+ * Use these to apply consistent elevation levels to components
+ */
+export const elevationVariants = cva(
+  {
+    variants: {
+      elevation: {
+        0: 'shadow-none z-depth-0',
+        1: 'shadow-depth-1 z-depth-1',
+        2: 'shadow-depth-2 z-depth-2',
+        3: 'shadow-depth-3 z-depth-3',
+        4: 'shadow-depth-4 z-depth-4',
+        5: 'shadow-depth-5 z-depth-5',
+      },
+    },
+    defaultVariants: {
+      elevation: 0,
+    },
+  }
+)
+
+/**
+ * Interactive elevation variants with hover/focus states
+ * Components automatically elevate on interaction
+ */
+export const interactiveElevationVariants = cva(
+  {
+    variants: {
+      elevation: {
+        1: 'shadow-depth-1 hover:shadow-depth-2 focus:shadow-depth-2 transition-elevation',
+        2: 'shadow-depth-2 hover:shadow-depth-3 focus:shadow-depth-3 transition-elevation',
+        3: 'shadow-depth-3 hover:shadow-depth-4 focus:shadow-depth-4 transition-elevation',
+      },
+    },
+    defaultVariants: {
+      elevation: 1,
+    },
+  }
+)
+
+export type ElevationVariant = VariantProps<typeof elevationVariants>['elevation']
+export type InteractiveElevationVariant = VariantProps<typeof interactiveElevationVariants>['elevation']

package/src/theme.css

@@ -0,0 +1,203 @@
+@custom-variant dark (&.dark);
+
+@theme {
+  /* Colors — semantic tokens mapped to CSS custom properties */
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-card-elevated-1: hsl(var(--card-elevated-1));
+  --color-card-elevated-2: hsl(var(--card-elevated-2));
+
+  /* Depth/Elevation Shadow System (Material Design 3 inspired) */
+  --shadow-depth-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-depth-2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-depth-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-depth-4: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-depth-5: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Border Radius */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Transition Properties */
+  --transition-property-elevation: box-shadow, transform;
+
+  /* Z-index scale aligned with elevation levels */
+  --z-depth-0: 0;
+  --z-depth-1: 10;
+  --z-depth-2: 20;
+  --z-depth-3: 30;
+  --z-depth-4: 40;
+  --z-depth-5: 50;
+  --z-depth-max: 9999;
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
+}
+
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
+}
+
+/* ── tailwindcss-animate replacement ── */
+/* These utilities are used by 22+ components (dialog, popover, dropdown, toast, etc.) */
+
+@utility animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+@utility animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+      rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+      rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+/* Fade */
+@utility fade-in-* {
+  --tw-enter-opacity: calc(--value(integer) * 1%);
+}
+@utility fade-in {
+  --tw-enter-opacity: 0;
+}
+@utility fade-out-* {
+  --tw-exit-opacity: calc(--value(integer) * 1%);
+}
+@utility fade-out {
+  --tw-exit-opacity: 0;
+}
+
+/* Zoom */
+@utility zoom-in-* {
+  --tw-enter-scale: calc(--value(integer) * 1%);
+}
+@utility zoom-out-* {
+  --tw-exit-scale: calc(--value(integer) * 1%);
+}
+
+/* Slide in */
+@utility slide-in-from-top-* {
+  --tw-enter-translate-y: calc(--value([*], integer) * -0.25rem);
+}
+@utility slide-in-from-bottom-* {
+  --tw-enter-translate-y: calc(--value([*], integer) * 0.25rem);
+}
+@utility slide-in-from-left-* {
+  --tw-enter-translate-x: calc(--value([*], integer) * -0.25rem);
+}
+@utility slide-in-from-right-* {
+  --tw-enter-translate-x: calc(--value([*], integer) * 0.25rem);
+}
+
+/* Slide out */
+@utility slide-out-to-top-* {
+  --tw-exit-translate-y: calc(--value([*], integer) * -0.25rem);
+}
+@utility slide-out-to-bottom-* {
+  --tw-exit-translate-y: calc(--value([*], integer) * 0.25rem);
+}
+@utility slide-out-to-left-* {
+  --tw-exit-translate-x: calc(--value([*], integer) * -0.25rem);
+}
+@utility slide-out-to-right-* {
+  --tw-exit-translate-x: calc(--value([*], integer) * 0.25rem);
+}
+
+/* Named direction shortcuts (no numeric value) */
+@utility slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+@utility slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+@utility slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+@utility slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+@utility slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+@utility slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+@utility slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+@utility slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}