@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/drawer/README.md

@@ -0,0 +1,28 @@
+# drawer
+
+Panel lateral izquierdo/derecho u hoja inferior sobre el motor de [dialog](../dialog/README.md): `<dialog>` nativo, foco, Escape, fondo, botones de cierre, retorno de foco al disparador y bloqueo del scroll de la página mientras es modal. Los laterales entran deslizándose desde su lado (curva de la hoja, 0.72 s); el inferior es la variante `sheet` existente, con arrastre para cerrar.
+
+```html
+<button type="button" class="mk-button" data-mk-open="filtros">Filtros</button>
+<mk-drawer id="filtros" side="left" heading="Filtros" description="Acota la lista">
+  <label class="mk-field">…</label>
+  <footer data-mk-part="footer"><button class="mk-button" data-mk-close>Aplicar</button></footer>
+</mk-drawer>
+```
+
+`defineElements()`; `createDrawer(dialog, { side: 'left' })` sobre un `<dialog class="mk-dialog">` propio con partes `header`, `title`, `description`, `body`, `footer`, `close`. React:
+
+```tsx
+<Drawer.Root side="right" onOpenChange={setOpen}>
+  <Drawer.Trigger className="mk-button">Detalles</Drawer.Trigger>
+  <Drawer.Content>
+    <Drawer.Header><Drawer.Title>Pedido</Drawer.Title><Drawer.Close /></Drawer.Header>
+    <Drawer.Body>…</Drawer.Body>
+    <Drawer.Footer><button data-mk-close>Listo</button></Drawer.Footer>
+  </Drawer.Content>
+</Drawer.Root>
+```
+
+Opciones: `side='right'|'left'|'bottom'` y las de Dialog salvo variante, ubicación y ventana flotante (`backdrop`, `closeOnBackdrop`, `modal`, `drag` sólo abajo, `triggers`, `labels`, `onOpen`, `onClose`). Instancia igual que Dialog: `open(origin?)`, `close()`, `toggle()`, `isOpen`, `destroy()`; eventos `mk:open`, `mk:close` (cancelable) y `mk:closed`. `useDrawer()` da `{open, setOpen, side, instance}`. `Drawer.Root` acepta `open`, `defaultOpen` y `onOpenChange`.
+
+El cierre desliza una copia inerte para devolver el foco al momento. El custom element mueve sus hijos al `<dialog>` y los devuelve al desconectarse. Variables: `--mk-drawer-width` (400px), las de `.mk-dialog`. En móvil el lateral ocupa hasta el 88 % del ancho. Movimiento reducido abre y cierra sin desplazamiento.

package/src/components/drawer/drawer.css

@@ -0,0 +1,57 @@
+/* drawer — a full-height side panel (8 px from the edges, 400 px) or the bottom sheet; built on .mk-dialog. */
+.mk-dialog[data-mk-drawer] {
+  --mk-drawer-width: 400px;
+}
+
+.mk-dialog:is([data-mk-drawer='left'], [data-mk-drawer='right']):not([data-mk-placement='anchor']) {
+  position: fixed;
+  width: min(var(--mk-drawer-width), calc(100vw - 16px));
+  height: calc(100dvh - 16px);
+  max-height: none;
+  margin: 0;
+  border-radius: var(--mk-dialog-radius);
+}
+
+.mk-dialog[data-mk-drawer='left']:not([data-mk-placement='anchor']) {
+  inset: 8px auto 8px 8px;
+}
+
+.mk-dialog[data-mk-drawer='right']:not([data-mk-placement='anchor']) {
+  inset: 8px 8px 8px auto;
+}
+
+/* Footer actions stay at the bottom of the panel. */
+.mk-dialog[data-mk-drawer] [data-mk-part='footer'] {
+  margin-top: auto;
+}
+
+.mk-dialog[data-mk-drawer='bottom'] {
+  --mk-sheet-max-width: 640px;
+}
+
+/* Phones: the side panel keeps a strip of the page visible and squares its outer edge. */
+@media (max-width: 679px) {
+  .mk-dialog:is([data-mk-drawer='left'], [data-mk-drawer='right']):not([data-mk-placement='anchor']) {
+    width: min(var(--mk-drawer-width), 88vw);
+    height: 100dvh;
+    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
+  }
+
+  .mk-dialog[data-mk-drawer='left']:not([data-mk-placement='anchor']) {
+    inset: 0 auto 0 0;
+    border-radius: 0 var(--mk-dialog-radius) var(--mk-dialog-radius) 0;
+  }
+
+  .mk-dialog[data-mk-drawer='right']:not([data-mk-placement='anchor']) {
+    inset: 0 0 0 auto;
+    border-radius: var(--mk-dialog-radius) 0 0 var(--mk-dialog-radius);
+  }
+}
+
+mk-drawer {
+  display: contents;
+}
+
+mk-drawer:not(:defined) {
+  display: none;
+}

package/src/components/drawer/element.ts

@@ -0,0 +1,21 @@
+import { defineElement, type OptionType } from '../../elements/base';
+import type { DialogInstance, DialogOptions } from '../dialog/engine';
+import { MkDialogElement } from '../dialog/element';
+import { createDrawer, type DrawerSide } from './engine';
+
+/**
+ * <mk-drawer id="filtros" side="left" heading="Filtros" [description] [no-backdrop] [persistent]>…</mk-drawer>
+ * Any [data-mk-open="filtros"] opens it. Children move into a native <dialog class="mk-dialog mk-drawer">
+ * (header, body and a [data-mk-part="footer"] child kept out of the scroll) and back on disconnect.
+ */
+export class MkDrawerElement extends MkDialogElement {
+  static options: Record<string, OptionType> = { ...MkDialogElement.options, side: 'string' };
+
+  protected createEngine(dialog: HTMLDialogElement, options: DialogOptions, attributes: Record<string, unknown>): DialogInstance {
+    dialog.classList.add('mk-drawer');
+    const { variant: _variant, placement: _placement, float: _float, ...rest } = options;
+    return createDrawer(dialog, { ...rest, side: attributes.side as DrawerSide | undefined });
+  }
+}
+
+export const defineDrawer = () => defineElement('mk-drawer', MkDrawerElement);

package/src/components/drawer/engine.ts

@@ -0,0 +1,56 @@
+import { createScope } from '../../core/scope';
+import { inert, warnOnce } from '../../core/types';
+import { createDialog, type DialogInstance, type DialogOptions } from '../dialog/engine';
+
+/*
+ * Drawer: the dialog engine (native <dialog>, focus, Escape, backdrop, return
+ * to the opener, data-mk-close/[data-mk-part="close"] buttons) as a side panel
+ * that slides in from the left or right on the sheet curve, or a bottom sheet
+ * (the existing sheet variant, with drag to dismiss). Modal drawers lock the
+ * page scroll while open. Parts: header, title, description, body, footer, close.
+ */
+
+export type DrawerSide = 'left' | 'right' | 'bottom';
+
+export interface DrawerOptions extends Omit<DialogOptions, 'variant' | 'placement' | 'float' | 'anchor' | 'animateContent'> {
+  side?: DrawerSide;
+}
+
+export type DrawerInstance = DialogInstance;
+
+export function createDrawer(dialog: HTMLElement | null, options: DrawerOptions = {}): DrawerInstance {
+  if (!dialog) {
+    warnOnce('drawer: missing <dialog> element');
+    return inert({ open() {}, close() {}, toggle() {}, float() {}, dock() {}, isOpen: false, isFloating: false, element: null as unknown as HTMLElement });
+  }
+  const scope = createScope();
+  const side: DrawerSide = options.side === 'left' || options.side === 'bottom' ? options.side : 'right';
+  const { side: _side, ...rest } = options;
+  scope.attr(dialog, 'data-mk-drawer', side);
+  const surface = createDialog(dialog, {
+    ...rest,
+    variant: side === 'bottom' ? 'sheet' : 'drawer',
+    // Side panels are full height: they do not resize or drag down.
+    autoResize: side === 'bottom' ? options.autoResize : false,
+    drag: side === 'bottom' ? options.drag ?? true : false,
+    float: false,
+  });
+  return {
+    open: surface.open,
+    close: surface.close,
+    toggle: surface.toggle,
+    float() {},
+    dock() {},
+    get isOpen() {
+      return surface.isOpen;
+    },
+    get isFloating() {
+      return false;
+    },
+    element: dialog,
+    destroy() {
+      surface.destroy();
+      scope.dispose();
+    },
+  };
+}

package/src/components/drawer/react.tsx

@@ -0,0 +1,85 @@
+'use client';
+import { createContext, useContext, useMemo, type ButtonHTMLAttributes, type DialogHTMLAttributes, type ReactNode } from 'react';
+import { Dialog, useSurfaceEngine, useSurfaceRoot, type SurfaceContextValue, type SurfaceRootProps } from '../dialog/react';
+import { createDrawer, type DrawerInstance, type DrawerOptions, type DrawerSide } from './engine';
+
+interface DrawerContextValue extends SurfaceContextValue<DrawerInstance> {
+  side: DrawerSide;
+}
+
+const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+function useDrawerContext(part: string) {
+  const value = useContext(DrawerContext);
+  if (!value) throw new Error(`<Drawer.${part}> must be inside <Drawer.Root>`);
+  return value;
+}
+
+export interface DrawerRootProps extends Omit<SurfaceRootProps, 'variant' | 'placement' | 'float' | 'anchor' | 'animateContent'> {
+  side?: DrawerSide;
+  children?: ReactNode;
+}
+
+function Root({ side = 'right', children, ...props }: DrawerRootProps) {
+  const surface = useSurfaceRoot<DrawerInstance>(props);
+  return <DrawerContext.Provider value={{ ...surface, side }}>{children}</DrawerContext.Provider>;
+}
+
+/** A button that opens the drawer; focus returns to it on close. */
+function Trigger({ onClick, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const context = useDrawerContext('Trigger');
+  return (
+    <button
+      type="button"
+      aria-haspopup="dialog"
+      aria-expanded={context.open}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        context.origin.current = event.currentTarget;
+        context.setOpen(!context.open);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Content({ className, children, ...props }: Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open'>) {
+  const context = useDrawerContext('Content');
+  // The side is part of the engine's options: changing it rebuilds the drawer.
+  const options = useMemo(() => ({ ...context.options, side: context.side }) as typeof context.options, [context.options, context.side]);
+  const ref = useSurfaceEngine({ ...context, options }, (dialog, engineOptions) => createDrawer(dialog, engineOptions as DrawerOptions));
+  return (
+    <dialog ref={ref} className={['mk-dialog mk-drawer', className].filter(Boolean).join(' ')} {...props}>
+      {children}
+    </dialog>
+  );
+}
+
+/**
+ * drawer for React (the Dialog parts inside):
+ * <Drawer.Root side="left"><Drawer.Trigger>Filtros</Drawer.Trigger><Drawer.Content>
+ *   <Drawer.Header><Drawer.Title>…</Drawer.Title><Drawer.Close /></Drawer.Header>
+ *   <Drawer.Body>…</Drawer.Body><Drawer.Footer>…</Drawer.Footer>
+ * </Drawer.Content></Drawer.Root>
+ */
+export const Drawer = {
+  Root,
+  Trigger,
+  Content,
+  Header: Dialog.Header,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  Actions: Dialog.Actions,
+  Body: Dialog.Body,
+  Footer: Dialog.Footer,
+  Close: Dialog.Close,
+};
+
+/** Open state of the surrounding <Drawer.Root>. */
+export function useDrawer() {
+  const context = useDrawerContext('useDrawer');
+  return { open: context.open, setOpen: context.setOpen, side: context.side, instance: context.instance };
+}

package/src/components/editable-table/README.md

@@ -0,0 +1,67 @@
+# editable-table
+
+Tabla editable con edición de celdas, validación y guardado, montada sobre `data-table`: conserva su orden, búsqueda, filtros, páginas y selección. Un anillo de acento se desliza de celda en celda con las flechas (.22 s, curva swing). Intro, F2 o simplemente empezar a escribir abren el editor de la celda (texto, número, fecha, opción o casilla) con un pequeño pop. Intro guarda y baja, Tab avanza de lado y Escape deja la celda como estaba.
+
+Un valor que no pasa la validación sacude el editor y una línea explica por qué. Las celdas cambiadas llevan un punto de acento que hace pop y un tinte suave, y sobre la tabla se despliega una barra con el número de cambios (que rueda), «Descartar» y «Guardar» (también Ctrl/⌘ + S). Guardar espera a `onSave()`: el botón gira y luego las celdas guardadas destellan y sus marcas se apagan; si falla, la barra se sacude y los cambios se quedan. Las filas nuevas entran arriba con su primera celda abierta.
+
+## HTML / Astro
+
+```html
+<mk-editable-table class="mk-editable-table" new-row='{"categoria":"hogar","activo":true}'
+  columns='[{"key":"producto","label":"Producto","required":true},
+            {"key":"precio","label":"Precio","type":"number","min":0},
+            {"key":"categoria","label":"Categoría","type":"select","options":[{"value":"hogar","label":"Hogar"},{"value":"cocina","label":"Cocina"}]},
+            {"key":"activo","label":"Activo","type":"boolean"}]'
+  rows='[{"id":1,"producto":"Taza","precio":189,"categoria":"cocina","activo":true}]'></mk-editable-table>
+
+<script>
+  const table = document.querySelector('mk-editable-table');
+  table.addEventListener('mk:save', (event) => enviar(event.detail.changes));
+</script>
+```
+
+Con JavaScript, `createEditableTable(root, opciones)` recibe `onSave` (una promesa: si se rechaza, los cambios se quedan) y `validate` en cada columna.
+
+## React
+
+```tsx
+<EditableTable
+  columns={columnas}
+  rows={productos}
+  newRow={() => ({ categoria: 'hogar', activo: true })}
+  onSave={async (cambios, filas) => {
+    await api.guardar(cambios);
+    setProductos(filas);
+  }}
+/>
+```
+
+Unas `rows` nuevas desde la app reemplazan las de la tabla (los cambios pendientes se van con ellas): devuélvelas después de guardar.
+
+## Columnas
+
+Las de `data-table` y además: `editable` (por defecto `true`; una columna con `render` no se edita), `editor` (`text`, `number`, `date`, `select` o `checkbox`; por defecto según `type`), `required`, `min`, `max` y `validate(valor, fila)`, que devuelve un mensaje o nada. Los números aceptan coma o punto decimal.
+
+## Opciones
+
+Todas las de `data-table`, más:
+
+| Opción | Atributo | Qué hace |
+|---|---|---|
+| `onSave(cambios, filas)` | — (evento `mk:save`) | Guarda los cambios; si la promesa se rechaza, se quedan pendientes. |
+| `onChange(cambios)` | — (evento `mk:change`) | Después de cada edición. |
+| `newRow()` | `new-row` (JSON) | Valores de una fila nueva; muestra «Agregar fila». |
+
+Cada cambio es `{ id, row, changes, isNew?, removed? }`.
+
+## API
+
+`edit(id, clave)`, `setValue(id, clave, valor)` (devuelve `false` si no pasa la validación), `addRow(valores?)`, `removeRows(ids)`, `save()`, `discard()`, `setRows(filas)`, `changes`, `dirty`, `rows`, `table` (la `data-table` de abajo), `destroy()`.
+
+## Teclado
+
+Flechas para moverse; Inicio y Fin van al principio o al final de la fila (con Ctrl, de la tabla); Intro o F2 editan; escribir empieza a editar con lo escrito; Supr o Retroceso vacían la celda; Espacio cambia una casilla. Dentro del editor, Intro guarda y baja, Tab y Mayús + Tab guardan y avanzan, y Escape cancela. Ctrl/⌘ + S guarda todo.
+
+## Accesibilidad
+
+La tabla es un `grid` de WAI-ARIA con una sola celda tabulable (tabindex móvil), `aria-readonly` en las celdas que no se editan y un editor con nombre («Precio, editar») que marca `aria-invalid` cuando el valor no pasa. Los errores se anuncian como alerta y un estado discreto anuncia lo guardado y lo descartado. Con movimiento reducido no hay deslizamientos ni destellos.

package/src/components/editable-table/editable-table.css

@@ -0,0 +1,200 @@
+/* editable-table — data-table (needs data-table.css) whose cells edit in place: a 2 px accent ring that glides from
+   cell to cell, editors that fill the cell (8 px, accent border), changed cells with an accent dot that pops and a
+   soft tint, invalid ones ringed in the error colour, new rows tinted, saved cells that flash; the bar of changes
+   (12 px, surface-3) folds open above the table with Descartar and Guardar. */
+.mk-editable-table,
+mk-editable-table {
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+  color: var(--mk-text);
+  font-size: 0.875rem;
+}
+
+[data-mk-editable] [data-mk-dt-scroll] {
+  position: relative;
+}
+
+[data-mk-editable] td[data-key] {
+  outline: none;
+}
+
+[data-mk-editable] td[data-mk-et-editable] {
+  cursor: cell;
+}
+
+[data-mk-et-ring] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+}
+
+[data-mk-editable] td[data-mk-et-dirty] {
+  position: relative;
+  background: color-mix(in srgb, var(--mk-accent) 9%, transparent);
+}
+
+[data-mk-editable] td[data-mk-et-dirty]::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--mk-accent);
+}
+
+[data-mk-editable] td[data-mk-et-pop]::after {
+  animation: mk-et-pop 0.4s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+@keyframes mk-et-pop {
+  from {
+    transform: scale(0);
+  }
+}
+
+[data-mk-editable] td[data-mk-et-invalid] {
+  background: color-mix(in srgb, var(--mk-error) 9%, transparent);
+  box-shadow: inset 0 0 0 2px var(--mk-error);
+}
+
+[data-mk-editable] td[data-mk-et-saved] {
+  animation: mk-et-saved 1.2s ease-out;
+}
+
+@keyframes mk-et-saved {
+  0%,
+  30% {
+    background: color-mix(in srgb, var(--mk-accent) 30%, transparent);
+  }
+}
+
+[data-mk-editable] tr[data-mk-et-new] td {
+  background: color-mix(in srgb, var(--mk-accent-soft) 45%, transparent);
+}
+
+[data-mk-editable] td[data-mk-et-editing] {
+  padding: 0 0.375rem;
+}
+
+[data-mk-et-editor] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 6rem;
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  border: 1.5px solid var(--mk-accent);
+  border-radius: 8px;
+  outline: none;
+  background: var(--mk-surface-1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 22%, transparent);
+  color: var(--mk-text);
+  font: inherit;
+  text-align: inherit;
+}
+
+[data-mk-et-editor][aria-invalid='true'] {
+  border-color: var(--mk-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-error) 22%, transparent);
+}
+
+[data-mk-et-save] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+}
+
+[data-mk-et-save][hidden],
+[data-mk-et-error][hidden] {
+  display: none;
+}
+
+[data-mk-et-save-text] {
+  flex: 1 1 auto;
+  font-weight: 500;
+}
+
+[data-mk-et-save-count] {
+  display: inline-block;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+[data-mk-et-error] {
+  flex: 1 1 100%;
+  order: 3;
+  color: var(--mk-error);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+[data-mk-et-save] button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2.25rem;
+  padding: 0 0.875rem;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-et-save] button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-et-save] button:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+[data-mk-et-save] button[data-mk-et-save-button] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-et-save-button][aria-busy='true']::before {
+  content: '';
+  width: 0.875rem;
+  height: 0.875rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: mk-et-spin 0.8s linear infinite;
+}
+
+@keyframes mk-et-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-editable] td:is([data-mk-et-pop], [data-mk-et-saved])::after,
+  [data-mk-editable] td[data-mk-et-saved],
+  [data-mk-et-save-button][aria-busy='true']::before {
+    animation: none;
+  }
+
+  [data-mk-et-ring] {
+    transition: none;
+  }
+}

package/src/components/editable-table/element.ts

@@ -0,0 +1,45 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createEditableTable, type EditableTableInstance } from './engine';
+import type { DataRow } from '../data-table/engine';
+
+/**
+ * <mk-editable-table class="mk-editable-table" new-row='{"estado":"nuevo"}'
+ *   columns='[{"key":"producto","label":"Producto","required":true},{"key":"precio","label":"Precio","type":"number","min":0}]'
+ *   rows='[{"id":1,"producto":"Taza","precio":189}]'></mk-editable-table>
+ * Emits mk:change ({changes}) and mk:save ({changes}); listen to mk:save to send them (the engine keeps them as saved).
+ */
+export class MkEditableTableElement extends MkElement<EditableTableInstance> {
+  static options: Record<string, OptionType> = {
+    columns: 'json',
+    rows: 'json',
+    rowKey: 'string',
+    caption: 'string',
+    pageSize: 'number',
+    selectable: 'boolean',
+    search: 'string',
+    filters: 'boolean',
+    columnsMenu: 'boolean',
+    newRow: 'json',
+    locale: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    const raw = this.getAttribute('search');
+    const search = raw === null || raw === '' ? true : raw === 'false' ? false : raw;
+    const template = options.newRow as DataRow | undefined;
+    return createEditableTable<DataRow>(this, { ...options, search, newRow: template ? () => ({ ...template }) : undefined } as Parameters<typeof createEditableTable>[1]);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'rows') {
+      try {
+        this.instance.setRows(JSON.parse(next ?? '[]') as DataRow[]);
+      } catch {
+        // Malformed JSON: keep the current rows.
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineEditableTable = () => defineElement('mk-editable-table', MkEditableTableElement);