Initial commit: Add project files

frontend/src/shared/ui/components/KsSelect.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import type { UiSelectOption } from '../adapter/contracts'
+import { useUiAdapter } from '../adapter/useUiAdapter'
+const props = defineProps<{ modelValue: unknown; label: string; options: UiSelectOption[]; inputId?: string; disabled?: boolean; required?: boolean; error?: string; help?: string; placeholder?: string }>()
+const emit = defineEmits<{ 'update:modelValue': [value: unknown]; blur: [event: FocusEvent] }>()
+const adapter = useUiAdapter()
+const generatedId = useId()
+const resolvedId = computed(() => props.inputId ?? `ks-select-${generatedId}`)
+</script>
+<template>
+  <div class="ks-field">
+    <label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label>
+    <component :is="adapter.components.Select" :input-id="resolvedId" :model-value="modelValue" :options="options" :disabled="disabled" :invalid="Boolean(error)" :placeholder="placeholder" @update:model-value="emit('update:modelValue', $event)" @blur="emit('blur', $event)" />
+    <small v-if="error || help" :class="{ 'ks-danger-text': error }">{{ error ?? help }}</small>
+  </div>
+</template>
+<style scoped>.ks-field { display: grid; gap: var(--ks-space-1); } label { font-weight: 650; } small { color: var(--ks-color-neutral-600); }</style>