@sakoa/ui 0.1.0

package/registry/source/components/ui/accordion/SAccordion.vue

@@ -0,0 +1,248 @@
+<script lang="ts">
+/**
+ * SAccordion - Advanced Accordion Component
+ * A highly customizable accordion component styled with TailwindCSS
+ */
+import { type InjectionKey, type Ref } from 'vue'
+
+// Types
+export type AccordionType = 'default' | 'bordered' | 'separated' | 'card' | 'minimal'
+export type AccordionSize = 'small' | 'medium' | 'large'
+export type IconPlacement = 'left' | 'right'
+
+export interface AccordionItemInfo {
+  name: string | number
+  disabled?: boolean
+}
+
+export interface SAccordionContext {
+  activeItems: Ref<Set<string | number>>
+  type: AccordionType
+  size: AccordionSize
+  multiple: boolean
+  collapsible: boolean
+  iconPlacement: IconPlacement
+  iconRotation: number
+  animated: boolean
+  divider: boolean
+  dense: boolean
+  color: string
+  registerItem: (item: AccordionItemInfo) => void
+  unregisterItem: (name: string | number) => void
+  toggleItem: (name: string | number) => void
+  isExpanded: (name: string | number) => boolean
+}
+
+export const SAccordionContextKey: InjectionKey<SAccordionContext> = Symbol('SAccordionContext')
+
+export interface SAccordionItemContext {
+  isExpanded: Ref<boolean>
+  disabled: Ref<boolean>
+  toggle: () => void
+  contentRef: Ref<HTMLElement | null>
+  contentHeight: Ref<number>
+  updateContentHeight: () => void
+  shouldRender: Ref<boolean>
+  contentWrapperStyle: Ref<Record<string, string>>
+  sizeConfig: Ref<{ header: string; title: string; subtitle: string; icon: string; content: string; expandIcon: string }>
+  accordionContext: SAccordionContext | undefined
+}
+
+export const SAccordionItemContextKey: InjectionKey<SAccordionItemContext> = Symbol('SAccordionItemContext')
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { provide, ref, computed, watch } from 'vue'
+import { cn } from '../../../lib/utils'
+
+export interface Props {
+  /** Active item(s) - array for multiple mode, single value for single mode */
+  modelValue?: string | number | (string | number)[]
+  /** Visual variant */
+  type?: AccordionType
+  /** Size variant */
+  size?: AccordionSize
+  /** Allow multiple items to be expanded */
+  multiple?: boolean
+  /** Allow all items to be collapsed (in single mode) */
+  collapsible?: boolean
+  /** Expand icon position */
+  iconPlacement?: IconPlacement
+  /** Icon rotation angle when expanded */
+  iconRotation?: number
+  /** Enable height transitions */
+  animated?: boolean
+  /** Show dividers between items */
+  divider?: boolean
+  /** Active/accent color */
+  color?: string
+  /** Dense mode for compact layout */
+  dense?: boolean
+  /** Additional classes for the accordion */
+  accordionClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  type: 'default',
+  size: 'medium',
+  multiple: false,
+  collapsible: true,
+  iconPlacement: 'right',
+  iconRotation: 180,
+  animated: true,
+  divider: true,
+  color: 'var(--s-primary)',
+  dense: false,
+  accordionClass: ''
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | (string | number)[]]
+  'change': [name: string | number, expanded: boolean]
+  'before-expand': [name: string | number]
+  'after-expand': [name: string | number]
+  'before-collapse': [name: string | number]
+  'after-collapse': [name: string | number]
+}>()
+
+// State
+const registeredItems = ref<AccordionItemInfo[]>([])
+const activeItems = ref<Set<string | number>>(new Set())
+
+// Initialize from modelValue
+const initializeActiveItems = () => {
+  if (props.modelValue === undefined) return
+  
+  activeItems.value.clear()
+  if (Array.isArray(props.modelValue)) {
+    props.modelValue.forEach(v => activeItems.value.add(v))
+  } else if (props.modelValue !== null) {
+    activeItems.value.add(props.modelValue)
+  }
+}
+
+// Watch modelValue changes
+watch(() => props.modelValue, initializeActiveItems, { immediate: true })
+
+// Methods
+const registerItem = (item: AccordionItemInfo) => {
+  if (!registeredItems.value.find(i => i.name === item.name)) {
+    registeredItems.value.push(item)
+  }
+}
+
+const unregisterItem = (name: string | number) => {
+  const index = registeredItems.value.findIndex(i => i.name === name)
+  if (index > -1) {
+    registeredItems.value.splice(index, 1)
+  }
+}
+
+const isExpanded = (name: string | number): boolean => {
+  return activeItems.value.has(name)
+}
+
+const toggleItem = (name: string | number) => {
+  const item = registeredItems.value.find(i => i.name === name)
+  if (item?.disabled) return
+
+  const currentlyExpanded = isExpanded(name)
+
+  if (currentlyExpanded) {
+    // Collapsing
+    if (!props.collapsible && !props.multiple && activeItems.value.size === 1) {
+      return // Can't collapse if not collapsible and it's the only one open
+    }
+    
+    emit('before-collapse', name)
+    activeItems.value.delete(name)
+    emit('change', name, false)
+    
+    setTimeout(() => emit('after-collapse', name), props.animated ? 300 : 0)
+  } else {
+    // Expanding
+    emit('before-expand', name)
+    
+    if (!props.multiple) {
+      // Close all others first
+      activeItems.value.forEach(n => {
+        if (n !== name) {
+          emit('before-collapse', n)
+          emit('change', n, false)
+          setTimeout(() => emit('after-collapse', n), props.animated ? 300 : 0)
+        }
+      })
+      activeItems.value.clear()
+    }
+    
+    activeItems.value.add(name)
+    emit('change', name, true)
+    
+    setTimeout(() => emit('after-expand', name), props.animated ? 300 : 0)
+  }
+
+  // Emit modelValue update
+  emitModelValue()
+}
+
+const emitModelValue = () => {
+  if (props.multiple) {
+    emit('update:modelValue', Array.from(activeItems.value))
+  } else {
+    const first = activeItems.value.values().next().value
+    emit('update:modelValue', first ?? ('' as string | number))
+  }
+}
+
+// Computed classes
+const accordionClasses = computed(() => {
+  const base = 'w-full'
+  
+  const typeClasses = {
+    default: '',
+    bordered: 'border border-border rounded-xl overflow-hidden',
+    separated: 'space-y-3',
+    card: 'space-y-3',
+    minimal: ''
+  }
+  
+  return `${base} ${typeClasses[props.type]} ${props.accordionClass}`
+})
+
+// Provide context
+provide(SAccordionContextKey, {
+  activeItems,
+  type: props.type,
+  size: props.size,
+  multiple: props.multiple,
+  collapsible: props.collapsible,
+  iconPlacement: props.iconPlacement,
+  iconRotation: props.iconRotation,
+  animated: props.animated,
+  divider: props.divider,
+  dense: props.dense,
+  color: props.color,
+  registerItem,
+  unregisterItem,
+  toggleItem,
+  isExpanded
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(accordionClasses, $attrs.class ?? '')"
+    role="region"
+    aria-label="Accordion"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Base accordion styles */
+</style>

package/registry/source/components/ui/accordion/SAccordionItem.vue

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, provide, useSlots } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SAccordionContextKey, SAccordionItemContextKey, type SAccordionContext } from './SAccordion.vue'
+
+export interface Props {
+  /** Unique identifier for this item */
+  name: string | number
+  /** Header title text */
+  title?: string
+  /** Optional subtitle text */
+  subtitle?: string
+  /** MDI icon name for header */
+  icon?: string
+  /** Custom expand icon (MDI icon name, replaces default chevron) */
+  expandIcon?: string
+  /** Disable this item */
+  disabled?: boolean
+  /** Lazy render content */
+  lazy?: boolean
+  /** Custom header classes */
+  headerClass?: string
+  /** Custom content classes */
+  contentClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  subtitle: undefined,
+  icon: undefined,
+  expandIcon: undefined,
+  disabled: false,
+  lazy: false,
+  headerClass: '',
+  contentClass: ''
+})
+
+const emit = defineEmits<{
+  'toggle': [expanded: boolean]
+}>()
+
+const slots = useSlots()
+
+// Inject context
+const context = inject<SAccordionContext>(SAccordionContextKey)
+
+if (!context) {
+  console.warn('[SAccordionItem] Must be used inside SAccordion')
+}
+
+// Refs
+const contentRef = ref<HTMLElement | null>(null)
+const contentHeight = ref(0)
+const hasBeenExpanded = ref(false)
+
+// Computed
+const isExpanded = computed(() => context?.isExpanded(props.name) ?? false)
+const disabledRef = computed(() => props.disabled)
+const shouldRender = computed(() => {
+  if (!props.lazy) return true
+  return hasBeenExpanded.value
+})
+
+// Watch expansion state for lazy loading
+watch(isExpanded, (expanded) => {
+  if (expanded) {
+    hasBeenExpanded.value = true
+  }
+  emit('toggle', expanded)
+  nextTick(() => updateContentHeight())
+})
+
+// Update content height for animation
+const updateContentHeight = () => {
+  if (contentRef.value) {
+    contentHeight.value = contentRef.value.scrollHeight
+  }
+}
+
+// Register/unregister with parent
+onMounted(() => {
+  context?.registerItem({ name: props.name, disabled: props.disabled })
+  updateContentHeight()
+})
+
+onBeforeUnmount(() => {
+  context?.unregisterItem(props.name)
+})
+
+// Toggle handler
+const toggle = () => {
+  if (props.disabled) return
+  context?.toggleItem(props.name)
+}
+
+// Keyboard handler
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    toggle()
+  }
+}
+
+// Size configurations
+const sizeConfig = computed(() => {
+  const isDense = context?.dense ?? false
+
+  const sizes = {
+    small: {
+      header: isDense ? 'py-1 px-2' : 'py-1 px-2',
+      title: isDense ? 'text-xs' : 'text-sm',
+      subtitle: 'text-[10px]',
+      icon: 'text-sm',
+      content: isDense ? 'px-2 pt-1 pb-2 text-xs' : 'px-2 pt-1 pb-2 text-sm',
+      expandIcon: 'text-base'
+    },
+    medium: {
+      header: isDense ? 'py-1 px-2' : 'py-1 px-3',
+      title: isDense ? 'text-sm' : 'text-base',
+      subtitle: isDense ? 'text-xs' : 'text-sm',
+      icon: 'text-base',
+      content: isDense ? 'px-2 pt-1 pb-2 text-sm' : 'px-2.5 pt-1.5 pb-2.5',
+      expandIcon: isDense ? 'text-lg' : 'text-xl'
+    },
+    large: {
+      header: isDense ? 'py-1 px-2.5' : 'py-1 px-2.5',
+      title: isDense ? 'text-base' : 'text-lg',
+      subtitle: isDense ? 'text-sm' : 'text-sm',
+      icon: 'text-lg',
+      content: isDense ? 'px-2.5 pt-1.5 pb-2.5' : 'px-3 pt-2 pb-3',
+      expandIcon: isDense ? 'text-xl' : 'text-2xl'
+    }
+  }
+  return sizes[context?.size ?? 'medium']
+})
+
+// Type-based classes
+const itemClasses = computed(() => {
+  const type = context?.type ?? 'default'
+
+  const typeClasses = {
+    default: '',
+    bordered: '',
+    separated: 'rounded-xl border border-border overflow-hidden',
+    card: 'rounded-xl bg-background border border-border shadow-sm overflow-hidden',
+    minimal: ''
+  }
+
+  return typeClasses[type]
+})
+
+const headerClasses = computed(() => {
+  const type = context?.type ?? 'default'
+  const base = `
+    w-full flex items-center gap-3 cursor-pointer select-none
+    transition-all duration-300 ease-out
+    focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
+  `
+
+  const typeStyles = {
+    default: 'hover:bg-accent',
+    bordered: 'hover:bg-accent',
+    separated: 'bg-background hover:bg-accent',
+    card: 'hover:bg-accent',
+    minimal: 'hover:text-primary'
+  }
+
+  const disabledStyles = props.disabled
+    ? 'opacity-50 cursor-not-allowed'
+    : ''
+
+  const expandedStyles = isExpanded.value && !props.disabled
+    ? 'bg-accent/50'
+    : ''
+
+  return `${base} ${sizeConfig.value.header} ${typeStyles[type]} ${disabledStyles} ${expandedStyles} ${props.headerClass}`
+})
+
+const contentWrapperStyle = computed(() => {
+  if (!context?.animated) {
+    return isExpanded.value ? {} : { display: 'none' }
+  }
+
+  return {
+    maxHeight: isExpanded.value ? `${contentHeight.value}px` : '0px',
+    opacity: isExpanded.value ? '1' : '0',
+    overflow: 'hidden',
+    transition: 'max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease'
+  }
+})
+
+const expandIconStyle = computed(() => {
+  const rotation = isExpanded.value ? context?.iconRotation ?? 180 : 0
+  return {
+    transform: `rotate(${rotation}deg)`,
+    transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    color: isExpanded.value && !props.disabled ? context?.color : undefined
+  }
+})
+
+// Show divider
+const showDivider = computed(() => {
+  if (!context?.divider) return false
+  const type = context?.type ?? 'default'
+  return type === 'default' || type === 'bordered'
+})
+
+// Flex direction for icon placement
+const headerFlexClass = computed(() => {
+  return context?.iconPlacement === 'left' ? 'flex-row-reverse' : ''
+})
+
+// Detect compound usage: if default slot contains SAccordionTrigger/SAccordionContent
+// we use compound mode (no built-in header/content rendering)
+const isCompound = computed(() => {
+  // If title prop is not set and no header slot override, check for compound usage
+  // The heuristic: if there's no title and no #header slot, assume compound
+  if (props.title) return false
+  return true
+})
+
+// Provide item context for SAccordionTrigger and SAccordionContent
+provide(SAccordionItemContextKey, {
+  isExpanded,
+  disabled: disabledRef,
+  toggle,
+  contentRef,
+  contentHeight,
+  updateContentHeight,
+  shouldRender,
+  contentWrapperStyle,
+  sizeConfig,
+  accordionContext: context
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn('s-accordion-item', itemClasses, $attrs.class ?? '')"
+  >
+    <!-- Compound API: just render the slot, subcomponents handle their own rendering -->
+    <template v-if="isCompound && !title">
+      <slot :expanded="isExpanded" :toggle="toggle" :disabled="disabled" />
+    </template>
+
+    <!-- Simple API: built-in header + content -->
+    <template v-else>
+      <!-- Header -->
+      <button
+        type="button"
+        role="button"
+        :aria-expanded="isExpanded"
+        :aria-disabled="disabled"
+        :disabled="disabled"
+        :class="headerClasses"
+        :style="{ justifyContent: context?.iconPlacement === 'left' ? 'flex-start' : 'space-between' }"
+        @click="toggle"
+        @keydown="handleKeydown"
+      >
+        <div
+          class="flex items-center gap-3 flex-1 min-w-0"
+          :class="headerFlexClass"
+        >
+          <!-- Custom Header Slot -->
+          <slot
+            name="header"
+            :expanded="isExpanded"
+            :toggle="toggle"
+            :disabled="disabled"
+          >
+            <!-- Icon -->
+            <span
+              v-if="icon"
+              :class="['mdi', `mdi-${icon}`, sizeConfig.icon, 'shrink-0 text-muted-foreground']"
+              :style="isExpanded ? { color: context?.color } : {}"
+            />
+
+            <!-- Title & Subtitle -->
+            <div class="flex flex-col items-start min-w-0 flex-1">
+              <slot name="title">
+                <span
+                  :class="[sizeConfig.title, 'font-medium text-foreground truncate w-full text-left']"
+                >
+                  {{ title }}
+                </span>
+              </slot>
+              <slot name="subtitle">
+                <span
+                  v-if="subtitle"
+                  :class="[sizeConfig.subtitle, 'text-muted-foreground truncate w-full text-left']"
+                >
+                  {{ subtitle }}
+                </span>
+              </slot>
+            </div>
+          </slot>
+
+          <!-- Extra Slot -->
+          <slot name="extra" />
+        </div>
+
+        <!-- Expand Icon -->
+        <slot name="icon" :expanded="isExpanded">
+          <span
+            :class="['mdi shrink-0', `mdi-${expandIcon || 'chevron-down'}`, sizeConfig.expandIcon, 'text-muted-foreground']"
+            :style="expandIconStyle"
+          />
+        </slot>
+      </button>
+
+      <!-- Divider -->
+      <div
+        v-if="showDivider && !isExpanded"
+        class="border-b border-border"
+      />
+
+      <!-- Content -->
+      <div
+        ref="contentRef"
+        :style="contentWrapperStyle"
+        role="region"
+        :aria-hidden="!isExpanded"
+      >
+        <div
+          v-if="shouldRender"
+          :class="[sizeConfig.content, 'text-muted-foreground', contentClass]"
+        >
+          <slot />
+        </div>
+      </div>
+
+      <!-- Bottom Divider for expanded state -->
+      <div
+        v-if="showDivider && isExpanded"
+        class="border-b border-border"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.s-accordion-item {
+  background: transparent;
+}
+
+/* Active state highlight */
+button:active:not(:disabled) {
+  transform: scale(0.995);
+}
+</style>

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

@@ -0,0 +1,5 @@
+// Re-export components for convenience
+export { default as SAccordion } from './SAccordion.vue'
+export { default as SAccordionItem } from './SAccordionItem.vue'
+export { default as SAccordionTrigger } from './SAccordionTrigger.vue'
+export { default as SAccordionContent } from './SAccordionContent.vue'