@sakoa/ui 0.1.0

package/registry/source/components/ui/modal/SMorphingModalTrigger.vue

@@ -0,0 +1,95 @@
+<script lang="ts">
+/**
+ * SMorphingModalTrigger - Trigger element for morphing modal
+ * Captures its position for the morphing animation
+ */
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { ref, inject, onMounted, onBeforeUnmount, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SMorphingModalContextKey } from './SMorphingModal.vue'
+
+export interface Props {
+  /** Disable trigger */
+  disabled?: boolean
+  /** Additional class */
+  triggerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  triggerClass: ''
+})
+
+const emit = defineEmits<{
+  'click': [event: MouseEvent]
+}>()
+
+const triggerRef = ref<HTMLElement | null>(null)
+const context = inject(SMorphingModalContextKey)
+
+// Trigger visibility follows isExpanded state
+// When modal is expanded, trigger is invisible
+// When modal is collapsing, trigger fades back in with the modal
+const triggerOpacity = computed(() => context?.isExpanded.value ? 0 : 1)
+
+const handleClick = (event: MouseEvent) => {
+  if (props.disabled) return
+  
+  emit('click', event)
+  context?.open()
+}
+
+const handleKeydown = (_event: KeyboardEvent) => {
+  if (props.disabled) return
+  
+  context?.open()
+}
+
+onMounted(() => {
+  if (triggerRef.value) {
+    context?.registerTrigger(triggerRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  context?.registerTrigger(null)
+})
+</script>
+
+<template>
+  <div
+    ref="triggerRef"
+    v-bind="$attrs"
+    :class="cn('s-morphing-modal-trigger cursor-pointer outline-none', disabled ? 'opacity-50 cursor-not-allowed' : '', triggerClass, $attrs.class ?? '')"
+    :style="{ 
+      opacity: triggerOpacity,
+      transitionProperty: 'opacity',
+      transitionDuration: '500ms',
+      transitionTimingFunction: 'cubic-bezier(0.32, 0.72, 0, 1)'
+    }"
+    role="button"
+    tabindex="0"
+    :aria-disabled="disabled"
+    @click="handleClick"
+    @keydown.enter="handleKeydown"
+    @keydown.space.prevent="handleKeydown"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.s-morphing-modal-trigger {
+  display: inline-block;
+}
+
+.s-morphing-modal-trigger:focus-visible {
+  outline: 2px solid var(--s-primary);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+</style>

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

@@ -0,0 +1,32 @@
+// Modal Component Exports
+export { default as SModal } from './SModal.vue'
+export { default as SModalHeader } from './SModalHeader.vue'
+export { default as SModalContent } from './SModalContent.vue'
+export { default as SModalFooter } from './SModalFooter.vue'
+export { default as SModalTrigger } from './SModalTrigger.vue'
+export { default as SModalTitle } from './SModalTitle.vue'
+export { default as SModalDescription } from './SModalDescription.vue'
+export { default as SModalClose } from './SModalClose.vue'
+
+// Morphing Modal Exports
+export { default as SMorphingModal } from './SMorphingModal.vue'
+export { default as SMorphingModalTrigger } from './SMorphingModalTrigger.vue'
+export { default as SMorphingModalClose } from './SMorphingModalClose.vue'
+export { default as SMorphingModalTitle } from './SMorphingModalTitle.vue'
+export { default as SMorphingModalSubtitle } from './SMorphingModalSubtitle.vue'
+export { default as SMorphingModalDescription } from './SMorphingModalDescription.vue'
+export { default as SMorphingModalImage } from './SMorphingModalImage.vue'
+
+// Type exports
+export type {
+  ModalSize,
+  ModalVariant,
+  ModalAnimation,
+  ModalPosition,
+  SModalContext
+} from './SModal.vue'
+
+export { SModalContextKey } from './SModal.vue'
+
+export type { SMorphingModalContext } from './SMorphingModal.vue'
+export { SMorphingModalContextKey } from './SMorphingModal.vue'

package/registry/source/components/ui/option/SOption.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, computed, type CSSProperties } from 'vue'
+import { cn } from '../../../lib/utils'
+
+export interface Props {
+  value: any
+  label?: string
+  disabled?: boolean
+  icon?: string
+  description?: string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  disabled: false,
+  icon: undefined,
+  description: undefined,
+  color: undefined
+})
+
+// Inject from parent SSelect
+const selectContext = inject<{
+  modelValue: any
+  multiple: boolean
+  highlightedIndex: number
+  optionIndex: number
+  registerOption: (option: { value: any; label: string; disabled: boolean }) => number
+  selectOption: (value: any) => void
+  isSelected: (value: any) => boolean
+  color: string
+  size: string
+}>('s-select-context')
+
+// Register this option and get its index
+const displayLabel = computed(() => props.label ?? String(props.value))
+
+const optionData = {
+  value: props.value,
+  label: displayLabel.value,
+  disabled: props.disabled
+}
+
+const index = selectContext?.registerOption(optionData) ?? -1
+
+const isSelected = computed(() => selectContext?.isSelected(props.value) ?? false)
+const isHighlighted = computed(() => selectContext?.highlightedIndex === index)
+
+const resolvedColor = computed(() => props.color ?? selectContext?.color)
+const hasCustomColor = computed(() => !!resolvedColor.value)
+
+const handleClick = () => {
+  if (props.disabled) return
+  selectContext?.selectOption(props.value)
+}
+
+// Size configurations
+const sizeConfig = computed(() => {
+  const sizes = {
+    small: {
+      padding: 'py-1.5 px-3',
+      text: 'text-xs',
+      icon: 'text-sm',
+      gap: 'gap-2'
+    },
+    medium: {
+      padding: 'py-2 px-3',
+      text: 'text-sm',
+      icon: 'text-base',
+      gap: 'gap-2.5'
+    },
+    large: {
+      padding: 'py-2.5 px-4',
+      text: 'text-base',
+      icon: 'text-lg',
+      gap: 'gap-3'
+    }
+  }
+  return sizes[selectContext?.size as keyof typeof sizes] ?? sizes.medium
+})
+
+// Background style for selection/highlight
+const bgStyle = computed<CSSProperties>(() => {
+  if (isSelected.value && hasCustomColor.value) {
+    return {
+      backgroundColor: `color-mix(in srgb, ${resolvedColor.value} 15%, transparent)`
+    }
+  }
+  return {}
+})
+
+const bgClass = computed(() => {
+  if (isSelected.value && !hasCustomColor.value) {
+    return 'bg-primary/15'
+  }
+  if (!isSelected.value && (isHighlighted.value)) {
+    return 'bg-accent'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    role="option"
+    :aria-selected="isSelected"
+    :aria-disabled="disabled"
+    :class="cn(
+      's-option relative flex items-center cursor-pointer transition-all duration-150 select-none',
+      sizeConfig.padding,
+      sizeConfig.gap,
+      {
+        'opacity-50 cursor-not-allowed': disabled,
+        'text-foreground': isHighlighted || isSelected,
+        'text-muted-foreground hover:text-foreground': !isHighlighted && !isSelected && !disabled
+      }
+    )"
+    @click="handleClick"
+  >
+    <!-- Highlight/Selection background -->
+    <div
+      v-if="isHighlighted || isSelected"
+      class="absolute inset-0 transition-all duration-150 rounded-lg mx-1"
+      :class="[
+        isSelected ? 'opacity-100' : 'opacity-60',
+        bgClass
+      ]"
+      :style="bgStyle"
+    />
+
+    <!-- Icon -->
+    <span
+      v-if="icon"
+      :class="cn('relative z-10 shrink-0 mdi', `mdi-${icon}`, sizeConfig.icon, isSelected && !hasCustomColor ? 'text-primary' : '')"
+      :style="isSelected && hasCustomColor ? { color: resolvedColor } : {}"
+    />
+
+    <!-- Content -->
+    <div class="relative z-10 flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        <span :class="sizeConfig.text" class="truncate">
+          <slot>{{ displayLabel }}</slot>
+        </span>
+        <slot name="suffix" />
+      </div>
+      <p
+        v-if="description"
+        class="text-xs text-muted-foreground truncate mt-0.5"
+      >
+        {{ description }}
+      </p>
+    </div>
+
+    <!-- Check mark for selected -->
+    <Transition
+      enter-active-class="transition-all duration-150 ease-out"
+      enter-from-class="scale-0 opacity-0"
+      enter-to-class="scale-100 opacity-100"
+      leave-active-class="transition-all duration-100 ease-in"
+      leave-from-class="scale-100 opacity-100"
+      leave-to-class="scale-0 opacity-0"
+    >
+      <span
+        v-if="isSelected"
+        class="relative z-10 mdi mdi-check shrink-0"
+        :class="[sizeConfig.icon, !hasCustomColor ? 'text-primary' : '']"
+        :style="hasCustomColor ? { color: resolvedColor } : {}"
+      />
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.s-option:focus {
+  outline: none;
+}
+</style>

package/registry/source/components/ui/option/SOptionGroup.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { ref, provide, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+
+export interface Props {
+  label: string
+  disabled?: boolean
+  collapsible?: boolean
+  defaultCollapsed?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  collapsible: false,
+  defaultCollapsed: false
+})
+
+const isCollapsed = ref(props.defaultCollapsed)
+
+const toggle = () => {
+  if (props.collapsible) {
+    isCollapsed.value = !isCollapsed.value
+  }
+}
+
+// Provide disabled state to child options
+provide('s-option-group-disabled', computed(() => props.disabled))
+</script>
+
+<template>
+  <div v-bind="$attrs" :class="cn('s-option-group')">
+    <!-- Group Header -->
+    <div
+      :class="cn(
+        'flex items-center gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground',
+        {
+          'cursor-pointer hover:text-foreground': collapsible,
+          'opacity-50': disabled
+        }
+      )"
+      @click="toggle"
+    >
+      <slot name="label">
+        <span class="flex-1">{{ label }}</span>
+      </slot>
+      <span
+        v-if="collapsible"
+        class="mdi transition-transform duration-200"
+        :class="isCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'"
+      />
+    </div>
+
+    <!-- Group Content -->
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 max-h-0"
+      enter-to-class="opacity-100 max-h-96"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 max-h-96"
+      leave-to-class="opacity-0 max-h-0"
+    >
+      <div v-show="!isCollapsed" class="overflow-hidden">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.s-option-group + .s-option-group {
+  border-top: 1px solid var(--s-border);
+  margin-top: 0.25rem;
+  padding-top: 0.25rem;
+}
+</style>

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

@@ -0,0 +1,3 @@
+// Re-export components for convenience
+export { default as SOption } from './SOption.vue'
+export { default as SOptionGroup } from './SOptionGroup.vue'