@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/multi-select/engine.ts

@@ -0,0 +1,294 @@
+import { registerMotion } from '../../core/gsap';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { createChips, type ChipItem } from '../../core/chips';
+import { createListbox, filterOptions, type ListboxOption } from '../../core/listbox';
+import { press, shake } from '../../motion/micro';
+
+/*
+ * Multi select: a combobox field holding the chosen options as chips and a
+ * search input. Typing filters the options (letters in order, accents
+ * ignored, the matches marked); the list opens out of the field and its active
+ * option is a pill that glides (core/listbox.ts). Enter or a click toggles an
+ * option (its check draws itself); chips pop in and fold away
+ * (core/chips.ts). Backspace in an empty search arms the last chip (a ring),
+ * then removes it; ← reaches the chips. `max` stops further choices (the
+ * field shakes and the rest of the options turn off). An authored
+ * <select multiple> gives the options and stays in sync, so forms post as
+ * usual; otherwise `name` adds hidden inputs.
+ */
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+  group?: string;
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface MultiSelectOptions {
+  /** The options; without them, an authored <select multiple> gives them. */
+  options?: MultiSelectOption[];
+  value?: string[];
+  /** Search placeholder (default 'Buscar…'). */
+  placeholder?: string;
+  /** Accessible name (default: the authored <label>, else 'Selección'). */
+  label?: string;
+  /** Hidden inputs name[] (when there is no authored select). */
+  name?: string;
+  /** At most this many choices. */
+  max?: number;
+  /** Close the list after each choice (default false). */
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  onChange?: (values: string[]) => void;
+}
+
+export interface MultiSelectInstance extends Instance {
+  setValue(values: string[], notify?: boolean): void;
+  setOptions(options: MultiSelectOption[]): void;
+  open(): void;
+  close(): void;
+  readonly value: string[];
+}
+
+const CHEVRON = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>';
+const CLEAR = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M7 7l10 10M17 7L7 17"/></svg>';
+
+const readSelect = (select: HTMLSelectElement): MultiSelectOption[] =>
+  [...select.options].map((option) => ({
+    value: option.value,
+    label: option.label || option.textContent?.trim() || option.value,
+    group: option.parentElement instanceof HTMLOptGroupElement ? option.parentElement.label : undefined,
+    disabled: option.disabled,
+  }));
+
+export function createMultiSelect(root: HTMLElement | null, settings: MultiSelectOptions = {}): MultiSelectInstance {
+  if (!root) return inert({ setValue() {}, setOptions() {}, open() {}, close() {}, value: [] });
+  registerMotion();
+  const scope = createScope();
+  const select = root.querySelector<HTMLSelectElement>('select[multiple]');
+  let all: MultiSelectOption[] = settings.options ?? (select ? readSelect(select) : []);
+  const max = Number.isFinite(settings.max) && settings.max! > 0 ? Math.floor(settings.max!) : Infinity;
+  const known = (value: string) => all.some((option) => option.value === value);
+  let value: string[] = (settings.value ?? (select ? [...select.selectedOptions].map((option) => option.value) : [])).filter(known).slice(0, max);
+  const labelText = settings.label ?? root.querySelector('label')?.textContent?.trim() ?? select?.getAttribute('aria-label') ?? 'Selección';
+
+  if (select) {
+    // The native select keeps posting the value; it is synced and out of sight.
+    const before = [...select.options].map((option) => option.selected);
+    scope.attr(select, 'hidden', '');
+    scope.attr(select, 'aria-hidden', 'true');
+    scope.attr(select, 'tabindex', '-1');
+    scope.add(() => [...select.options].forEach((option, i) => (option.selected = before[i] ?? false)));
+  }
+
+  const field = document.createElement('div');
+  field.dataset.mkMsField = '';
+  const chips = createChips({
+    disabled: settings.disabled,
+    onRemove: (removed) => toggle(removed, false),
+    onExit: () => input.focus(),
+  });
+  scope.add(() => chips.destroy());
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.dataset.mkMsInput = '';
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-label', labelText);
+  input.autocomplete = 'off';
+  input.spellcheck = false;
+  input.placeholder = settings.placeholder ?? 'Buscar…';
+  input.disabled = Boolean(settings.disabled);
+  const clear = document.createElement('button');
+  clear.type = 'button';
+  clear.dataset.mkMsClear = '';
+  clear.setAttribute('aria-label', 'Quitar todo');
+  clear.innerHTML = CLEAR;
+  clear.disabled = Boolean(settings.disabled);
+  const chevron = document.createElement('span');
+  chevron.dataset.mkMsChevron = '';
+  chevron.innerHTML = CHEVRON;
+  field.append(chips.element, input, clear, chevron);
+  const status = document.createElement('span');
+  status.className = 'mk-sr-only';
+  status.setAttribute('role', 'status');
+  const hiddenHost = document.createElement('span');
+  hiddenHost.hidden = true;
+  root.append(field, status, hiddenHost);
+  scope.add(() => {
+    field.remove();
+    status.remove();
+    hiddenHost.remove();
+  });
+  scope.attr(root, 'data-mk-open', null);
+  scope.attr(root, 'data-mk-has-value', null);
+  scope.attr(root, 'data-mk-ready', '');
+
+  const listbox = createListbox({
+    input,
+    anchor: field,
+    host: root,
+    multiselectable: true,
+    label: labelText,
+    isSelected: (option) => value.includes(option),
+    onPick: (option) => toggle(option.value, !value.includes(option.value), true),
+  });
+  scope.add(() => listbox.destroy());
+
+  const labelOf = (option: string) => all.find((entry) => entry.value === option)?.label ?? option;
+  const listed = (): ListboxOption[] => {
+    const full = value.length >= max;
+    return filterOptions(all, input.value).map((option) => ({ ...option, disabled: option.disabled || (full && !value.includes(option.value)) }));
+  };
+
+  const sync = (animate: boolean) => {
+    chips.set(value.map((option): ChipItem => ({ value: option, label: labelOf(option) })), animate);
+    root.toggleAttribute('data-mk-has-value', value.length > 0);
+    input.placeholder = value.length ? '' : (settings.placeholder ?? 'Buscar…');
+    if (select) for (const option of select.options) option.selected = value.includes(option.value);
+    else if (settings.name) {
+      hiddenHost.replaceChildren(
+        ...value.map((option) => {
+          const hidden = document.createElement('input');
+          hidden.type = 'hidden';
+          hidden.name = `${settings.name}[]`;
+          hidden.value = option;
+          return hidden;
+        }),
+      );
+    }
+    if (listbox.isOpen) listbox.show(listed(), input.value);
+  };
+
+  const emit = () => {
+    settings.onChange?.([...value]);
+    root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value: [...value] } }));
+  };
+
+  const toggle = (option: string, on: boolean, fromList = false) => {
+    if (settings.disabled || on === value.includes(option)) return;
+    if (on && value.length >= max) {
+      shake(field);
+      status.textContent = `Máximo ${max} ${max === 1 ? 'opción' : 'opciones'}`;
+      return;
+    }
+    value = on ? [...value, option] : value.filter((entry) => entry !== option);
+    chips.arm(null);
+    sync(true);
+    status.textContent = `${labelOf(option)} ${on ? 'añadida' : 'quitada'}. ${value.length} ${value.length === 1 ? 'seleccionada' : 'seleccionadas'}.`;
+    if (fromList && input.value) {
+      input.value = '';
+      listbox.show(listed(), '');
+    }
+    if (fromList && settings.closeOnSelect) listbox.hide();
+    emit();
+  };
+
+  const open = () => {
+    if (settings.disabled || listbox.isOpen) return;
+    root.setAttribute('data-mk-open', '');
+    listbox.show(listed(), input.value);
+  };
+  const close = () => {
+    root.removeAttribute('data-mk-open');
+    listbox.hide();
+  };
+
+  scope.on(field, 'pointerdown', (event) => {
+    const target = event.target as Element | null;
+    if (target?.closest('[data-mk-chip-remove], [data-mk-ms-clear]')) return;
+    if (target !== input) event.preventDefault();
+    input.focus();
+    if (listbox.isOpen && target?.closest('[data-mk-ms-chevron]')) close();
+    else open();
+  });
+  scope.on(input, 'input', () => {
+    chips.arm(null);
+    open();
+    listbox.show(listed(), input.value);
+  });
+  scope.on(input, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    switch (key.key) {
+      case 'ArrowDown':
+        key.preventDefault();
+        if (!listbox.isOpen) open();
+        listbox.move(1);
+        return;
+      case 'ArrowUp':
+        key.preventDefault();
+        if (!listbox.isOpen) open();
+        listbox.move(-1);
+        return;
+      case 'Home':
+      case 'End':
+        if (!listbox.isOpen || input.value) return;
+        key.preventDefault();
+        listbox.move(key.key === 'Home' ? 'first' : 'last');
+        return;
+      case 'Enter':
+        if (listbox.isOpen && listbox.pick()) key.preventDefault();
+        return;
+      case 'Escape':
+        if (listbox.isOpen) {
+          key.preventDefault();
+          close();
+        } else if (input.value) input.value = '';
+        return;
+      case 'Backspace':
+        if (input.value || !value.length) return;
+        key.preventDefault();
+        if (chips.armed) toggle(chips.armed, false);
+        else chips.arm(value[value.length - 1]!);
+        return;
+      case 'ArrowLeft':
+        if (input.selectionStart === 0 && input.selectionEnd === 0 && chips.focusLast()) {
+          key.preventDefault();
+          close();
+        }
+        return;
+      case 'Tab':
+        close();
+        return;
+    }
+  });
+  scope.on(input, 'blur', () => {
+    chips.arm(null);
+    // A click on an option keeps the focus (pointerdown is cancelled there); anything else closes.
+    close();
+  });
+  scope.on(clear, 'click', () => {
+    if (!value.length) return;
+    press(clear);
+    value = [];
+    sync(true);
+    status.textContent = 'Selección vacía';
+    input.focus();
+    emit();
+  });
+
+  sync(false);
+
+  return {
+    setValue(next, notify = false) {
+      if (scope.disposed) return;
+      value = next.filter(known).slice(0, max);
+      sync(true);
+      if (notify) emit();
+    },
+    setOptions(next) {
+      if (scope.disposed) return;
+      all = [...next];
+      value = value.filter(known);
+      sync(false);
+    },
+    open,
+    close,
+    get value() {
+      return [...value];
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/multi-select/multi-select.css

@@ -0,0 +1,266 @@
+/* multi-select — a 12 px field on surface-3 holding 8 px chips and a search input; a chevron that turns when the list
+   is open; a clear button when something is chosen. The chips and the listbox rules below are shared with tag-input
+   (each stylesheet works alone). */
+.mk-multi-select,
+mk-multi-select {
+  display: block;
+  min-width: 0;
+}
+
+[data-mk-ms-field] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  min-height: 2.75rem;
+  padding: 0.35rem 0.4rem 0.35rem 0.5rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  cursor: text;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-ms-field]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-ms-input] {
+  flex: 1;
+  min-width: 6ch;
+  height: 1.75rem;
+  padding: 0 0.25rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+[data-mk-ms-input]::placeholder {
+  color: var(--mk-muted);
+}
+
+[data-mk-ms-clear],
+[data-mk-ms-chevron] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--mk-muted);
+}
+
+[data-mk-ms-clear] {
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+}
+
+[data-mk-ms-clear]:hover {
+  background: color-mix(in srgb, var(--mk-text) 8%, transparent);
+  color: var(--mk-text);
+}
+
+:is(.mk-multi-select, mk-multi-select):not([data-mk-has-value]) [data-mk-ms-clear] {
+  display: none;
+}
+
+[data-mk-ms-chevron] {
+  transition: rotate 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+:is(.mk-multi-select, mk-multi-select)[data-mk-open] [data-mk-ms-chevron] {
+  rotate: 180deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-ms-field],
+  [data-mk-ms-chevron] {
+    transition: none;
+  }
+}
+
+/* Chips (core/chips.ts): 8 px, accent-soft, a round remove button; the armed one (next Backspace) gets a ring. */
+[data-mk-chips] {
+  display: contents;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-mk-chip] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.15rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  height: 1.75rem;
+  padding: 0 0.2rem 0 0.6rem;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  outline: none;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-chip-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-mk-chip]:focus-visible,
+[data-mk-chip][data-mk-armed] {
+  box-shadow: 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-chip-remove] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+}
+
+[data-mk-chip-remove]:hover {
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  opacity: 1;
+}
+
+/* Listbox (core/listbox.ts): a 16 px panel in the top layer under the field; the active option sits on a pill. */
+[data-mk-listbox] {
+  position: fixed;
+  inset: auto;
+  z-index: 2147482000;
+  box-sizing: border-box;
+  max-height: min(18rem, 50vh);
+  margin: 0;
+  padding: 0.35rem;
+  overflow: auto;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 16px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  font: 0.9375rem/1.3 var(--mk-font, system-ui, sans-serif);
+  overscroll-behavior: contain;
+}
+
+[data-mk-listbox][hidden] {
+  display: none;
+}
+
+[data-mk-listbox-items] {
+  position: relative;
+  display: grid;
+  gap: 2px;
+}
+
+[data-mk-listbox-pill] {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  left: 0.35rem;
+  border-radius: 10px;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  pointer-events: none;
+}
+
+[data-mk-option] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.5rem;
+  padding: 0 0.75rem;
+  border-radius: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+[data-mk-option][aria-disabled='true'] {
+  color: var(--mk-muted);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+[data-mk-option-label] {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-option-label] mark {
+  background: transparent;
+  color: inherit;
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: var(--mk-accent);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+
+[data-mk-option-hint] {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+[data-mk-option-check] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 1.5px solid var(--mk-outline);
+  border-radius: 5px;
+  color: transparent;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+[data-mk-option][aria-selected='true'] [data-mk-option-check] {
+  border-color: var(--mk-accent);
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-listbox-group] {
+  padding: 0.6rem 0.75rem 0.25rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+[data-mk-listbox-empty] {
+  padding: 0.75rem;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chip],
+  [data-mk-chip-remove],
+  [data-mk-option-check] {
+    transition: none;
+  }
+}

package/src/components/multi-select/react.tsx

@@ -0,0 +1,39 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createMultiSelect, type MultiSelectInstance, type MultiSelectOptions } from './engine';
+
+export interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, MultiSelectOptions {
+  /** Controlled values; without it the field keeps its own (defaultValue). */
+  value?: string[];
+  defaultValue?: string[];
+}
+
+/** <MultiSelect options={people} value={chosen} onChange={setChosen} max={3} />. */
+export function MultiSelect({ options, value, defaultValue, placeholder, label, name, max, closeOnSelect, disabled, onChange, className, ...props }: MultiSelectProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<MultiSelectInstance | null>(null);
+  const change = useLatest(onChange);
+  const start = useRef(value ?? defaultValue ?? []);
+  const optionsKey = JSON.stringify(options ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createMultiSelect(ref.current, { options, value: value ?? start.current, placeholder, label, name, max, closeOnSelect, disabled, onChange: (next) => change.current?.(next) });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [placeholder, label, name, max, closeOnSelect, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (options && instance.current) instance.current.setOptions(options);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [optionsKey]);
+  const valueKey = JSON.stringify(value ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (value && instance.current && JSON.stringify(instance.current.value) !== valueKey) instance.current.setValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueKey]);
+  return <div {...props} ref={ref} className={['mk-multi-select', className].filter(Boolean).join(' ')} />;
+}

package/src/components/notification-bell/README.md

@@ -0,0 +1,14 @@
+# notification-bell
+
+Campana de notificaciones con insignia. `notify()` la hace sonar: la campana oscila desde arriba con amortiguación (±18°) y el badajo va un instante detrás, salen ondas, la insignia aparece con curva elástica (o su cifra rueda hacia arriba) y un mensaje opcional sube a su lado en vidrio invertido durante unos segundos.
+
+```html
+<mk-notification-bell class="mk-notification-bell" count="2"></mk-notification-bell>
+<script>document.querySelector('mk-notification-bell').notify('Nueva cita a las 10:00');</script>
+```
+
+`defineElements()`, `createNotificationBell(root, options)` (root es el botón o lo contiene) o `<NotificationBell count={unread} message={latest} onOpen={openPanel} />` (una cifra mayor o un mensaje nuevo la hacen sonar).
+
+Opciones: `count=0`, `label='Notificaciones'`, `messageDuration=3200` ms, `max=99` (más se lee «99+»), `onOpen()`. API: `notify(message?)`, `setCount(n)`, `clear()`, `count`, `destroy()`. Eventos `mk:open` (clic) y `mk:count`. El nombre accesible incluye el número («Notificaciones, 3 sin leer») y un estado educado anuncia las nuevas. Las notificaciones reales (push, servidor) son de la app.
+
+Movimiento reducido: la cifra y el mensaje cambian sin oscilación ni ondas.

package/src/components/notification-bell/element.ts

@@ -0,0 +1,48 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createNotificationBell, type NotificationBellInstance } from './engine';
+
+/**
+ * <mk-notification-bell class="mk-notification-bell" count="2"></mk-notification-bell>
+ * el.notify('Nueva cita a las 10:00') rings it. Emits mk:open on click and mk:count when the count changes.
+ */
+export class MkNotificationBellElement extends MkElement<NotificationBellInstance> {
+  static options: Record<string, OptionType> = { count: 'number', label: 'string', messageDuration: 'number', max: 'number' };
+
+  protected create(options: Record<string, unknown>) {
+    let made: HTMLButtonElement | null = null;
+    if (!this.querySelector('button')) {
+      made = document.createElement('button');
+      made.type = 'button';
+      this.append(made);
+    }
+    const engine = createNotificationBell(this, options);
+    if (made) {
+      const destroy = engine.destroy;
+      engine.destroy = () => {
+        destroy();
+        made!.remove();
+      };
+    }
+    return engine;
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'count') this.instance.setCount(Number(next) || 0);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+
+  notify(message?: string) {
+    this.instance?.notify(message);
+  }
+
+  clear() {
+    this.instance?.clear();
+  }
+
+  get count() {
+    return this.instance?.count ?? 0;
+  }
+}
+
+export const defineNotificationBell = () => defineElement('mk-notification-bell', MkNotificationBellElement);