@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/components/theme-picker/engine.ts

@@ -0,0 +1,91 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { entrances } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { flowInPalette } from '../../motion/entrances';
+import { THEMES } from '../../theme/presets';
+import { THEME_EVENT, getTheme, setTheme } from '../../theme/theme';
+
+/*
+ * Stepbro's theme picker: colour balls pop in (scale .5, blur 4, 10 ms apart);
+ * a ball rounds into a squircle on hover and into a rounded square when chosen
+ * (0.5 s, cubic(.38,.49,0,1.5)), with two blurred lights drifting inside.
+ * Clicking one applies the theme (setTheme); external changes keep it in sync.
+ */
+
+export interface ThemePickerOptions {
+  /** Theme ids to show, in order. Default: every theme Stepbro shows (or all with showHidden). */
+  themes?: string[];
+  showHidden?: boolean;
+  labels?: { group?: string };
+  onChange?: (id: string) => void;
+}
+
+export interface ThemePickerInstance extends Instance {
+  select(id: string): void;
+}
+
+export function createThemePicker(root: HTMLElement | null, options: ThemePickerOptions = {}): ThemePickerInstance {
+  if (!root) {
+    warnOnce('theme-picker: missing root');
+    return inert({ select() {} });
+  }
+  registerMotion();
+  const scope = createScope();
+  const ctx = gsap.context(() => {});
+  const generated: HTMLElement[] = [];
+
+  let swatches = [...root.querySelectorAll<HTMLElement>('[data-mk-swatch]')];
+  if (!swatches.length) {
+    const byId = new Map(THEMES.map((theme) => [theme.id as string, theme]));
+    const ids = options.themes ?? THEMES.filter((theme) => options.showHidden || !theme.hidden).map((theme) => theme.id);
+    for (const id of ids) {
+      const theme = byId.get(id);
+      if (!theme) {
+        warnOnce(`theme-picker: unknown theme "${id}"`);
+        continue;
+      }
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'mk-swatch';
+      button.dataset.mkSwatch = theme.id;
+      button.title = theme.name;
+      button.setAttribute('aria-label', theme.name);
+      button.style.setProperty('--mk-swatch', theme.seed);
+      root.append(button);
+      generated.push(button);
+    }
+    swatches = generated;
+  }
+
+  scope.attr(root, 'role', 'group');
+  if (!root.hasAttribute('aria-label')) scope.attr(root, 'aria-label', options.labels?.group ?? 'Tema');
+
+  const sync = () => {
+    const current = getTheme().id;
+    for (const swatch of swatches) scope.attr(swatch, 'aria-pressed', String(swatch.dataset.mkSwatch === current));
+  };
+  const select = (id: string) => {
+    setTheme(id);
+    options.onChange?.(id);
+  };
+
+  scope.on(root, 'click', (event) => {
+    const swatch = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-swatch]');
+    if (swatch && root.contains(swatch) && swatch.dataset.mkSwatch) select(swatch.dataset.mkSwatch);
+  });
+  scope.on(document, THEME_EVENT, sync);
+  sync();
+  if (entrances()) ctx.add(() => flowInPalette(swatches));
+  root.dataset.mkReady = '';
+
+  return {
+    select,
+    destroy() {
+      scope.dispose();
+      ctx.revert();
+      for (const button of generated.splice(0)) button.remove();
+      delete root.dataset.mkReady;
+    },
+  };
+}

package/src/components/theme-picker/react.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useRef, type CSSProperties } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createThemePicker, type ThemePickerOptions } from './engine';
+
+export interface ThemePickerProps extends ThemePickerOptions {
+  className?: string;
+  style?: CSSProperties;
+  /** Skip the base class (style it yourself). */
+  unstyled?: boolean;
+}
+
+/** Stepbro's theme picker. Wrap the app in <ThemeProvider> to read the choice. */
+export function ThemePicker({ className, style, unstyled, themes, showHidden, labels, onChange }: ThemePickerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const change = useLatest(onChange);
+  const themeKey = themes?.join(',');
+  useIsomorphicLayoutEffect(() => {
+    const picker = createThemePicker(ref.current, {
+      themes: themeKey ? themeKey.split(',') : undefined,
+      showHidden,
+      labels,
+      onChange: (id) => change.current?.(id),
+    });
+    return () => picker.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [themeKey, showHidden, labels?.group]);
+  const classes = [unstyled ? null : 'mk-theme-picker', className].filter(Boolean).join(' ');
+  return <div ref={ref} className={classes || undefined} style={style} />;
+}

package/src/components/theme-picker/theme-picker.css

@@ -0,0 +1,114 @@
+/* theme-picker — Stepbro's colour balls (from Kayro's accent swatches). */
+.mk-theme-picker,
+mk-theme-picker {
+  --mk-swatch-size: 72px;
+  --mk-swatch-gap: 12px;
+  /* Flex, not grid: it must not collapse to one column inside shrink-to-fit parents. */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mk-swatch-gap);
+}
+
+.mk-swatch {
+  position: relative;
+  display: block;
+  width: var(--mk-swatch-size, 72px);
+  aspect-ratio: 1;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-swatch, var(--mk-accent));
+  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--mk-text) 10%, transparent);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.5s ease,
+    border-radius 0.5s var(--mk-ease-swatch),
+    filter 0.3s ease;
+}
+
+@media (hover: hover) {
+  .mk-swatch:hover {
+    border-radius: 32px;
+    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--mk-text) 20%, transparent);
+    filter: saturate(1.5);
+  }
+}
+
+.mk-swatch:active {
+  transform: scale(0.95);
+}
+
+.mk-swatch[aria-pressed='true'] {
+  border-radius: 16px;
+  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mk-text) 30%, transparent);
+  filter: saturate(1.1);
+}
+
+.mk-swatch:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+/* Two blurred lights that drift on hover. */
+.mk-swatch::before,
+.mk-swatch::after {
+  position: absolute;
+  aspect-ratio: 1;
+  border-radius: 32px;
+  content: '';
+  pointer-events: none;
+  transition:
+    left 3.5s var(--mk-ease-swatch-light),
+    top 3.5s var(--mk-ease-swatch-light),
+    bottom 3.5s var(--mk-ease-swatch-light),
+    width 3.5s var(--mk-ease-swatch-light),
+    height 3.5s var(--mk-ease-swatch-light),
+    background 4.5s var(--mk-ease-swatch-light);
+}
+
+.mk-swatch::before {
+  bottom: 50%;
+  left: 50%;
+  width: 50%;
+  height: 50%;
+  background: rgb(255 255 255 / 0.2);
+  filter: blur(8px);
+}
+
+.mk-swatch::after {
+  top: 50%;
+  left: 50%;
+  width: 60%;
+  height: 60%;
+  background: rgb(255 255 255 / 0.4);
+  filter: blur(16px);
+}
+
+@media (hover: hover) {
+  .mk-swatch:hover::before {
+    left: 0%;
+    background: rgb(255 255 255 / 0.4);
+  }
+
+  .mk-swatch:hover::after {
+    top: 25%;
+    left: 25%;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-swatch,
+  .mk-swatch::before,
+  .mk-swatch::after {
+    transition: none;
+  }
+
+  .mk-swatch:active {
+    transform: none;
+  }
+}

package/src/components/toast/README.md

@@ -0,0 +1,60 @@
+# toast
+
+La pila de confirmaciones de Stepbro, arriba de la pantalla y por encima de los diálogos.
+
+- **Pila:** los toasts más viejos asoman 16 px debajo, 5 % más pequeños cada uno, tres visibles; como mucho 5 vivos.
+- **Abrir la pila:** al pasar el ratón se despliega (resorte .55, 60 ms entre tarjetas) y los temporizadores se pausan; al salir se recoge tras 150 ms.
+- **Entrar:** desde su botón si se pasa `origin` (viaje con resorte 144/14 y patada de 2400 px/s, tamaño 0.32 s `cubic(.8,.3,.5,.8)`, radio 0.7 s, contenido `scale 2 → 1` con blur 8, color 0.4 s tras 0.15 s); si no, baja 12 px desde un blur de 6 px (0.5 s, resorte .58).
+- **Letras:** suben una a una (`yPercent 40 → 0`, blur 4, 0.4 s, 20 ms, tras 0.225 s), hasta 64 caracteres.
+- **Salir:** sube 24 px hacia un blur de 4 px (0.3 s); deslizar hacia arriba 48 px o la rueda 80 px lo descarta.
+
+Origen: Stepbro `toast-deck`, `toast-morph`, `toast-character-reveal` (kit Money); portado de Kayro.
+
+## HTML / Astro
+
+```html
+<mk-toaster></mk-toaster>
+<button class="mk-button" id="copiar">Copiar enlace</button>
+
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  import { toast } from '@yewdiel21/motion-kit';
+  defineElements(['mk-toaster']);
+  const button = document.getElementById('copiar');
+  button.addEventListener('click', () => toast('Enlace copiado', { origin: button }));
+</script>
+```
+
+Sin custom element: `createToaster(document.querySelector('.mk-toaster'))`.
+
+## React
+
+```tsx
+<Toaster />
+…
+<button onClick={(event) => toast('Guardado', { origin: event.currentTarget })}>Guardar</button>
+```
+
+`toast` se importa de `@yewdiel21/motion-kit/react` (o del paquete raíz): es el mismo store.
+
+## API
+
+`toast(mensaje, opciones) → id`, `toast.dismiss(id)`, `toast.clear()`.
+
+| Opción | Por defecto | Qué hace |
+|---|---|---|
+| `origin` | — | Botón del que sale |
+| `duration` | `4000` ms | `0`: hasta que se cierre |
+| `tone` | `'success'` | `'error'`, `'info'`, `'neutral'` (sin icono) |
+| `icon` | `true` | Icono del tono |
+| `action` | — | `{ label, onClick }`: botón en el toast (cierra al pulsarlo) |
+
+`createToaster(host, { labels: { dismiss } })`; `<mk-toaster dismiss-label>`; `<Toaster labels>`.
+
+## Variables CSS
+
+`--mk-toast-bg` (surface-4), `--mk-toast-radius` (20px).
+
+## Accesibilidad
+
+El contenedor es `role="status"` con `aria-live="polite"`: los lectores anuncian cada mensaje. El botón de cerrar tiene nombre (`labels.dismiss`). No pongas secretos en el mensaje. Con movimiento reducido aparecen y desaparecen sin animar.

package/src/components/toast/element.ts

@@ -0,0 +1,25 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createToaster, type ToasterInstance } from './engine';
+
+/**
+ * <mk-toaster dismiss-label="Cerrar"></mk-toaster> — mount once; then call
+ * `toast('Copiado', { origin: button })` from anywhere.
+ */
+export class MkToasterElement extends MkElement<ToasterInstance> {
+  static options: Record<string, OptionType> = { dismissLabel: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    const host = document.createElement('div');
+    host.className = 'mk-toaster';
+    this.append(host);
+    const toaster = createToaster(host, { labels: { dismiss: options.dismissLabel as string | undefined } });
+    return {
+      destroy: () => {
+        toaster.destroy();
+        host.remove();
+      },
+    };
+  }
+}
+
+export const defineToaster = () => defineElement('mk-toaster', MkToasterElement);