@sakoa/ui 0.1.0

package/registry/components/tabs.json

@@ -0,0 +1,19 @@
+{
+  "name": "tabs",
+  "displayName": "STabs",
+  "description": "Tabs with tab panes, dynamic tab management, and customizable styling",
+  "version": "0.1.0",
+  "files": [
+    "components/ui/tabs/index.ts",
+    "components/ui/tabs/STabs.vue",
+    "components/ui/tabs/STabPane.vue"
+  ],
+  "dependencies": [],
+  "composables": [],
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@mdi/font": "^7.0.0"
+  }
+}

package/registry/components/toast.json

@@ -0,0 +1,19 @@
+{
+  "name": "toast",
+  "displayName": "SToast",
+  "description": "Toast notifications with container, auto-dismiss, stacking, and position variants",
+  "version": "0.1.0",
+  "files": [
+    "components/ui/toast/index.ts",
+    "components/ui/toast/SToast.vue",
+    "components/ui/toast/SToastContainer.vue"
+  ],
+  "dependencies": [],
+  "composables": ["useToast"],
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@mdi/font": "^7.0.0"
+  }
+}

package/registry/components/tooltip.json

@@ -0,0 +1,14 @@
+{
+  "name": "tooltip",
+  "displayName": "STooltip",
+  "description": "Tooltip with positioning, triggers, delays, and arrow indicator",
+  "version": "0.1.0",
+  "files": [
+    "components/ui/STooltip.vue"
+  ],
+  "dependencies": [],
+  "composables": [],
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}

package/registry/index.json

@@ -0,0 +1,4 @@
+{
+  "version": "0.1.0",
+  "components": ["accordion", "alert", "avatar", "badge", "button", "breadcrumb", "card", "carousel", "checkbox", "chip", "color-picker", "date-picker", "drawer", "dropdown", "form", "glass-button", "icon", "input", "kbd", "modal", "option", "otp", "pagination", "progress", "radio", "select", "skeleton", "switch", "table", "tabs", "toast", "tooltip"]
+}

package/registry/source/components/ui/SAlert.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+const alertVariants = cva(
+  'relative overflow-hidden transition-all duration-300 max-w-[600px] min-w-[300px]',
+  {
+    variants: {
+      variant: {
+        success: 'bg-emerald-50 dark:bg-emerald-950/50 text-emerald-800 dark:text-emerald-200',
+        warning: 'bg-amber-50 dark:bg-amber-950/50 text-amber-800 dark:text-amber-200',
+        error: 'bg-red-50 dark:bg-red-950/50 text-red-800 dark:text-red-200',
+        info: 'bg-blue-50 dark:bg-blue-950/50 text-blue-800 dark:text-blue-200',
+        custom: 'bg-muted text-foreground',
+      },
+      size: {
+        small: 'p-3',
+        medium: 'p-4',
+        large: 'p-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'info',
+      size: 'medium',
+    },
+  }
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
+
+const variantIconColors: Record<string, string> = {
+  success: 'text-emerald-600 dark:text-emerald-400',
+  warning: 'text-amber-600 dark:text-amber-400',
+  error: 'text-red-600 dark:text-red-400',
+  info: 'text-blue-600 dark:text-blue-400',
+  custom: 'text-current',
+}
+
+const variantBorderColors: Record<string, string> = {
+  success: 'border-emerald-500',
+  warning: 'border-amber-500',
+  error: 'border-red-500',
+  info: 'border-blue-500',
+  custom: 'border-current',
+}
+
+const variantProgressColors: Record<string, string> = {
+  success: 'bg-emerald-500',
+  warning: 'bg-amber-500',
+  error: 'bg-red-500',
+  info: 'bg-blue-500',
+  custom: 'bg-current',
+}
+
+const sizeConfig: Record<string, { gap: string; iconSize: string; titleSize: string; textSize: string }> = {
+  small: { gap: 'gap-2', iconSize: 'text-lg', titleSize: 'text-sm font-semibold', textSize: 'text-xs' },
+  medium: { gap: 'gap-3', iconSize: 'text-xl', titleSize: 'text-base font-semibold', textSize: 'text-sm' },
+  large: { gap: 'gap-4', iconSize: 'text-2xl', titleSize: 'text-lg font-semibold', textSize: 'text-base' },
+}
+
+export interface Props {
+  variant?: 'success' | 'warning' | 'error' | 'info' | 'custom'
+  size?: 'small' | 'medium' | 'large'
+  title?: string
+  description?: string
+  icon?: string | boolean
+  closable?: boolean
+  autoDismiss?: boolean
+  duration?: number
+  showProgress?: boolean
+  color?: string
+  position?: 'static' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  elevation?: boolean
+  border?: 'none' | 'left' | 'top' | 'all'
+  rounded?: boolean
+  dismissible?: boolean
+  contentClass?: string
+  iconClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  size: 'medium',
+  title: undefined,
+  description: undefined,
+  icon: true,
+  closable: true,
+  autoDismiss: false,
+  duration: 5000,
+  showProgress: true,
+  color: undefined,
+  position: 'static',
+  elevation: true,
+  border: 'left',
+  rounded: true,
+  dismissible: false,
+  contentClass: undefined,
+  iconClass: undefined,
+})
+
+const emit = defineEmits<{
+  close: []
+  dismiss: []
+}>()
+
+// Refs
+const isVisible = ref(true)
+const isPaused = ref(false)
+const progress = ref(100)
+const dismissTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+const progressInterval = ref<ReturnType<typeof setInterval> | null>(null)
+const startTime = ref<number>(0)
+const remainingTime = ref<number>(props.duration)
+
+// Computed
+const defaultIcons = computed(() => ({
+  success: 'check-circle',
+  warning: 'alert',
+  error: 'alert-circle',
+  info: 'information',
+}))
+
+const displayIcon = computed(() => {
+  if (props.icon === false) return null
+  if (typeof props.icon === 'string') return props.icon
+  return defaultIcons.value[props.variant as keyof typeof defaultIcons.value] || 'information'
+})
+
+const sizes = computed(() => sizeConfig[props.size])
+
+const borderClasses = computed(() => {
+  if (props.border === 'none') return ''
+  const borderColor = variantBorderColors[props.variant]
+  if (props.border === 'left') return `border-l-4 ${borderColor}`
+  if (props.border === 'top') return `border-t-4 ${borderColor}`
+  if (props.border === 'all') return `border-2 ${borderColor}`
+  return ''
+})
+
+const positionClasses = computed(() => {
+  if (props.position === 'static') return ''
+  const positions: Record<string, string> = {
+    top: 'fixed top-4 left-1/2 -translate-x-1/2 z-50',
+    bottom: 'fixed bottom-4 left-1/2 -translate-x-1/2 z-50',
+    'top-left': 'fixed top-4 left-4 z-50',
+    'top-right': 'fixed top-4 right-4 z-50',
+    'bottom-left': 'fixed bottom-4 left-4 z-50',
+    'bottom-right': 'fixed bottom-4 right-4 z-50',
+  }
+  return positions[props.position] || ''
+})
+
+const customStyle = computed(() => {
+  if (props.variant !== 'custom' || !props.color) return undefined
+  return { '--alert-color': props.color }
+})
+
+const alertClasses = computed(() => {
+  return cn(
+    alertVariants({ variant: props.variant, size: props.size }),
+    borderClasses.value,
+    positionClasses.value,
+    {
+      'rounded-lg': props.rounded,
+      'shadow-lg': props.elevation && props.position !== 'static',
+      'shadow-md': props.elevation && props.position === 'static',
+      'cursor-pointer': props.dismissible,
+    },
+  )
+})
+
+// Methods
+function close() {
+  isVisible.value = false
+  clearTimers()
+  emit('close')
+}
+
+function handleDismiss() {
+  isVisible.value = false
+  clearTimers()
+  emit('dismiss')
+}
+
+function pause() {
+  if (!props.autoDismiss || isPaused.value) return
+
+  isPaused.value = true
+  clearTimers()
+
+  const elapsed = Date.now() - startTime.value
+  remainingTime.value = Math.max(0, remainingTime.value - elapsed)
+}
+
+function resume() {
+  if (!props.autoDismiss || !isPaused.value) return
+
+  isPaused.value = false
+  startDismissTimer()
+}
+
+function startDismissTimer() {
+  if (!props.autoDismiss) return
+
+  startTime.value = Date.now()
+
+  dismissTimer.value = setTimeout(() => {
+    handleDismiss()
+  }, remainingTime.value)
+
+  if (props.showProgress) {
+    startProgressAnimation()
+  }
+}
+
+function startProgressAnimation() {
+  const interval = 50
+  const totalSteps = remainingTime.value / interval
+  let currentStep = 0
+
+  progressInterval.value = setInterval(() => {
+    currentStep++
+    progress.value = Math.max(0, 100 - (currentStep / totalSteps) * 100)
+
+    if (currentStep >= totalSteps) {
+      clearInterval(progressInterval.value!)
+      progressInterval.value = null
+    }
+  }, interval)
+}
+
+function clearTimers() {
+  if (dismissTimer.value) {
+    clearTimeout(dismissTimer.value)
+    dismissTimer.value = null
+  }
+  if (progressInterval.value) {
+    clearInterval(progressInterval.value)
+    progressInterval.value = null
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && props.closable) {
+    close()
+  }
+}
+
+function handleAlertClick() {
+  if (props.dismissible) {
+    close()
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  if (props.autoDismiss) {
+    startDismissTimer()
+  }
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  clearTimers()
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+watch(() => props.autoDismiss, (newVal) => {
+  if (newVal) {
+    remainingTime.value = props.duration
+    startDismissTimer()
+  } else {
+    clearTimers()
+  }
+})
+
+defineExpose({
+  close,
+  pause,
+  resume,
+})
+</script>
+
+<template>
+  <Transition
+    name="alert"
+    @after-leave="() => emit('close')"
+  >
+    <div
+      v-show="isVisible"
+      v-bind="$attrs"
+      :class="cn(alertClasses, ($attrs.class as string))"
+      :style="customStyle"
+      role="alert"
+      aria-live="polite"
+      @mouseenter="pause"
+      @mouseleave="resume"
+      @click="handleAlertClick"
+    >
+      <div class="flex items-start" :class="sizes.gap">
+        <!-- Icon -->
+        <div v-if="displayIcon" class="shrink-0" :class="[variantIconColors[variant], iconClass]">
+          <slot name="icon">
+            <span class="mdi" :class="[`mdi-${displayIcon}`, sizes.iconSize]" />
+          </slot>
+        </div>
+
+        <!-- Content -->
+        <div class="flex-1 min-w-0" :class="contentClass">
+          <div v-if="title || $slots.title" :class="sizes.titleSize">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
+
+          <div
+            v-if="description || $slots.default"
+            :class="[sizes.textSize, { 'mt-1': title || $slots.title }]"
+          >
+            <slot>
+              {{ description }}
+            </slot>
+          </div>
+
+          <div v-if="$slots.actions" class="mt-3 flex items-center gap-2">
+            <slot name="actions" />
+          </div>
+        </div>
+
+        <!-- Close Button -->
+        <button
+          v-if="closable"
+          type="button"
+          :class="cn(
+            'shrink-0 inline-flex items-center justify-center rounded-md px-1 transition-colors hover:bg-black/5 dark:hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-offset-2',
+            variantIconColors[variant]
+          )"
+          aria-label="Close alert"
+          @click.stop="close"
+        >
+          <span class="mdi mdi-close text-lg" />
+        </button>
+      </div>
+
+      <!-- Progress Bar -->
+      <div
+        v-if="autoDismiss && showProgress"
+        class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
+        :class="variantProgressColors[variant]"
+        :style="{ width: `${progress}%` }"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+/* Alert transitions */
+.alert-enter-active,
+.alert-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.alert-enter-from {
+  opacity: 0;
+  transform: translateY(-12px) scale(0.95);
+}
+
+.alert-leave-to {
+  opacity: 0;
+  transform: translateY(12px) scale(0.95);
+}
+
+/* Custom variant with color prop */
+[style*="--alert-color"] .text-current {
+  color: var(--alert-color);
+}
+
+[style*="--alert-color"] .bg-current {
+  background-color: var(--alert-color);
+}
+
+[style*="--alert-color"] .border-current {
+  border-color: var(--alert-color);
+}
+</style>

package/registry/source/components/ui/SBadge.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full font-medium transition-all duration-200 select-none whitespace-nowrap z-10',
+  {
+    variants: {
+      variant: {
+        filled: 'bg-primary text-primary-foreground',
+        outlined: 'border-[1.5px] border-primary text-primary bg-background',
+        light: 'bg-primary/15 text-primary',
+      },
+      size: {
+        small: 'text-[10px] min-w-4 h-4 px-1',
+        medium: 'text-xs min-w-5 h-5 px-1.5',
+        large: 'text-sm min-w-6 h-6 px-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'filled',
+      size: 'medium',
+    },
+  }
+)
+
+const dotSizeClasses = {
+  small: 'w-1.5 h-1.5',
+  medium: 'w-2 h-2',
+  large: 'w-2.5 h-2.5',
+}
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
+
+export interface Props {
+  variant?: 'filled' | 'outlined' | 'light'
+  size?: 'small' | 'medium' | 'large'
+  color?: string
+  content?: string | number
+  max?: number
+  showZero?: boolean
+  dot?: boolean
+  bordered?: boolean
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+  offset?: [number, number]
+  standalone?: boolean
+  pulse?: boolean
+  badgeClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'filled',
+  size: 'medium',
+  color: undefined,
+  max: 99,
+  showZero: false,
+  dot: false,
+  bordered: false,
+  position: 'top-right',
+  offset: () => [0, 0],
+  standalone: false,
+  pulse: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const displayContent = computed(() => {
+  if (props.dot) return ''
+  if (props.content === undefined || props.content === null) return ''
+
+  const numContent = typeof props.content === 'string'
+    ? parseInt(props.content, 10)
+    : props.content
+
+  if (isNaN(numContent)) return props.content
+  if (numContent === 0 && !props.showZero) return ''
+  if (numContent > props.max) return `${props.max}+`
+
+  return String(numContent)
+})
+
+const isVisible = computed(() => {
+  if (props.dot) return true
+  if (props.content === undefined || props.content === null) return false
+
+  const numContent = typeof props.content === 'string'
+    ? parseInt(props.content, 10)
+    : props.content
+
+  if (isNaN(numContent)) return true
+  if (numContent === 0 && !props.showZero) return false
+
+  return true
+})
+
+// Custom color override: when color prop is explicitly set, inject as CSS variable
+const colorStyle = computed<CSSProperties | undefined>(() => {
+  if (!props.color) return undefined
+
+  const style: CSSProperties = {}
+  const c = props.color
+
+  if (props.variant === 'filled') {
+    style.backgroundColor = c
+    style.color = '#fff'
+  } else if (props.variant === 'outlined') {
+    style.borderColor = c
+    style.color = c
+  } else if (props.variant === 'light') {
+    style.backgroundColor = c.startsWith('var(') ? `color-mix(in srgb, ${c} 15%, transparent)` : `${c}20`
+    style.color = c
+  }
+
+  if (props.bordered) {
+    style.boxShadow = '0 0 0 2px var(--s-background)'
+  }
+
+  return style
+})
+
+const borderedStyle = computed<CSSProperties | undefined>(() => {
+  if (!props.bordered || props.color) return undefined
+  return { boxShadow: '0 0 0 2px var(--s-background)' }
+})
+
+const sizeClasses = computed(() => {
+  if (props.dot) return dotSizeClasses[props.size]
+  return undefined
+})
+
+const badgeClasses = computed(() => {
+  if (props.dot) {
+    return cn(
+      'inline-flex rounded-full transition-all duration-200 select-none z-10',
+      props.variant === 'filled' && !props.color && 'bg-primary',
+      props.variant === 'outlined' && !props.color && 'border-[1.5px] border-primary bg-background',
+      props.variant === 'light' && !props.color && 'bg-primary/15',
+      dotSizeClasses[props.size],
+      { 'cursor-pointer hover:brightness-110': !!emit },
+      props.badgeClass,
+    )
+  }
+
+  return cn(
+    badgeVariants({ variant: props.color ? undefined : props.variant, size: props.size }),
+    // When color is set, skip variant styling (handled by inline style)
+    props.color && 'inline-flex items-center justify-center rounded-full font-medium transition-all duration-200 select-none whitespace-nowrap z-10',
+    { 'cursor-pointer hover:brightness-110': !!emit },
+    props.badgeClass,
+  )
+})
+
+const positionStyle = computed<CSSProperties>(() => {
+  if (props.standalone) return {}
+
+  const [offsetX, offsetY] = props.offset
+  const positions: Record<string, CSSProperties> = {
+    'top-right': {
+      top: `${offsetY}px`,
+      right: `${offsetX}px`,
+      transform: 'translate(50%, -50%)',
+    },
+    'top-left': {
+      top: `${offsetY}px`,
+      left: `${offsetX}px`,
+      transform: 'translate(-50%, -50%)',
+    },
+    'bottom-right': {
+      bottom: `${offsetY}px`,
+      right: `${offsetX}px`,
+      transform: 'translate(50%, 50%)',
+    },
+    'bottom-left': {
+      bottom: `${offsetY}px`,
+      left: `${offsetX}px`,
+      transform: 'translate(-50%, 50%)',
+    },
+  }
+
+  return positions[props.position]
+})
+
+const handleClick = (e: MouseEvent) => {
+  emit('click', e)
+}
+</script>
+
+<template>
+  <div v-if="standalone" v-bind="$attrs" class="inline-flex align-middle">
+    <span
+      v-if="isVisible"
+      :class="badgeClasses"
+      :style="colorStyle ?? borderedStyle"
+      @click="handleClick"
+    >
+      <slot name="content">{{ displayContent }}</slot>
+    </span>
+  </div>
+
+  <div v-else v-bind="$attrs" class="relative inline-flex align-middle">
+    <slot />
+
+    <span
+      v-if="isVisible"
+      :class="cn(badgeClasses, 'absolute', { 's-badge-pulse': pulse })"
+      :style="{ ...(colorStyle ?? borderedStyle), ...positionStyle }"
+      @click="handleClick"
+    >
+      <slot name="content">{{ displayContent }}</slot>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.s-badge-pulse::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+</style>