@sakoa/ui 0.1.0

package/registry/source/components/ui/dropdown/SDropdownDivider.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { cn } from '../../../lib/utils'
+
+export interface Props {
+  /** Custom margin */
+  margin?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  margin: '4px'
+})
+</script>
+
+<template>
+  <div
+    :class="cn('s-dropdown-divider h-px bg-border/60', $attrs.class ?? '')"
+    role="separator"
+    :style="{ marginTop: margin, marginBottom: margin }"
+    v-bind="$attrs"
+  />
+</template>

package/registry/source/components/ui/dropdown/SDropdownGroup.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDropdownContextKey, type SDropdownContext } from './SDropdown.vue'
+
+export interface Props {
+  /** Group header label */
+  label: string
+  /** Icon for the header */
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: undefined
+})
+
+// Inject context from parent dropdown
+const context = inject<SDropdownContext>(SDropdownContextKey)
+
+const sizeConfig = computed(() => ({
+  small: 'px-2 pt-1.5 pb-0.5 text-[10px]',
+  medium: 'px-2.5 pt-2 pb-1 text-[11px]',
+  large: 'px-3 pt-2.5 pb-1 text-xs'
+}[context?.size ?? 'medium']))
+</script>
+
+<template>
+  <div :class="cn('s-dropdown-group', $attrs.class ?? '')" v-bind="$attrs">
+    <!-- Group header -->
+    <div 
+      class="font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-2 sticky top-0 bg-background/95 backdrop-blur-sm"
+      :class="sizeConfig"
+    >
+      <span v-if="icon" :class="['mdi', `mdi-${icon}`, 'text-xs']" />
+      <span>{{ label }}</span>
+    </div>
+    
+    <!-- Group items -->
+    <div class="s-dropdown-group-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-dropdown-group + .s-dropdown-group {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--s-border);
+}
+</style>

package/registry/source/components/ui/dropdown/SDropdownItem.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, computed, onMounted, onBeforeUnmount } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDropdownContextKey, type SDropdownContext } from './SDropdown.vue'
+
+export interface Props {
+  /** Unique key for the item */
+  itemKey: string
+  /** Item label text */
+  label?: string
+  /** Leading icon (MDI icon name) */
+  icon?: string
+  /** Trailing icon */
+  trailingIcon?: string
+  /** Description text below label */
+  description?: string
+  /** Keyboard shortcut display */
+  shortcut?: string
+  /** Disable the item */
+  disabled?: boolean
+  /** Danger/destructive styling */
+  danger?: boolean
+  /** Checkable state (undefined = not checkable) */
+  checked?: boolean
+  /** Custom color for this item */
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  icon: undefined,
+  trailingIcon: undefined,
+  description: undefined,
+  shortcut: undefined,
+  disabled: false,
+  danger: false,
+  checked: undefined,
+  color: undefined
+})
+
+const emit = defineEmits<{
+  'click': [event: MouseEvent]
+  'update:checked': [checked: boolean]
+}>()
+
+// Inject context from parent dropdown
+const context = inject<SDropdownContext>(SDropdownContextKey)
+
+// Register with parent
+let itemIndex = -1
+
+onMounted(() => {
+  if (context) {
+    itemIndex = context.registerItem({ 
+      key: props.itemKey, 
+      disabled: props.disabled 
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (context) {
+    context.unregisterItem(props.itemKey)
+  }
+})
+
+// Size configurations - reduced padding for tighter, cleaner look
+const sizeConfig = computed(() => ({
+  small: {
+    item: 'px-2 py-1 text-xs',
+    icon: 'text-sm'
+  },
+  medium: {
+    item: 'px-2.5 py-1.5 text-sm',
+    icon: 'text-base'
+  },
+  large: {
+    item: 'px-3 py-2 text-base',
+    icon: 'text-lg'
+  }
+}[context?.size ?? 'medium']))
+
+const accentColor = computed(() => props.color ?? context?.color ?? 'var(--s-primary)')
+
+const isHighlighted = computed(() => {
+  if (!context) return false
+  return context.highlightedIndex.value === itemIndex
+})
+
+const handleClick = (event: MouseEvent) => {
+  if (props.disabled) return
+  
+  emit('click', event)
+  
+  if (props.checked !== undefined) {
+    emit('update:checked', !props.checked)
+  }
+  
+  if (context) {
+    context.selectItem(props.itemKey)
+  }
+}
+</script>
+
+<template>
+  <div
+    role="menuitem"
+    :tabindex="disabled ? -1 : 0"
+    :class="cn('s-dropdown-item relative flex items-center cursor-pointer transition-all duration-150 select-none rounded-lg group', sizeConfig.item, {
+        'opacity-50 cursor-not-allowed': disabled,
+        'text-red-500 hover:bg-red-500/10': danger && !disabled,
+        'text-foreground hover:bg-accent': !danger && !disabled,
+        'bg-accent': isHighlighted && !disabled
+      }, $attrs.class ?? '')"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <!-- Checkbox for checkable items -->
+    <span 
+      v-if="checked !== undefined"
+      class="mdi mr-2.5 transition-all duration-150"
+      :class="[
+        checked ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline',
+        sizeConfig.icon,
+        checked ? '' : 'text-muted-foreground'
+      ]"
+      :style="checked ? { color: accentColor } : {}"
+    />
+    
+    <!-- Leading icon -->
+    <span 
+      v-else-if="icon"
+      :class="['mdi', `mdi-${icon}`, sizeConfig.icon, 'mr-2.5', danger ? '' : 'text-muted-foreground group-hover:text-foreground']"
+    />
+
+    <!-- Content -->
+    <div class="flex-1 min-w-0">
+      <slot>
+        <div class="truncate">{{ label }}</div>
+      </slot>
+      <div 
+        v-if="description" 
+        class="text-xs truncate mt-0.5"
+        :class="danger ? 'text-red-400' : 'text-muted-foreground'"
+      >
+        {{ description }}
+      </div>
+    </div>
+
+    <!-- Trailing content -->
+    <div class="flex items-center gap-2 ml-4 shrink-0">
+      <!-- Keyboard shortcut -->
+      <kbd 
+        v-if="shortcut"
+        class="px-1.5 py-0.5 text-[10px] font-mono rounded bg-background text-muted-foreground border border-border"
+      >
+        {{ shortcut }}
+      </kbd>
+      
+      <!-- Trailing icon -->
+      <span 
+        v-if="trailingIcon"
+        :class="['mdi', `mdi-${trailingIcon}`, sizeConfig.icon, 'text-muted-foreground']"
+      />
+      
+      <!-- Custom trailing slot -->
+      <slot name="trailing" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-dropdown-item:focus-visible {
+  outline: none;
+  background-color: var(--s-accent);
+}
+</style>

package/registry/source/components/ui/dropdown/index.ts

@@ -0,0 +1,5 @@
+// Re-export components for convenience
+export { default as SDropdown } from './SDropdown.vue'
+export { default as SDropdownDivider } from './SDropdownDivider.vue'
+export { default as SDropdownGroup } from './SDropdownGroup.vue'
+export { default as SDropdownItem } from './SDropdownItem.vue'

package/registry/source/components/ui/form/SForm.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+import type { FormState } from '../../../composables/useForm'
+import { FORM_CONTEXT_KEY } from './index'
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface Props {
+  /** Form state from useForm */
+  form: FormState<any>
+  /** Whether the form is disabled */
+  disabled?: boolean
+  /** Gap between form fields */
+  gap?: 'none' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  gap: 'md'
+})
+
+const emit = defineEmits<{
+  /** Emitted when the form is submitted and validation passes */
+  submit: [values: Record<string, unknown>]
+}>()
+
+// Provide form context to child FormFields
+provide(FORM_CONTEXT_KEY, props.form)
+
+// Handle native form submission
+const handleSubmit = async (event: Event) => {
+  event.preventDefault()
+  
+  if (props.disabled || props.form.isSubmitting?.value) {
+    return
+  }
+  
+  const isValid = await props.form.validate()
+  if (isValid) {
+    emit('submit', props.form.getValues())
+  }
+}
+
+// Gap class mapping
+const gapClass = computed(() => {
+  const gaps = {
+    none: 'gap-0',
+    sm: 'gap-2',
+    md: 'gap-3',
+    lg: 'gap-4'
+  }
+  return gaps[props.gap]
+})
+</script>
+
+<template>
+  <form
+    v-bind="$attrs"
+    :class="cn('s-form', gapClass, { 's-form--disabled': disabled })"
+    @submit="handleSubmit"
+  >
+    <slot 
+      :is-submitting="form.isSubmitting?.value ?? false"
+      :is-valid="form.valid.value"
+      :is-dirty="form.dirty.value"
+      :errors="form.errors.value"
+    />
+  </form>
+</template>
+
+<style scoped>
+.s-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.s-form--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>

package/registry/source/components/ui/form/SFormField.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { inject, computed, provide, type InjectionKey } from 'vue'
+import type { FormState, FieldState } from '../../../composables/useForm'
+import { FORM_CONTEXT_KEY } from './index'
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  /** Field name matching the key in useFormValidation config */
+  name: string
+}
+
+const props = defineProps<Props>()
+
+// Get form context from parent SForm
+const form = inject<FormState | null>(FORM_CONTEXT_KEY, null)
+
+if (!form) {
+  console.warn('[SFormField] Must be used inside SForm component')
+}
+
+// Get field state
+const field = computed<FieldState | null>(() => {
+  if (!form) return null
+  return form.fields[props.name] || null
+})
+
+// Display error from field
+const displayError = computed(() => field.value?.error.value || '')
+
+// Validation state for styling
+const validationState = computed<'error' | 'success' | null>(() => {
+  if (!field.value) return null
+  if (field.value.error.value) return 'error'
+  if (field.value.valid.value && field.value.dirty.value) return 'success'
+  return null
+})
+
+// Handle blur event for validation
+const handleBlur = () => {
+  if (field.value) {
+    field.value.touched.value = true
+    field.value.validate()
+  }
+}
+
+// Handle input event for validation
+const handleInput = () => {
+  // Validation happens automatically via watchers in useFormValidation
+}
+
+// Provide field context to child components (for advanced use cases)
+const FIELD_CONTEXT_KEY: InjectionKey<FieldState | null> = Symbol('field-context')
+provide(FIELD_CONTEXT_KEY, field.value)
+</script>
+
+<template>
+  <div v-bind="$attrs" :class="cn('s-form-field')">
+    <!-- Slot for the actual input/component -->
+    <slot 
+      :field="field"
+      :value="field?.value.value"
+      :error="displayError || undefined"
+      :validation-state="validationState"
+      :model-value="field?.value.value"
+      :on-update="(val: unknown) => { if (field) field.value.value = val }"
+      :on-blur="handleBlur"
+      :on-input="handleInput"
+    />
+  </div>
+</template>
+
+<style scoped>
+.s-form-field {
+  @apply w-full;
+}
+</style>

package/registry/source/components/ui/form/index.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue'
+import type { FormState } from '../../../composables/useForm'
+
+export const FORM_CONTEXT_KEY: InjectionKey<FormState> = Symbol('form-context')
+
+// Re-export components for convenience
+export { default as SForm } from './SForm.vue'
+export { default as SFormField } from './SFormField.vue'