@yewdiel21/motion-kit 0.16.0 → 0.18.0

package/src/components/wheel-picker/engine.ts

@@ -0,0 +1,239 @@
+import { createScope } from '../../core/scope';
+import { reduced } from '../../core/reduced';
+import { inert, type Instance } from '../../core/types';
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+
+export interface WheelPickerItem { value: string; label: string; disabled?: boolean }
+export type WheelPickerEntry = string | WheelPickerItem;
+export interface WheelPickerOptions {
+  items?: WheelPickerEntry[];
+  value?: string;
+  name?: string;
+  label?: string;
+  disabled?: boolean;
+  /** Odd number of visible rows, 3…9 (default 5). */
+  visibleItems?: number;
+  /** Height per row in px, at least 44 (default 44). */
+  itemHeight?: number;
+  onInput?: (value: string) => void;
+  onChange?: (value: string) => void;
+}
+export interface WheelPickerInstance extends Instance {
+  setValue(value: string, notify?: boolean): void;
+  setItems(items: WheelPickerEntry[], notify?: boolean): void;
+  readonly value: string;
+}
+
+let sequence = 0;
+function normalize(items: WheelPickerEntry[]) {
+  const seen = new Set<string>();
+  return items.flatMap(item => {
+    const row = typeof item === 'string' ? { value: item, label: item } : item;
+    if (!row || typeof row !== 'object' || row.value == null) return [];
+    const value = String(row.value);
+    if (seen.has(value)) return [];
+    seen.add(value);
+    return [{ value, label: String(row.label ?? value), disabled: Boolean(row.disabled) }];
+  });
+}
+
+/** Native scrolling and inertia with a centred snap row, roving selection and a real form value. */
+export function createWheelPicker(root: HTMLElement | null, options: WheelPickerOptions = {}): WheelPickerInstance {
+  if (!root) return inert({ setValue() {}, setItems() {}, value: '' });
+  registerMotion();
+  const scope = createScope(), uid = `mk-wheel-${++sequence}`;
+  let items = normalize(Array.isArray(options.items) ? options.items : []);
+  const rawRows = Number.isFinite(options.visibleItems) ? Math.round(options.visibleItems!) : 5;
+  const rows = Math.min(9, Math.max(3, rawRows % 2 ? rawRows : rawRows + 1));
+  const height = Number.isFinite(options.itemHeight) ? Math.max(44, Math.min(96, options.itemHeight!)) : 44;
+  const disabled = Boolean(options.disabled);
+  const originalStyle = root.getAttribute('style');
+  root.style.setProperty('--mk-wheel-row', `${height}px`);
+  root.style.setProperty('--mk-wheel-rows', String(rows));
+  scope.add(() => { if (originalStyle === null) root.removeAttribute('style'); else root.setAttribute('style', originalStyle); });
+  scope.attr(root, 'data-mk-ready', ''); scope.attr(root, 'data-mk-disabled', disabled ? '' : null);
+  const label = document.createElement('span'); label.id = `${uid}-label`; label.dataset.mkWheelLabel = ''; label.textContent = options.label ?? root.getAttribute('aria-label') ?? 'Seleccionar';
+  const frame = document.createElement('div'); frame.dataset.mkWheelFrame = '';
+  const highlight = document.createElement('span'); highlight.dataset.mkWheelHighlight = ''; highlight.setAttribute('aria-hidden', 'true');
+  const viewport = document.createElement('div'); viewport.dataset.mkWheelViewport = ''; viewport.setAttribute('role', 'listbox'); viewport.setAttribute('aria-labelledby', label.id); viewport.setAttribute('aria-orientation', 'vertical'); viewport.setAttribute('aria-disabled', String(disabled)); viewport.tabIndex = disabled ? -1 : 0;
+  const list = document.createElement('div'); list.dataset.mkWheelList = ''; viewport.append(list); frame.append(highlight, viewport);
+  const input = document.createElement('input'); input.type = 'hidden'; if (options.name) input.name = options.name; input.disabled = disabled;
+  const status = document.createElement('span'); status.className = 'mk-sr-only'; status.setAttribute('role', 'status');
+  root.append(label, frame, input, status);
+  scope.add(() => { label.remove(); frame.remove(); input.remove(); status.remove(); });
+  const enabled = () => items.flatMap((item, index) => item.disabled ? [] : [index]);
+  const find = (value: string | undefined) => items.findIndex(item => value !== undefined && item.value === String(value) && !item.disabled);
+  let current = find(options.value); if (current < 0) current = enabled()[0] ?? -1;
+  const initial = items[current]?.value ?? '';
+  let committed = initial;
+  let nodes: HTMLDivElement[] = [];
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let typing: ReturnType<typeof setTimeout> | undefined;
+  let prefix = '';
+  let programmatic: number | null = null;
+  let glide: gsap.core.Tween | null = null;
+  let feedback: gsap.core.Tween | null = null;
+  let dragging: { id: number; y: number; top: number; moved: boolean } | null = null;
+  let suppressClick = false;
+  scope.add(() => { clearTimeout(timer); clearTimeout(typing); glide?.kill(); feedback?.kill(); });
+
+  // The drum's radius is half the frame, so 90° lands on its edge and each row keeps
+  // its arc length: rows compress, narrow and recede towards the rims like iOS.
+  const radius = height * rows / 2, step = height / radius, camera = radius * 3;
+  const paint = () => {
+    const offset = viewport.scrollTop / height, flat = reduced();
+    nodes.forEach((node, index) => {
+      const distance = index - offset;
+      // Project each row onto a cylinder. The ordinary list keeps native scroll,
+      // touch inertia and option semantics; Y/Z and orientation form the wheel.
+      const angle = distance * step, hidden = Math.abs(angle) >= Math.PI / 2;
+      const depth = radius * (Math.cos(angle) - 1);
+      // Depth narrows and shrinks the row; its centre stays on the drum's silhouette
+      // so the rims meet the frame instead of floating inside it.
+      const cameraScale = camera / (camera - depth);
+      const shiftY = (radius * Math.sin(angle) - distance * height) / cameraScale;
+      node.style.transform = flat || hidden ? '' : `perspective(${camera.toFixed(0)}px) translate3d(0, ${shiftY.toFixed(3)}px, ${depth.toFixed(3)}px) rotateX(${(-angle * 180 / Math.PI).toFixed(3)}deg)`;
+      node.style.opacity = String((items[index].disabled ? .32 : 1) * (flat ? 1 : hidden ? 0 : Math.pow(Math.cos(angle), 1.6)));
+      node.style.visibility = !flat && hidden ? 'hidden' : '';
+      node.style.pointerEvents = !flat && Math.abs(angle) > 1.2 ? 'none' : '';
+      node.setAttribute('aria-selected', String(index === current));
+    });
+    input.value = items[current]?.value ?? '';
+    if (current >= 0) viewport.setAttribute('aria-activedescendant', `${uid}-${current}`);
+    else viewport.removeAttribute('aria-activedescendant');
+  };
+  const announce = (kind: 'input' | 'change') => {
+    const value = items[current]?.value ?? '';
+    if (kind === 'input') options.onInput?.(value);
+    else {
+      options.onChange?.(value); status.textContent = items[current]?.label ?? '';
+      feedback?.kill();
+      if (!reduced()) feedback = gsap.fromTo(highlight, { scaleX: .94, scaleY: .82 }, { scaleX: 1, scaleY: 1, duration: .5, ease: EASE.click, clearProps: 'transform' });
+    }
+    input.dispatchEvent(new Event(kind, { bubbles: true }));
+    root.dispatchEvent(new CustomEvent(`mk:${kind}`, { bubbles: true, detail: { value, item: current >= 0 ? { ...items[current] } : null } }));
+  };
+  const align = (animate: boolean) => {
+    glide?.kill(); glide = null;
+    const top = Math.max(0, current) * height;
+    if (animate && !reduced()) {
+      programmatic = top;
+      const proxy = { top: viewport.scrollTop };
+      glide = gsap.to(proxy, { top, duration: .55, ease: EASE.swatch,
+        onUpdate: () => { viewport.scrollTop = proxy.top; paint(); },
+        onComplete: () => { glide = null; programmatic = null; viewport.scrollTop = top; paint(); },
+      });
+    } else { programmatic = null; viewport.scrollTop = top; paint(); }
+  };
+  const select = (index: number, notify: boolean, animate = true) => {
+    if (scope.disposed || index < 0 || index >= items.length || items[index].disabled) return;
+    const previous = items[current]?.value ?? '';
+    current = index; paint(); align(animate);
+    const value = items[current].value;
+    committed = value;
+    if (notify && value !== previous) { announce('input'); announce('change'); }
+  };
+  const nearest = () => {
+    const at = viewport.scrollTop / height;
+    return enabled().reduce((best, index) => best < 0 || Math.abs(index - at) < Math.abs(best - at) ? index : best, -1);
+  };
+  const settle = () => {
+    if (scope.disposed || dragging) return;
+    if (glide?.isActive()) return;
+    clearTimeout(timer);
+    if (programmatic !== null) {
+      // Keep controlled changes from notifying as native scrolling passes intermediate rows.
+      programmatic = null; viewport.scrollTop = Math.max(0, current) * height; paint(); return;
+    }
+    const index = nearest(); if (index < 0) return;
+    current = index; align(false); paint();
+    const value = items[current].value;
+    if (value !== committed) { committed = value; announce('change'); }
+  };
+  const build = () => {
+    list.replaceChildren();
+    nodes = items.map((item, index) => {
+      const node = document.createElement('div'); node.id = `${uid}-${index}`; node.dataset.mkWheelOption = String(index); node.setAttribute('role', 'option'); node.setAttribute('aria-disabled', String(item.disabled)); node.textContent = item.label; list.append(node); return node;
+    });
+    if (!items.length) { const empty = document.createElement('span'); empty.dataset.mkWheelEmpty = ''; empty.textContent = 'Sin opciones'; list.append(empty); }
+    align(false); paint();
+  };
+  const interrupt = () => {
+    glide?.kill(); glide = null;
+    programmatic = null;
+  };
+  scope.on(viewport, 'pointerdown', event => {
+    interrupt();
+    const pointer = event as PointerEvent;
+    if (disabled || pointer.pointerType === 'touch' || pointer.button !== 0) return;
+    dragging = { id: pointer.pointerId, y: pointer.clientY, top: viewport.scrollTop, moved: false };
+    viewport.focus({ preventScroll: true });
+  });
+  scope.on(window, 'pointermove', event => {
+    const pointer = event as PointerEvent;
+    if (!dragging || pointer.pointerId !== dragging.id) return;
+    const delta = pointer.clientY - dragging.y;
+    if (Math.abs(delta) > 4 && !dragging.moved) {
+      dragging.moved = true; viewport.style.scrollSnapType = 'none';
+      try { viewport.setPointerCapture(pointer.pointerId); } catch { /* Synthetic events have no pointer capture. */ }
+    }
+    if (!dragging.moved) return;
+    event.preventDefault();
+    viewport.scrollTop = Math.max(0, Math.min(Math.max(0, (items.length - 1) * height), dragging.top - delta));
+  });
+  const release = (event: Event) => {
+    if (!dragging || dragging.id !== (event as PointerEvent).pointerId) return;
+    suppressClick = dragging.moved; dragging = null; viewport.style.removeProperty('scroll-snap-type');
+    if (suppressClick) { settle(); clearTimeout(timer); timer = setTimeout(() => { suppressClick = false; }, 0); }
+  };
+  scope.on(window, 'pointerup', release); scope.on(window, 'pointercancel', release); scope.on(viewport, 'lostpointercapture', release);
+  scope.on(viewport, 'wheel', interrupt, { passive: true });
+  scope.on(viewport, 'scroll', () => {
+    if (disabled) return;
+    if (programmatic === null) {
+      const index = nearest();
+      if (index >= 0 && index !== current) { current = index; paint(); announce('input'); }
+    }
+    paint(); clearTimeout(timer); timer = setTimeout(settle, 100);
+  }, { passive: true });
+  scope.on(viewport, 'scrollend', settle);
+  scope.on(viewport, 'click', event => {
+    if (disabled) return;
+    if (suppressClick) { event.preventDefault(); suppressClick = false; return; }
+    const row = (event.target as Element).closest<HTMLElement>('[data-mk-wheel-option]');
+    if (!row || !list.contains(row)) return;
+    select(Number(row.dataset.mkWheelOption), true); viewport.focus({ preventScroll: true });
+  });
+  scope.on(viewport, 'keydown', event => {
+    if (disabled) return;
+    const key = (event as KeyboardEvent).key, choices = enabled(), at = choices.indexOf(current);
+    if (key === 'Enter' || key === ' ') { event.preventDefault(); return; }
+    const move = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : key === 'PageDown' ? rows - 1 : key === 'PageUp' ? 1 - rows : 0;
+    let next = key === 'Home' ? choices[0] : key === 'End' ? choices.at(-1) : move ? choices[Math.min(choices.length - 1, Math.max(0, at + move))] : undefined;
+    if (next === undefined && key.length === 1 && !(event as KeyboardEvent).ctrlKey && !(event as KeyboardEvent).metaKey) {
+      prefix += key.toLocaleLowerCase(); clearTimeout(typing); typing = setTimeout(() => { prefix = ''; }, 600);
+      next = choices.find(index => items[index].label.toLocaleLowerCase().startsWith(prefix));
+    }
+    if (next === undefined) return;
+    event.preventDefault(); interrupt(); select(next, true);
+  });
+  const form = root.closest('form');
+  if (form) scope.on(form, 'reset', event => queueMicrotask(() => {
+    if (scope.disposed || event.defaultPrevented) return;
+    const index = find(initial); select(index >= 0 ? index : enabled()[0] ?? -1, true, false); paint();
+  }));
+  build(); input.defaultValue = initial;
+  return {
+    setValue(value, notify = false) { const next = find(value); if (next !== current) select(next, notify); },
+    setItems(next, notify = false) {
+      if (scope.disposed) return;
+      clearTimeout(timer); programmatic = null;
+      const before = items[current]?.value ?? ''; items = normalize(Array.isArray(next) ? next : []);
+      current = find(before); if (current < 0) current = enabled()[0] ?? -1;
+      build(); committed = items[current]?.value ?? '';
+      if (notify && committed !== before) { announce('input'); announce('change'); }
+    },
+    get value() { return items[current]?.value ?? ''; },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/wheel-picker/react.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { useReducer, useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createWheelPicker, type WheelPickerInstance, type WheelPickerOptions } from './engine';
+
+export interface WheelPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput' | 'defaultValue' | 'children' | 'dangerouslySetInnerHTML'>, WheelPickerOptions {
+  defaultValue?: string;
+  instanceRef?: { current: WheelPickerInstance | null };
+}
+export function WheelPicker({ items, value, defaultValue, name, label, disabled, visibleItems, itemHeight, onInput, onChange, instanceRef, className, ...props }: WheelPickerProps) {
+  const ref = useRef<HTMLDivElement>(null), instance = useRef<WheelPickerInstance | null>(null);
+  const changed = useLatest(onChange), input = useLatest(onInput), latestItems = useLatest(items);
+  const controlled = useLatest(value);
+  const [, refresh] = useReducer((revision: number) => revision + 1, 0);
+  const last = useRef(value ?? defaultValue);
+  useIsomorphicLayoutEffect(() => {
+    const created = createWheelPicker(ref.current, { items: latestItems.current, value: value ?? last.current, name, label, disabled, visibleItems, itemHeight,
+      onInput: next => { last.current = next; input.current?.(next); }, onChange: next => { last.current = next; changed.current?.(next); if (controlled.current !== undefined) refresh(); } });
+    instance.current = created;
+    return () => { last.current = created.value; created.destroy(); instance.current = null; };
+  }, [name, label, disabled, visibleItems, itemHeight]);
+  const key = JSON.stringify(items ?? []);
+  useIsomorphicLayoutEffect(() => { instance.current?.setItems(items ?? []); }, [key]);
+  useIsomorphicLayoutEffect(() => { if (value !== undefined) instance.current?.setValue(value); });
+  useIsomorphicLayoutEffect(() => {
+    if (instanceRef) instanceRef.current = instance.current;
+    return () => { if (instanceRef) instanceRef.current = null; };
+  }, [instanceRef, name, label, disabled, visibleItems, itemHeight]);
+  const domProps: HTMLAttributes<HTMLDivElement> = { ...props };
+  delete domProps.children; delete domProps.dangerouslySetInnerHTML;
+  return <div {...domProps} ref={ref} className={['mk-wheel-picker', className].filter(Boolean).join(' ')} />;
+}

package/src/components/wheel-picker/wheel-picker.css

@@ -0,0 +1,17 @@
+.mk-wheel-picker, mk-wheel-picker { --mk-wheel-row: 44px; --mk-wheel-rows: 5; display: grid; gap: .75rem; min-width: 0; color: var(--mk-text); font-family: var(--mk-font); }
+[data-mk-wheel-label] { color: var(--mk-muted); font-size: .8125rem; text-align: center; }
+[data-mk-wheel-frame] { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: var(--mk-radius-xl); background: var(--mk-surface-1); }
+[data-mk-wheel-highlight] { position: absolute; top: calc(50% - var(--mk-wheel-row) / 2); right: .5rem; left: .5rem; height: var(--mk-wheel-row); border-radius: var(--mk-radius-md); background: var(--mk-surface-3); box-shadow: inset 0 1px color-mix(in srgb, var(--mk-text) 5%, transparent), inset 0 -1px color-mix(in srgb, var(--mk-text) 4%, transparent); pointer-events: none; z-index: -1; }
+[data-mk-wheel-viewport] { height: calc(var(--mk-wheel-row) * var(--mk-wheel-rows)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-tap-highlight-color: transparent; mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
+[data-mk-wheel-viewport]::-webkit-scrollbar { display: none; }
+[data-mk-wheel-viewport]:focus { outline: none; }
+[data-mk-wheel-frame]:has([data-mk-wheel-viewport]:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 24px; }
+[data-mk-wheel-list] { padding-block: calc(var(--mk-wheel-row) * (var(--mk-wheel-rows) - 1) / 2); }
+[data-mk-wheel-option] { display: grid; place-items: center; height: var(--mk-wheel-row); min-height: 44px; padding-inline: 1rem; color: var(--mk-text); font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 450; scroll-snap-align: center; cursor: pointer; user-select: none; transform-origin: center; backface-visibility: hidden; transition: color .18s ease; }
+[data-mk-wheel-option][aria-selected='true'] { color: var(--mk-text); font-weight: 650; }
+[data-mk-wheel-option]:not([aria-disabled='true']):hover { color: var(--mk-accent); }
+[data-mk-wheel-option][aria-disabled='true'] { color: var(--mk-muted); cursor: not-allowed; }
+[data-mk-wheel-empty] { display: block; text-align: center; color: var(--mk-muted); font-size: .875rem; }
+[data-mk-disabled] [data-mk-wheel-viewport] { overflow: hidden; opacity: .5; }
+@media (prefers-reduced-motion: reduce) { [data-mk-wheel-option] { transition: none; transform: none !important; } }
+@media (forced-colors: active) { [data-mk-wheel-highlight] { border: 2px solid Highlight; } }

package/src/css/tokens.css

@@ -15,6 +15,10 @@
   --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
   --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
   --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
+  --mk-ease-click: cubic-bezier(0.37, 1.42, 0.37, 1);
+  --mk-ease-playful: cubic-bezier(0.38, 0.49, 0, 2);
+  --mk-ease-pop: cubic-bezier(0.1, 0.8, 0, 1.1);
+  --mk-ease-wipe: cubic-bezier(0.38, 0.49, 0, 1);
   --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
   /* Glass, sheet and control curves */
   --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);