@yewdiel21/motion-kit 0.15.0 → 0.17.0

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

@@ -0,0 +1,210 @@
+import { createScope } from '../../core/scope';
+import { reduced } from '../../core/reduced';
+import { inert, type Instance } from '../../core/types';
+
+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: '' });
+  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 dragging: { id: number; y: number; top: number; moved: boolean } | null = null;
+  let suppressClick = false;
+  scope.add(() => { clearTimeout(timer); clearTimeout(typing); });
+
+  const paint = () => {
+    const offset = viewport.scrollTop / height;
+    nodes.forEach((node, index) => {
+      const distance = Math.max(-3, Math.min(3, index - offset));
+      node.style.transform = reduced() ? '' : `perspective(600px) rotateX(${-distance * 14}deg) scale(${1 - Math.abs(distance) * 0.055})`;
+      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 ?? ''; }
+    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) => {
+    const top = Math.max(0, current) * height;
+    if (animate && !reduced() && typeof viewport.scrollTo === 'function') {
+      programmatic = top; viewport.scrollTo({ top, behavior: 'smooth' });
+    } 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;
+    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 = () => {
+    if (programmatic !== null && typeof viewport.scrollTo === 'function') viewport.scrollTo({ top: viewport.scrollTop, behavior: 'instant' });
+    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,16 @@
+.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; }
+[data-mk-wheel-highlight] { position: absolute; top: calc(50% - var(--mk-wheel-row) / 2); right: .5rem; left: .5rem; height: var(--mk-wheel-row); border: 1px solid var(--mk-outline-soft); border-radius: var(--mk-radius-full); background: var(--mk-surface-3); 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 35%, #000 65%, 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-muted); font-size: 1.1rem; font-variant-numeric: tabular-nums; font-weight: 450; scroll-snap-align: center; cursor: pointer; user-select: none; transform-origin: center; transition: color .18s ease; }
+[data-mk-wheel-option][aria-selected='true'] { color: var(--mk-text); font-weight: 650; }
+[data-mk-wheel-option][aria-disabled='true'] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
+[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; } }