@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/rich-text-editor/react.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { forwardRef, useImperativeHandle, useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createRichTextEditor, type RichTextEditorInstance, type RichTextEditorOptions } from './engine';
+
+export interface RichTextEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children' | 'defaultValue'>, RichTextEditorOptions {}
+
+export type RichTextEditorHandle = Pick<RichTextEditorInstance, 'focus' | 'exec' | 'setValue'>;
+
+/**
+ * <RichTextEditor value={html} onChange={(html) => setHtml(html)} maxLength={500} />.
+ * `value` is the first content; later a different value from the app replaces it (the echo of onChange does not).
+ */
+export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(function RichTextEditor(
+  { value, placeholder, toolbar, maxLength, counter, name, label, readOnly, markdown, onChange, className, ...props },
+  handle,
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<RichTextEditorInstance | null>(null);
+  const change = useLatest(onChange);
+  const shown = useRef(value);
+  useImperativeHandle(
+    handle,
+    () => ({
+      focus: () => instance.current?.focus(),
+      exec: (command, argument) => instance.current?.exec(command, argument),
+      setValue: (html) => instance.current?.setValue(html),
+    }),
+    [],
+  );
+  useIsomorphicLayoutEffect(() => {
+    const created = createRichTextEditor(ref.current, {
+      value: shown.current,
+      placeholder,
+      toolbar,
+      maxLength,
+      counter,
+      name,
+      label,
+      readOnly,
+      markdown,
+      onChange: (html, text) => {
+        shown.current = html;
+        change.current?.(html, text);
+      },
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [placeholder, String(toolbar), maxLength, String(counter), name, label, readOnly, markdown]);
+  useIsomorphicLayoutEffect(() => {
+    if (value === undefined || value === shown.current) return;
+    shown.current = value;
+    instance.current?.setValue(value);
+  }, [value]);
+  return <div {...props} ref={ref} className={['mk-rich-text-editor', className].filter(Boolean).join(' ')} />;
+});

package/src/components/rich-text-editor/rich-text-editor.css

@@ -0,0 +1,283 @@
+/* rich-text-editor — a 20 px panel (surface-1, outline-soft border, the accent when it has the focus, the error
+   colour past the limit) with the toolbar on top (8 px buttons; an active format is an accent-soft pill that grows
+   in; groups split by hairlines), the writing area (headings, lists, quotes with an accent bar, code on surface-3,
+   accent links) and the counter under it. The link editor is a 12 px bubble under its button. The area grows up to
+   --mk-rte-max-height (28rem), then scrolls. */
+.mk-rich-text-editor,
+mk-rich-text-editor {
+  --mk-rte-max-height: 28rem;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-width: 0;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+:is(.mk-rich-text-editor, mk-rich-text-editor)[data-mk-focused] {
+  border-color: var(--mk-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 20%, transparent);
+}
+
+:is(.mk-rich-text-editor, mk-rich-text-editor)[data-mk-over] {
+  border-color: var(--mk-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-error) 18%, transparent);
+}
+
+[data-mk-rte-toolbar] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  border-bottom: 1px solid var(--mk-outline-soft);
+}
+
+[data-mk-rte-group] {
+  display: flex;
+  gap: 0.125rem;
+  margin-right: 0.125rem;
+  padding-right: 0.25rem;
+  border-right: 1px solid var(--mk-outline-soft);
+}
+
+[data-mk-rte-group]:last-child {
+  border-right: 0;
+}
+
+[data-mk-rte-group]:empty {
+  display: none;
+}
+
+[data-mk-rte-toolbar] button {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+[data-mk-rte-toolbar] button:hover {
+  background: color-mix(in srgb, var(--mk-text) 7%, transparent);
+  color: var(--mk-text);
+}
+
+/* The pill of an active format grows in behind its icon. */
+[data-mk-rte-toolbar] button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  transform: scale(0.6);
+  transition:
+    opacity 0.15s,
+    transform 0.25s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-rte-toolbar] button[aria-pressed='true'] {
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+[data-mk-rte-toolbar] button[aria-pressed='true']::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+[data-mk-rte-toolbar] button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 1px;
+}
+
+[data-mk-rte-content] {
+  position: relative;
+  min-height: 10rem;
+  max-height: var(--mk-rte-max-height);
+  overflow-y: auto;
+  padding: 1rem 1.125rem;
+  outline: none;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-rte-content]::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  top: 1rem;
+  left: 1.125rem;
+  color: var(--mk-muted);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+[data-mk-rte-content][data-empty]::before {
+  opacity: 1;
+}
+
+[data-mk-rte-content] > :first-child {
+  margin-top: 0;
+}
+
+[data-mk-rte-content] p {
+  margin: 0 0 0.75rem;
+}
+
+[data-mk-rte-content] h2 {
+  margin: 1.25rem 0 0.5rem;
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+[data-mk-rte-content] h3 {
+  margin: 1rem 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+[data-mk-rte-content] :is(ul, ol) {
+  margin: 0 0 0.75rem;
+  padding-left: 1.5rem;
+}
+
+[data-mk-rte-content] blockquote {
+  margin: 0 0 0.75rem;
+  padding: 0.25rem 0 0.25rem 1rem;
+  border-left: 3px solid var(--mk-accent);
+  color: var(--mk-muted);
+}
+
+[data-mk-rte-content] code {
+  padding: 0.1rem 0.35rem;
+  border-radius: 6px;
+  background: var(--mk-surface-3);
+  font-family: var(--mk-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.875em;
+}
+
+[data-mk-rte-content] pre {
+  overflow-x: auto;
+  margin: 0 0 0.75rem;
+  padding: 0.75rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+}
+
+[data-mk-rte-content] pre code {
+  padding: 0;
+  background: none;
+}
+
+[data-mk-rte-content] a {
+  color: var(--mk-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+[data-mk-rte-fresh] {
+  animation: mk-rte-fresh 1s ease-out;
+}
+
+@keyframes mk-rte-fresh {
+  from {
+    background-color: color-mix(in srgb, var(--mk-accent) 30%, transparent);
+  }
+}
+
+[data-mk-rte-foot] {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.375rem 0.875rem 0.5rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-mk-rte-foot][hidden],
+[data-mk-rte-link][hidden],
+[data-mk-rte-link] [hidden] {
+  display: none;
+}
+
+:is(.mk-rich-text-editor, mk-rich-text-editor)[data-mk-over] [data-mk-rte-counter] {
+  color: var(--mk-error);
+  font-weight: 600;
+}
+
+[data-mk-rte-link] {
+  position: absolute;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  box-sizing: border-box;
+  width: min(22rem, calc(100% - 1rem));
+  padding: 0.375rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 12px;
+  background: var(--mk-surface-1);
+  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+}
+
+[data-mk-rte-link] input {
+  flex: 1;
+  min-width: 0;
+  height: 2rem;
+  padding: 0 0.625rem;
+  border: 0;
+  border-radius: 8px;
+  outline: none;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+}
+
+[data-mk-rte-link] input:focus-visible {
+  box-shadow: 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-rte-link] button {
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-rte-link] [data-mk-rte-link-apply] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-rte-toolbar] button::before,
+  [data-mk-rte-content]::before {
+    transition: none;
+  }
+
+  [data-mk-rte-fresh] {
+    animation: none;
+  }
+}

package/src/components/scratch-card/README.md

@@ -0,0 +1,15 @@
+# scratch-card
+
+Rasca y gana para cupones: el contenido HTML real queda bajo una cubierta metalizada dibujada en canvas con brillo y «Rasca aquí». El puntero rasca con un pincel redondo y el progreso se mide por muestreo. Al pasar el umbral, el resto se disuelve con blur, el cupón entra con `pop` y salta confeti. Mientras está cubierto, el contenido es `inert`; el botón «Revelar» es la vía para teclado y lectores de pantalla, y la revelación se anuncia. Sin canvas 2D, la cubierta es CSS y el botón la retira.
+
+```html
+<mk-scratch-card class="mk-scratch-card">
+  <div data-mk-scratch-content><strong>OTOÑO25</strong> · 25 % de descuento</div>
+</mk-scratch-card>
+```
+
+`defineElements()`, `createScratchCard(root, options)` (sin `[data-mk-scratch-content]`, los hijos del root pasan a uno) o `<ScratchCard onReveal={claim}>…</ScratchCard>`.
+
+Opciones: `threshold=0.5`, `brush=22` px, `coverLabel='Rasca aquí'`, `revealLabel='Revelar'`, `revealedLabel='Premio revelado'`, `celebrate=true`, `onProgress(p)`, `onReveal()`. API: `reveal()`, `reset()`, `revealed`, `progress`, `destroy()`. Eventos `mk:progress` `{progress}` y `mk:reveal`. El premio es de la app: el componente sólo lo tapa.
+
+Movimiento reducido: la cubierta desaparece sin blur ni confeti.

package/src/components/scratch-card/element.ts

@@ -0,0 +1,30 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createScratchCard, type ScratchCardInstance } from './engine';
+
+/**
+ * <mk-scratch-card class="mk-scratch-card" threshold="0.5">
+ *   <div data-mk-scratch-content>…the coupon…</div>
+ * </mk-scratch-card>
+ * Emits mk:progress ({progress}) and mk:reveal.
+ */
+export class MkScratchCardElement extends MkElement<ScratchCardInstance> {
+  static options: Record<string, OptionType> = { threshold: 'number', brush: 'number', coverLabel: 'string', revealLabel: 'string', revealedLabel: 'string', celebrate: 'boolean' };
+
+  protected create(options: Record<string, unknown>) {
+    return createScratchCard(this, options);
+  }
+
+  reveal() {
+    this.instance?.reveal();
+  }
+
+  reset() {
+    this.instance?.reset();
+  }
+
+  get revealed() {
+    return this.instance?.revealed ?? false;
+  }
+}
+
+export const defineScratchCard = () => defineElement('mk-scratch-card', MkScratchCardElement);

package/src/components/scratch-card/engine.ts

@@ -0,0 +1,257 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { confetti } from '../../motion/confetti';
+import { blurIn } from '../../motion/micro';
+
+/*
+ * Scratch card: real HTML content (a coupon) under a metallic cover drawn on a
+ * canvas with a sheen and "Rasca aquí". The pointer scratches it with a round
+ * brush; progress is measured by sampling the cover. Past the threshold the
+ * rest dissolves with a blur, the content pops in and confetti flies. While
+ * covered the content is inert; a "Revelar" button is the way in for the
+ * keyboard and screen readers, and the reveal is announced. Without a 2D
+ * canvas the cover is plain CSS and the button reveals it.
+ */
+
+export interface ScratchCardOptions {
+  /** Share of the cover to scratch before it reveals itself (default .5). */
+  threshold?: number;
+  /** Brush radius in px (default 22). */
+  brush?: number;
+  coverLabel?: string;
+  revealLabel?: string;
+  revealedLabel?: string;
+  /** Confetti on reveal (default true). */
+  celebrate?: boolean;
+  onProgress?: (progress: number) => void;
+  onReveal?: () => void;
+}
+
+export interface ScratchCardInstance extends Instance {
+  reveal(): void;
+  reset(): void;
+  readonly revealed: boolean;
+  readonly progress: number;
+}
+
+export function createScratchCard(root: HTMLElement | null, options: ScratchCardOptions = {}): ScratchCardInstance {
+  if (!root) return inert({ reveal() {}, reset() {}, revealed: false, progress: 0 });
+  registerMotion();
+  const scope = createScope();
+  const threshold = Number.isFinite(options.threshold) ? Math.min(0.95, Math.max(0.05, options.threshold!)) : 0.5;
+  const brush = Number.isFinite(options.brush) && options.brush! > 2 ? options.brush! : 22;
+  const coverText = options.coverLabel ?? 'Rasca aquí';
+
+  let content = root.querySelector<HTMLElement>('[data-mk-scratch-content]');
+  const made: Element[] = [];
+  scope.add(() => made.forEach((element) => element.remove()));
+  if (!content) {
+    content = document.createElement('div');
+    content.dataset.mkScratchContent = '';
+    content.append(...root.childNodes);
+    root.append(content);
+    scope.add(() => {
+      root.append(...content!.childNodes);
+      content!.remove();
+    });
+  }
+  const cover = document.createElement('div');
+  cover.dataset.mkScratchCover = '';
+  cover.setAttribute('aria-hidden', 'true');
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d', { willReadFrequently: true } as CanvasRenderingContext2DSettings);
+  if (context) cover.append(canvas);
+  else {
+    cover.dataset.mkScratchFallback = '';
+    cover.textContent = coverText;
+  }
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.dataset.mkScratchReveal = '';
+  button.textContent = options.revealLabel ?? 'Revelar';
+  const live = document.createElement('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  root.append(cover, button, live);
+  made.push(cover, button, live);
+  scope.attr(root, 'data-mk-ready', '');
+
+  let revealed = false;
+  let progress = 0;
+  let size = { width: 0, height: 0, ratio: 1 };
+  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);
+  };
+  let party: ReturnType<typeof confetti> | null = null;
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    party?.stop();
+  });
+
+  const cover_ = (covered: boolean) => {
+    content!.inert = covered;
+    if (covered) content!.setAttribute('aria-hidden', 'true');
+    else content!.removeAttribute('aria-hidden');
+  };
+  scope.add(() => cover_(false));
+
+  /** Paint the metallic cover with its sheen and label. */
+  const paint = () => {
+    if (!context) return;
+    const box = root.getBoundingClientRect();
+    const ratio = Math.min(2, globalThis.devicePixelRatio || 1);
+    size = { width: Math.max(1, Math.round(box.width)), height: Math.max(1, Math.round(box.height)), ratio };
+    canvas.width = size.width * ratio;
+    canvas.height = size.height * ratio;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.globalCompositeOperation = 'source-over';
+    const base = context.createLinearGradient(0, 0, size.width, size.height);
+    base.addColorStop(0, '#c9ccd2');
+    base.addColorStop(0.45, '#eef0f3');
+    base.addColorStop(0.55, '#d7dadf');
+    base.addColorStop(1, '#a9adb5');
+    context.fillStyle = base;
+    context.fillRect(0, 0, size.width, size.height);
+    // Fine grain, like foil.
+    for (let i = 0; i < (size.width * size.height) / 60; i++) {
+      context.fillStyle = Math.random() > 0.5 ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.06)';
+      context.fillRect(Math.random() * size.width, Math.random() * size.height, 1, 1);
+    }
+    context.fillStyle = 'rgba(40, 42, 48, 0.75)';
+    // The cover speaks in the page's typeface.
+    const family = getComputedStyle(root).fontFamily || 'system-ui, sans-serif';
+    context.font = `600 ${Math.max(14, Math.min(22, size.width / 14))}px ${family}`;
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.fillText(coverText, size.width / 2, size.height / 2);
+  };
+
+  const measure = () => {
+    if (!context || !size.width) return progress;
+    const data = context.getImageData(0, 0, canvas.width, canvas.height).data;
+    const step = 8 * size.ratio;
+    let clear = 0;
+    let total = 0;
+    for (let y = 0; y < canvas.height; y += step) {
+      for (let x = 0; x < canvas.width; x += step) {
+        total += 1;
+        if (data[(Math.floor(y) * canvas.width + Math.floor(x)) * 4 + 3]! < 64) clear += 1;
+      }
+    }
+    return total ? clear / total : 0;
+  };
+
+  const reveal = () => {
+    if (scope.disposed || revealed) return;
+    revealed = true;
+    progress = 1;
+    scope.attr(root, 'data-mk-revealed', '');
+    cover_(false);
+    button.hidden = true;
+    live.textContent = options.revealedLabel ?? 'Premio revelado';
+    const done = () => {
+      cover.hidden = true;
+    };
+    if (reduced()) done();
+    else {
+      keep(gsap.to(cover, { opacity: 0, filter: 'blur(12px)', scale: 1.04, duration: 0.5, ease: 'power2.out', onComplete: done }));
+      keep(blurIn(content, { from: 'pop', delay: 0.1 }));
+      if (options.celebrate !== false) party = confetti(root, { count: 60 });
+    }
+    options.onReveal?.();
+    root.dispatchEvent(new CustomEvent('mk:reveal', { bubbles: true }));
+  };
+
+  const reset = () => {
+    if (scope.disposed) return;
+    revealed = false;
+    progress = 0;
+    scope.attr(root, 'data-mk-revealed', null);
+    gsap.killTweensOf(cover);
+    gsap.set(cover, { clearProps: 'all' });
+    cover.hidden = false;
+    button.hidden = false;
+    cover_(true);
+    live.textContent = '';
+    paint();
+  };
+
+  let drawing = false;
+  let last: { x: number; y: number } | null = null;
+  let moves = 0;
+  const scratch = (event: PointerEvent) => {
+    if (!context || revealed) return;
+    const box = canvas.getBoundingClientRect();
+    const point = { x: event.clientX - box.left, y: event.clientY - box.top };
+    context.globalCompositeOperation = 'destination-out';
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.lineWidth = brush * 2;
+    context.beginPath();
+    context.moveTo(last?.x ?? point.x, last?.y ?? point.y);
+    context.lineTo(point.x, point.y);
+    context.stroke();
+    last = point;
+    // Sampling every move would be wasteful: every fifth is enough.
+    if (++moves % 5) return;
+    progress = measure();
+    options.onProgress?.(progress);
+    root.dispatchEvent(new CustomEvent('mk:progress', { bubbles: true, detail: { progress } }));
+    if (progress >= threshold) reveal();
+  };
+  scope.on(canvas, 'pointerdown', (event) => {
+    const pointer = event as PointerEvent;
+    drawing = true;
+    last = null;
+    canvas.setPointerCapture?.(pointer.pointerId);
+    scratch(pointer);
+  });
+  scope.on(canvas, 'pointermove', (event) => {
+    if (drawing) scratch(event as PointerEvent);
+  });
+  const stop = () => {
+    drawing = false;
+    last = null;
+  };
+  scope.on(canvas, 'pointerup', stop);
+  scope.on(canvas, 'pointercancel', stop);
+  scope.on(button, 'click', reveal);
+  if (typeof ResizeObserver === 'function' && context) {
+    let width = 0;
+    scope.observe(
+      new ResizeObserver(() => {
+        const next = Math.round(root.getBoundingClientRect().width);
+        if (next === width || revealed) return;
+        width = next;
+        paint();
+      }),
+    ).observe(root);
+  }
+  cover_(true);
+  paint();
+  // A web font that arrives late repaints the untouched cover.
+  let alive = true;
+  scope.add(() => (alive = false));
+  document.fonts?.ready.then(() => {
+    if (alive && !revealed && progress === 0) paint();
+  });
+
+  return {
+    reveal,
+    reset,
+    get revealed() {
+      return revealed;
+    },
+    get progress() {
+      return progress;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/scratch-card/react.tsx

@@ -0,0 +1,40 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createScratchCard, type ScratchCardInstance, type ScratchCardOptions } from './engine';
+
+export interface ScratchCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onProgress'>, ScratchCardOptions {
+  /** What the cover hides. */
+  children?: ReactNode;
+  instanceRef?: MutableRefObject<ScratchCardInstance | null>;
+}
+
+/** <ScratchCard onReveal={claim}><Coupon code="OTOÑO25" /></ScratchCard>. */
+export function ScratchCard({ threshold, brush, coverLabel, revealLabel, revealedLabel, celebrate, onProgress, onReveal, instanceRef, className, children, ...props }: ScratchCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const progress = useLatest(onProgress);
+  const reveal = useLatest(onReveal);
+  useIsomorphicLayoutEffect(() => {
+    const created = createScratchCard(ref.current, {
+      threshold,
+      brush,
+      coverLabel,
+      revealLabel,
+      revealedLabel,
+      celebrate,
+      onProgress: (value) => progress.current?.(value),
+      onReveal: () => reveal.current?.(),
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [threshold, brush, coverLabel, revealLabel, revealedLabel, celebrate]);
+  return (
+    <div {...props} ref={ref} className={['mk-scratch-card', className].filter(Boolean).join(' ')}>
+      <div data-mk-scratch-content="">{children}</div>
+    </div>
+  );
+}