@sakoa/ui 0.1.0

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

@@ -0,0 +1,387 @@
+<script lang="ts">
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const buttonVariants = cva(
+  'relative inline-flex items-center justify-center font-medium transition-all duration-200 ease-out overflow-hidden select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border-[1.5px] border-transparent',
+  {
+    variants: {
+      variant: {
+        filled: 'bg-primary text-primary-foreground hover:brightness-110 active:scale-[0.98]',
+        outlined: 'bg-transparent border-primary text-primary hover:bg-primary/10',
+        light: 'bg-primary/15 text-primary hover:bg-primary/25',
+        ghost: 'bg-transparent text-primary hover:bg-accent',
+        link: 'bg-transparent text-primary hover:underline',
+      },
+      size: {
+        xs: 'px-1.5 py-0.5 text-xs gap-1',
+        small: 'px-2 py-0.5 text-sm gap-1.5',
+        medium: 'px-2 py-0.5 text-sm gap-2',
+        large: 'px-2.5 py-0.5 text-base gap-2',
+        xl: 'px-3 py-0.5 text-lg gap-2.5',
+      },
+      rounded: {
+        none: 'rounded-none',
+        sm: 'rounded',
+        md: 'rounded-lg',
+        lg: 'rounded-xl',
+        full: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'filled',
+      size: 'medium',
+      rounded: 'md',
+    },
+  }
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+export interface Props {
+  variant?: 'filled' | 'outlined' | 'light' | 'ghost' | 'link'
+  size?: 'xs' | 'small' | 'medium' | 'large' | 'xl'
+  color?: string
+  disabled?: boolean
+  loading?: boolean
+  preserveSize?: boolean
+  block?: boolean
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+  iconLeft?: string
+  iconRight?: string
+  iconOnly?: boolean
+  tag?: string
+  href?: string
+  to?: string | object
+  type?: 'button' | 'submit' | 'reset'
+  ripple?: boolean
+  animationType?: 'slide' | 'vertical' | 'scale' | 'rotate'
+  animateInactive?: boolean
+  contentClass?: string
+  iconClass?: string
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, type CSSProperties } from 'vue'
+import { cn } from '../../lib/utils'
+
+const iconOnlySizes: Record<string, string> = {
+  xs: 'w-6 h-6 text-xs',
+  small: 'w-8 h-8 text-sm',
+  medium: 'w-10 h-10 text-base',
+  large: 'w-12 h-12 text-lg',
+  xl: 'w-14 h-14 text-xl',
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'filled',
+  size: 'medium',
+  color: undefined,
+  disabled: false,
+  loading: false,
+  preserveSize: false,
+  block: false,
+  rounded: 'md',
+  iconLeft: undefined,
+  iconRight: undefined,
+  iconOnly: false,
+  tag: 'button',
+  href: undefined,
+  to: undefined,
+  type: 'button',
+  ripple: true,
+  animationType: 'slide',
+  animateInactive: false,
+  contentClass: undefined,
+  iconClass: undefined,
+})
+
+defineOptions({ inheritAttrs: false })
+
+const slots = useSlots()
+const hasAnimateSlot = computed(() => !!slots.animate)
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+// Ripple effect state
+const ripples = ref<{ id: number; x: number; y: number; size: number }[]>([])
+let rippleId = 0
+
+const createRipple = (event: MouseEvent) => {
+  if (!props.ripple || props.disabled || props.loading) return
+
+  const button = event.currentTarget as HTMLElement
+  const rect = button.getBoundingClientRect()
+  const size = Math.max(rect.width, rect.height) * 2
+  const x = event.clientX - rect.left - size / 2
+  const y = event.clientY - rect.top - size / 2
+
+  const id = rippleId++
+  ripples.value.push({ id, x, y, size })
+
+  setTimeout(() => {
+    ripples.value = ripples.value.filter(r => r.id !== id)
+  }, 600)
+}
+
+const handleClick = (event: MouseEvent) => {
+  if (props.disabled || props.loading) {
+    event.preventDefault()
+    return
+  }
+  createRipple(event)
+  emit('click', event)
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (props.disabled || props.loading) return
+  if (event.key === ' ' || event.key === 'Enter') {
+    event.preventDefault()
+    const mouseEvent = new MouseEvent('click', {
+      bubbles: true,
+      clientX: (event.target as HTMLElement).getBoundingClientRect().left + 20,
+      clientY: (event.target as HTMLElement).getBoundingClientRect().top + 20,
+    })
+    ;(event.target as HTMLElement).dispatchEvent(mouseEvent)
+  }
+}
+
+const componentTag = computed(() => {
+  if (props.to) return 'router-link'
+  if (props.href) return 'a'
+  return props.tag
+})
+
+const iconSizes = computed(() => {
+  const sizes: Record<string, string> = {
+    xs: 'text-xs',
+    small: 'text-sm',
+    medium: 'text-base',
+    large: 'text-lg',
+    xl: 'text-xl',
+  }
+  return sizes[props.size]
+})
+
+// Custom color override: when color prop is set, use inline styles for color-specific properties
+const colorStyle = computed<CSSProperties | undefined>(() => {
+  if (!props.color) return undefined
+
+  const c = props.color
+
+  if (props.variant === 'filled') {
+    return { backgroundColor: c, color: '#fff', borderColor: 'transparent' }
+  } else if (props.variant === 'outlined') {
+    return { backgroundColor: 'transparent', borderColor: c, color: c }
+  } else if (props.variant === 'light') {
+    const bg = c.startsWith('var(') ? `color-mix(in srgb, ${c} 15%, transparent)` : `${c}20`
+    return { backgroundColor: bg, color: c, borderColor: 'transparent' }
+  } else if (props.variant === 'ghost') {
+    return { backgroundColor: 'transparent', color: c, borderColor: 'transparent' }
+  } else if (props.variant === 'link') {
+    return { backgroundColor: 'transparent', color: c, borderColor: 'transparent' }
+  }
+
+  return undefined
+})
+
+const buttonClasses = computed(() => {
+  return cn(
+    // Base + size + rounded from cva; skip variant when color is set (inline style handles it)
+    buttonVariants({
+      variant: props.color ? null : props.variant,
+      size: props.iconOnly ? null : props.size,
+      rounded: props.rounded,
+    }),
+    props.iconOnly && iconOnlySizes[props.size],
+    // Hover/active interactions when color is set
+    props.color && props.variant === 'filled' && 'hover:brightness-110 active:scale-[0.98]',
+    props.color && props.variant === 'link' && 'hover:underline',
+    {
+      'w-full': props.block,
+      'opacity-50 cursor-not-allowed': props.disabled || props.loading,
+      'cursor-pointer': !props.disabled && !props.loading,
+      's-button--animate': hasAnimateSlot.value && !props.animateInactive,
+      [`s-button--animate-${props.animationType}`]: hasAnimateSlot.value && !props.animateInactive,
+    },
+  )
+})
+
+const componentBindings = computed(() => {
+  const bindings: Record<string, unknown> = {}
+
+  if (props.to) bindings.to = props.to
+  if (props.href) bindings.href = props.href
+  if (componentTag.value === 'button') bindings.type = props.type
+  if (props.disabled) bindings.disabled = true
+
+  return bindings
+})
+</script>
+
+<template>
+  <component
+    :is="componentTag"
+    v-bind="{ ...componentBindings, ...$attrs }"
+    :class="cn(buttonClasses, ($attrs.class as string))"
+    :style="colorStyle"
+    @click="handleClick"
+    @keydown="handleKeydown"
+  >
+    <!-- Ripple effects -->
+    <span
+      v-for="ripple in ripples"
+      :key="ripple.id"
+      class="absolute rounded-full bg-white/30 animate-ripple pointer-events-none"
+      :style="{
+        left: `${ripple.x}px`,
+        top: `${ripple.y}px`,
+        width: `${ripple.size}px`,
+        height: `${ripple.size}px`,
+      }"
+    />
+
+    <!-- Loading spinner (absolute when preserveSize) -->
+    <span
+      v-if="loading"
+      class="mdi mdi-loading animate-spin"
+      :class="[iconSizes, { 'absolute inset-0 flex items-center justify-center': preserveSize }]"
+    />
+
+    <!-- Default content wrapper -->
+    <span
+      class="s-button__content flex items-center justify-center gap-2"
+      :class="[contentClass, { 'opacity-0': loading && preserveSize }]"
+    >
+      <template v-if="!loading || preserveSize">
+        <slot name="icon-left">
+          <span
+            v-if="iconLeft"
+            :class="['mdi', `mdi-${iconLeft}`, iconSizes, iconClass]"
+          />
+        </slot>
+      </template>
+
+      <span v-if="!iconOnly && (!loading || preserveSize)">
+        <slot />
+      </span>
+
+      <template v-if="iconOnly && (!loading || preserveSize) && !iconLeft">
+        <slot />
+      </template>
+
+      <template v-if="!loading || preserveSize">
+        <slot name="icon-right">
+          <span
+            v-if="iconRight"
+            :class="['mdi', `mdi-${iconRight}`, iconSizes, iconClass]"
+          />
+        </slot>
+      </template>
+    </span>
+
+    <!-- Animate slot content -->
+    <span
+      v-if="hasAnimateSlot"
+      class="s-button__animate flex items-center justify-center gap-2"
+      :class="[`s-button__animate--${animationType}`]"
+    >
+      <slot name="animate" />
+    </span>
+  </component>
+</template>
+
+<style scoped>
+/* Ripple animation */
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.animate-ripple {
+  animation: ripple 0.6s ease-out forwards;
+}
+
+/* Button content wrapper */
+.s-button__content {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Animate slot - positioned absolute over content */
+.s-button__animate {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Slide animation (default) */
+.s-button__animate--slide {
+  transform: translateX(100%);
+}
+
+.s-button--animate-slide:hover .s-button__content {
+  transform: translateX(-100%);
+}
+
+.s-button--animate-slide:hover .s-button__animate--slide {
+  transform: translateX(0);
+}
+
+/* Vertical animation */
+.s-button__animate--vertical {
+  transform: translateY(100%);
+}
+
+.s-button--animate-vertical:hover .s-button__content {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+.s-button--animate-vertical:hover .s-button__animate--vertical {
+  transform: translateY(0);
+}
+
+/* Scale animation */
+.s-button__animate--scale {
+  transform: scale(0.5);
+  opacity: 0;
+}
+
+.s-button--animate-scale:hover .s-button__content {
+  transform: scale(1.4);
+  opacity: 0;
+}
+
+.s-button--animate-scale:hover .s-button__animate--scale {
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* Rotate animation */
+.s-button__animate--rotate {
+  transform: rotate(-180deg);
+  opacity: 0;
+}
+
+.s-button--animate-rotate:hover .s-button__content {
+  transform: rotate(180deg);
+  opacity: 0;
+}
+
+.s-button--animate-rotate:hover .s-button__animate--rotate {
+  transform: rotate(0);
+  opacity: 1;
+}
+</style>

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

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { computed, ref, type CSSProperties } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+
+defineOptions({ inheritAttrs: false })
+
+const checkboxVariants = cva(
+  'relative inline-flex items-center justify-center shrink-0 border-2 transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring',
+  {
+    variants: {
+      size: {
+        small: 'w-4 h-4',
+        medium: 'w-5 h-5',
+        large: 'w-6 h-6',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+    },
+  }
+)
+
+export type CheckboxVariants = VariantProps<typeof checkboxVariants>
+
+export interface Props {
+  modelValue?: boolean | string | number | any[]
+  value?: any
+  size?: 'small' | 'medium' | 'large'
+  color?: string
+  disabled?: boolean
+  loading?: boolean
+  indeterminate?: boolean
+  label?: string
+  labelPosition?: 'left' | 'right'
+  rounded?: boolean
+  icon?: string
+  required?: boolean
+  name?: string
+  error?: string
+  checkboxClass?: string
+  labelClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  value: undefined,
+  size: 'medium',
+  color: undefined,
+  disabled: false,
+  loading: false,
+  indeterminate: false,
+  label: undefined,
+  labelPosition: 'right',
+  rounded: false,
+  icon: 'check',
+  required: false,
+  name: undefined,
+  error: undefined,
+  checkboxClass: undefined,
+  labelClass: undefined
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean | string | number | any[]]
+  'change': [value: boolean | string | number | any[], event: Event]
+}>()
+
+// Ripple effect state
+const isRippling = ref(false)
+
+// Determine if this is an array-based checkbox group
+const isArrayModel = computed(() => Array.isArray(props.modelValue))
+
+// Determine checked state
+const isChecked = computed(() => {
+  if (isArrayModel.value) {
+    return (props.modelValue as any[]).includes(props.value)
+  }
+  return props.modelValue === true || props.modelValue === props.value
+})
+
+// Toggle checkbox
+const toggle = (event: Event) => {
+  if (props.disabled || props.loading) return
+
+  // Trigger ripple
+  triggerRipple()
+
+  let newValue: boolean | string | number | any[]
+
+  if (isArrayModel.value) {
+    const arr = [...(props.modelValue as any[])]
+    const index = arr.indexOf(props.value)
+    if (index === -1) {
+      arr.push(props.value)
+    } else {
+      arr.splice(index, 1)
+    }
+    newValue = arr
+  } else {
+    newValue = !isChecked.value
+  }
+
+  emit('update:modelValue', newValue)
+  emit('change', newValue, event)
+}
+
+const triggerRipple = () => {
+  isRippling.value = true
+  setTimeout(() => {
+    isRippling.value = false
+  }, 400)
+}
+
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === ' ' || e.key === 'Enter') {
+    e.preventDefault()
+    toggle(e)
+  }
+}
+
+// Size configurations for icon and label
+const sizeConfig = computed(() => {
+  const sizes = {
+    small: {
+      icon: 'text-[10px]',
+      label: 'text-xs',
+      gap: 'gap-1.5'
+    },
+    medium: {
+      icon: 'text-xs',
+      label: 'text-sm',
+      gap: 'gap-2'
+    },
+    large: {
+      icon: 'text-sm',
+      label: 'text-base',
+      gap: 'gap-2.5'
+    }
+  }
+  return sizes[props.size]
+})
+
+// Custom color override style (only when color prop is explicitly set)
+const colorStyle = computed<CSSProperties | undefined>(() => {
+  if (!props.color) return undefined
+  if (!(isChecked.value || props.indeterminate)) return undefined
+  return {
+    backgroundColor: props.color,
+    borderColor: props.color
+  }
+})
+
+// Ripple color style
+const rippleStyle = computed<CSSProperties | undefined>(() => {
+  if (!props.color) return undefined
+  return { backgroundColor: props.color }
+})
+
+// Determine which icon to show
+const displayIcon = computed(() => {
+  if (props.indeterminate) return 'minus'
+  return props.icon
+})
+
+const boxClasses = computed(() => {
+  return cn(
+    checkboxVariants({ size: props.size }),
+    rounded.value ? 'rounded-full' : 'rounded-md',
+    isChecked.value || props.indeterminate
+      ? props.color
+        ? 'border-transparent'
+        : 'border-transparent bg-primary'
+      : 'border-border bg-background hover:border-muted-foreground',
+    { 'cursor-not-allowed': props.disabled || props.loading },
+    props.checkboxClass
+  )
+})
+
+const rounded = computed(() => props.rounded)
+</script>
+
+<template>
+  <div v-bind="$attrs">
+    <label
+      :class="cn(
+        'relative inline-flex items-center cursor-pointer select-none',
+        sizeConfig.gap,
+        { 'opacity-50 cursor-not-allowed': disabled },
+        { 'flex-row-reverse': labelPosition === 'left' }
+      )"
+  >
+    <!-- Hidden input for form compatibility -->
+    <input
+      type="checkbox"
+      :name="name"
+      :checked="isChecked"
+      :disabled="disabled || loading"
+      :required="required"
+      tabindex="-1"
+      class="sr-only"
+      @change="toggle"
+    />
+
+    <!-- Checkbox Box -->
+    <span
+      role="checkbox"
+      :aria-checked="indeterminate ? 'mixed' : isChecked"
+      :aria-disabled="disabled || loading"
+      tabindex="0"
+      :class="boxClasses"
+      :style="colorStyle"
+      @click.prevent="toggle"
+      @keydown="handleKeydown"
+    >
+      <!-- Ripple Effect -->
+      <span
+        v-if="isRippling"
+        class="absolute inset-0 animate-ping opacity-30 z-0"
+        :class="[rounded ? 'rounded-full' : 'rounded-md', !color && 'bg-primary']"
+        :style="rippleStyle"
+      />
+
+      <!-- Loading Spinner -->
+      <span
+        v-if="loading"
+        :class="cn(
+          'mdi mdi-loading animate-spin',
+          sizeConfig.icon,
+          isChecked || indeterminate ? (color ? 'text-white' : 'text-primary-foreground') : 'text-foreground'
+        )"
+      />
+
+      <!-- Check Icon / Indeterminate Icon -->
+      <Transition
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="scale-0 opacity-0"
+        enter-to-class="scale-100 opacity-100"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="scale-100 opacity-100"
+        leave-to-class="scale-0 opacity-0"
+      >
+        <span
+          v-if="(isChecked || indeterminate) && !loading"
+          :class="cn('absolute inset-0 flex items-center justify-center', color ? 'text-white' : 'text-primary-foreground', sizeConfig.icon)"
+        >
+          <slot name="icon">
+            <span :class="['mdi', `mdi-${displayIcon}`]" />
+          </slot>
+        </span>
+      </Transition>
+    </span>
+
+    <!-- Label -->
+    <span
+      v-if="label || $slots.default"
+      :class="cn(
+        'transition-colors text-muted-foreground',
+        sizeConfig.label,
+        { 'text-foreground': isChecked },
+        labelClass
+      )"
+    >
+      <slot>{{ label }}</slot>
+      <span v-if="required" class="text-destructive ml-0.5">*</span>
+    </span>
+  </label>
+
+  <!-- Error message -->
+  <p v-if="error" class="mt-1 text-xs text-destructive flex items-center gap-1">
+    <span class="mdi mdi-alert-circle" />
+    {{ error }}
+  </p>
+  </div>
+</template>
+
+<style scoped>
+.s-checkbox-box {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.s-checkbox-wrapper:hover:not(.cursor-not-allowed) .s-checkbox-box:not([aria-disabled="true"]) {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transform: scale(1.02);
+}
+
+.s-checkbox-box:focus-visible {
+  box-shadow: 0 0 0 3px rgba(var(--s-primary-rgb, 16, 185, 129), 0.2);
+}
+
+/* Bounce animation for check icon */
+.s-checkbox-box span[class*="mdi-check"],
+.s-checkbox-box span[class*="mdi-minus"] {
+  animation: checkBounce 0.2s ease-out;
+}
+
+@keyframes checkBounce {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>