@sakoa/ui 0.1.0

package/registry/source/components/ui/avatar/SAvatar.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { provide, reactive, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+
+export interface AvatarProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number
+  shape?: 'circle' | 'square' | 'rounded'
+  bordered?: boolean
+  borderColor?: string
+  ring?: boolean
+  ringColor?: string
+  status?: 'online' | 'offline' | 'busy' | 'away' | null
+  statusPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+}
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  size: 'md',
+  shape: 'circle',
+  bordered: false,
+  borderColor: 'var(--s-border)',
+  ring: false,
+  ringColor: 'var(--s-primary)',
+  status: null,
+  statusPosition: 'bottom-right'
+})
+
+// Provide context for child components
+const avatarState = reactive({
+  imageLoaded: false,
+  imageFailed: false
+})
+
+provide('avatarContext', {
+  state: avatarState,
+  setImageLoaded: (loaded: boolean) => {
+    avatarState.imageLoaded = loaded
+  },
+  setImageFailed: (failed: boolean) => {
+    avatarState.imageFailed = failed
+  }
+})
+
+// Size mapping
+const sizeValue = computed(() => {
+  if (typeof props.size === 'number') {
+    return `${props.size}px`
+  }
+  const sizes: Record<string, string> = {
+    xs: '1.5rem',
+    sm: '2rem',
+    md: '2.5rem',
+    lg: '3rem',
+    xl: '4rem',
+    '2xl': '5rem'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+// Font size for fallback
+const fontSizeValue = computed(() => {
+  if (typeof props.size === 'number') {
+    return `${props.size * 0.4}px`
+  }
+  const sizes: Record<string, string> = {
+    xs: '0.625rem',
+    sm: '0.75rem',
+    md: '0.875rem',
+    lg: '1rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+// Shape classes
+const shapeClasses = computed(() => {
+  const shapes: Record<string, string> = {
+    circle: 'rounded-full',
+    square: 'rounded-none',
+    rounded: 'rounded-lg'
+  }
+  return shapes[props.shape]
+})
+
+// Status dot size
+const statusSize = computed(() => {
+  if (typeof props.size === 'number') {
+    return `${Math.max(props.size * 0.25, 8)}px`
+  }
+  const sizes: Record<string, string> = {
+    xs: '0.375rem',
+    sm: '0.5rem',
+    md: '0.5rem',
+    lg: '0.625rem',
+    xl: '0.75rem',
+    '2xl': '0.875rem'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+// Status colors
+const statusColors: Record<string, string> = {
+  online: '#22c55e',
+  offline: '#6b7280',
+  busy: '#ef4444',
+  away: '#f59e0b'
+}
+
+// Status position classes
+const statusPositionClasses = computed(() => {
+  const positions: Record<string, string> = {
+    'top-right': 'top-0 right-0',
+    'top-left': 'top-0 left-0',
+    'bottom-right': 'bottom-0 right-0',
+    'bottom-left': 'bottom-0 left-0'
+  }
+  return positions[props.statusPosition]
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn('s-avatar relative inline-flex shrink-0 select-none', $attrs.class ?? '')"
+    :style="{
+      width: sizeValue,
+      height: sizeValue,
+      fontSize: fontSizeValue
+    }"
+  >
+    <!-- Inner container for image/fallback with overflow hidden -->
+    <div
+      class="s-avatar-inner relative w-full h-full flex items-center justify-center overflow-hidden bg-accent text-muted-foreground"
+      :class="[
+        shapeClasses,
+        {
+          'ring-2': bordered,
+          'ring-3 ring-offset-2 ring-offset-background': ring
+        }
+      ]"
+      :style="{
+        '--tw-ring-color': bordered ? borderColor : ringColor
+      }"
+    >
+      <slot />
+    </div>
+    
+    <!-- Status indicator (outside overflow container) -->
+    <span
+      v-if="status"
+      class="absolute z-10 rounded-full ring-2 ring-background"
+      :class="statusPositionClasses"
+      :style="{
+        width: statusSize,
+        height: statusSize,
+        backgroundColor: statusColors[status]
+      }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.s-avatar {
+  line-height: 1;
+  font-weight: 500;
+}
+</style>

package/registry/source/components/ui/avatar/SAvatarFallback.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { inject, computed, ref, watchEffect } from 'vue'
+
+interface Props {
+  delayMs?: number
+  color?: string
+  bgColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  delayMs: 0,
+  color: undefined,
+  bgColor: undefined
+})
+
+// Inject avatar context
+const avatarContext = inject<{
+  state: { imageLoaded: boolean; imageFailed: boolean }
+  setImageLoaded: (loaded: boolean) => void
+  setImageFailed: (failed: boolean) => void
+}>('avatarContext')
+
+const canRender = ref(props.delayMs === 0)
+
+// Show fallback logic
+const shouldShow = computed(() => {
+  if (!avatarContext) return canRender.value
+  // Show fallback if image failed OR if image hasn't loaded yet
+  return canRender.value && (!avatarContext.state.imageLoaded || avatarContext.state.imageFailed)
+})
+
+// Handle delay
+watchEffect(() => {
+  if (props.delayMs > 0 && !canRender.value) {
+    const timer = setTimeout(() => {
+      canRender.value = true
+    }, props.delayMs)
+    
+    return () => clearTimeout(timer)
+  }
+})
+
+// Custom styles
+const customStyles = computed(() => {
+  const styles: Record<string, string> = {}
+  if (props.color) styles.color = props.color
+  if (props.bgColor) styles.backgroundColor = props.bgColor
+  return styles
+})
+</script>
+
+<template>
+  <span
+    v-if="shouldShow"
+    v-bind="$attrs"
+    class="flex items-center justify-center w-full h-full uppercase font-medium"
+    :style="customStyles"
+  >
+    <slot>
+      <!-- Default fallback icon -->
+      <span class="mdi mdi-account text-[1.2em]" />
+    </slot>
+  </span>
+</template>

package/registry/source/components/ui/avatar/SAvatarGroup.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { computed, provide } from 'vue'
+import { cn } from '../../../lib/utils'
+
+interface Props {
+  max?: number
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number
+  spacing?: 'tight' | 'normal' | 'loose' | number
+  bordered?: boolean
+  borderColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: undefined,
+  size: 'md',
+  spacing: 'normal',
+  bordered: true,
+  borderColor: 'var(--s-background)'
+})
+
+// Provide group context to children
+provide('avatarGroupContext', {
+  size: props.size,
+  bordered: props.bordered,
+  borderColor: props.borderColor
+})
+
+// Spacing value
+const spacingValue = computed(() => {
+  if (typeof props.spacing === 'number') {
+    return `-${props.spacing}px`
+  }
+  const spacings: Record<string, string> = {
+    tight: '-0.75rem',
+    normal: '-0.5rem',
+    loose: '-0.25rem'
+  }
+  return spacings[props.spacing] || spacings.normal
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn('s-avatar-group flex items-center flex-row-reverse justify-end', $attrs.class ?? '')"
+    :style="{ '--avatar-spacing': spacingValue }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.s-avatar-group :deep(.s-avatar) {
+  margin-left: var(--avatar-spacing);
+  box-shadow: 0 0 0 2px var(--s-background);
+}
+
+.s-avatar-group :deep(.s-avatar:first-child) {
+  margin-left: 0;
+}
+
+.s-avatar-group :deep(.s-avatar:hover) {
+  z-index: 10;
+  transform: translateY(-2px);
+  transition: transform 0.2s ease;
+}
+</style>

package/registry/source/components/ui/avatar/SAvatarImage.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { ref, inject, onMounted, watch } from 'vue'
+
+interface Props {
+  src?: string
+  alt?: string
+  loading?: 'eager' | 'lazy'
+  crossorigin?: 'anonymous' | 'use-credentials' | ''
+  referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: undefined,
+  alt: 'Avatar',
+  loading: 'eager',
+  crossorigin: undefined,
+  referrerpolicy: undefined
+})
+
+const emit = defineEmits<{
+  load: [event: Event]
+  error: [event: Event]
+}>()
+
+// Inject avatar context
+const avatarContext = inject<{
+  state: { imageLoaded: boolean; imageFailed: boolean }
+  setImageLoaded: (loaded: boolean) => void
+  setImageFailed: (failed: boolean) => void
+}>('avatarContext')
+
+const imageRef = ref<HTMLImageElement | null>(null)
+const isLoaded = ref(false)
+const hasError = ref(false)
+
+const handleLoad = (event: Event) => {
+  isLoaded.value = true
+  hasError.value = false
+  avatarContext?.setImageLoaded(true)
+  avatarContext?.setImageFailed(false)
+  emit('load', event)
+}
+
+const handleError = (event: Event) => {
+  isLoaded.value = false
+  hasError.value = true
+  avatarContext?.setImageLoaded(false)
+  avatarContext?.setImageFailed(true)
+  emit('error', event)
+}
+
+// Reset state when src changes
+watch(() => props.src, () => {
+  isLoaded.value = false
+  hasError.value = false
+  avatarContext?.setImageLoaded(false)
+  avatarContext?.setImageFailed(false)
+})
+
+// Check if image is already cached
+onMounted(() => {
+  if (imageRef.value?.complete && imageRef.value?.naturalWidth > 0) {
+    isLoaded.value = true
+    avatarContext?.setImageLoaded(true)
+  }
+})
+</script>
+
+<template>
+  <img
+    v-if="src && !hasError"
+    v-bind="$attrs"
+    ref="imageRef"
+    :src="src"
+    :alt="alt"
+    :loading="loading"
+    :crossorigin="crossorigin"
+    :referrerpolicy="referrerpolicy"
+    class="absolute inset-0 w-full h-full object-cover"
+    :class="{ 'opacity-0': !isLoaded }"
+    @load="handleLoad"
+    @error="handleError"
+  />
+</template>
+
+<style scoped>
+img {
+  transition: opacity 0.2s ease-in-out;
+}
+</style>

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

@@ -0,0 +1,5 @@
+// Re-export components for convenience
+export { default as SAvatar } from './SAvatar.vue'
+export { default as SAvatarFallback } from './SAvatarFallback.vue'
+export { default as SAvatarGroup } from './SAvatarGroup.vue'
+export { default as SAvatarImage } from './SAvatarImage.vue'

package/registry/source/components/ui/breadcrumb/SBreadcrumb.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Breadcrumb'
+})
+</script>
+
+<template>
+  <nav
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="cn('s-breadcrumb w-full', ($attrs.class as string))"
+    :aria-label="label"
+  >
+    <slot />
+  </nav>
+</template>

package/registry/source/components/ui/breadcrumb/SBreadcrumbEllipsis.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <span
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="cn('s-breadcrumb-ellipsis inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground/70', ($attrs.class as string))"
+  >
+    <slot>
+      <span class="mdi mdi-dots-horizontal" aria-hidden="true"></span>
+      <span class="sr-only">More breadcrumb items</span>
+    </slot>
+  </span>
+</template>

package/registry/source/components/ui/breadcrumb/SBreadcrumbItem.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <li
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="cn('s-breadcrumb-item inline-flex min-w-0 items-center gap-1.5', ($attrs.class as string))"
+  >
+    <slot />
+  </li>
+</template>

package/registry/source/components/ui/breadcrumb/SBreadcrumbLink.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  tag?: string
+  href?: string
+  to?: string | object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: 'a',
+  href: undefined,
+  to: undefined
+})
+
+const componentTag = computed(() => {
+  if (props.to) return 'router-link'
+  if (props.href) return 'a'
+  return props.tag
+})
+
+const componentBindings = computed(() => {
+  const bindings: Record<string, unknown> = {}
+
+  if (props.to) bindings.to = props.to
+  if (props.href) bindings.href = props.href
+
+  return bindings
+})
+</script>
+
+<template>
+  <component
+    :is="componentTag"
+    v-bind="{ ...componentBindings, ...$attrs, class: undefined }"
+    :class="cn(
+      's-breadcrumb-link inline-flex items-center gap-1 rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2',
+      ($attrs.class as string)
+    )"
+  >
+    <slot />
+  </component>
+</template>

package/registry/source/components/ui/breadcrumb/SBreadcrumbList.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <ol
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="cn(
+      's-breadcrumb-list m-0 flex list-none flex-wrap items-center gap-1.5 break-words p-0 text-sm text-muted-foreground sm:gap-2.5',
+      ($attrs.class as string)
+    )"
+  >
+    <slot />
+  </ol>
+</template>

package/registry/source/components/ui/breadcrumb/SBreadcrumbPage.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <span
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="cn('s-breadcrumb-page inline-flex items-center gap-1 rounded-md font-medium text-foreground', ($attrs.class as string))"
+    aria-current="page"
+  >
+    <slot />
+  </span>
+</template>

package/registry/source/components/ui/breadcrumb/SBreadcrumbSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <li
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="cn('s-breadcrumb-separator inline-flex items-center justify-center text-muted-foreground/70', ($attrs.class as string))"
+    role="presentation"
+    aria-hidden="true"
+  >
+    <slot>
+      <span class="mdi mdi-chevron-right text-sm"></span>
+    </slot>
+  </li>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as SBreadcrumb } from './SBreadcrumb.vue'
+export { default as SBreadcrumbList } from './SBreadcrumbList.vue'
+export { default as SBreadcrumbItem } from './SBreadcrumbItem.vue'
+export { default as SBreadcrumbLink } from './SBreadcrumbLink.vue'
+export { default as SBreadcrumbPage } from './SBreadcrumbPage.vue'
+export { default as SBreadcrumbSeparator } from './SBreadcrumbSeparator.vue'
+export { default as SBreadcrumbEllipsis } from './SBreadcrumbEllipsis.vue'