@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/input-otp/engine.ts

@@ -0,0 +1,106 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export interface InputOtpOptions {
+  length?: number;
+  value?: string;
+  mask?: boolean;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+}
+export interface InputOtpInstance extends Instance {
+  setValue(value: string, notify?: boolean): void;
+  focus(): void;
+  readonly value: string;
+}
+
+/** One real input preserves native editing, mobile autofill and password managers. */
+export function createInputOtp(root: HTMLElement | null, options: InputOtpOptions = {}): InputOtpInstance {
+  const input = root?.querySelector<HTMLInputElement>('[data-mk-otp-input]');
+  const slots = root?.querySelector<HTMLElement>('[data-mk-otp-slots]');
+  if (!root || !input || !slots) return inert({ setValue() {}, focus() {}, value: '' });
+  const scope = createScope();
+  const length = Number.isFinite(options.length) ? Math.min(16, Math.max(1, Math.round(options.length!))) : 6;
+  const clean = (text: string) => text.replace(/[^0-9]/g, '').slice(0, length);
+  const original = input.value;
+  const originalNodes = [...slots.childNodes];
+  let value = clean(options.value ?? input.value);
+  let pendingReset: Event | null = null;
+  const cells = Array.from({ length }, () => {
+    const cell = document.createElement('span');
+    cell.className = 'mk-input-otp__slot';
+    return cell;
+  });
+  slots.replaceChildren(...cells);
+  scope.attr(slots, 'aria-hidden', 'true');
+  scope.attr(input, 'type', 'text');
+  scope.attr(input, 'inputmode', 'numeric');
+  scope.attr(input, 'autocomplete', 'one-time-code');
+  scope.attr(input, 'maxlength', String(length));
+  scope.attr(input, 'pattern', `[0-9]{${length}}`);
+  scope.attr(root, 'data-mk-ready', '');
+  const render = () => {
+    if (pendingReset) {
+      if (pendingReset.eventPhase !== 0) return;
+      if (!pendingReset.defaultPrevented) value = clean(input.value);
+      pendingReset = null;
+    }
+    input.value = value;
+    const active = document.activeElement === input ? Math.min(length - 1, input.selectionStart ?? value.length) : -1;
+    cells.forEach((cell, i) => {
+      const text = value[i] ? options.mask ? '•' : value[i]! : '';
+      if (cell.textContent !== text) cell.textContent = text;
+      cell.toggleAttribute('data-mk-active', i === active);
+      cell.toggleAttribute('data-mk-filled', i < value.length);
+    });
+    scope.attr(root, 'data-mk-complete', value.length === length ? '' : null);
+  };
+  const setValue = (next: string, notify = true) => {
+    if (scope.disposed) return;
+    if (pendingReset?.eventPhase === 0) pendingReset = null;
+    const previous = value;
+    value = clean(String(next));
+    render();
+    if (notify && value !== previous) {
+      options.onChange?.(value);
+      root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value, complete: value.length === length } }));
+      if (value.length === length) {
+        options.onComplete?.(value);
+        root.dispatchEvent(new CustomEvent('mk:complete', { bubbles: true, detail: { value } }));
+      }
+    }
+  };
+  scope.on(input, 'input', (event) => {
+    if ((event as InputEvent).isComposing) return;
+    const caret = clean(input.value.slice(0, input.selectionStart ?? input.value.length)).length;
+    setValue(input.value);
+    input.setSelectionRange(caret, caret);
+    render();
+  });
+  scope.on(input, 'compositionend', () => setValue(input.value));
+  scope.on(input, 'paste', (event) => {
+    const text = (event as ClipboardEvent).clipboardData?.getData('text');
+    if (text === undefined) return;
+    event.preventDefault();
+    const start = input.selectionStart ?? value.length;
+    const end = input.selectionEnd ?? start;
+    const inserted = clean(text);
+    setValue(value.slice(0, start) + inserted + value.slice(end));
+    const caret = Math.min(length, start + inserted.length);
+    input.setSelectionRange(caret, caret);
+    render();
+  });
+  scope.on(input, 'focus', render);
+  scope.on(input, 'blur', render);
+  scope.on(input, 'keyup', render);
+  scope.on(input, 'click', render);
+  scope.on(document, 'selectionchange', () => { if (document.activeElement === input) render(); });
+  if (input.form) scope.on(input.form, 'reset', (event) => {
+    render();
+    pendingReset = event;
+    scope.timeout(() => { if (pendingReset === event) render(); }, 0);
+  });
+  scope.add(() => { slots.replaceChildren(...originalNodes); input.value = original; });
+  render();
+  return { setValue, focus: () => { if (!scope.disposed) input.focus(); }, get value() { return value; }, destroy: () => scope.dispose() };
+}

package/src/components/input-otp/input-otp.css

@@ -0,0 +1,9 @@
+.mk-input-otp, mk-input-otp { --mk-otp-size: 2.75rem; --mk-otp-gap: .4rem; display: inline-block; position: relative; max-width: 100%; }
+.mk-input-otp [data-mk-otp-slots], mk-input-otp [data-mk-otp-slots] { display: flex; flex-wrap: wrap; gap: var(--mk-otp-gap); }
+.mk-input-otp__slot { box-sizing: border-box; width: var(--mk-otp-size); height: 3.5rem; display: grid; place-items: center; border: 1px solid var(--mk-outline-soft); border-radius: var(--mk-radius-sm); color: var(--mk-text); background: var(--mk-surface-1); font: 1.5rem var(--mk-font-mono, monospace); transition: border-color .2s, background .2s, transform .2s; }
+.mk-input-otp__slot[data-mk-active] { outline: 2px solid var(--mk-accent); outline-offset: 2px; background: var(--mk-accent-soft); color: var(--mk-on-accent-soft); transform: translateY(-2px); }
+.mk-input-otp [data-mk-otp-input], mk-input-otp [data-mk-otp-input] { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; border: 0; background: transparent; color: transparent; caret-color: transparent; outline: 0; font: 1.5rem var(--mk-font-mono, monospace); letter-spacing: calc(var(--mk-otp-size) + var(--mk-otp-gap) - 1ch); padding: 0 0 0 calc((var(--mk-otp-size) - 1ch) / 2); }
+.mk-input-otp:has([aria-invalid=true]) .mk-input-otp__slot, mk-input-otp:has([aria-invalid=true]) .mk-input-otp__slot { border-color: var(--mk-error); }
+.mk-input-otp:has(:disabled), mk-input-otp:has(:disabled) { opacity: .45; }
+@media (max-width: 420px) { .mk-input-otp, mk-input-otp { --mk-otp-size: 2.25rem; --mk-otp-gap: .3rem; } }
+@media (prefers-reduced-motion: reduce) { .mk-input-otp__slot { transition: none; transform: none !important; } }

package/src/components/input-otp/react.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createInputOtp, type InputOtpOptions } from './engine';
+export interface InputOtpProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onComplete' | 'defaultValue'>, InputOtpOptions {
+  label?: string; name?: string; disabled?: boolean; required?: boolean; invalid?: boolean; defaultValue?: string;
+}
+export function InputOtp({ length, value, defaultValue, mask, onChange, onComplete, label = 'Código de verificación', name, disabled, required, invalid, className, ...props }: InputOtpProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const edited = useRef<string | undefined>(undefined);
+  const change = useLatest(onChange);
+  const complete = useLatest(onComplete);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createInputOtp(ref.current, { length, value: value ?? edited.current, mask, onChange: (n) => change.current?.(n), onComplete: (n) => complete.current?.(n) });
+    return () => { edited.current = instance.value; instance.destroy(); };
+  }, [length, value, mask]);
+  return <div {...props} ref={ref} className={['mk-input-otp', className].filter(Boolean).join(' ')}>
+    <span data-mk-otp-slots aria-hidden="true" />
+    <input data-mk-otp-input type="text" aria-label={label} name={name} defaultValue={value ?? defaultValue ?? ''} disabled={disabled} required={required} aria-invalid={invalid || undefined} />
+  </div>;
+}

package/src/components/json-viewer/README.md

@@ -0,0 +1,56 @@
+# json-viewer
+
+Visualizador de JSON con nodos expandibles, montado sobre `tree-view`. Muestra cada clave con su valor coloreado por tipo: textos en verde, números en azul, booleanos en violeta y `null` atenuado en cursiva; los colores (`"#7c5cff"`, `"rgb(…)"`) llevan su muestra. Los objetos y las listas se resumen («6 claves», «3 elementos») y se abren por niveles con el movimiento del árbol: la altura crece (.32 s, curva signature), los hijos salen de un blur y la flecha gira.
+
+Cada fila tiene un botón de copiar que se vuelve una palomita con un pop; Ctrl/⌘ + C copia el valor de la fila enfocada. La búsqueda resalta claves y valores y abre lo que los contiene. Con `setData()` se conserva lo abierto: los valores que cambiaron destellan un momento en el acento y las claves nuevas entran saliendo de un blur, ideal para respuestas que llegan en vivo. La ruta de la fila seleccionada (`$.user.roles[0]`) aparece abajo, lista para copiar.
+
+## HTML / Astro
+
+```html
+<mk-json-viewer class="mk-json-viewer" expand-depth="2" search
+  data='{"user":{"name":"Ana","roles":["admin","editor"],"color":"#7c5cff"},"total":1250.5}'></mk-json-viewer>
+
+<!-- O el JSON escrito dentro: -->
+<mk-json-viewer class="mk-json-viewer" root-name="respuesta">
+  <script type="application/json">{ "ok": true, "items": [1, 2, 3] }</script>
+</mk-json-viewer>
+
+<script>
+  const viewer = document.querySelector('mk-json-viewer');
+  viewer.addEventListener('mk:copy', (event) => console.log('Copiado', event.detail.path));
+</script>
+```
+
+## React
+
+```tsx
+<JsonViewer data={respuesta} expandDepth={2} search onSelect={(path, value) => console.log(path, value)} />
+```
+
+Cambiar `data` conserva lo abierto y marca lo que cambió.
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `data` | `data` (JSON) | el JSON escrito dentro | El valor a mostrar. |
+| `expandDepth` | `expand-depth` | `1` | Niveles abiertos al empezar: `1` muestra las claves de arriba cerradas, `2` las abre… (`Infinity`, todo). |
+| `rootName` | `root-name` | — | Una fila para el valor completo con este nombre; sin ella, las claves de arriba son las primeras filas. |
+| `search` | `search` | `false` | Campo de búsqueda; un texto es su marcador. |
+| `toolbar` | `toolbar` | `true` | Botones para expandir, contraer y copiar todo. |
+| `sortKeys` | `sort-keys` | `false` | Claves en orden alfabético. |
+| `label` | `label` | `'Datos JSON'` | Nombre accesible. |
+| `onSelect(path, value)` | — | — | Se seleccionó una fila. |
+| `onCopy(text, path)` | — | — | Se copió un valor. |
+
+## API y eventos
+
+`setData(data)`, `expandAll()`, `collapseAll()`, `reveal(path)`, `filter(texto)`, `copy(path = '$')` (promesa: `true` si se copió), `data`, `destroy()`. Eventos `mk:select` con `{ path, value }` y `mk:copy` con `{ text, path }`. El ayudante `jsonPath(padre, clave)` arma rutas como las del visor.
+
+## Variables CSS
+
+`--mk-jv-height` (alto máximo antes de desplazarse dentro), `--mk-jv-string`, `--mk-jv-number`, `--mk-jv-boolean` (colores de los valores; cambian solos en modo oscuro).
+
+## Accesibilidad
+
+Es un árbol de WAI-ARIA con todo su teclado (↑ ↓, → abre, ← cierra, `*`, Inicio, Fin, escribir para saltar), con Ctrl/⌘ + C para copiar sin buscar el botón. Los botones de copiar no son paradas de tabulación y dicen qué copian («Copiar $.user.name»). Un estado discreto anuncia cada copia, las coincidencias y lo que cambió con datos nuevos. Con movimiento reducido no hay destellos ni animaciones.

package/src/components/json-viewer/element.ts

@@ -0,0 +1,37 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createJsonViewer, type JsonViewerInstance } from './engine';
+
+/**
+ * <mk-json-viewer class="mk-json-viewer" expand-depth="2" search data='{"user":{"name":"Ana","roles":["admin"]}}'></mk-json-viewer>
+ * Or the JSON as the element's text. Emits mk:select ({path, value}) and mk:copy ({text, path}).
+ */
+export class MkJsonViewerElement extends MkElement<JsonViewerInstance> {
+  static options: Record<string, OptionType> = {
+    data: 'json',
+    expandDepth: 'number',
+    rootName: 'string',
+    search: 'string',
+    toolbar: 'boolean',
+    sortKeys: 'boolean',
+    label: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    // search="" (present without text) turns the field on with its default placeholder.
+    const search = this.hasAttribute('search') ? (this.getAttribute('search') || true) : undefined;
+    return createJsonViewer(this, { ...options, search });
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'data') {
+      try {
+        this.instance.setData(JSON.parse(next ?? 'null'));
+      } catch {
+        // Malformed JSON: keep the current data.
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineJsonViewer = () => defineElement('mk-json-viewer', MkJsonViewerElement);