@stlhorizon/vue-ui 0.0.1

package/src/components/Search.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="relative" ref="searchRef">
+    <!-- Input -->
+    <div class="relative">
+      <!-- Left Icon -->
+      <div class="absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
+        <SearchIcon :class="iconClasses" />
+      </div>
+
+      <!-- Search Input -->
+      <input
+        ref="inputRef"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="inputClasses"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+      />
+
+      <!-- Right Actions -->
+      <div
+        v-if="modelValue || loading"
+        class="absolute right-3 top-1/2 transform -translate-y-1/2"
+      >
+        <!-- Clear -->
+        <button
+          v-if="!loading && clearable"
+          @click="handleClear"
+          class="text-slate-400 hover:text-slate-600 transition-colors p-1 rounded-full hover:bg-slate-100"
+          :aria-label="clearLabel"
+        >
+          <XMarkIcon class="w-4 h-4" />
+        </button>
+
+        <!-- Loading -->
+        <div v-else-if="loading" class="animate-spin">
+          <LoadingIcon class="w-4 h-4 text-slate-400" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Dropdown -->
+    <Transition
+      enter-active-class="transition-all duration-200"
+      enter-from-class="opacity-0 scale-95 translate-y-1"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition-all duration-150"
+      leave-from-class="opacity-100 scale-100 translate-y-0"
+      leave-to-class="opacity-0 scale-95 translate-y-1"
+    >
+      <div
+        v-if="showResults && (results.length > 0 || showNoResults)"
+        :class="resultsClasses"
+      >
+        <!-- Results -->
+        <div v-if="results.length > 0" class="max-h-64 overflow-y-auto">
+          <button
+            v-for="(result, index) in results"
+            :key="result.id || index"
+            :class="getResultClasses(index)"
+            @click="selectResult(result, index)"
+            @mouseenter="focusedIndex = index"
+          >
+            <component
+              v-if="result.icon"
+              :is="result.icon"
+              class="w-4 h-4 mr-3 flex-shrink-0"
+            />
+
+            <div class="flex-1 text-left">
+              <div
+                class="font-medium text-slate-900"
+                v-html="highlightMatch(result.title)"
+              />
+              <div
+                v-if="result.description"
+                class="text-sm text-slate-500 truncate"
+                v-html="highlightMatch(result.description)"
+              />
+            </div>
+
+            <div v-if="result.category" class="text-xs text-slate-400 ml-3">
+              {{ result.category }}
+            </div>
+          </button>
+        </div>
+
+        <!-- No Results -->
+        <div
+          v-else-if="showNoResults"
+          class="px-4 py-3 text-sm text-slate-500 text-center"
+        >
+          {{ noResultsText }}
+        </div>
+
+        <!-- Footer Slot -->
+        <div v-if="$slots.footer" class="border-t border-slate-200 p-2">
+          <slot name="footer" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '../utils/cn.js'
+
+// Icons
+const SearchIcon = {
+  template: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
+  </svg>`
+}
+const XMarkIcon = {
+  template: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+  </svg>`
+}
+const LoadingIcon = {
+  template: `<svg fill="none" viewBox="0 0 24 24" class="animate-spin">
+    <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>`
+}
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  results: { type: Array, default: () => [] },
+  placeholder: { type: String, default: 'Search...' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  clearLabel: { type: String, default: 'Clear search' },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['sm', 'md', 'lg'].includes(v)
+  },
+  debounce: { type: Number, default: 300 },
+  minLength: { type: Number, default: 1 },
+  showNoResults: { type: Boolean, default: true },
+  noResultsText: { type: String, default: 'No results found' },
+  highlightMatches: { type: Boolean, default: true }
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+  'search',
+  'select',
+  'clear',
+  'focus',
+  'blur'
+])
+
+// State
+const searchRef = ref(null)
+const inputRef = ref(null)
+const showResults = ref(false)
+const focusedIndex = ref(-1)
+const debounceTimer = ref(null)
+
+// Handlers
+const handleInput = (e) => {
+  const value = e.target.value
+  emit('update:modelValue', value)
+
+  if (debounceTimer.value) clearTimeout(debounceTimer.value)
+
+  debounceTimer.value = setTimeout(() => {
+    if (value.length >= props.minLength) {
+      emit('search', value)
+      showResults.value = true
+    } else {
+      showResults.value = false
+    }
+  }, props.debounce)
+}
+const handleFocus = (e) => {
+  emit('focus', e)
+  if (props.modelValue.length >= props.minLength) showResults.value = true
+}
+const handleBlur = (e) => {
+  emit('blur', e)
+  setTimeout(() => {
+    showResults.value = false
+    focusedIndex.value = -1
+  }, 150)
+}
+const handleClear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  showResults.value = false
+  inputRef.value?.focus()
+}
+const selectResult = (result) => {
+  emit('select', result)
+  showResults.value = false
+  focusedIndex.value = -1
+}
+const handleKeydown = (e) => {
+  if (!showResults.value || props.results.length === 0) return
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault()
+      focusedIndex.value = Math.min(focusedIndex.value + 1, props.results.length - 1)
+      break
+    case 'ArrowUp':
+      e.preventDefault()
+      focusedIndex.value = Math.max(focusedIndex.value - 1, -1)
+      break
+    case 'Enter':
+      e.preventDefault()
+      if (focusedIndex.value >= 0) selectResult(props.results[focusedIndex.value])
+      break
+    case 'Escape':
+      e.preventDefault()
+      showResults.value = false
+      focusedIndex.value = -1
+      break
+  }
+}
+
+// Helpers
+const highlightMatch = (text) => {
+  if (!props.highlightMatches || !props.modelValue || !text) return text
+  const regex = new RegExp(`(${props.modelValue})`, 'gi')
+  return text.replace(regex, '<mark class="bg-yellow-200">$1</mark>')
+}
+
+// Variants
+const inputVariants = cva(
+  'block w-full rounded-lg border bg-white transition-colors duration-200 placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500',
+  {
+    variants: {
+      size: {
+        sm: 'px-9 py-1.5 text-sm',
+        md: 'px-10 py-2 text-sm',
+        lg: 'px-12 py-3 text-base'
+      }
+    },
+    defaultVariants: { size: 'md' }
+  }
+)
+
+const iconVariants = cva('text-slate-400', {
+  variants: {
+    size: {
+      sm: 'w-4 h-4',
+      md: 'w-4 h-4',
+      lg: 'w-5 h-5'
+    }
+  },
+  defaultVariants: { size: 'md' }
+})
+
+const inputClasses = computed(() => cn(inputVariants({ size: props.size })))
+const iconClasses = computed(() => cn(iconVariants({ size: props.size })))
+const resultsClasses = computed(() =>
+  cn('absolute z-50 w-full mt-1 bg-white rounded-lg shadow-lg border border-slate-200 max-h-96 overflow-hidden')
+)
+const getResultClasses = (i) =>
+  cn(
+    'flex items-center w-full px-4 py-3 text-left transition-colors duration-150 hover:bg-slate-50 focus:bg-slate-50 focus:outline-none',
+    { 'bg-slate-50': focusedIndex.value === i }
+  )
+
+// Outside click
+const handleClickOutside = (e) => {
+  if (searchRef.value && !searchRef.value.contains(e.target)) {
+    showResults.value = false
+    focusedIndex.value = -1
+  }
+}
+
+onMounted(() => document.addEventListener('click', handleClickOutside))
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  if (debounceTimer.value) clearTimeout(debounceTimer.value)
+})
+watch(() => props.results, () => (focusedIndex.value = -1))
+</script>

package/src/components/Select.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="relative">
+    <select
+      :id="id || selectId"
+      ref="selectRef"
+      :value="modelValue"
+      :disabled="disabled"
+      :required="required"
+      :class="selectClasses"
+      :aria-describedby="ariaDescribedBy"
+      :aria-invalid="hasError"
+      @change="handleChange"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    >
+      <option v-if="placeholder" value="" disabled>
+        {{ placeholder }}
+      </option>
+
+      <slot />
+    </select>
+
+    <!-- Custom dropdown arrow -->
+    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
+      <ChevronDownIcon :class="iconClasses" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useId } from 'vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '../utils/cn.js'
+
+// ChevronDown as inline component
+const ChevronDownIcon = {
+  template: `
+    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+    </svg>
+  `
+}
+
+const props = defineProps({
+  modelValue: [String, Number, Boolean],
+  placeholder: String,
+  disabled: Boolean,
+  required: Boolean,
+  error: String,
+  id: String,
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['sm', 'md', 'lg'].includes(v)
+  },
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (v) => ['default', 'error', 'success'].includes(v)
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus'])
+const selectRef = ref(null)
+const selectId = useId()
+
+// events
+const handleChange = (event) => {
+  const value = event.target.value
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+const handleBlur = (event) => emit('blur', event)
+const handleFocus = (event) => emit('focus', event)
+
+// accessibility
+const hasError = computed(() => !!props.error || props.variant === 'error')
+const ariaDescribedBy = computed(() =>
+  props.error ? `${selectId}-error` : undefined
+)
+
+// variants with cva
+const selectVariants = cva(
+  'block w-full rounded-lg border bg-background pr-10 appearance-none transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed',
+  {
+    variants: {
+      size: {
+        sm: 'px-3 py-1.5 text-sm',
+        md: 'px-3 py-2 text-sm',
+        lg: 'px-4 py-3 text-base'
+      },
+      variant: {
+        default: 'border-slate-300 focus:border-blue-500 focus:ring-blue-500',
+        error: 'border-red-300 focus:border-red-500 focus:ring-red-500',
+        success:
+          'border-green-300 focus:border-green-500 focus:ring-green-500'
+      }
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'default'
+    }
+  }
+)
+
+const selectClasses = computed(() =>
+  cn(selectVariants({ size: props.size, variant: props.variant }))
+)
+
+const iconClasses = computed(() =>
+  cn({
+    sm: 'w-4 h-4',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5'
+  }[props.size])
+)
+
+// expose focus/blur
+defineExpose({
+  focus: () => selectRef.value?.focus(),
+  blur: () => selectRef.value?.blur()
+})
+</script>

package/src/components/Sidebar.vue

@@ -0,0 +1,52 @@
+<template>
+  <aside :class="cn('bg-white border-r border-gray-200 h-full', className)">
+    <div class="p-6">
+      <!-- Sidebar Header -->
+      <div class="mb-8">
+        <slot name="header">
+          <Logo />
+        </slot>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="space-y-2">
+        <slot name="navigation">
+          <SidebarNavigation :items="items" />
+        </slot>
+      </nav>
+
+      <!-- Footer -->
+      <div class="mt-auto pt-8">
+        <slot name="footer">
+          <Divider class="mb-4" />
+          <div class="flex items-center space-x-3">
+            <Avatar size="sm" />
+            <div>
+              <Text class="text-sm font-medium">John Doe</Text>
+              <Text class="text-xs text-gray-500">john@example.com</Text>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { cn } from '../utils/cn.js'
+
+defineProps({
+  items: {
+    type: Array,
+    default: () => [
+      { label: 'Dashboard', href: '/dashboard', icon: 'home', active: true },
+      { label: 'Users', href: '/users', icon: 'users' },
+      { label: 'Settings', href: '/settings', icon: 'settings' }
+    ]
+  },
+  className: {
+    type: String,
+    default: ''
+  }
+})
+</script>

package/src/components/Slider.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="w-full">
+    <input
+      type="range"
+      :min="min"
+      :max="max"
+      :step="step"
+      v-model="internalValue"
+      @input="updateValue"
+      class="w-full accent-blue-500 cursor-pointer"
+    />
+    <div class="flex justify-between text-xs text-slate-500 mt-1">
+      <span>{{ min }}</span>
+      <span>{{ internalValue }}</span>
+      <span>{{ max }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue"
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  step: { type: Number, default: 1 }
+})
+const emit = defineEmits(["update:modelValue"])
+
+const internalValue = ref(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  internalValue.value = val
+})
+
+const updateValue = () => {
+  emit("update:modelValue", Number(internalValue.value))
+}
+</script>

package/src/components/Spinner.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="spinnerClasses" role="status" :aria-label="label">
+    <svg
+      :class="svgClasses"
+      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-if="label" class="sr-only">{{ label }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '../utils/cn.js'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+  },
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'primary', 'secondary'].includes(value)
+  },
+  label: {
+    type: String,
+    default: 'Loading...'
+  },
+  class: String
+})
+
+const spinnerVariants = cva(
+  'inline-flex items-center justify-center',
+  {
+    variants: {
+      variant: {
+        default: 'text-muted-foreground',
+        primary: 'text-primary',
+        secondary: 'text-secondary-foreground'
+      }
+    }
+  }
+)
+
+const sizeVariants = cva(
+  'animate-spin',
+  {
+    variants: {
+      size: {
+        xs: 'h-3 w-3',
+        sm: 'h-4 w-4',
+        md: 'h-6 w-6',
+        lg: 'h-8 w-8',
+        xl: 'h-12 w-12'
+      }
+    }
+  }
+)
+
+const spinnerClasses = computed(() => 
+  cn(spinnerVariants({ variant: props.variant }), props.class)
+)
+
+const svgClasses = computed(() => 
+  sizeVariants({ size: props.size })
+)
+</script>

package/src/components/Stepper.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex items-center space-x-4">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// Simple wrapper, steps are handled by <StepperItem />
+</script>

package/src/components/StepperItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex items-center">
+    <div
+      :class="[
+        'flex items-center justify-center w-8 h-8 rounded-full border-2',
+        active ? 'bg-blue-500 border-blue-500 text-white' :
+        completed ? 'bg-green-500 border-green-500 text-white' :
+        'border-slate-300 text-slate-500'
+      ]"
+    >
+      <span>{{ step }}</span>
+    </div>
+    <div class="ml-2">
+      <div class="font-medium">{{ title }}</div>
+      <div v-if="description" class="text-sm text-slate-400">{{ description }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  step: { type: Number, required: true },
+  title: { type: String, required: true },
+  description: { type: String, default: "" },
+  active: { type: Boolean, default: false },
+  completed: { type: Boolean, default: false }
+})
+</script>