@sakoa/ui 0.1.0

package/registry/source/components/ui/card/SCardContent.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { cn } from '../../../lib/utils'
+import { cardContextKey, type CardContext } from './index'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  /** Custom padding */
+  padding?: string
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right' | 'justify'
+  /** Make content scrollable with max height */
+  maxHeight?: string
+  /** Show skeleton loading state */
+  skeleton?: boolean
+  /** Number of skeleton lines */
+  skeletonLines?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  padding: undefined,
+  align: 'left',
+  maxHeight: undefined,
+  skeleton: false,
+  skeletonLines: 3
+})
+
+const cardContext = inject(cardContextKey, {
+  variant: 'elevated',
+  hoverable: false,
+  loading: false,
+  horizontal: false
+} as CardContext)
+
+const alignClasses = computed(() => {
+  const alignments = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+    justify: 'text-justify'
+  }
+  return alignments[props.align]
+})
+
+const computedStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.padding) style.padding = props.padding
+  if (props.maxHeight) {
+    style.maxHeight = props.maxHeight
+    style.overflowY = 'auto'
+  }
+  return style
+})
+
+// Generate random widths for skeleton lines
+const skeletonWidths = computed(() => {
+  const widths = ['100%', '80%', '90%', '70%', '85%', '75%', '95%']
+  return Array.from({ length: props.skeletonLines }, (_, i) => 
+    widths[i % widths.length]
+  )
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-card-content text-muted-foreground',
+      alignClasses,
+      ($attrs.class as string)
+    )"
+    :style="computedStyle"
+  >
+    <!-- Skeleton loading state -->
+    <template v-if="skeleton || cardContext.loading">
+      <div class="space-y-3 animate-pulse">
+        <div 
+          v-for="(width, index) in skeletonWidths" 
+          :key="index"
+          class="h-4 bg-accent rounded"
+          :style="{ width }"
+        />
+      </div>
+    </template>
+    
+    <!-- Normal content -->
+    <template v-else>
+      <slot />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.s-card-content {
+  line-height: 1.6;
+}
+
+/* Custom scrollbar for scrollable content */
+.s-card-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.s-card-content::-webkit-scrollbar-track {
+  background: var(--s-accent);
+  border-radius: 3px;
+}
+
+.s-card-content::-webkit-scrollbar-thumb {
+  background: var(--s-input);
+  border-radius: 3px;
+}
+
+.s-card-content::-webkit-scrollbar-thumb:hover {
+  background: var(--s-muted-foreground);
+}
+</style>

package/registry/source/components/ui/card/SCardFooter.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { cn } from '../../../lib/utils'
+import { cardContextKey, type CardContext } from './index'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  /** Show divider above footer */
+  divider?: boolean
+  /** Justify content */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+  /** Alignment */
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  /** Gap between items */
+  gap?: 'none' | 'sm' | 'md' | 'lg'
+  /** Custom padding */
+  padding?: string
+  /** Stack items vertically on mobile */
+  stackOnMobile?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  divider: false,
+  justify: 'end',
+  align: 'center',
+  gap: 'md',
+  padding: undefined,
+  stackOnMobile: false
+})
+
+// Card context available for future enhancements
+inject(cardContextKey, {
+  variant: 'elevated',
+  hoverable: false,
+  loading: false,
+  horizontal: false
+} as CardContext)
+
+const justifyClasses = computed(() => {
+  const justifications = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly'
+  }
+  return justifications[props.justify]
+})
+
+const alignClasses = computed(() => {
+  const alignments = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch'
+  }
+  return alignments[props.align]
+})
+
+const gapClasses = computed(() => {
+  const gaps = {
+    none: 'gap-0',
+    sm: 'gap-2',
+    md: 'gap-3',
+    lg: 'gap-4'
+  }
+  return gaps[props.gap]
+})
+
+const computedStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.padding) style.padding = props.padding
+  return style
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-card-footer flex flex-wrap',
+      justifyClasses,
+      alignClasses,
+      gapClasses,
+      {
+        'pt-4 mt-4 border-t border-border': divider,
+        'flex-col sm:flex-row': stackOnMobile
+      },
+      ($attrs.class as string)
+    )"
+    :style="computedStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.s-card-footer {
+  /* Inherits from parent */
+}
+</style>

package/registry/source/components/ui/card/SCardHeader.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { cn } from '../../../lib/utils'
+import { cardContextKey, type CardContext } from './index'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  /** Title text */
+  title?: string
+  /** Subtitle text */
+  subtitle?: string
+  /** Avatar image URL */
+  avatar?: string
+  /** Avatar fallback text (initials) */
+  avatarFallback?: string
+  /** Icon name (MDI) */
+  icon?: string
+  /** Icon color */
+  iconColor?: string
+  /** Show divider below header */
+  divider?: boolean
+  /** Layout direction */
+  layout?: 'horizontal' | 'vertical'
+  /** Alignment */
+  align?: 'start' | 'center' | 'end'
+  /** Custom padding */
+  padding?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  subtitle: undefined,
+  avatar: undefined,
+  avatarFallback: undefined,
+  icon: undefined,
+  iconColor: 'var(--s-primary)',
+  divider: false,
+  layout: 'horizontal',
+  align: 'start'
+})
+
+// Card context available for future enhancements
+inject(cardContextKey, {
+  variant: 'elevated',
+  hoverable: false,
+  loading: false,
+  horizontal: false
+} as CardContext)
+
+const alignmentClasses = computed(() => {
+  if (props.layout === 'vertical') {
+    const alignments = {
+      start: 'items-start text-left',
+      center: 'items-center text-center',
+      end: 'items-end text-right'
+    }
+    return alignments[props.align]
+  }
+  return ''
+})
+
+const computedStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.padding) style.padding = props.padding
+  return style
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-card-header',
+      {
+        'flex items-center gap-3': layout === 'horizontal',
+        'flex flex-col gap-2': layout === 'vertical',
+        'pb-4 border-b border-border': divider
+      },
+      alignmentClasses,
+      ($attrs.class as string)
+    )"
+    :style="computedStyle"
+  >
+    <!-- Avatar/Icon -->
+    <div 
+      v-if="avatar || avatarFallback || icon || $slots.avatar" 
+      class="shrink-0"
+    >
+      <slot name="avatar">
+        <!-- Avatar with image -->
+        <div 
+          v-if="avatar" 
+          class="w-10 h-10 rounded-full overflow-hidden ring-2 ring-border"
+        >
+          <img 
+            :src="avatar" 
+            :alt="title || 'Avatar'"
+            class="w-full h-full object-cover"
+          />
+        </div>
+        
+        <!-- Avatar with fallback -->
+        <div 
+          v-else-if="avatarFallback" 
+          class="w-10 h-10 rounded-full bg-accent flex items-center justify-center text-sm font-semibold text-muted-foreground"
+        >
+          {{ avatarFallback }}
+        </div>
+        
+        <!-- Icon -->
+        <div 
+          v-else-if="icon" 
+          class="w-10 h-10 rounded-xl bg-primary/15 flex items-center justify-center"
+        >
+          <span 
+            class="mdi text-xl"
+            :class="`mdi-${icon}`"
+            :style="{ color: iconColor }"
+          />
+        </div>
+      </slot>
+    </div>
+    
+    <!-- Text content -->
+    <div class="flex-1 min-w-0">
+      <slot name="title">
+        <h3 
+          v-if="title" 
+          class="text-base font-semibold text-foreground leading-tight truncate"
+        >
+          {{ title }}
+        </h3>
+      </slot>
+      
+      <slot name="subtitle">
+        <p 
+          v-if="subtitle" 
+          class="text-sm text-muted-foreground mt-0.5 truncate"
+        >
+          {{ subtitle }}
+        </p>
+      </slot>
+    </div>
+    
+    <!-- Actions slot (right side) -->
+    <div 
+      v-if="$slots.actions" 
+      class="shrink-0 flex items-center gap-2"
+    >
+      <slot name="actions" />
+    </div>
+    
+    <!-- Default slot for custom content -->
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.s-card-header {
+  /* Inherits from parent */
+}
+</style>

package/registry/source/components/ui/card/SCardMedia.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { cn } from '../../../lib/utils'
+import { cardContextKey, type CardContext } from './index'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  /** Image source URL */
+  src?: string
+  /** Video source URL */
+  video?: string
+  /** Alt text for image */
+  alt?: string
+  /** Aspect ratio */
+  ratio?: 'auto' | '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16'
+  /** Height override */
+  height?: string
+  /** Object fit */
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+  /** Enable zoom on hover */
+  zoom?: boolean
+  /** Zoom scale factor */
+  zoomScale?: number
+  /** Overlay color (gradient or solid) */
+  overlay?: string
+  /** Overlay opacity (0-1) */
+  overlayOpacity?: number
+  /** Show overlay content always or on hover */
+  overlayMode?: 'always' | 'hover'
+  /** Position in card layout */
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'background'
+  /** Border radius override */
+  rounded?: 'none' | 'inherit' | 'sm' | 'md' | 'lg' | 'xl'
+  /** Video autoplay */
+  autoplay?: boolean
+  /** Video loop */
+  loop?: boolean
+  /** Video muted */
+  muted?: boolean
+  /** Video controls */
+  controls?: boolean
+  /** Lazy load image */
+  lazy?: boolean
+  /** Placeholder blur */
+  placeholder?: string
+  /** Skeleton loading */
+  skeleton?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: undefined,
+  video: undefined,
+  alt: '',
+  ratio: 'auto',
+  height: undefined,
+  fit: 'cover',
+  zoom: false,
+  zoomScale: 1.1,
+  overlay: undefined,
+  overlayOpacity: 0.5,
+  overlayMode: 'always',
+  position: 'top',
+  rounded: 'inherit',
+  autoplay: false,
+  loop: true,
+  muted: true,
+  controls: false,
+  lazy: true,
+  placeholder: undefined,
+  skeleton: false
+})
+
+const cardContext = inject(cardContextKey, {
+  variant: 'elevated',
+  hoverable: false,
+  loading: false,
+  horizontal: false
+} as CardContext)
+
+const isLoaded = ref(!props.lazy)
+const isHovered = ref(false)
+const hasError = ref(false)
+
+const aspectRatioClasses = computed(() => {
+  if (props.height || props.ratio === 'auto') return ''
+  
+  const ratios = {
+    '1/1': 'aspect-square',
+    '4/3': 'aspect-[4/3]',
+    '16/9': 'aspect-video',
+    '21/9': 'aspect-[21/9]',
+    '3/4': 'aspect-[3/4]',
+    '9/16': 'aspect-[9/16]',
+    'auto': ''
+  }
+  return ratios[props.ratio]
+})
+
+const fitClasses = computed(() => {
+  const fits = {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill',
+    none: 'object-none',
+    'scale-down': 'object-scale-down'
+  }
+  return fits[props.fit]
+})
+
+const roundedClasses = computed(() => {
+  const radii = {
+    none: 'rounded-none',
+    inherit: '',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl'
+  }
+  return radii[props.rounded]
+})
+
+const positionClasses = computed(() => {
+  const positions = {
+    top: '-mx-4 -mt-4 sm:-mx-5 sm:-mt-5 mb-4',
+    bottom: '-mx-4 -mb-4 sm:-mx-5 sm:-mb-5 mt-4',
+    left: '',
+    right: '',
+    background: 'absolute inset-0 -z-10'
+  }
+  return positions[props.position]
+})
+
+const computedStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.height) style.height = props.height
+  return style
+})
+
+const overlayStyle = computed(() => {
+  if (!props.overlay) return {}
+  
+  const style: Record<string, string> = {
+    background: props.overlay.includes('gradient') 
+      ? props.overlay 
+      : props.overlay,
+    opacity: String(props.overlayOpacity)
+  }
+  return style
+})
+
+const handleLoad = () => {
+  isLoaded.value = true
+}
+
+const handleError = () => {
+  hasError.value = true
+  isLoaded.value = true
+}
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="cn(
+      's-card-media relative overflow-hidden',
+      aspectRatioClasses,
+      roundedClasses,
+      positionClasses,
+      {
+        'rounded-t-lg': position === 'top' && rounded === 'inherit',
+        'rounded-b-lg': position === 'bottom' && rounded === 'inherit',
+        'w-1/3 shrink-0': cardContext.horizontal && (position === 'left' || position === 'right')
+      },
+      ($attrs.class as string)
+    )"
+    :style="computedStyle"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <!-- Skeleton loading -->
+    <div 
+      v-if="skeleton || cardContext.loading || (!isLoaded && !hasError)" 
+      class="absolute inset-0 bg-accent animate-pulse"
+    >
+      <div class="absolute inset-0 s-card-media-shimmer" />
+    </div>
+    
+    <!-- Placeholder/blur while loading -->
+    <img 
+      v-if="placeholder && !isLoaded" 
+      :src="placeholder"
+      :alt="alt"
+      class="absolute inset-0 w-full h-full blur-lg scale-110"
+      :class="fitClasses"
+    />
+    
+    <!-- Main image -->
+    <img 
+      v-if="src && !hasError"
+      :src="src"
+      :alt="alt"
+      :loading="lazy ? 'lazy' : 'eager'"
+      class="w-full h-full transition-all duration-500"
+      :class="[
+        fitClasses,
+        {
+          'opacity-0': !isLoaded,
+          'opacity-100': isLoaded,
+          'scale-100': !isHovered || !zoom,
+          'scale-110': isHovered && zoom
+        }
+      ]"
+      :style="{ transform: zoom && isHovered ? `scale(${zoomScale})` : undefined }"
+      @load="handleLoad"
+      @error="handleError"
+    />
+    
+    <!-- Video -->
+    <video 
+      v-if="video"
+      :src="video"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      :controls="controls"
+      playsinline
+      class="w-full h-full transition-transform duration-500"
+      :class="[
+        fitClasses,
+        {
+          'scale-100': !isHovered || !zoom,
+          'scale-110': isHovered && zoom
+        }
+      ]"
+      @loadeddata="handleLoad"
+      @error="handleError"
+    />
+    
+    <!-- Error state -->
+    <div 
+      v-if="hasError" 
+      class="absolute inset-0 flex flex-col items-center justify-center bg-accent text-muted-foreground"
+    >
+      <span class="mdi mdi-image-broken-variant text-4xl mb-2" />
+      <span class="text-sm">Failed to load media</span>
+    </div>
+    
+    <!-- Overlay -->
+    <div 
+      v-if="overlay || $slots.overlay"
+      class="absolute inset-0 flex items-end transition-opacity duration-300"
+      :class="{
+        'opacity-0': overlayMode === 'hover' && !isHovered,
+        'opacity-100': overlayMode === 'always' || isHovered
+      }"
+      :style="overlayStyle"
+    >
+      <slot name="overlay" />
+    </div>
+    
+    <!-- Content overlay (for text on image) -->
+    <div 
+      v-if="$slots.default" 
+      class="absolute inset-0 flex items-center justify-center p-4"
+    >
+      <slot />
+    </div>
+    
+    <!-- Badge slot (top corner) -->
+    <div 
+      v-if="$slots.badge" 
+      class="absolute top-3 right-3 z-10"
+    >
+      <slot name="badge" />
+    </div>
+    
+    <!-- Action slot (bottom) -->
+    <div 
+      v-if="$slots.actions" 
+      class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent transition-opacity duration-300"
+      :class="{
+        'opacity-0': overlayMode === 'hover' && !isHovered,
+        'opacity-100': overlayMode === 'always' || isHovered
+      }"
+    >
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-card-media-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--s-muted) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>