@sakoa/ui 0.1.0

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

@@ -0,0 +1,185 @@
+<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 skeletonVariants = cva(
+  'block bg-muted',
+  {
+    variants: {
+      shape: {
+        rectangular: 'rounded-md',
+        circular: 'rounded-full',
+        rounded: 'rounded-full',
+      },
+      animation: {
+        wave: 's-skeleton-wave',
+        pulse: 's-skeleton-pulse',
+        none: '',
+      },
+    },
+    defaultVariants: {
+      shape: 'rectangular',
+      animation: 'wave',
+    },
+  }
+)
+
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>
+
+export interface Props {
+  /** Shape variant */
+  shape?: 'rectangular' | 'circular' | 'rounded'
+  /** Animation type */
+  animation?: 'wave' | 'pulse' | 'none'
+  /** Width (CSS value) */
+  width?: string
+  /** Height (CSS value) */
+  height?: string
+  /** Shorthand for equal width and height */
+  size?: string
+  /** Custom border radius override */
+  borderRadius?: string
+  /** Number of lines to render (for text-like skeletons) */
+  lines?: number
+  /** Gap between lines */
+  lineGap?: string
+  /** Additional class */
+  skeletonClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  shape: 'rectangular',
+  animation: 'wave',
+  width: undefined,
+  height: undefined,
+  size: undefined,
+  borderRadius: undefined,
+  lines: 1,
+  lineGap: '0.75rem',
+})
+
+const containerStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {}
+
+  if (props.size) {
+    style.width = props.size
+    style.height = props.size
+  } else {
+    if (props.width) style.width = props.width
+    if (props.height) style.height = props.height
+  }
+
+  if (!props.size && !props.height) {
+    style.height = props.shape === 'circular' ? props.width ?? '3rem' : '1rem'
+  }
+
+  if (!props.size && !props.width) {
+    style.width = props.shape === 'circular' ? props.height ?? '3rem' : '100%'
+  }
+
+  if (props.borderRadius) {
+    style.borderRadius = props.borderRadius
+  }
+
+  return style
+})
+
+const skeletonClasses = computed(() =>
+  cn(
+    skeletonVariants({ shape: props.shape, animation: props.animation }),
+    props.skeletonClass,
+  )
+)
+
+const lineWidths = computed(() => {
+  if (props.lines <= 1) return ['100%']
+  return Array.from({ length: props.lines }, (_, i) => {
+    if (i === props.lines - 1) return '60%'
+    return '100%'
+  })
+})
+</script>
+
+<template>
+  <div
+    v-if="lines > 1"
+    v-bind="$attrs"
+    class="flex flex-col"
+    :style="{ gap: lineGap }"
+  >
+    <div
+      v-for="(lineWidth, i) in lineWidths"
+      :key="i"
+      :class="skeletonClasses"
+      :style="{ ...containerStyle, width: lineWidth }"
+    />
+  </div>
+
+  <div
+    v-else
+    v-bind="$attrs"
+    :class="skeletonClasses"
+    :style="containerStyle"
+  />
+</template>
+
+<style>
+/* Pulse animation — smooth opacity fade */
+.s-skeleton-pulse {
+  animation: s-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes s-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Wave / shimmer animation — gradient slide */
+.s-skeleton-wave {
+  position: relative;
+  overflow: hidden;
+}
+
+.s-skeleton-wave::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.08) 20%,
+    rgba(255, 255, 255, 0.18) 50%,
+    rgba(255, 255, 255, 0.08) 80%,
+    transparent
+  );
+  animation: s-skeleton-wave 1.8s ease-in-out infinite;
+}
+
+:root:not(.dark) .s-skeleton-wave::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3) 20%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0.3) 80%,
+    transparent
+  );
+}
+
+@keyframes s-skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

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

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { computed, useAttrs, type CSSProperties } from 'vue'
+import { cn } from '../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+export interface Props {
+  modelValue?: boolean | string | number
+  type?: 'inset' | 'outset'
+  size?: 'small' | 'medium' | 'large'
+  color?: string
+  disabled?: boolean
+  loading?: boolean
+  checkedValue?: boolean | string | number
+  uncheckedValue?: boolean | string | number
+  labelBefore?: string
+  labelAfter?: string
+  checkedIcon?: string
+  uncheckedIcon?: string
+  checkedText?: string
+  uncheckedText?: string
+  trackClass?: string
+  thumbClass?: string
+  labelClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  type: 'inset',
+  size: 'medium',
+  color: undefined,
+  disabled: false,
+  loading: false,
+  checkedValue: true,
+  uncheckedValue: false,
+  labelBefore: undefined,
+  labelAfter: undefined,
+  checkedIcon: undefined,
+  uncheckedIcon: undefined,
+  checkedText: undefined,
+  uncheckedText: undefined,
+  trackClass: undefined,
+  thumbClass: undefined,
+  labelClass: undefined
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean | string | number]
+  'change': [value: boolean | string | number]
+}>()
+
+const isChecked = computed(() => props.modelValue === props.checkedValue)
+const hasTrackText = computed(() => props.checkedText || props.uncheckedText)
+
+const toggle = () => {
+  if (props.disabled || props.loading) return
+  const newValue = isChecked.value ? props.uncheckedValue : props.checkedValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === ' ' || e.key === 'Enter') {
+    e.preventDefault()
+    toggle()
+  }
+}
+
+// Size configurations for inset type (thumb inside track)
+const insetSizes = {
+  small: {
+    track: 'w-8 h-4',
+    thumb: 'w-3 h-3',
+    thumbTranslate: 'translate-x-4',
+    icon: 'text-[8px]',
+    label: 'text-xs',
+    trackText: 'text-[8px]'
+  },
+  medium: {
+    track: 'w-11 h-6',
+    thumb: 'w-5 h-5',
+    thumbTranslate: 'translate-x-5',
+    icon: 'text-[10px]',
+    label: 'text-sm',
+    trackText: 'text-[10px]'
+  },
+  large: {
+    track: 'w-14 h-7',
+    thumb: 'w-6 h-6',
+    thumbTranslate: 'translate-x-7',
+    icon: 'text-xs',
+    label: 'text-base',
+    trackText: 'text-xs'
+  }
+}
+
+// Size configurations for outset type (thumb larger than track)
+const outsetSizes = {
+  small: {
+    track: 'w-7 h-3',
+    thumb: 'w-4 h-4',
+    thumbTranslate: 'translate-x-3',
+    icon: 'text-[8px]',
+    label: 'text-xs',
+    trackText: 'text-[6px]'
+  },
+  medium: {
+    track: 'w-10 h-4',
+    thumb: 'w-6 h-6',
+    thumbTranslate: 'translate-x-4',
+    icon: 'text-[10px]',
+    label: 'text-sm',
+    trackText: 'text-[8px]'
+  },
+  large: {
+    track: 'w-12 h-5',
+    thumb: 'w-7 h-7',
+    thumbTranslate: 'translate-x-5',
+    icon: 'text-xs',
+    label: 'text-base',
+    trackText: 'text-[10px]'
+  }
+}
+
+const sizeConfig = computed(() => {
+  const sizes = props.type === 'outset' ? outsetSizes : insetSizes
+  return sizes[props.size]
+})
+
+// Track style: when color is set and checked, use inline style; otherwise use token classes
+const trackStyle = computed<CSSProperties | undefined>(() => {
+  if (isChecked.value && props.color) {
+    return { backgroundColor: props.color }
+  }
+  return undefined
+})
+
+// Icon color style for checked icon when color is set
+const checkedIconStyle = computed<CSSProperties | undefined>(() => {
+  if (props.color) {
+    return { color: props.color }
+  }
+  return undefined
+})
+
+const wrapperClasses = computed(() => {
+  return cn(
+    'inline-flex items-center gap-2',
+    { 'opacity-50 cursor-not-allowed': props.disabled },
+    (attrs as Record<string, unknown>).class,
+  )
+})
+
+const trackClasses = computed(() => {
+  return cn(
+    's-switch-track relative inline-flex items-center shrink-0 rounded-full transition-all duration-300 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring',
+    hasTrackText.value ? 'min-w-16 px-1' : sizeConfig.value.track,
+    // Unchecked state uses accent background; checked uses primary (or inline style when color is set)
+    isChecked.value && !props.color ? 'bg-primary' : '',
+    !isChecked.value ? 'bg-accent' : '',
+    { 'cursor-pointer': !props.disabled && !props.loading, 'cursor-not-allowed': props.disabled || props.loading },
+    { 'h-6': hasTrackText.value && props.size === 'medium', 'h-5': hasTrackText.value && props.size === 'small', 'h-7': hasTrackText.value && props.size === 'large' },
+    props.trackClass,
+  )
+})
+
+const thumbClasses = computed(() => {
+  return cn(
+    's-switch-thumb inline-flex items-center justify-center rounded-full shadow-md transition-all duration-300 ease-in-out z-10',
+    isChecked.value && !props.color ? 'bg-primary-foreground' : 'bg-white',
+    hasTrackText.value ? 'w-5 h-5' : sizeConfig.value.thumb,
+    hasTrackText.value
+      ? (isChecked.value ? 'ml-auto' : 'mr-auto')
+      : (isChecked.value ? sizeConfig.value.thumbTranslate : 'translate-x-0.5'),
+    props.thumbClass,
+  )
+})
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :class="wrapperClasses"
+  >
+    <!-- Label Before -->
+    <span
+      v-if="labelBefore"
+      class="select-none text-muted-foreground"
+      :class="[sizeConfig.label, labelClass]"
+    >
+      {{ labelBefore }}
+    </span>
+
+    <!-- Switch Track -->
+    <button
+      type="button"
+      role="switch"
+      :aria-checked="isChecked"
+      :disabled="disabled || loading"
+      :class="trackClasses"
+      :style="trackStyle"
+      @click="toggle"
+      @keydown="handleKeydown"
+    >
+      <!-- Track Text (unchecked - right side) -->
+      <span
+        v-if="hasTrackText && !isChecked && uncheckedText"
+        :class="['absolute right-2 font-semibold select-none', color ? 'text-white' : 'text-primary-foreground', sizeConfig.trackText]"
+      >
+        {{ uncheckedText }}
+      </span>
+
+      <!-- Track Text (checked - left side) -->
+      <span
+        v-if="hasTrackText && isChecked && checkedText"
+        :class="['absolute left-2 font-semibold select-none', color ? 'text-white' : 'text-primary-foreground', sizeConfig.trackText]"
+      >
+        {{ checkedText }}
+      </span>
+
+      <!-- Thumb -->
+      <span :class="thumbClasses">
+        <!-- Loading Spinner -->
+        <span
+          v-if="loading"
+          class="mdi mdi-loading animate-spin text-muted-foreground"
+          :class="sizeConfig.icon"
+        ></span>
+
+        <!-- Custom Icons via Slots -->
+        <template v-else>
+          <slot v-if="isChecked" name="checked-icon">
+            <span
+              v-if="checkedIcon"
+              :class="['mdi', `mdi-${checkedIcon}`, sizeConfig.icon]"
+              :style="checkedIconStyle"
+              :data-no-color="!color ? '' : undefined"
+            ></span>
+          </slot>
+          <slot v-else name="unchecked-icon">
+            <span
+              v-if="uncheckedIcon"
+              :class="['mdi', `mdi-${uncheckedIcon}`, sizeConfig.icon, 'text-muted-foreground']"
+            ></span>
+          </slot>
+        </template>
+      </span>
+    </button>
+
+    <!-- Label After -->
+    <span
+      v-if="labelAfter"
+      class="select-none text-muted-foreground"
+      :class="[sizeConfig.label, labelClass]"
+    >
+      {{ labelAfter }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.s-switch-track {
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.s-switch-thumb {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.s-switch-track:hover:not(:disabled) .s-switch-thumb {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12);
+}
+</style>