@luanlu/mk-motion 1.2.0 → 1.2.1

package/src/components/steps/steps.ts

@@ -0,0 +1,102 @@
+import './steps.css'
+
+export interface StepItem {
+  title: string
+  description?: string
+  icon?: string
+  status?: 'wait' | 'process' | 'finish' | 'error'
+}
+
+export interface StepsOptions {
+  direction?: 'horizontal' | 'vertical'
+  current?: number
+  items: StepItem[]
+  size?: 'small' | 'default'
+}
+
+export class MkSteps {
+  el: HTMLElement
+  private options: StepsOptions
+
+  constructor(container: HTMLElement | string, options: StepsOptions) {
+    const parent = typeof container === 'string' ? document.querySelector(container)! : container
+    this.options = { direction: 'horizontal', current: 0, size: 'default', ...options }
+
+    this.el = document.createElement('div')
+    this.el.className = `mk-steps mk-steps--${this.options.direction}`
+    if (this.options.size === 'small') this.el.classList.add('mk-steps--small')
+
+    this.render()
+    parent.appendChild(this.el)
+  }
+
+  private render(): void {
+    this.el.innerHTML = ''
+    const { items, current = 0, direction } = this.options
+
+    items.forEach((item, index) => {
+      const step = document.createElement('div')
+      step.className = 'mk-step'
+
+      const status = item.status ?? (index < current ? 'finish' : index === current ? 'process' : 'wait')
+      step.classList.add(`is-${status}`)
+      if (index === items.length - 1) step.classList.add('is-last')
+
+      const head = document.createElement('div')
+      head.className = 'mk-step__head'
+
+      const line = document.createElement('div')
+      line.className = 'mk-step__line'
+      if (direction === 'vertical') {
+        line.style.width = '1px'
+        line.style.height = '100%'
+        line.style.left = '15px'
+        line.style.top = '30px'
+      }
+      head.appendChild(line)
+
+      const icon = document.createElement('div')
+      icon.className = 'mk-step__icon'
+      if (status === 'finish') {
+        icon.textContent = item.icon || '✓'
+      } else if (status === 'error') {
+        icon.textContent = item.icon || '✕'
+      } else {
+        icon.textContent = item.icon || String(index + 1)
+      }
+      head.appendChild(icon)
+
+      const main = document.createElement('div')
+      main.className = 'mk-step__main'
+
+      const title = document.createElement('div')
+      title.className = 'mk-step__title'
+      title.textContent = item.title
+      main.appendChild(title)
+
+      if (item.description) {
+        const desc = document.createElement('div')
+        desc.className = 'mk-step__description'
+        desc.textContent = item.description
+        main.appendChild(desc)
+      }
+
+      step.appendChild(head)
+      step.appendChild(main)
+      this.el.appendChild(step)
+    })
+  }
+
+  setCurrent(current: number): void {
+    this.options.current = current
+    this.render()
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
+export function createSteps(container: HTMLElement | string, options: StepsOptions): MkSteps {
+  return new MkSteps(container, options)
+}

package/src/components/styles/components.css

@@ -0,0 +1,28 @@
+/* MotionKit UI Components - Unified Styles */
+@import '../button/button.css';
+@import '../input/input.css';
+@import '../card/card.css';
+@import '../dialog/dialog.css';
+@import '../drawer/drawer.css';
+@import '../message/message.css';
+@import '../switch/switch.css';
+@import '../loading/loading.css';
+@import '../tag/tag.css';
+@import '../tabs/tabs.css';
+@import '../table/table.css';
+@import '../avatar/avatar.css';
+@import '../alert/alert.css';
+@import '../progress/progress.css';
+@import '../collapse/collapse.css';
+@import '../empty/empty.css';
+@import '../popover/popover.css';
+@import '../menu/menu.css';
+@import '../breadcrumb/breadcrumb.css';
+@import '../steps/steps.css';
+@import '../layout/row.css';
+@import '../layout/space.css';
+@import '../layout/divider.css';
+@import '../form/select.css';
+@import '../form/checkbox.css';
+@import '../form/radio.css';
+@import '../form/slider.css';

package/src/components/styles/reset.css

@@ -0,0 +1,24 @@
+.mk-ui *, .mk-ui *::before, .mk-ui *::after { box-sizing: border-box; }
+.mk-ui {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  color: var(--mk-text-muted);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Modern glass overlay */
+.mk-glass {
+  background: rgba(19, 19, 30, 0.75);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+}
+[data-mk-theme="light"] .mk-glass {
+  background: rgba(241, 245, 249, 0.75);
+}
+
+/* Animated gradient border */
+@keyframes mk-gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}

package/src/components/styles/tokens.css

@@ -0,0 +1,248 @@
+/* ==========================================================
+   MotionKit Design Tokens v2.0
+   ==========================================================
+   A comprehensive design system powering all MotionKit
+   components with consistent colors, typography, spacing,
+   shadows, borders, and motion.
+   ========================================================== */
+
+/* ----- Core Color Scale (each color: 50-950) ----- */
+:root {
+  /* Indigo - Primary */
+  --mk-indigo-50:  #eef2ff;
+  --mk-indigo-100: #e0e7ff;
+  --mk-indigo-200: #c7d2fe;
+  --mk-indigo-300: #a5b4fc;
+  --mk-indigo-400: #818cf8;
+  --mk-indigo-500: #6366f1;
+  --mk-indigo-600: #4f46e5;
+  --mk-indigo-700: #4338ca;
+  --mk-indigo-800: #3730a3;
+  --mk-indigo-900: #312e81;
+  --mk-indigo-950: #1e1b4b;
+
+  /* Green - Success */
+  --mk-green-50:  #f0fdf4;
+  --mk-green-100: #dcfce7;
+  --mk-green-200: #bbf7d0;
+  --mk-green-300: #86efac;
+  --mk-green-400: #4ade80;
+  --mk-green-500: #22c55e;
+  --mk-green-600: #16a34a;
+  --mk-green-700: #15803d;
+  --mk-green-800: #166534;
+  --mk-green-900: #14532d;
+  --mk-green-950: #052e16;
+
+  /* Amber - Warning */
+  --mk-amber-50:  #fffbeb;
+  --mk-amber-100: #fef3c7;
+  --mk-amber-200: #fde68a;
+  --mk-amber-300: #fcd34d;
+  --mk-amber-400: #fbbf24;
+  --mk-amber-500: #f59e0b;
+  --mk-amber-600: #d97706;
+  --mk-amber-700: #b45309;
+  --mk-amber-800: #92400e;
+  --mk-amber-900: #78350f;
+  --mk-amber-950: #451a03;
+
+  /* Red - Danger */
+  --mk-red-50:  #fef2f2;
+  --mk-red-100: #fee2e2;
+  --mk-red-200: #fecaca;
+  --mk-red-300: #fca5a5;
+  --mk-red-400: #f87171;
+  --mk-red-500: #ef4444;
+  --mk-red-600: #dc2626;
+  --mk-red-700: #b91c1c;
+  --mk-red-800: #991b1b;
+  --mk-red-900: #7f1d1d;
+  --mk-red-950: #450a0a;
+
+  /* Slate - Neutral / Gray */
+  --mk-slate-50:  #f8fafc;
+  --mk-slate-100: #f1f5f9;
+  --mk-slate-200: #e2e8f0;
+  --mk-slate-300: #cbd5e1;
+  --mk-slate-400: #94a3b8;
+  --mk-slate-500: #64748b;
+  --mk-slate-600: #475569;
+  --mk-slate-700: #334155;
+  --mk-slate-800: #1e293b;
+  --mk-slate-900: #0f172a;
+  --mk-slate-950: #020617;
+
+  /* Sky - Info */
+  --mk-sky-50:  #f0f9ff;
+  --mk-sky-100: #e0f2fe;
+  --mk-sky-200: #bae6fd;
+  --mk-sky-300: #7dd3fc;
+  --mk-sky-400: #38bdf8;
+  --mk-sky-500: #0ea5e9;
+  --mk-sky-600: #0284c7;
+  --mk-sky-700: #0369a1;
+  --mk-sky-800: #075985;
+  --mk-sky-900: #0c4a6e;
+  --mk-sky-950: #082f49;
+}
+
+/* ----- Semantic Tokens (dark-first) ----- */
+:root {
+  /* Surfaces */
+  --mk-bg:           #09090b;
+  --mk-bg-elevated:  #0c0c14;
+  --mk-surface:      #12121a;
+  --mk-surface-hover:#1a1a25;
+  --mk-surface-active:#22222e;
+  --mk-surface-raised:#1e1e2a;
+
+  /* Borders */
+  --mk-border:        #1e1e2e;
+  --mk-border-hover:  #27273a;
+  --mk-border-active: #3a3a55;
+  --mk-divider:       rgba(255,255,255,0.06);
+
+  /* Primary */
+  --mk-primary:        var(--mk-indigo-500);
+  --mk-primary-hover:  var(--mk-indigo-400);
+  --mk-primary-active: var(--mk-indigo-600);
+  --mk-primary-soft:   rgba(99,102,241,0.12);
+  --mk-primary-muted:  rgba(99,102,241,0.06);
+
+  /* Semantic */
+  --mk-success:        var(--mk-green-500);
+  --mk-success-soft:   rgba(34,197,94,0.12);
+  --mk-warning:        var(--mk-amber-500);
+  --mk-warning-soft:   rgba(245,158,11,0.12);
+  --mk-danger:         var(--mk-red-500);
+  --mk-danger-soft:    rgba(239,68,68,0.12);
+  --mk-info:           var(--mk-sky-500);
+  --mk-info-soft:      rgba(14,165,233,0.12);
+
+  /* Text */
+  --mk-text:           #f8fafc;
+  --mk-text-primary:   #f1f5f9;
+  --mk-text-secondary: #94a3b8;
+  --mk-text-tertiary:  #64748b;
+  --mk-text-disabled:  #475569;
+  --mk-text-inverse:   #0f172a;
+
+  /* Typography */
+  --mk-font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --mk-font-mono:   'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
+
+  --mk-text-xs:   0.75rem;   /* 12px */
+  --mk-text-sm:   0.8125rem; /* 13px */
+  --mk-text-base: 0.875rem;  /* 14px */
+  --mk-text-md:   1rem;      /* 16px */
+  --mk-text-lg:   1.125rem;  /* 18px */
+  --mk-text-xl:   1.25rem;   /* 20px */
+  --mk-text-2xl:  1.5rem;    /* 24px */
+  --mk-text-3xl:  1.875rem;  /* 30px */
+  --mk-text-4xl:  2.25rem;   /* 36px */
+
+  --mk-font-normal:   400;
+  --mk-font-medium:   500;
+  --mk-font-semibold: 600;
+  --mk-font-bold:     700;
+
+  --mk-leading-none:   1;
+  --mk-leading-tight:  1.25;
+  --mk-leading-snug:   1.375;
+  --mk-leading-normal: 1.5;
+  --mk-leading-relaxed:1.625;
+
+  /* Spacing */
+  --mk-space-0:  0px;
+  --mk-space-1:  4px;
+  --mk-space-2:  8px;
+  --mk-space-3:  12px;
+  --mk-space-4:  16px;
+  --mk-space-5:  20px;
+  --mk-space-6:  24px;
+  --mk-space-8:  32px;
+  --mk-space-10: 40px;
+  --mk-space-12: 48px;
+  --mk-space-16: 64px;
+  --mk-space-20: 80px;
+  --mk-space-24: 96px;
+
+  /* Radius */
+  --mk-radius-none: 0px;
+  --mk-radius-sm:   4px;
+  --mk-radius:      8px;
+  --mk-radius-md:   10px;
+  --mk-radius-lg:   12px;
+  --mk-radius-xl:   16px;
+  --mk-radius-2xl:  20px;
+  --mk-radius-full: 9999px;
+
+  /* Shadows */
+  --mk-shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
+  --mk-shadow:      0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
+  --mk-shadow-md:   0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
+  --mk-shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.2);
+  --mk-shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.2);
+  --mk-shadow-glow: 0 0 20px rgba(99,102,241,0.15);
+
+  /* Motion */
+  --mk-duration-fast:    150ms;
+  --mk-duration-normal:  250ms;
+  --mk-duration-slow:    400ms;
+  --mk-duration-slower:  600ms;
+
+  --mk-ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
+  --mk-ease-in:          cubic-bezier(0.4, 0, 1, 1);
+  --mk-ease-out:         cubic-bezier(0, 0, 0.2, 1);
+  --mk-ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
+  --mk-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
+  --mk-ease-bounce:      cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  --mk-transition-colors:   color var(--mk-duration-fast) var(--mk-ease-default), background-color var(--mk-duration-fast) var(--mk-ease-default), border-color var(--mk-duration-fast) var(--mk-ease-default);
+  --mk-transition-transform: transform var(--mk-duration-normal) var(--mk-ease-out-expo);
+  --mk-transition-shadow:    box-shadow var(--mk-duration-normal) var(--mk-ease-default);
+  --mk-transition-opacity:   opacity var(--mk-duration-fast) var(--mk-ease-default);
+  --mk-transition-all:       all var(--mk-duration-fast) var(--mk-ease-default);
+
+  /* Z-Index Scale */
+  --mk-z-base:     0;
+  --mk-z-dropdown: 100;
+  --mk-z-sticky:   200;
+  --mk-z-fixed:    300;
+  --mk-z-modal-backdrop: 400;
+  --mk-z-modal:    500;
+  --mk-z-popover:  600;
+  --mk-z-tooltip:  700;
+  --mk-z-toast:    800;
+  --mk-z-top:      9999;
+}
+
+/* ----- Light Theme Override ----- */
+[data-mk-theme="light"] {
+  --mk-bg:           #ffffff;
+  --mk-bg-elevated:  #f8fafc;
+  --mk-surface:      #f1f5f9;
+  --mk-surface-hover:#e2e8f0;
+  --mk-surface-active:#cbd5e1;
+  --mk-surface-raised:#ffffff;
+
+  --mk-border:        #e2e8f0;
+  --mk-border-hover:  #cbd5e1;
+  --mk-border-active: #94a3b8;
+  --mk-divider:       rgba(0,0,0,0.06);
+
+  --mk-text:           #0f172a;
+  --mk-text-primary:   #1e293b;
+  --mk-text-secondary: #475569;
+  --mk-text-tertiary:  #94a3b8;
+  --mk-text-disabled:  #cbd5e1;
+  --mk-text-inverse:   #f8fafc;
+
+  --mk-shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
+  --mk-shadow:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --mk-shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
+  --mk-shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.03);
+  --mk-shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.02);
+  --mk-shadow-glow: 0 0 20px rgba(99,102,241,0.12);
+}

package/src/components/styles/variables.css

@@ -0,0 +1,24 @@
+:root {
+  --mk-bg: #09090b;
+  --mk-surface: #12121a;
+  --mk-surface-hover: #1a1a25;
+  --mk-border: #1f1f2e;
+  --mk-border-hover: #2e2e42;
+
+  --mk-primary: #6366f1;
+  --mk-primary-hover: #818cf8;
+  --mk-primary-active: #4f46e5;
+
+  --mk-success: #22c55e;
+  --mk-warning: #f59e0b;
+  --mk-danger: #ef4444;
+
+  --mk-text: #f8fafc;
+  --mk-text-secondary: #94a3b8;
+  --mk-text-tertiary: #64748b;
+
+  --mk-radius: 8px;
+  --mk-radius-lg: 12px;
+
+  --mk-transition: 0.15s ease;
+}

package/src/components/switch/switch.css

@@ -0,0 +1,53 @@
+.mk-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.mk-switch__core {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  background: var(--mk-surface-hover);
+  border: 1px solid var(--mk-border);
+  border-radius: 11px;
+  transition: var(--mk-transition);
+  flex-shrink: 0;
+}
+
+.mk-switch__core::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: var(--mk-text-secondary);
+  border-radius: 50%;
+  transition: var(--mk-transition);
+}
+
+.mk-switch.is-checked .mk-switch__core {
+  background: var(--mk-primary);
+  border-color: var(--mk-primary);
+}
+.mk-switch.is-checked .mk-switch__core::after {
+  transform: translateX(18px);
+  background: #fff;
+}
+
+.mk-switch__label {
+  font-size: 13px;
+  color: var(--mk-text-secondary);
+  transition: color 0.2s;
+}
+.mk-switch.is-checked .mk-switch__label--active {
+  color: var(--mk-text);
+}
+
+.mk-switch.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/src/components/switch/switch.ts

@@ -0,0 +1,103 @@
+import './switch.css'
+import { onKey, Keys } from '../../a11y/keyboard.ts'
+
+export interface SwitchOptions {
+  value?: boolean
+  disabled?: boolean
+  activeText?: string
+  inactiveText?: string
+  onChange?: (value: boolean) => void
+}
+
+export class MkSwitch {
+  el: HTMLLabelElement
+  private core: HTMLDivElement
+  private options: SwitchOptions
+  private _value: boolean
+  private activeLabel?: HTMLSpanElement
+  private _cleanupKey?: () => void
+  private inactiveLabel?: HTMLSpanElement
+
+  constructor(container: HTMLElement | string, options: SwitchOptions = {}) {
+    const parent =
+      typeof container === 'string'
+        ? document.querySelector(container)!
+        : container
+
+    this.options = { value: false, ...options }
+    this._value = this.options.value!
+
+    this.el = document.createElement('label')
+    this.el.className = 'mk-switch'
+    if (this._value) this.el.classList.add('is-checked')
+    if (this.options.disabled) this.el.classList.add('is-disabled')
+    this.el.setAttribute('role', 'switch')
+    this.el.setAttribute('aria-checked', String(this._value))
+    if (!this.options.disabled) {
+      this.el.setAttribute('tabindex', '0')
+    }
+
+    if (this.options.inactiveText) {
+      this.inactiveLabel = document.createElement('span')
+      this.inactiveLabel.className = 'mk-switch__label'
+      this.inactiveLabel.textContent = this.options.inactiveText
+      if (!this._value) this.inactiveLabel.classList.add('mk-switch__label--active')
+      this.el.appendChild(this.inactiveLabel)
+    }
+
+    this.core = document.createElement('div')
+    this.core.className = 'mk-switch__core'
+    this.el.appendChild(this.core)
+
+    if (this.options.activeText) {
+      this.activeLabel = document.createElement('span')
+      this.activeLabel.className = 'mk-switch__label'
+      this.activeLabel.textContent = this.options.activeText
+      if (this._value) this.activeLabel.classList.add('mk-switch__label--active')
+      this.el.appendChild(this.activeLabel)
+    }
+
+    this.el.addEventListener('click', () => {
+      if (this.options.disabled) return
+      this.toggle()
+    })
+
+    this._cleanupKey = onKey(this.el, [
+      { key: Keys.Enter, handler: () => this.toggle() },
+      { key: Keys.Space, handler: () => this.toggle() },
+    ])
+
+    parent.appendChild(this.el)
+  }
+
+  get value(): boolean {
+    return this._value
+  }
+
+  set value(v: boolean) {
+    if (this._value !== v) {
+      this._value = v
+      this.el.classList.toggle('is-checked', v)
+      this.el.setAttribute('aria-checked', String(v))
+      this.activeLabel?.classList.toggle('mk-switch__label--active', v)
+      this.inactiveLabel?.classList.toggle('mk-switch__label--active', !v)
+      this.options.onChange?.(v)
+    }
+  }
+
+  toggle(): void {
+    this.value = !this._value
+  }
+
+  destroy(): void {
+    this._cleanupKey?.()
+    this.el.remove()
+  }
+}
+
+export function createSwitch(
+  container: HTMLElement | string,
+  options?: SwitchOptions
+): MkSwitch {
+  return new MkSwitch(container, options)
+}