@spavn/ui 0.0.1 → 0.0.2

package/src/lib/badge/variants.ts

@@ -9,6 +9,9 @@ export const badgeVariants = cva(
         secondary: 'border-transparent bg-secondary text-secondary-foreground',
         destructive: 'border-transparent bg-destructive text-destructive-foreground shadow-depth-1',
         outline: 'text-foreground',
+        soft: 'border-transparent',
+        surface: '',
+        dot: 'border-transparent bg-transparent text-foreground font-normal gap-1.5',
       },
       size: {
         sm: 'px-2 py-0 text-[10px]',

package/src/lib/button/Button.vue

@@ -1,61 +1,116 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, type SpavnRadius, colorClasses, radiusMap, colorHoverSolid, colorHoverOutline, colorHoverGhost, colorHoverLink } from '@/lib/types'
 import { buttonVariants, type ButtonVariants } from './variants'
 
 interface Props {
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
   elevation?: ButtonVariants['elevation']
+  color?: SpavnColor
+  radius?: SpavnRadius
   class?: string
   disabled?: boolean
   type?: 'button' | 'submit' | 'reset'
   loading?: boolean
+  loadingPosition?: 'left' | 'right' | 'center'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'button',
   loading: false,
+  loadingPosition: 'center',
+})
+
+const colorStyle = computed(() => {
+  if (!props.color || props.color === 'default') return ''
+  const c = props.color as Exclude<SpavnColor, 'default'>
+  const v = props.variant || 'default'
+
+  // Base color classes from shared utility
+  const styleMap: Record<string, 'solid' | 'soft' | 'surface' | 'outline'> = {
+    default: 'solid',
+    destructive: 'solid',
+    soft: 'soft',
+    surface: 'surface',
+    outline: 'outline',
+    secondary: 'solid',
+    ghost: 'soft',
+    link: 'outline',
+    plain: 'soft',
+  }
+  const base = colorClasses(props.color, styleMap[v] || 'solid')
+
+  // Static hover/active class maps (no template literals)
+  const hoverMap: Record<string, string> = {
+    default: colorHoverSolid[c],
+    destructive: colorHoverSolid[c],
+    secondary: colorHoverSolid[c],
+    outline: colorHoverOutline[c],
+    ghost: colorHoverGhost[c],
+    soft: '',
+    surface: '',
+    link: colorHoverLink[c],
+    plain: colorHoverGhost[c],
+  }
+
+  return `${base} ${hoverMap[v] || ''}`
+})
+
+const radiusClass = computed(() => props.radius ? radiusMap[props.radius] : '')
+
+const iconSizeClass = computed(() => {
+  const map: Record<string, string> = {
+    sm: 'h-3.5 w-3.5',
+    default: 'h-4 w-4',
+    lg: 'h-5 w-5',
+    icon: 'h-4 w-4',
+  }
+  return map[props.size || 'default'] || 'h-4 w-4'
 })
 </script>
 
 <template>
   <button
     :type="type"
-    :class="cn(buttonVariants({ variant, size, elevation }), props.class)"
+    :class="cn(buttonVariants({ variant, size, elevation }), colorStyle, radiusClass, props.class)"
     :disabled="disabled || loading"
   >
-    <!-- Loading Spinner -->
+    <!-- Center loading (current behavior) -->
     <span
-      v-if="loading"
+      v-if="loading && loadingPosition === 'center'"
       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 class="animate-spin" :class="iconSizeClass" 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="{ 'opacity-0': loading && loadingPosition === 'center' }"
       class="inline-flex items-center justify-center gap-2"
     >
+      <!-- Left: loading spinner or left-icon slot -->
+      <svg v-if="loading && loadingPosition === 'left'" class="animate-spin" :class="iconSizeClass" 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 v-else-if="$slots['left-icon']" :class="iconSizeClass" class="inline-flex items-center justify-center shrink-0">
+        <slot name="left-icon" />
+      </span>
+
       <slot />
+
+      <!-- Right: loading spinner or right-icon slot -->
+      <svg v-if="loading && loadingPosition === 'right'" class="animate-spin" :class="iconSizeClass" 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 v-else-if="$slots['right-icon']" :class="iconSizeClass" class="inline-flex items-center justify-center shrink-0">
+        <slot name="right-icon" />
+      </span>
     </span>
   </button>
 </template>

package/src/lib/button/variants.ts

@@ -42,6 +42,21 @@ export const buttonVariants = cva(
           'text-primary underline-offset-4 hover:underline',
           'hover:translate-y-0',
         ].join(' '),
+        soft: [
+          'border-transparent',
+          'hover:opacity-80 hover:shadow-depth-2',
+          'active:opacity-90',
+        ].join(' '),
+        surface: [
+          'hover:opacity-80 hover:shadow-depth-2',
+          'active:opacity-90',
+        ].join(' '),
+        plain: [
+          'border-transparent bg-transparent',
+          'hover:bg-accent hover:text-accent-foreground',
+          'active:bg-accent/80',
+          'hover:translate-y-0',
+        ].join(' '),
       },
       size: {
         default: 'h-10 px-4 py-2.5',

package/src/lib/card/Card.vue

@@ -5,11 +5,15 @@ interface Props {
   class?: string
   elevation?: 0 | 1 | 2 | 3
   interactive?: boolean
+  direction?: 'vertical' | 'horizontal'
+  variant?: 'elevated' | 'outlined' | 'filled' | 'ghost'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   elevation: 1,
   interactive: false,
+  direction: 'vertical',
+  variant: 'elevated',
 })
 
 const elevationClasses = {
@@ -18,14 +22,23 @@ const elevationClasses = {
   2: 'shadow-depth-2',
   3: 'shadow-depth-3',
 }
+
+const variantClasses = {
+  elevated: 'border bg-card text-card-foreground',
+  outlined: 'border bg-transparent text-card-foreground shadow-none',
+  filled: 'border-transparent bg-muted text-foreground shadow-none',
+  ghost: 'border-transparent bg-transparent text-foreground shadow-none',
+}
 </script>
 
 <template>
   <div
     :class="
       cn(
-        'rounded-lg border bg-card text-card-foreground',
-        elevationClasses[elevation],
+        'rounded-lg',
+        variantClasses[variant],
+        variant === 'elevated' && elevationClasses[elevation],
+        direction === 'horizontal' && 'flex flex-row',
         interactive && 'transition-elevation hover:shadow-depth-2 cursor-pointer',
         props.class
       )

package/src/lib/checkbox/Checkbox.vue

@@ -4,9 +4,36 @@ import {
   CheckboxIndicator,
   CheckboxRoot,
 } from 'radix-vue'
+import { computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorCheckedFull } from '@/lib/types'
 
-const props = defineProps<{ class?: string }>()
+interface Props {
+  class?: string
+  size?: 'sm' | 'default' | 'lg'
+  color?: SpavnColor
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'default',
+})
+
+const sizeClasses = {
+  sm: 'h-3.5 w-3.5',
+  default: 'h-4 w-4',
+  lg: 'h-5 w-5',
+}
+
+const iconSizeClasses = {
+  sm: 'h-3 w-3',
+  default: 'h-4 w-4',
+  lg: 'h-5 w-5',
+}
+
+const colorCls = computed(() => {
+  const c = props.color && props.color !== 'default' ? props.color as Exclude<SpavnColor, 'default'> : 'primary'
+  return colorCheckedFull[c]
+})
 </script>
 
 <template>
@@ -14,7 +41,9 @@ const props = defineProps<{ class?: string }>()
     v-bind="$attrs"
     :class="
       cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow-depth-1 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        'peer shrink-0 rounded-sm border shadow-depth-1 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        sizeClasses[props.size],
+        colorCls,
         props.class
       )
     "
@@ -30,7 +59,7 @@ const props = defineProps<{ class?: string }>()
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        class="h-4 w-4"
+        :class="iconSizeClasses[props.size]"
       >
         <path d="M20 6 9 17l-5-5" />
       </svg>

package/src/lib/input/Input.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnRadius, radiusMap } from '@/lib/types'
 
 interface Props {
   class?: string
@@ -8,20 +9,34 @@ interface Props {
   disabled?: boolean
   placeholder?: string
   modelValue?: string | number
-  size?: 'sm' | 'default' | 'lg'
+  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl'
+  variant?: 'outline' | 'filled' | 'underline' | 'plain'
+  radius?: SpavnRadius
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   size: 'default',
+  variant: 'outline',
 })
 
-const sizeClasses = {
-  sm: 'h-8 text-xs',
-  default: 'h-10 text-sm',
-  lg: 'h-12 text-base',
+const sizeClasses: Record<string, string> = {
+  xs: 'h-7 text-xs px-2',
+  sm: 'h-8 text-xs px-3',
+  default: 'h-10 text-sm px-3',
+  lg: 'h-12 text-base px-4',
+  xl: 'h-14 text-base px-4',
 }
 
+const variantClasses = {
+  outline: 'border border-input bg-background shadow-depth-1 focus-visible:shadow-depth-2 rounded-lg',
+  filled: 'border-transparent bg-muted rounded-lg',
+  underline: 'border-b border-input bg-transparent rounded-none px-0 focus-visible:shadow-none',
+  plain: 'border-transparent bg-transparent rounded-lg focus-visible:shadow-none',
+}
+
+const radiusClass = computed(() => props.radius ? radiusMap[props.radius] : '')
+
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
@@ -30,6 +45,12 @@ const slots = useSlots()
 
 const hasLeftIcon = computed(() => !!slots['left-icon'])
 const hasRightIcon = computed(() => !!slots['right-icon'])
+const hasPrefix = computed(() => !!slots.prefix)
+const hasSuffix = computed(() => !!slots.suffix)
+
+const addonHeightClass = computed(() => {
+  return sizeClasses[props.size].split(' ').find((c: string) => c.startsWith('h-')) || 'h-10'
+})
 
 const handleInput = (event: Event) => {
   const target = event.target as HTMLInputElement
@@ -39,47 +60,78 @@ const handleInput = (event: Event) => {
 
 <template>
   <div class="relative flex items-center w-full">
-    <!-- Left Icon -->
+    <!-- Prefix addon -->
     <div
-      v-if="hasLeftIcon"
-      class="absolute left-3 flex items-center justify-center text-muted-foreground pointer-events-none"
+      v-if="hasPrefix"
+      :class="cn(
+        'inline-flex items-center px-3 text-sm text-muted-foreground bg-muted border border-input border-r-0',
+        props.variant === 'outline' ? 'rounded-l-lg' : '',
+        addonHeightClass
+      )"
     >
-      <slot name="left-icon" />
+      <slot name="prefix" />
     </div>
 
-    <input
-      :type="type"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :class="
-        cn(
-          'flex w-full rounded-lg border border-input',
-          'bg-background',
-          sizeClasses[props.size],
-          'ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium',
-          'placeholder:text-muted-foreground',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          'shadow-depth-1 focus-visible:shadow-depth-2 transition-all duration-150 ease-out',
-          // Padding adjustments for icons
-          hasLeftIcon && 'pl-10',
-          hasRightIcon && 'pr-10',
-          !hasLeftIcon && 'px-3',
-          !hasRightIcon && !hasLeftIcon && 'py-2',
-          props.class
-        )
-      "
-      :disabled="disabled"
-      @input="handleInput"
-    />
+    <!-- Input wrapper -->
+    <div class="relative flex items-center w-full">
+      <!-- Left Icon -->
+      <div
+        v-if="hasLeftIcon"
+        class="absolute left-3 flex items-center justify-center text-muted-foreground pointer-events-none"
+      >
+        <slot name="left-icon" />
+      </div>
+
+      <input
+        :type="type"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :class="
+          cn(
+            'flex w-full',
+            variantClasses[props.variant],
+            sizeClasses[props.size],
+            'ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium',
+            'placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            'transition-all duration-150 ease-out',
+            // Padding adjustments for icons
+            hasLeftIcon && 'pl-10',
+            hasRightIcon && 'pr-10',
+            !hasLeftIcon && props.variant !== 'underline' && '',
+            !hasRightIcon && !hasLeftIcon && 'py-2',
+            // Addon border radius adjustments
+            hasPrefix && 'rounded-l-none border-l-0',
+            hasSuffix && 'rounded-r-none border-r-0',
+            radiusClass,
+            props.class
+          )
+        "
+        :disabled="disabled"
+        @input="handleInput"
+      />
+
+      <!-- Right Icon -->
+      <div
+        v-if="hasRightIcon"
+        class="absolute right-3 flex items-center justify-center text-muted-foreground"
+        :class="{ 'pointer-events-none': !$slots['right-icon-clickable'] }"
+      >
+        <slot name="right-icon" />
+      </div>
+    </div>
 
-    <!-- Right Icon -->
+    <!-- Suffix addon -->
     <div
-      v-if="hasRightIcon"
-      class="absolute right-3 flex items-center justify-center text-muted-foreground"
-      :class="{ 'pointer-events-none': !$slots['right-icon-clickable'] }"
+      v-if="hasSuffix"
+      :class="cn(
+        'inline-flex items-center px-3 text-sm text-muted-foreground bg-muted border border-input border-l-0',
+        props.variant === 'outline' ? 'rounded-r-lg' : '',
+        addonHeightClass
+      )"
     >
-      <slot name="right-icon" />
+      <slot name="suffix" />
     </div>
   </div>
 </template>

package/src/lib/progress/Progress.vue

@@ -1,23 +1,33 @@
 <script setup lang="ts">
 defineOptions({ inheritAttrs: false })
+import { computed } from 'vue'
 import {
   ProgressIndicator,
   ProgressRoot,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorBg } from '@/lib/types'
 
 const props = defineProps<{
   class?: string
   modelValue?: number
-  size?: 'default' | 'sm' | 'lg'
+  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl'
+  color?: SpavnColor
   ariaLabel?: string
 }>()
 
-const sizeClasses = {
+const sizeClasses: Record<string, string> = {
+  xs: 'h-1',
   sm: 'h-1',
   default: 'h-1.5',
   lg: 'h-2',
+  xl: 'h-3',
 }
+
+const indicatorColor = computed(() => {
+  if (!props.color || props.color === 'default') return 'bg-primary'
+  return colorBg[props.color as Exclude<SpavnColor, 'default'>]
+})
 </script>
 
 <template>
@@ -34,7 +44,7 @@ const sizeClasses = {
     "
   >
     <ProgressIndicator
-      :class="cn('h-full w-full flex-1 bg-primary rounded-full transition-all duration-300 ease-out')"
+      :class="cn('h-full w-full flex-1 rounded-full transition-all duration-300 ease-out', indicatorColor)"
       :style="{ transform: `translateX(-${100 - (props.modelValue || 0)}%)` }"
     />
   </ProgressRoot>

package/src/lib/radio-group/RadioGroupItem.vue

@@ -4,9 +4,36 @@ import {
   RadioGroupIndicator,
   RadioGroupItem,
 } from 'radix-vue'
+import { computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorBorderText } from '@/lib/types'
 
-const props = defineProps<{ class?: string }>()
+interface Props {
+  class?: string
+  size?: 'sm' | 'default' | 'lg'
+  color?: SpavnColor
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'default',
+})
+
+const sizeClasses = {
+  sm: 'h-3.5 w-3.5',
+  default: 'h-4 w-4',
+  lg: 'h-5 w-5',
+}
+
+const dotSizeClasses = {
+  sm: 'h-2 w-2',
+  default: 'h-2.5 w-2.5',
+  lg: 'h-3 w-3',
+}
+
+const colorCls = computed(() => {
+  const c = props.color && props.color !== 'default' ? props.color as Exclude<SpavnColor, 'default'> : 'primary'
+  return colorBorderText[c]
+})
 </script>
 
 <template>
@@ -14,7 +41,9 @@ const props = defineProps<{ class?: string }>()
     v-bind="$attrs"
     :class="
       cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus: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',
+        'aspect-square rounded-full border ring-offset-background focus: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',
+        sizeClasses[props.size],
+        colorCls,
         props.class
       )
     "
@@ -26,7 +55,7 @@ const props = defineProps<{ class?: string }>()
         height="24"
         viewBox="0 0 24 24"
         fill="currentColor"
-        class="h-2.5 w-2.5"
+        :class="dotSizeClasses[props.size]"
       >
         <circle cx="12" cy="12" r="6" />
       </svg>

package/src/lib/separator/Separator.vue

@@ -1,10 +1,45 @@
 <script setup lang="ts">
 defineOptions({ inheritAttrs: false })
+import { computed } from 'vue'
 import { Separator } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { type SpavnColor, colorBg, colorBorder } from '@/lib/types'
 
-const props = withDefaults(defineProps<{ class?: string; orientation?: 'horizontal' | 'vertical' }>(), {
+interface Props {
+  class?: string
+  orientation?: 'horizontal' | 'vertical'
+  variant?: 'solid' | 'dashed' | 'dotted'
+  color?: SpavnColor
+}
+
+const props = withDefaults(defineProps<Props>(), {
   orientation: 'horizontal',
+  variant: 'solid',
+})
+
+const separatorClasses = computed(() => {
+  const isHorizontal = props.orientation === 'horizontal'
+  const hasColor = props.color && props.color !== 'default'
+  const c = hasColor ? props.color as Exclude<SpavnColor, 'default'> : null
+  const colorBgClass = c ? colorBg[c] : 'bg-border'
+  const colorBorderClass = c ? colorBorder[c] : 'border-border'
+
+  if (props.variant === 'solid') {
+    return isHorizontal
+      ? `h-px w-full ${colorBgClass}`
+      : `h-full w-px ${colorBgClass}`
+  }
+
+  if (props.variant === 'dashed') {
+    return isHorizontal
+      ? `w-full border-b border-dashed ${colorBorderClass}`
+      : `h-full border-l border-dashed ${colorBorderClass}`
+  }
+
+  // dotted
+  return isHorizontal
+    ? `w-full border-b border-dotted ${colorBorderClass}`
+    : `h-full border-l border-dotted ${colorBorderClass}`
 })
 </script>
 
@@ -12,12 +47,6 @@ const props = withDefaults(defineProps<{ class?: string; orientation?: 'horizont
   <Separator
     v-bind="$attrs"
     :orientation="props.orientation"
-    :class="
-      cn(
-        'shrink-0 bg-border',
-        props.orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
-        props.class
-      )
-    "
+    :class="cn('shrink-0', separatorClasses, props.class)"
   />
 </template>

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>