@yewdiel21/motion-kit 0.9.1 → 0.14.0

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);

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

@@ -0,0 +1,313 @@
+import { registerMotion } from '../../core/gsap';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { createChips } from '../../core/chips';
+import { createListbox, filterOptions } from '../../core/listbox';
+import { shake } from '../../motion/micro';
+
+/*
+ * Tag input: free tags as chips, with suggestions. Enter or a comma adds what
+ * was typed (or the highlighted suggestion); pasting "a, b; c" adds each, one
+ * after another. New chips pop in and removed ones fold away
+ * (core/chips.ts); the suggestions open out of the field with a gliding
+ * active pill and the typed letters marked (core/listbox.ts). A duplicate
+ * rings the chip that already has it; a tag that `validate`, `restrict` or
+ * `max` refuses shakes the field and says why under it (aria-invalid, the
+ * message described by the input). Backspace in an empty input arms the last
+ * chip, then removes it; ← reaches the chips.
+ */
+
+export interface TagInputOptions {
+  value?: string[];
+  /** Offered while typing (fuzzy, accents ignored). */
+  suggestions?: string[];
+  placeholder?: string;
+  /** Accessible name (default: the authored <label>, else 'Etiquetas'). */
+  label?: string;
+  /** Hidden inputs name[] for forms. */
+  name?: string;
+  max?: number;
+  /** Only tags from the suggestions. */
+  restrict?: boolean;
+  allowDuplicates?: boolean;
+  /** Return a message to refuse a tag. */
+  validate?: (tag: string, tags: string[]) => string | null | undefined | void;
+  /** Clean a tag before adding it (default: trim and collapse spaces). */
+  transform?: (tag: string) => string;
+  disabled?: boolean;
+  onChange?: (tags: string[]) => void;
+}
+
+export interface TagInputInstance extends Instance {
+  setValue(tags: string[], notify?: boolean): void;
+  /** Add a tag as if typed; false when refused. */
+  add(tag: string): boolean;
+  remove(tag: string): void;
+  setSuggestions(suggestions: string[]): void;
+  readonly value: string[];
+}
+
+const fold = (text: string) => text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+const SEPARATORS = /[,;\n]+/;
+let sequence = 0;
+
+export function createTagInput(root: HTMLElement | null, settings: TagInputOptions = {}): TagInputInstance {
+  if (!root) return inert({ setValue() {}, add: () => false, remove() {}, setSuggestions() {}, value: [] });
+  registerMotion();
+  const scope = createScope();
+  const uid = `mk-tags-${++sequence}`;
+  const max = Number.isFinite(settings.max) && settings.max! > 0 ? Math.floor(settings.max!) : Infinity;
+  const clean = settings.transform ?? ((tag: string) => tag.replace(/\s+/g, ' ').trim());
+  let suggestions = [...(settings.suggestions ?? [])];
+  let tags: string[] = [];
+  const labelText = settings.label ?? root.querySelector('label')?.textContent?.trim() ?? 'Etiquetas';
+
+  const field = document.createElement('div');
+  field.dataset.mkTagField = '';
+  const chips = createChips({ disabled: settings.disabled, onRemove: (tag) => remove(tag, true), onExit: () => input.focus() });
+  scope.add(() => chips.destroy());
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.dataset.mkTagInput = '';
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-label', labelText);
+  input.setAttribute('aria-describedby', `${uid}-error`);
+  input.autocomplete = 'off';
+  input.spellcheck = false;
+  input.enterKeyHint = 'enter';
+  input.disabled = Boolean(settings.disabled);
+  field.append(chips.element, input);
+  const error = document.createElement('p');
+  error.id = `${uid}-error`;
+  error.dataset.mkTagError = '';
+  error.hidden = true;
+  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, error, status, hiddenHost);
+  scope.add(() => {
+    field.remove();
+    error.remove();
+    status.remove();
+    hiddenHost.remove();
+  });
+  scope.attr(root, 'data-mk-ready', '');
+
+  const listbox = createListbox({
+    input,
+    anchor: field,
+    host: root,
+    label: 'Sugerencias',
+    emptyLabel: 'Sin sugerencias',
+    onPick: (option) => {
+      if (add(option.value, true)) {
+        input.value = '';
+        listbox.hide();
+      }
+    },
+  });
+  scope.add(() => listbox.destroy());
+
+  const placeholder = () => {
+    input.placeholder = tags.length >= max ? '' : (settings.placeholder ?? 'Añadir etiqueta…');
+  };
+  const showError = (message: string | null) => {
+    error.textContent = message ?? '';
+    error.hidden = !message;
+    if (message) input.setAttribute('aria-invalid', 'true');
+    else input.removeAttribute('aria-invalid');
+  };
+  const sync = (animate: boolean) => {
+    chips.set(tags.map((tag) => ({ value: tag, label: tag })), animate);
+    placeholder();
+    if (settings.name) {
+      hiddenHost.replaceChildren(
+        ...tags.map((tag) => {
+          const hidden = document.createElement('input');
+          hidden.type = 'hidden';
+          hidden.name = `${settings.name}[]`;
+          hidden.value = tag;
+          return hidden;
+        }),
+      );
+    }
+  };
+  const emit = () => {
+    settings.onChange?.([...tags]);
+    root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value: [...tags] } }));
+  };
+
+  /** The suggestions not chosen yet that match the typed text (all of them for an empty query). */
+  const available = (query: string) => {
+    const chosen = new Set(tags.map(fold));
+    return filterOptions(
+      suggestions.filter((tag) => !chosen.has(fold(tag))).map((tag) => ({ value: tag, label: tag })),
+      query,
+    ).slice(0, 50);
+  };
+  /** While typing: matching suggestions, or none (a new tag needs no empty list). */
+  const offer = () => {
+    const query = input.value;
+    const matches = query.trim() && suggestions.length ? available(query) : [];
+    if (!matches.length) return listbox.hide();
+    listbox.show(matches, query);
+  };
+
+  /** Add one tag; false (and why, shaken) when refused. */
+  const add = (raw: string, animate: boolean, notify = true) => {
+    const tag = clean(raw);
+    if (!tag || settings.disabled) return false;
+    const refuse = (message: string) => {
+      showError(message);
+      shake(field);
+      return false;
+    };
+    const twin = tags.find((existing) => fold(existing) === fold(tag));
+    if (twin && !settings.allowDuplicates) {
+      chips.flash(twin);
+      status.textContent = `Ya existe «${twin}»`;
+      return false;
+    }
+    if (tags.length >= max) return refuse(`Máximo ${max} ${max === 1 ? 'etiqueta' : 'etiquetas'}`);
+    const known = suggestions.find((suggestion) => fold(suggestion) === fold(tag));
+    if (settings.restrict && !known) return refuse(`«${tag}» no está en la lista`);
+    const message = settings.validate?.(known ?? tag, [...tags]);
+    if (message) return refuse(message);
+    tags = [...tags, known ?? tag];
+    showError(null);
+    chips.arm(null);
+    sync(animate);
+    status.textContent = `${known ?? tag} añadida`;
+    if (notify) emit();
+    return true;
+  };
+
+  const remove = (tag: string, notify: boolean) => {
+    if (!tags.includes(tag) || settings.disabled) return;
+    tags = tags.filter((existing) => existing !== tag);
+    chips.arm(null);
+    sync(true);
+    status.textContent = `${tag} quitada`;
+    if (notify) emit();
+  };
+
+  const commit = () => {
+    if (!input.value.trim()) return false;
+    if (add(input.value, true)) {
+      input.value = '';
+      listbox.hide();
+      return true;
+    }
+    return false;
+  };
+
+  scope.on(field, 'pointerdown', (event) => {
+    const target = event.target as Element | null;
+    if (target?.closest('[data-mk-chip-remove]')) return;
+    if (target !== input) event.preventDefault();
+    input.focus();
+  });
+  scope.on(input, 'input', () => {
+    showError(null);
+    chips.arm(null);
+    // A typed separator (mobile keyboards have no key events for it) commits what came before.
+    if (SEPARATORS.test(input.value)) {
+      const parts = input.value.split(SEPARATORS);
+      const rest = parts.pop() ?? '';
+      for (const part of parts) add(part, true);
+      input.value = rest;
+    }
+    offer();
+  });
+  scope.on(input, 'paste', (event) => {
+    const text = (event as ClipboardEvent).clipboardData?.getData('text') ?? '';
+    if (!SEPARATORS.test(text)) return;
+    event.preventDefault();
+    const parts = text.split(SEPARATORS).map(clean).filter(Boolean);
+    let added = 0;
+    for (const part of parts) if (add(part, true, false)) added++;
+    if (added) emit();
+  });
+  scope.on(input, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    switch (key.key) {
+      case 'Enter':
+        if (listbox.isOpen && listbox.active) {
+          key.preventDefault();
+          listbox.pick();
+        } else if (input.value.trim()) {
+          key.preventDefault();
+          commit();
+        }
+        return;
+      case ',':
+      case ';':
+        key.preventDefault();
+        commit();
+        return;
+      case 'ArrowDown':
+      case 'ArrowUp':
+        if (!suggestions.length) return;
+        key.preventDefault();
+        if (!listbox.isOpen) listbox.show(available(input.value), input.value);
+        listbox.move(key.key === 'ArrowDown' ? 1 : -1);
+        return;
+      case 'Escape':
+        if (listbox.isOpen) {
+          key.preventDefault();
+          listbox.hide();
+        }
+        return;
+      case 'Backspace':
+        if (input.value || !tags.length) return;
+        key.preventDefault();
+        if (chips.armed) remove(chips.armed, true);
+        else chips.arm(tags[tags.length - 1]!);
+        return;
+      case 'ArrowLeft':
+        if (input.selectionStart === 0 && input.selectionEnd === 0 && chips.focusLast()) {
+          key.preventDefault();
+          listbox.hide();
+        }
+        return;
+      case 'Tab':
+        listbox.hide();
+        return;
+    }
+  });
+  scope.on(input, 'blur', () => {
+    chips.arm(null);
+    listbox.hide();
+  });
+
+  for (const tag of settings.value ?? []) add(tag, false, false);
+  sync(false);
+
+  return {
+    setValue(next, notify = false) {
+      if (scope.disposed) return;
+      tags = [];
+      for (const tag of next) {
+        const cleaned = clean(tag);
+        if (cleaned && (settings.allowDuplicates || !tags.some((existing) => fold(existing) === fold(cleaned)))) tags.push(cleaned);
+      }
+      tags = tags.slice(0, max);
+      showError(null);
+      sync(true);
+      if (notify) emit();
+    },
+    add: (tag) => add(tag, true),
+    remove: (tag) => remove(tag, true),
+    setSuggestions(next) {
+      suggestions = [...next];
+      if (listbox.isOpen) offer();
+    },
+    get value() {
+      return [...tags];
+    },
+    destroy: () => scope.dispose(),
+  };
+}

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

@@ -0,0 +1,54 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createTagInput, type TagInputInstance, type TagInputOptions } from './engine';
+
+export interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>, TagInputOptions {
+  /** Controlled tags; without it the field keeps its own (defaultValue). */
+  value?: string[];
+  defaultValue?: string[];
+}
+
+/** <TagInput value={tags} onChange={setTags} suggestions={known} max={8} />. */
+export function TagInput({ value, defaultValue, suggestions, placeholder, label, name, max, restrict, allowDuplicates, validate, transform, disabled, onChange, className, ...props }: TagInputProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<TagInputInstance | null>(null);
+  const change = useLatest(onChange);
+  const check = useLatest(validate);
+  const shape = useLatest(transform);
+  const start = useRef(value ?? defaultValue ?? []);
+  useIsomorphicLayoutEffect(() => {
+    const created = createTagInput(ref.current, {
+      value: value ?? start.current,
+      suggestions,
+      placeholder,
+      label,
+      name,
+      max,
+      restrict,
+      allowDuplicates,
+      disabled,
+      validate: validate ? (tag, tags) => check.current?.(tag, tags) : undefined,
+      transform: transform ? (tag) => shape.current?.(tag) ?? tag : undefined,
+      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, restrict, allowDuplicates, disabled, Boolean(validate), Boolean(transform)]);
+  const suggestionsKey = JSON.stringify(suggestions ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (suggestions) instance.current?.setSuggestions(suggestions);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [suggestionsKey]);
+  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-tag-input', className].filter(Boolean).join(' ')} />;
+}