@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/swipe-actions/engine.ts

@@ -0,0 +1,260 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { press } from '../../motion/micro';
+
+/*
+ * Swipe actions: a horizontal drag on a list row ([data-mk-swipe-row]) slides
+ * its face ([data-mk-swipe-content]) aside and shows the actions behind it
+ * ([data-mk-swipe-actions="left|right"] with buttons [data-mk-swipe-action]).
+ * The icons grow as the drag passes the opening point; letting go snaps the row
+ * open or shut on the swing curve. A long swipe (60 %) runs the side's primary
+ * action: the face slides out and, for [data-mk-swipe-remove] actions, the row
+ * folds away (blur, height to 0) before mk:action fires so the app can drop it.
+ * One row open at a time; Escape or a tap elsewhere shuts it. The actions are
+ * real buttons: focusing one opens its row. Vertical scrolling stays native.
+ */
+
+export type SwipeSide = 'left' | 'right';
+
+export interface SwipeActionsOptions {
+  /** Share of the row width that runs the primary action (default .6; 0 turns it off). */
+  fullSwipe?: number;
+  onAction?: (action: string, row: HTMLElement) => void;
+}
+
+export interface SwipeActionsInstance extends Instance {
+  open(row: HTMLElement, side: SwipeSide): void;
+  close(): void;
+  readonly openRow: HTMLElement | null;
+}
+
+const ROW = '[data-mk-swipe-row]';
+const SLOP = 8;
+
+export function createSwipeActions(root: HTMLElement | null, options: SwipeActionsOptions = {}): SwipeActionsInstance {
+  if (!root) return inert({ open() {}, close() {}, openRow: null });
+  registerMotion();
+  const scope = createScope();
+  const full = Number.isFinite(options.fullSwipe) ? Math.max(0, Math.min(0.95, options.fullSwipe!)) : 0.6;
+  scope.attr(root, 'data-mk-ready', '');
+
+  let current: { row: HTMLElement; side: SwipeSide } | null = null;
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  const touched = new Set<HTMLElement>();
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    for (const element of touched) {
+      gsap.set(element, { clearProps: 'transform,height,opacity,filter,marginTop,marginBottom,paddingTop,paddingBottom,overflow' });
+      element.removeAttribute('data-mk-open');
+      element.removeAttribute('data-mk-armed');
+      element.style.removeProperty('--mk-swipe-reveal');
+      if (element.getAttribute('style') === '') element.removeAttribute('style');
+    }
+  });
+
+  const parts = (row: HTMLElement) => ({
+    face: row.querySelector<HTMLElement>('[data-mk-swipe-content]'),
+    left: row.querySelector<HTMLElement>('[data-mk-swipe-actions="left"]'),
+    right: row.querySelector<HTMLElement>('[data-mk-swipe-actions="right"]'),
+  });
+  const widthOf = (actions: HTMLElement | null) => actions?.getBoundingClientRect().width || actions?.offsetWidth || 0;
+  const primaryOf = (actions: HTMLElement | null) => actions?.querySelector<HTMLButtonElement>('[data-mk-swipe-primary]') ?? (actions?.dataset.mkSwipeActions === 'right' ? actions.querySelector<HTMLButtonElement>('[data-mk-swipe-action]:last-of-type') : actions?.querySelector<HTMLButtonElement>('[data-mk-swipe-action]')) ?? null;
+
+  const move = (row: HTMLElement, x: number, animate: boolean) => {
+    const { face } = parts(row);
+    if (!face) return;
+    touched.add(face);
+    touched.add(row);
+    if (!animate || reduced()) gsap.set(face, { x });
+    else keep(gsap.to(face, { x, duration: 0.5, ease: EASE.swatch, overwrite: 'auto' }));
+  };
+
+  const close = (animate = true) => {
+    if (!current) return;
+    const { row } = current;
+    current = null;
+    row.removeAttribute('data-mk-open');
+    row.removeAttribute('data-mk-armed');
+    row.style.removeProperty('--mk-swipe-reveal');
+    move(row, 0, animate);
+  };
+
+  const open = (row: HTMLElement, side: SwipeSide, animate = true) => {
+    if (scope.disposed || !root.contains(row)) return;
+    const actions = parts(row)[side];
+    if (!actions) return;
+    if (current && current.row !== row) close();
+    current = { row, side };
+    row.setAttribute('data-mk-open', side);
+    row.style.setProperty('--mk-swipe-reveal', '1');
+    touched.add(row);
+    move(row, side === 'left' ? widthOf(actions) : -widthOf(actions), animate);
+    root.dispatchEvent(new CustomEvent('mk:open', { bubbles: true, detail: { row, side } }));
+  };
+
+  /** Run an action: emit; a removing action folds the row away first. */
+  const run = (button: HTMLButtonElement, row: HTMLElement, swiped: boolean) => {
+    const action = button.dataset.mkSwipeAction ?? button.textContent?.trim() ?? '';
+    const emit = () => {
+      options.onAction?.(action, row);
+      root.dispatchEvent(new CustomEvent('mk:action', { bubbles: true, detail: { action, row } }));
+    };
+    keep(press(button));
+    if (!button.hasAttribute('data-mk-swipe-remove')) {
+      if (current?.row === row) close();
+      return emit();
+    }
+    current = null;
+    row.removeAttribute('data-mk-open');
+    touched.add(row);
+    if (reduced()) {
+      gsap.set(row, { height: 0, opacity: 0, overflow: 'hidden', paddingTop: 0, paddingBottom: 0, marginTop: 0, marginBottom: 0 });
+      return emit();
+    }
+    const { face } = parts(row);
+    const width = row.getBoundingClientRect().width || 400;
+    const side = Number(gsap.getProperty(face, 'x')) >= 0 ? 1 : -1;
+    keep(
+      gsap
+        .timeline({ onComplete: emit })
+        .to(face, { x: side * width * (swiped ? 1.05 : 1), duration: 0.3, ease: 'power2.in' })
+        .to(row, { height: 0, opacity: 0, filter: 'blur(16px)', paddingTop: 0, paddingBottom: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden', duration: 0.25, ease: 'power2.in' }),
+    );
+  };
+
+  // The drag.
+  /** The click that ends a drag is not a tap. */
+  let dragged = false;
+  let drag: { row: HTMLElement; x0: number; y0: number; start: number; id: number; horizontal: boolean | null } | null = null;
+  scope.on(root, 'pointerdown', (event) => {
+    const pointer = event as PointerEvent;
+    if (pointer.button !== 0) return;
+    const target = pointer.target as Element | null;
+    if (target?.closest('[data-mk-swipe-action], a, input, select, textarea')) return;
+    const row = target?.closest<HTMLElement>(ROW);
+    const face = row && parts(row).face;
+    if (!row || !face || !root.contains(row)) return;
+    gsap.killTweensOf(face, 'x');
+    drag = { row, x0: pointer.clientX, y0: pointer.clientY, start: Number(gsap.getProperty(face, 'x')) || 0, id: pointer.pointerId, horizontal: null };
+  });
+  scope.on(root, 'pointermove', (event) => {
+    const pointer = event as PointerEvent;
+    if (!drag || pointer.pointerId !== drag.id) return;
+    const dx = pointer.clientX - drag.x0;
+    const dy = pointer.clientY - drag.y0;
+    if (drag.horizontal === null) {
+      if (Math.abs(dx) < SLOP && Math.abs(dy) < SLOP) return;
+      drag.horizontal = Math.abs(dx) > Math.abs(dy);
+      if (!drag.horizontal) {
+        drag = null;
+        return;
+      }
+      if (current && current.row !== drag.row) close();
+      (pointer.target as Element).setPointerCapture?.(pointer.pointerId);
+      drag.row.setAttribute('data-mk-dragging', '');
+    }
+    const { left, right } = parts(drag.row);
+    let x = drag.start + dx;
+    // No actions on a side: it resists.
+    if ((x > 0 && !left) || (x < 0 && !right)) x *= 0.15;
+    const actions = x > 0 ? left : right;
+    const reach = widthOf(actions);
+    const width = drag.row.getBoundingClientRect().width || 1;
+    // Past the actions the drag slows down, unless a long swipe is on.
+    if (reach && Math.abs(x) > reach && !full) x = Math.sign(x) * (reach + (Math.abs(x) - reach) * 0.3);
+    drag.row.toggleAttribute('data-mk-armed', Boolean(full) && Math.abs(x) >= width * full);
+    drag.row.style.setProperty('--mk-swipe-reveal', String(Math.min(1, reach ? Math.abs(x) / reach : 0)));
+    touched.add(drag.row);
+    move(drag.row, x, false);
+  });
+  const release = (event: Event) => {
+    const pointer = event as PointerEvent;
+    if (!drag || pointer.pointerId !== drag.id) return;
+    const { row, horizontal } = drag;
+    drag = null;
+    row.removeAttribute('data-mk-dragging');
+    if (!horizontal) return;
+    dragged = true;
+    setTimeout(() => (dragged = false), 0);
+    const face = parts(row).face!;
+    const x = Number(gsap.getProperty(face, 'x')) || 0;
+    const side: SwipeSide = x > 0 ? 'left' : 'right';
+    const actions = parts(row)[side];
+    const width = row.getBoundingClientRect().width || 1;
+    row.removeAttribute('data-mk-armed');
+    const primary = primaryOf(actions);
+    if (full && actions && primary && Math.abs(x) >= width * full) return run(primary, row, true);
+    if (actions && Math.abs(x) > widthOf(actions) / 2) open(row, side);
+    else {
+      if (current?.row === row) current = null;
+      row.removeAttribute('data-mk-open');
+      row.style.removeProperty('--mk-swipe-reveal');
+      move(row, 0, true);
+    }
+  };
+  scope.on(root, 'pointerup', release);
+  scope.on(root, 'pointercancel', release);
+  // A click after a drag is not a tap on the row.
+  scope.on(
+    root,
+    'click',
+    (event) => {
+      if (dragged) {
+        dragged = false;
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      const button = (event.target as Element | null)?.closest<HTMLButtonElement>('[data-mk-swipe-action]');
+      const row = button?.closest<HTMLElement>(ROW);
+      if (button && row && root.contains(row)) {
+        run(button, row, false);
+        return;
+      }
+      if (current && !(event.target as Element | null)?.closest('[data-mk-swipe-actions]')) {
+        const inside = (event.target as Element | null)?.closest(ROW) === current.row;
+        close();
+        if (inside) event.preventDefault();
+      }
+    },
+    true,
+  );
+  scope.on(document, 'pointerdown', (event) => {
+    if (current && !current.row.contains(event.target as Node)) close();
+  });
+  scope.on(root, 'keydown', (event) => {
+    if ((event as KeyboardEvent).key === 'Escape' && current) {
+      const row = current.row;
+      close();
+      parts(row).face?.focus?.();
+    }
+  });
+  // Keyboard: focusing an action opens its row.
+  scope.on(root, 'focusin', (event) => {
+    const actions = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-swipe-actions]');
+    const row = actions?.closest<HTMLElement>(ROW);
+    if (actions && row && current?.row !== row) open(row, actions.dataset.mkSwipeActions as SwipeSide);
+  });
+  scope.on(root, 'focusout', (event) => {
+    const next = (event as FocusEvent).relatedTarget as Element | null;
+    if (current && !current.row.contains(next)) close();
+  });
+
+  return {
+    open: (row, side) => open(row, side),
+    close: () => close(),
+    get openRow() {
+      return current?.row ?? null;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/swipe-actions/react.tsx

@@ -0,0 +1,80 @@
+'use client';
+import { useRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createSwipeActions } from './engine';
+
+export interface SwipeAction {
+  id: string;
+  label: string;
+  /** Glyph or icon inside the round button. */
+  icon?: ReactNode;
+  tone?: 'neutral' | 'danger' | 'accent';
+  /** The row folds away after it runs (the app then removes it). */
+  remove?: boolean;
+  /** Run by a long swipe on its side. */
+  primary?: boolean;
+}
+
+export interface SwipeRowProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+  left?: SwipeAction[];
+  right?: SwipeAction[];
+  children?: ReactNode;
+}
+
+function Actions({ side, actions }: { side: 'left' | 'right'; actions: SwipeAction[] }) {
+  return (
+    <div data-mk-swipe-actions={side}>
+      {actions.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          data-mk-swipe-action={action.id}
+          data-mk-tone={action.tone}
+          data-mk-swipe-remove={action.remove ? '' : undefined}
+          data-mk-swipe-primary={action.primary ? '' : undefined}
+          aria-label={action.label}
+        >
+          {action.icon ?? action.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** One row: its face (children) and the actions behind each side. */
+function Row({ left, right, children, ...props }: SwipeRowProps) {
+  return (
+    <li {...props} data-mk-swipe-row="">
+      {left?.length ? <Actions side="left" actions={left} /> : null}
+      <div data-mk-swipe-content="">{children}</div>
+      {right?.length ? <Actions side="right" actions={right} /> : null}
+    </li>
+  );
+}
+
+export interface SwipeActionsProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
+  fullSwipe?: number;
+  /** An action ran (a removing one after its row folded away): update your data here. */
+  onAction?: (action: string, row: HTMLElement) => void;
+  children?: ReactNode;
+}
+
+function Root({ fullSwipe, onAction, className, children, ...props }: SwipeActionsProps) {
+  const ref = useRef<HTMLUListElement>(null);
+  const action = useLatest(onAction);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createSwipeActions(ref.current, { fullSwipe, onAction: (id, row) => action.current?.(id, row) });
+    return () => instance.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fullSwipe]);
+  return (
+    <ul {...props} ref={ref} className={['mk-swipe-actions', className].filter(Boolean).join(' ')}>
+      {children}
+    </ul>
+  );
+}
+
+/**
+ * <SwipeActions onAction={(id, row) => …}><SwipeActions.Row key={mail.id} data-id={mail.id} right={[{ id: 'delete', label: 'Eliminar', remove: true, tone: 'danger' }]}>…</SwipeActions.Row></SwipeActions>
+ */
+export const SwipeActions = Object.assign(Root, { Row });

package/src/components/swipe-actions/swipe-actions.css

@@ -0,0 +1,104 @@
+/* swipe-actions — Melonmind list rows (20 px radius, surface-1) that slide aside to show round action buttons
+   behind them; the icons grow as they appear and the primary one stretches when a long swipe is armed. */
+.mk-swipe-actions,
+mk-swipe-actions {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-row] {
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+  background: var(--mk-surface-3);
+  isolation: isolate;
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-content] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  min-height: 4rem;
+  padding: 0.75rem 1rem;
+  border-radius: inherit;
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+  touch-action: pan-y;
+  user-select: none;
+  cursor: grab;
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-row][data-mk-dragging] [data-mk-swipe-content] {
+  cursor: grabbing;
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-actions] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0 0.6rem;
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-actions='left'] {
+  left: 0;
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-actions='right'] {
+  right: 0;
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-action] {
+  display: grid;
+  place-items: center;
+  gap: 0.15rem;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-text);
+  color: var(--mk-bg);
+  font: inherit;
+  font-size: 0.6875rem;
+  cursor: pointer;
+  scale: calc(0.6 + var(--mk-swipe-reveal, 1) * 0.4);
+  transition:
+    width 0.35s cubic-bezier(0.38, 0.49, 0, 1.5),
+    border-radius 0.35s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-action][data-mk-tone='danger'] {
+  background: var(--mk-error);
+  color: var(--mk-on-error);
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-action][data-mk-tone='accent'] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-action]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+/* A long swipe is armed: the primary action stretches into a pill. */
+:is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-row][data-mk-armed] [data-mk-swipe-action]:is([data-mk-swipe-primary], :only-child) {
+  width: 5.5rem;
+  border-radius: 64px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-swipe-actions, mk-swipe-actions) [data-mk-swipe-action] {
+    transition: none;
+    scale: 1;
+  }
+}

package/src/components/tag-input/README.md

@@ -0,0 +1,42 @@
+# tag-input
+
+Entrada de etiquetas libres con autocompletado. Enter o una coma añaden lo escrito (o la sugerencia resaltada); al pegar «a, b; c» se añade cada una, una tras otra. Los chips nuevos aparecen con un pop y los que se quitan se pliegan. Las sugerencias salen del campo con una píldora que se desliza por la activa y las letras escritas marcadas.
+
+Una etiqueta repetida hace sonar el chip que ya la tiene (sacudida y anillo). Si `validate`, `restrict` o `max` rechazan una, el campo se sacude y debajo dice por qué (`aria-invalid` y el mensaje ligado al campo). Retroceso con el campo vacío marca el último chip y luego lo quita; ← llega a los chips.
+
+## HTML / Astro
+
+```html
+<mk-tag-input class="mk-tag-input" label="Etiquetas" value="diseño,urgente"
+  suggestions="diseño,código,contenido,urgente,cliente" max="6" name="etiquetas"></mk-tag-input>
+```
+
+## React
+
+```tsx
+<TagInput value={tags} onChange={setTags} suggestions={known}
+  validate={(tag) => (tag.length > 24 ? 'Máximo 24 letras' : null)} />
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `value` | `value` (lista con comas) | — | Etiquetas iniciales. |
+| `suggestions` | `suggestions` (lista) | — | Se ofrecen al escribir. |
+| `placeholder` | `placeholder` | `'Añadir etiqueta…'` | Texto del campo vacío. |
+| `label` | `label` | el `<label>` escrito, o «Etiquetas» | Nombre accesible. |
+| `name` | `name` | — | Campos ocultos `name[]`. |
+| `max` | `max` | sin límite | Máximo de etiquetas. |
+| `restrict` | `restrict` | `false` | Solo etiquetas de las sugerencias. |
+| `allowDuplicates` | `allow-duplicates` | `false` | Permitir repetidas (sin distinguir mayúsculas ni tildes). |
+| `validate(tag, tags)` | — | — | Devuelve un mensaje para rechazarla. |
+| `transform(tag)` | — | quitar espacios sobrantes | Limpia la etiqueta antes de añadirla. |
+| `disabled` | `disabled` | `false` | Desactivado. |
+| `onChange(tags)` | — | — | Cada cambio. |
+
+## API y eventos
+
+`setValue(tags, notify = false)`, `add(tag)` (devuelve `false` si se rechaza), `remove(tag)`, `setSuggestions(list)`, `value`, `destroy()`. Evento `mk:change` con `{ value }`.
+
+Con movimiento reducido los chips aparecen y desaparecen sin animación.

package/src/components/tag-input/element.ts

@@ -0,0 +1,39 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createTagInput, type TagInputInstance } from './engine';
+
+/**
+ * <mk-tag-input class="mk-tag-input" label="Etiquetas" value="diseño,urgente" suggestions="diseño,código,urgente" max="5" name="tags">
+ * </mk-tag-input>
+ * Emits mk:change ({value}).
+ */
+export class MkTagInputElement extends MkElement<TagInputInstance> {
+  static options: Record<string, OptionType> = {
+    value: 'list',
+    suggestions: 'list',
+    placeholder: 'string',
+    label: 'string',
+    name: 'string',
+    max: 'number',
+    restrict: 'boolean',
+    allowDuplicates: 'boolean',
+    disabled: 'boolean',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createTagInput(this, options);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    const list = (next ?? '').split(',').map((item) => item.trim()).filter(Boolean);
+    if (name === 'value') this.instance.setValue(list);
+    else if (name === 'suggestions') this.instance.setSuggestions(list);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+
+  get value() {
+    return this.instance?.value ?? [];
+  }
+}
+
+export const defineTagInput = () => defineElement('mk-tag-input', MkTagInputElement);