@spavn/ui 0.0.1 → 0.1.0

package/src/lib/skeleton/Skeleton.vue

@@ -1,9 +1,34 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
+import { type SpavnRadius, radiusMap } from '@/lib/types'
 
-const props = defineProps<{ class?: string }>()
+interface Props {
+  class?: string
+  variant?: 'pulse' | 'wave' | 'none'
+  radius?: SpavnRadius
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'pulse',
+})
+
+const animationClasses = {
+  pulse: 'animate-pulse',
+  wave: 'animate-pulse',
+  none: '',
+}
+
+const radiusClass = props.radius ? radiusMap[props.radius] : 'rounded-md'
 </script>
 
 <template>
-  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+  <div
+    :class="cn(
+      'bg-muted',
+      animationClasses[variant],
+      variant === 'wave' && 'bg-gradient-to-r from-muted via-muted/50 to-muted bg-[length:200%_100%]',
+      radiusClass,
+      props.class
+    )"
+  />
 </template>

package/src/lib/slider/Slider.vue

@@ -8,11 +8,13 @@ import {
 } from 'radix-vue'
 import { computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorBg, colorBorder } from '@/lib/types'
 
 interface Props {
   class?: string
   modelValue?: number[]
   showValue?: boolean
+  color?: SpavnColor
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +22,16 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const thumbCount = computed(() => (props.modelValue ?? [0]).length)
+
+const rangeColor = computed(() => {
+  if (!props.color || props.color === 'default') return 'bg-primary'
+  return colorBg[props.color as Exclude<SpavnColor, 'default'>]
+})
+
+const thumbBorderColor = computed(() => {
+  if (!props.color || props.color === 'default') return 'border-primary'
+  return colorBorder[props.color as Exclude<SpavnColor, 'default'>]
+})
 </script>
 
 <template>
@@ -37,14 +49,15 @@ const thumbCount = computed(() => (props.modelValue ?? [0]).length)
       <SliderTrack
         class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted shadow-depth-1"
       >
-        <SliderRange class="absolute h-full bg-primary transition-all duration-150 ease-out" />
+        <SliderRange :class="cn('absolute h-full transition-all duration-150 ease-out', rangeColor)" />
       </SliderTrack>
       <SliderThumb
         v-for="(_, i) in thumbCount"
         :key="i"
         :class="
           cn(
-            'block h-5 w-5 rounded-full border-2 border-primary bg-background',
+            'block h-5 w-5 rounded-full border-2 bg-background',
+            thumbBorderColor,
             'ring-offset-background transition-all duration-150 ease-out',
             'shadow-depth-2 hover:shadow-depth-3 hover:scale-105',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
@@ -53,7 +66,7 @@ const thumbCount = computed(() => (props.modelValue ?? [0]).length)
         "
       />
     </SliderRoot>
-    
+
     <!-- Value Display Slot -->
     <slot name="value" :value="modelValue">
       <span

package/src/lib/styles.ts

@@ -48,6 +48,45 @@ export const baseStyles = `
   --input: 0 0% 90%;
   --ring: 0 0% 9%;
 
+  /* Extended palette */
+  --info: 217 91% 60%;
+  --info-foreground: 0 0% 98%;
+  --info-soft: 217 91% 95%;
+
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 9%;
+  --warning-soft: 38 92% 95%;
+
+  --amber: 45 93% 47%;
+  --amber-foreground: 0 0% 9%;
+  --amber-soft: 45 93% 95%;
+
+  --blue: 221 83% 53%;
+  --blue-foreground: 0 0% 98%;
+  --blue-soft: 221 83% 95%;
+
+  --green: 142 71% 45%;
+  --green-foreground: 0 0% 98%;
+  --green-soft: 142 71% 95%;
+
+  --purple: 262 83% 58%;
+  --purple-foreground: 0 0% 98%;
+  --purple-soft: 262 83% 95%;
+
+  --pink: 330 81% 60%;
+  --pink-foreground: 0 0% 98%;
+  --pink-soft: 330 81% 95%;
+
+  --orange: 25 95% 53%;
+  --orange-foreground: 0 0% 98%;
+  --orange-soft: 25 95% 95%;
+
+  /* Soft variants for semantic colors */
+  --primary-soft: 0 0% 93%;
+  --secondary-soft: 0 0% 96%;
+  --destructive-soft: 0 84% 95%;
+  --success-soft: 142 76% 95%;
+
   /* Radius - updated to match design system */
   --radius: 1rem;
 
@@ -110,6 +149,45 @@ export const baseStyles = `
   --input: 0 0% 20%;
   --ring: 0 0% 80%;
 
+  /* Extended palette - dark mode (reduced saturation) */
+  --info: 217 80% 55%;
+  --info-foreground: 0 0% 98%;
+  --info-soft: 217 50% 15%;
+
+  --warning: 38 80% 50%;
+  --warning-foreground: 0 0% 9%;
+  --warning-soft: 38 50% 15%;
+
+  --amber: 45 80% 50%;
+  --amber-foreground: 0 0% 9%;
+  --amber-soft: 45 50% 15%;
+
+  --blue: 221 75% 55%;
+  --blue-foreground: 0 0% 98%;
+  --blue-soft: 221 50% 15%;
+
+  --green: 142 65% 45%;
+  --green-foreground: 0 0% 98%;
+  --green-soft: 142 40% 15%;
+
+  --purple: 262 75% 60%;
+  --purple-foreground: 0 0% 98%;
+  --purple-soft: 262 50% 15%;
+
+  --pink: 330 70% 55%;
+  --pink-foreground: 0 0% 98%;
+  --pink-soft: 330 50% 15%;
+
+  --orange: 25 85% 55%;
+  --orange-foreground: 0 0% 98%;
+  --orange-soft: 25 50% 15%;
+
+  /* Soft variants for semantic colors - dark mode */
+  --primary-soft: 0 0% 15%;
+  --secondary-soft: 0 0% 12%;
+  --destructive-soft: 0 60% 15%;
+  --success-soft: 142 50% 15%;
+
   /* 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);

package/src/lib/switch/Switch.vue

@@ -4,14 +4,33 @@ import {
   SwitchRoot,
   SwitchThumb,
 } from 'radix-vue'
+import { computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorCheckedBg } from '@/lib/types'
 
 interface Props {
   class?: string
   checked?: boolean
+  size?: 'sm' | 'default' | 'lg'
+  color?: SpavnColor
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  size: 'default',
+})
+
+const sizeConfig = {
+  sm: { track: 'h-4 w-8', thumb: 'h-3 w-3', translate: 'data-[state=checked]:translate-x-4' },
+  default: { track: 'h-6 w-11', thumb: 'h-5 w-5', translate: 'data-[state=checked]:translate-x-5' },
+  lg: { track: 'h-7 w-14', thumb: 'h-6 w-6', translate: 'data-[state=checked]:translate-x-7' },
+}
+
+const currentSize = computed(() => sizeConfig[props.size || 'default'])
+
+const checkedColor = computed(() => {
+  if (!props.color || props.color === 'default') return 'data-[state=checked]:bg-primary'
+  return colorCheckedBg[props.color as Exclude<SpavnColor, 'default'>]
+})
 </script>
 
 <template>
@@ -20,8 +39,10 @@ const props = defineProps<Props>()
     :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',
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-depth-1',
+        currentSize.track,
+        'bg-muted',
+        checkedColor,
         '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',
@@ -33,9 +54,11 @@ const props = defineProps<Props>()
     <SwitchThumb
       :class="
         cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-depth-2',
+          'pointer-events-none block rounded-full bg-background shadow-depth-2',
+          currentSize.thumb,
           'ring-0 transition-transform duration-150 ease-out',
-          'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+          currentSize.translate,
+          'data-[state=unchecked]:translate-x-0'
         )
       "
     />

package/src/lib/tabs/TabsList.vue

@@ -1,20 +1,50 @@
 <script setup lang="ts">
 defineOptions({ inheritAttrs: false })
 import { TabsList } from 'radix-vue'
+import { computed, provide } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor } from '@/lib/types'
 
-const props = defineProps<{ class?: string }>()
+interface Props {
+  class?: string
+  variant?: 'default' | 'underline' | 'pills' | 'enclosed'
+  size?: 'sm' | 'default' | 'lg'
+  color?: SpavnColor
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+})
+
+// Provide variant and color to TabsTrigger children
+provide('tabs-variant', props.variant)
+provide('tabs-color', props.color)
+
+const sizeClasses = {
+  sm: 'h-8 text-xs',
+  default: 'h-10 text-sm',
+  lg: 'h-12 text-base',
+}
+
+const variantClasses = computed(() => {
+  switch (props.variant) {
+    case 'underline':
+      return 'inline-flex items-center justify-center bg-transparent border-b border-border p-0 gap-0 rounded-none shadow-none'
+    case 'pills':
+      return 'inline-flex items-center justify-center bg-transparent p-0 gap-1 rounded-none shadow-none'
+    case 'enclosed':
+      return 'inline-flex items-center justify-center bg-muted p-1 rounded-lg shadow-depth-1 border border-border'
+    default:
+      return 'inline-flex items-center justify-center rounded-md bg-muted p-1 shadow-depth-1'
+  }
+})
 </script>
 
 <template>
   <TabsList
     v-bind="$attrs"
-    :class="
-      cn(
-        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground shadow-depth-1',
-        props.class
-      )
-    "
+    :class="cn(variantClasses, sizeClasses[props.size], 'text-muted-foreground', props.class)"
   >
     <slot />
   </TabsList>

package/src/lib/tabs/TabsTrigger.vue

@@ -1,20 +1,50 @@
 <script setup lang="ts">
 defineOptions({ inheritAttrs: false })
 import { TabsTrigger } from 'radix-vue'
+import { inject, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorActiveUnderline, colorActivePill } from '@/lib/types'
 
 const props = defineProps<{ class?: string }>()
+
+const variant = inject<string>('tabs-variant', 'default')
+const color = inject<SpavnColor | undefined>('tabs-color', undefined)
+
+const activeColorClass = computed(() => {
+  if (!color || color === 'default') return ''
+  const c = color as Exclude<SpavnColor, 'default'>
+
+  switch (variant) {
+    case 'underline':
+      return colorActiveUnderline[c]
+    case 'pills':
+    case 'enclosed':
+      return colorActivePill[c]
+    default:
+      return colorActivePill[c]
+  }
+})
+
+const variantClasses = computed(() => {
+  const base = 'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
+
+  switch (variant) {
+    case 'underline':
+      return `${base} rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground`
+    case 'pills':
+      return `${base} rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-depth-1`
+    case 'enclosed':
+      return `${base} rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm`
+    default:
+      return `${base} rounded-sm data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm`
+  }
+})
 </script>
 
 <template>
   <TabsTrigger
     v-bind="$attrs"
-    :class="
-      cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-        props.class
-      )
-    "
+    :class="cn(variantClasses, activeColorClass, props.class)"
   >
     <slot />
   </TabsTrigger>

package/src/lib/textarea/Textarea.vue

@@ -1,30 +1,56 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnRadius, radiusMap } from '@/lib/types'
 
 interface Props {
   class?: string
   disabled?: boolean
   placeholder?: string
   modelValue?: string
+  variant?: 'outline' | 'filled' | 'underline' | 'plain'
+  size?: 'sm' | 'default' | 'lg'
+  radius?: SpavnRadius
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'outline',
+  size: 'default',
+})
 
 defineEmits<{
   'update:modelValue': [value: string]
 }>()
+
+const sizeClasses = {
+  sm: 'min-h-[60px] text-sm',
+  default: 'min-h-[80px] text-sm',
+  lg: 'min-h-[120px] text-base',
+}
+
+const variantClasses = {
+  outline: 'border border-input bg-background shadow-depth-1 focus-visible:shadow-depth-2',
+  filled: 'border-transparent bg-muted',
+  underline: 'border-b border-input bg-transparent rounded-none',
+  plain: 'border-transparent bg-transparent focus-visible:shadow-none',
+}
+
+const radiusClass = computed(() => props.radius ? radiusMap[props.radius] : '')
 </script>
 
 <template>
   <textarea
     :class="
       cn(
-        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+        'flex w-full rounded-md px-3 py-2',
+        variantClasses[props.variant],
+        sizeClasses[props.size],
         'ring-offset-background',
         'placeholder:text-muted-foreground',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         'disabled:cursor-not-allowed disabled:opacity-50',
-        'shadow-depth-1 focus-visible:shadow-depth-2 transition-elevation',
+        'transition-elevation',
+        radiusClass,
         props.class
       )
     "

package/src/lib/toggle/Toggle.vue

@@ -1,20 +1,28 @@
 <script setup lang="ts">
 defineOptions({ inheritAttrs: false })
 import { Toggle } from 'radix-vue'
+import { computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorOnState } from '@/lib/types'
 import { toggleVariants } from './variants'
 
 const props = defineProps<{
   class?: string
   variant?: 'default' | 'outline'
   size?: 'default' | 'sm' | 'lg'
+  color?: SpavnColor
 }>()
+
+const activeColorClass = computed(() => {
+  if (!props.color || props.color === 'default') return ''
+  return colorOnState[props.color as Exclude<SpavnColor, 'default'>]
+})
 </script>
 
 <template>
   <Toggle
     v-bind="$attrs"
-    :class="cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)"
+    :class="cn(toggleVariants({ variant: props.variant, size: props.size }), activeColorClass, props.class)"
   >
     <slot />
   </Toggle>