@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/questionnaire/react.tsx

@@ -0,0 +1,140 @@
+'use client';
+import { useRef, useState, type FormHTMLAttributes, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createQuestionnaire, type QuestionnaireAnswers, type QuestionnaireInstance, type QuestionnaireLabels } from './engine';
+
+export type QuestionType = 'text' | 'textarea' | 'single' | 'multiple';
+
+export interface QuestionOption {
+  value: string;
+  label: string;
+}
+
+export interface Question {
+  /** Field name and answer key. */
+  id: string;
+  label: string;
+  type: QuestionType;
+  options?: Array<string | QuestionOption>;
+  required?: boolean;
+  description?: string;
+  placeholder?: string;
+}
+
+export interface QuestionnaireProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'children'> {
+  questions: Question[];
+  /** Answers the fields start with. */
+  defaultAnswers?: QuestionnaireAnswers;
+  labels?: QuestionnaireLabels & { next?: string; prev?: string; finish?: string; restart?: string; step?: (index: number, count: number) => ReactNode };
+  onChange?: (index: number, answers: QuestionnaireAnswers) => void;
+  onComplete?: (answers: QuestionnaireAnswers) => void;
+  /** Shown after the last step; a function receives the answers. */
+  complete?: ReactNode | ((answers: QuestionnaireAnswers) => ReactNode);
+  instanceRef?: { current: QuestionnaireInstance | null };
+}
+
+const optionOf = (option: string | QuestionOption): QuestionOption => (typeof option === 'string' ? { value: option, label: option } : option);
+
+/**
+ * <Questionnaire questions={[{ id: 'name', label: 'Nombre', type: 'text', required: true }, …]} onComplete={save} />.
+ * Fields are native and uncontrolled, so answers survive steps and rerenders; the app owns persistence.
+ */
+export function Questionnaire({ questions, defaultAnswers = {}, labels = {}, onChange, onComplete, complete, instanceRef, className, ...props }: QuestionnaireProps) {
+  const ref = useRef<HTMLFormElement>(null);
+  const [answers, setAnswers] = useState<QuestionnaireAnswers | null>(null);
+  const change = useLatest(onChange);
+  const completed = useLatest(onComplete);
+  const key = JSON.stringify(questions.map(({ id, type, required, options }) => [id, type, required, options]));
+  const { required, choice } = labels;
+  useIsomorphicLayoutEffect(() => {
+    const created = createQuestionnaire(ref.current, {
+      labels: { required, choice },
+      onChange: (index, current) => change.current?.(index, current),
+      onComplete: (current) => {
+        setAnswers(current);
+        completed.current?.(current);
+      },
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, required, choice]);
+  const count = questions.length;
+  const defaults = (id: string) => defaultAnswers[id];
+  return (
+    <form {...props} ref={ref} noValidate className={['mk-questionnaire', className].filter(Boolean).join(' ')} onReset={() => setAnswers(null)}>
+      <div data-mk-question-progress="" aria-hidden="true">
+        <span data-mk-question-bar="" />
+      </div>
+      {questions.map((question, i) => {
+        const titleId = `${question.id}-title`;
+        const describedBy = question.description ? `${question.id}-description` : undefined;
+        const value = defaults(question.id);
+        return (
+          <section key={question.id} data-mk-question="" data-mk-step="" hidden={i !== 0} aria-labelledby={titleId}>
+            <p data-mk-question-step="">{labels.step ? labels.step(i, count) : `Pregunta ${i + 1} de ${count}`}</p>
+            <h3 id={titleId} data-mk-step-title="" data-mk-flow-item="">
+              {question.label}
+              {question.required ? <span data-mk-question-required="" aria-hidden="true"> *</span> : null}
+            </h3>
+            {question.description && (
+              <p id={describedBy} data-mk-question-description="" data-mk-flow-item="">
+                {question.description}
+              </p>
+            )}
+            <div data-mk-question-field="" data-mk-flow-item="">
+              {question.type === 'text' && (
+                <input name={question.id} type="text" required={question.required} aria-labelledby={titleId} aria-describedby={describedBy} placeholder={question.placeholder} defaultValue={typeof value === 'string' ? value : ''} />
+              )}
+              {question.type === 'textarea' && (
+                <textarea name={question.id} rows={4} required={question.required} aria-labelledby={titleId} aria-describedby={describedBy} placeholder={question.placeholder} defaultValue={typeof value === 'string' ? value : ''} />
+              )}
+              {(question.type === 'single' || question.type === 'multiple') && (
+                <div role={question.type === 'single' ? 'radiogroup' : 'group'} aria-labelledby={titleId} aria-describedby={describedBy} data-mk-question-options="">
+                  {(question.options ?? []).map(optionOf).map((option) => (
+                    <label key={option.value} data-mk-question-option="">
+                      <input
+                        type={question.type === 'single' ? 'radio' : 'checkbox'}
+                        name={question.id}
+                        value={option.value}
+                        required={question.required}
+                        defaultChecked={Array.isArray(value) ? value.includes(option.value) : value === option.value}
+                      />
+                      <span>{option.label}</span>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div data-mk-question-actions="" data-mk-flow-item="">
+              {i > 0 && (
+                <button type="button" className="mk-button mk-button--text" data-mk-question-prev="">
+                  {labels.prev ?? 'Anterior'}
+                </button>
+              )}
+              {i < count - 1 ? (
+                <button type="button" className="mk-button" data-mk-question-next="">
+                  {labels.next ?? 'Siguiente'}
+                </button>
+              ) : (
+                <button type="submit" className="mk-button">
+                  {labels.finish ?? 'Finalizar'}
+                </button>
+              )}
+            </div>
+          </section>
+        );
+      })}
+      <p data-mk-question-error="" role="alert" />
+      <div data-mk-question-complete="" hidden>
+        {answers && (typeof complete === 'function' ? complete(answers) : complete)}
+        <button type="reset" className="mk-button mk-button--tonal">
+          {labels.restart ?? 'Empezar de nuevo'}
+        </button>
+      </div>
+    </form>
+  );
+}

package/src/components/radar-chart/README.md

@@ -0,0 +1,48 @@
+# radar-chart
+
+Perfiles sobre ejes radiales con áreas rellenas, transición de datos y selección por eje.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { RadarChart } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add radar-chart --react --elements
+```
+
+## React
+
+```tsx
+<RadarChart axes={["Diseño", "Rapidez", "Calidad"]} series={[{ name: "Norte", values: [8, 6, 9] }]} max={10} />
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-radar-chart axes="Diseño,Rapidez,Calidad" series='[{"name":"Norte","values":[8,6,9]}]'></mk-radar-chart>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-radar-chart']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createRadarChart } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+axes: al menos 3 etiquetas. series: {name, values, color?}[]. max: automático. levels: 4. grid: polygon o circle. size: 300 px. legend: true. Los valores null son datos ausentes.
+
+Todos los gráficos aceptan `label`, `emptyLabel` y `formatValue`. Se actualizan con `update(options)` sin desmontarse; `select(index | null)` y `selected` controlan la selección (en heatmap se usa una fecha). `onSelect` también emite `mk:select`.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: --mk-chart-1…8, --mk-chart-surface.
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

package/src/components/radar-chart/element.ts

@@ -0,0 +1,30 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createRadarChart, type RadarChartInstance, type RadarChartOptions } from './engine';
+
+/**
+ * <mk-radar-chart class="mk-chart mk-radar-chart" label="Perfil" axes="Velocidad,Calidad,Precio,Soporte,Diseño"
+ *   series='[{"name":"Ana","values":[8,6,7,9,5]}]'></mk-radar-chart>
+ * Attribute changes glide in place. Emits mk:select ({index, label, values}).
+ */
+export class MkRadarChartElement extends MkElement<RadarChartInstance> {
+  static options: Record<string, OptionType> = { axes: 'list', series: 'json', max: 'number', levels: 'number', grid: 'string', size: 'number', label: 'string', legend: 'boolean', emptyLabel: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createRadarChart(this, options as RadarChartOptions);
+  }
+
+  attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    this.instance.update({ legend: undefined, max: undefined, ...(this.options as RadarChartOptions) });
+  }
+
+  update(options: RadarChartOptions) {
+    this.instance?.update(options);
+  }
+
+  select(axis: number | null) {
+    this.instance?.select(axis);
+  }
+}
+
+export const defineRadarChart = () => defineElement('mk-radar-chart', MkRadarChartElement);

package/src/components/radar-chart/engine.ts

@@ -0,0 +1,327 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { chartFrame, finite, formatNumber, onWidth, polar, round, slotColor, svg } from '../chart/parts';
+
+/*
+ * Radar chart: profiles over several measures on radial axes, in chart's
+ * family. Hairline rings (polygons or circles) and spokes; each series is a
+ * filled shape (18 %) with a 2 px edge and its points. The shapes grow out of
+ * the middle on the swatch curve (.38,.49,0,1.5), 90 ms apart; new data glides
+ * from the drawn values. Pointing near an axis (or the arrows) lights its spoke
+ * as a dotted guide, pops each series' point there and shows the values in the
+ * tooltip; a legend pill brings its series forward and dims the rest.
+ */
+
+export interface RadarSeries {
+  name: string;
+  values: Array<number | null>;
+  color?: string;
+}
+
+export interface RadarChartOptions {
+  /** The measures, clockwise from the top. */
+  axes?: string[];
+  series?: RadarSeries[];
+  /** The outer ring's value (default: the largest value, rounded up). */
+  max?: number;
+  /** Rings (default 4). */
+  levels?: number;
+  /** Ring shape (default 'polygon'). */
+  grid?: 'polygon' | 'circle';
+  /** Diameter in px (default 300; it shrinks with its container). */
+  size?: number;
+  label?: string;
+  legend?: boolean;
+  formatValue?: (value: number) => string;
+  emptyLabel?: string;
+  onSelect?: (axis: number | null) => void;
+}
+
+export interface RadarChartInstance extends Instance {
+  update(options: RadarChartOptions): void;
+  select(axis: number | null): void;
+  readonly selected: number | null;
+}
+
+function niceMax(value: number) {
+  if (value <= 0) return 1;
+  const power = 10 ** Math.floor(Math.log10(value));
+  const fraction = value / power;
+  return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10) * power;
+}
+
+export function createRadarChart(root: HTMLElement | null, initial: RadarChartOptions = {}): RadarChartInstance {
+  if (!root) return inert({ update() {}, select() {}, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, 'radar');
+  const { plot, canvas, keep } = frame;
+  let options: RadarChartOptions = { ...initial };
+  let selected: number | null = null;
+  let focusSeries: number | null = null;
+
+  const format = (value: number) => (options.formatValue ? options.formatValue(value) : formatNumber(value));
+  const modelOf = () => {
+    const axes = (options.axes ?? []).map(String);
+    const raw = options.series ?? [];
+    return {
+      axes,
+      series: raw.map((series, i) => ({
+        name: String(series.name ?? ''),
+        values: axes.map((_, k) => (finite(series.values[k]) ? Math.max(0, series.values[k]!) : null)),
+        color: series.color ?? slotColor(i, raw.length),
+      })),
+    };
+  };
+  let model = modelOf();
+  const hasData = () => model.axes.length >= 3 && model.series.some((series) => series.values.some(finite));
+  const maxOf = () => (finite(options.max) && options.max > 0 ? options.max : niceMax(Math.max(0, ...model.series.flatMap((series) => series.values.filter(finite)))));
+
+  let geometry = { size: 300, cx: 150, cy: 150, r: 110 };
+  const angle = (k: number) => (k / model.axes.length) * Math.PI * 2;
+  let shapes: Array<{ area: SVGPathElement; edge: SVGPathElement; dots: SVGCircleElement[] }> = [];
+  let guide: SVGLineElement | null = null;
+  let labels: SVGTextElement[] = [];
+  let shown: number[][] = [];
+  let glide: gsap.core.Tween | null = null;
+  scope.add(() => glide?.kill());
+
+  const measure = () => {
+    const width = Math.round(plot.clientWidth || root.clientWidth || 0);
+    const wanted = finite(options.size) ? options.size : 300;
+    const size = Math.max(180, width ? Math.min(wanted, width) : wanted);
+    // Room around the rings for the axis names.
+    const r = size / 2 - Math.min(64, Math.max(36, Math.max(...model.axes.map((axis) => axis.length)) * 3.6 + 14));
+    geometry = { size, cx: size / 2, cy: size / 2, r: Math.max(40, r) };
+    canvas.setAttribute('viewBox', `0 0 ${size} ${size}`);
+    canvas.setAttribute('width', String(size));
+    canvas.setAttribute('height', String(size));
+    plot.style.setProperty('--mk-radar-size', `${size}px`);
+  };
+  scope.add(() => plot.style.removeProperty('--mk-radar-size'));
+
+  const pointOf = (value: number, k: number, max: number) => polar(geometry.cx, geometry.cy, (Math.min(value, max) / max) * geometry.r, angle(k));
+
+  const build = () => {
+    canvas.replaceChildren();
+    const { cx, cy, r } = geometry;
+    const n = model.axes.length;
+    const levels = Math.max(1, Math.round(options.levels ?? 4));
+    const grid = svg('g', { 'data-mk-part': 'grid' });
+    for (let level = 1; level <= levels; level++) {
+      const radius = (r * level) / levels;
+      if (options.grid === 'circle') grid.append(svg('circle', { cx, cy, r: round(radius) }));
+      else {
+        const points = Array.from({ length: n }, (_, k) => polar(cx, cy, radius, angle(k)).map(round).join(',')).join(' ');
+        grid.append(svg('polygon', { points }));
+      }
+    }
+    for (let k = 0; k < n; k++) {
+      const [x, y] = polar(cx, cy, r, angle(k));
+      grid.append(svg('line', { x1: cx, y1: cy, x2: round(x), y2: round(y), 'data-mk-spoke': k }));
+    }
+    canvas.append(grid);
+    const names = svg('g', { 'data-mk-part': 'axes' });
+    labels = model.axes.map((axis, k) => {
+      const a = angle(k);
+      const [x, y] = polar(cx, cy, r + 14, a);
+      const sin = Math.sin(a);
+      const text = svg('text', { x: round(x), y: round(y), 'text-anchor': Math.abs(sin) < 0.2 ? 'middle' : sin > 0 ? 'start' : 'end', 'dominant-baseline': 'middle' });
+      text.textContent = axis;
+      names.append(text);
+      return text;
+    });
+    canvas.append(names);
+    guide = svg('line', { 'data-mk-part': 'guide' });
+    guide.style.display = 'none';
+    canvas.append(guide);
+    const series = svg('g', { 'data-mk-part': 'series' });
+    shapes = model.series.map((each, s) => {
+      const group = svg('g', { 'data-mk-series': s });
+      const area = svg('path', { 'data-mk-part': 'area' });
+      area.style.fill = each.color;
+      const edge = svg('path', { 'data-mk-part': 'edge' });
+      edge.style.stroke = each.color;
+      group.append(area, edge);
+      const dots = model.axes.map(() => {
+        const dot = svg('circle', { r: 3, 'data-mk-part': 'dot' });
+        dot.style.fill = each.color;
+        group.append(dot);
+        return dot;
+      });
+      series.append(group);
+      return { area, edge, dots };
+    });
+    canvas.append(series);
+  };
+
+  const paint = (values: number[][]) => {
+    shown = values;
+    const max = maxOf();
+    shapes.forEach((shape, s) => {
+      const list = values[s] ?? [];
+      const points = model.axes.map((_, k) => pointOf(list[k] ?? 0, k, max));
+      const d = `M${points.map(([x, y]) => `${round(x)},${round(y)}`).join('L')}Z`;
+      shape.area.setAttribute('d', d);
+      shape.edge.setAttribute('d', d);
+      shape.dots.forEach((dot, k) => {
+        dot.setAttribute('cx', String(round(points[k]![0])));
+        dot.setAttribute('cy', String(round(points[k]![1])));
+        dot.style.display = finite(model.series[s]!.values[k]) ? '' : 'none';
+      });
+    });
+  };
+
+  const paintSelection = (announce: boolean) => {
+    shapes.forEach((shape, s) => {
+      shape.area.parentElement!.toggleAttribute('data-mk-dim', focusSeries !== null && s !== focusSeries);
+      shape.dots.forEach((dot, k) => {
+        const on = k === selected;
+        if (on === dot.hasAttribute('data-mk-on')) return;
+        dot.toggleAttribute('data-mk-on', on);
+        const r = on ? 5 : 3;
+        if (reduced()) dot.setAttribute('r', String(r));
+        else keep(gsap.to(dot, { attr: { r }, duration: on ? 0.3 : 0.2, ease: on ? EASE.pop : 'power2.out' }));
+      });
+    });
+    labels.forEach((label, k) => label.toggleAttribute('data-mk-on', k === selected));
+    if (selected === null || !guide) {
+      if (guide) guide.style.display = 'none';
+      frame.tip(null);
+      return;
+    }
+    const k = selected;
+    const [x, y] = polar(geometry.cx, geometry.cy, geometry.r, angle(k));
+    Object.entries({ x1: geometry.cx, y1: geometry.cy, x2: round(x), y2: round(y) }).forEach(([name, value]) => guide!.setAttribute(name, String(value)));
+    guide.style.display = '';
+    const rows = model.series.map((series) => ({ name: series.name, color: series.color, value: finite(series.values[k]) ? format(series.values[k]!) : '—' }));
+    const max = maxOf();
+    const top = Math.min(...model.series.map((series) => pointOf(series.values[k] ?? 0, k, max)[1]));
+    frame.tip({ x: round(x), y: Math.min(round(y), top), title: model.axes[k]!, rows });
+    if (announce) frame.live.textContent = `${model.axes[k]}. ${rows.map((row) => `${row.name ? `${row.name}: ` : ''}${row.value}`).join('. ')}`;
+  };
+
+  let legendItems: HTMLLIElement[] = [];
+  const draw = (animate: boolean) => {
+    glide?.kill();
+    const name = options.label ?? 'Gráfica de radar';
+    canvas.setAttribute('aria-label', hasData() ? `${name}. ${model.axes.length} medidas: ${model.axes.join(', ')}. Series: ${model.series.map((series) => series.name).join(', ')}. Usa las flechas para recorrer las medidas.` : `${name}: ${options.emptyLabel ?? 'sin datos'}`);
+    frame.fillTable(name, ['Medida', ...model.series.map((series) => series.name || 'Valor')], model.axes.map((axis, k) => [axis, ...model.series.map((series) => (finite(series.values[k]) ? format(series.values[k]!) : '—'))]));
+    legendItems = frame.fillLegend(model.series, options.legend ?? model.series.length > 1, 'area');
+    legendItems.forEach((item, s) => {
+      item.addEventListener('pointerenter', () => {
+        focusSeries = s;
+        paintSelection(false);
+      });
+      item.addEventListener('pointerleave', () => {
+        focusSeries = null;
+        paintSelection(false);
+      });
+    });
+    const ok = hasData();
+    frame.empty.hidden = ok;
+    frame.empty.textContent = options.emptyLabel ?? 'Sin datos para mostrar';
+    plot.hidden = !ok;
+    if (!ok) {
+      canvas.replaceChildren();
+      shapes = [];
+      shown = [];
+      selected = null;
+      return;
+    }
+    if (selected !== null && selected >= model.axes.length) selected = null;
+    const before = shown;
+    const comparable = before.length === model.series.length && before.every((list) => list.length === model.axes.length) && shapes.length === model.series.length;
+    measure();
+    build();
+    const target = model.series.map((series) => series.values.map((value) => value ?? 0));
+    const done = () => {
+      paint(target);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return done();
+    const state = { t: 0 };
+    if (comparable) {
+      glide = gsap.to(state, { t: 1, duration: 0.6, ease: EASE.swatch, onUpdate: () => paint(target.map((list, s) => list.map((value, k) => before[s]![k]! + (value - before[s]![k]!) * state.t))), onComplete: done });
+      return;
+    }
+    // First appearance: each shape grows out of the middle, one after the other.
+    const stagger = 0.09;
+    const total = 0.7 + stagger * (target.length - 1);
+    paint(target.map((list) => list.map(() => 0)));
+    glide = gsap.to(state, {
+      t: total,
+      duration: total,
+      ease: 'none',
+      onUpdate: () => paint(target.map((list, s) => {
+        const local = Math.min(1, Math.max(0, (state.t - s * stagger) / 0.7));
+        const eased = gsap.parseEase(EASE.swatch)(local);
+        return list.map((value) => value * eased);
+      })),
+      onComplete: done,
+    });
+  };
+
+  const select = (axis: number | null, announce = false) => {
+    if (scope.disposed) return;
+    const n = model.axes.length;
+    const next = axis === null || !hasData() ? null : ((Math.round(axis) % n) + n) % n;
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    options.onSelect?.(selected);
+    root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { index: selected, label: selected === null ? null : model.axes[selected], values: selected === null ? [] : model.series.map((series) => series.values[selected!]) } }));
+  };
+
+  /** The axis nearest the pointer's angle around the middle (none right in the middle). */
+  const axisAt = (event: PointerEvent) => {
+    const box = canvas.getBoundingClientRect();
+    const scale = box.width ? geometry.size / box.width : 1;
+    const x = (event.clientX - box.left) * scale - geometry.cx;
+    const y = (event.clientY - box.top) * scale - geometry.cy;
+    if (Math.hypot(x, y) < geometry.r * 0.12) return selected;
+    const a = (Math.atan2(x, -y) + Math.PI * 2) % (Math.PI * 2);
+    return Math.round(a / ((Math.PI * 2) / model.axes.length)) % model.axes.length;
+  };
+  scope.on(canvas, 'pointermove', (event) => select(axisAt(event as PointerEvent)));
+  scope.on(canvas, 'pointerdown', (event) => select(axisAt(event as PointerEvent)));
+  scope.on(canvas, 'pointerleave', (event) => {
+    if ((event as PointerEvent).pointerType === 'mouse') select(null);
+  });
+  scope.on(canvas, 'focus', () => {
+    if (selected === null && hasData()) select(0, true);
+  });
+  scope.on(canvas, 'blur', () => select(null));
+  scope.on(canvas, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    const moves: Record<string, number | null> = { ArrowRight: (selected ?? -1) + 1, ArrowDown: (selected ?? -1) + 1, ArrowLeft: (selected ?? 1) - 1, ArrowUp: (selected ?? 1) - 1, Home: 0, End: model.axes.length - 1, Escape: null };
+    if (!(key in moves) || !hasData()) return;
+    event.preventDefault();
+    select(moves[key]!, true);
+  });
+  onWidth(root, scope, () => {
+    if (!hasData()) return;
+    measure();
+    build();
+    paint(shown);
+    paintSelection(false);
+  });
+
+  draw(true);
+
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf();
+      draw(true);
+    },
+    select: (axis) => select(axis),
+    get selected() {
+      return selected;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/radar-chart/radar-chart.css

@@ -0,0 +1,72 @@
+/* radar-chart — hairline rings and spokes, filled shapes (18 %) with a 2 px edge; needs chart.css for the family.
+   The axis under the pointer gets chart's dotted guide and a bolder name. */
+.mk-radar-chart,
+mk-radar-chart {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+}
+
+[data-mk-chart-type='radar'] [data-mk-chart-plot] {
+  width: 100%;
+}
+
+[data-mk-chart-type='radar'] [data-mk-chart-svg] {
+  width: var(--mk-radar-size, 300px);
+  max-width: 100%;
+  margin-inline: auto;
+  cursor: crosshair;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='grid'] :is(polygon, circle) {
+  fill: none;
+  stroke: var(--mk-chart-grid);
+  stroke-width: 1;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='grid'] line {
+  shape-rendering: auto;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='axes'] text {
+  font-size: 11px;
+  transition: fill 0.2s ease;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='axes'] text[data-mk-on] {
+  fill: var(--mk-text);
+  font-weight: 600;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='area'] {
+  fill-opacity: 0.18;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='edge'] {
+  fill: none;
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
+
+[data-mk-chart-type='radar'] [data-mk-part='dot'] {
+  stroke: var(--mk-chart-surface);
+  stroke-width: 1.5;
+}
+
+[data-mk-chart-type='radar'] [data-mk-series] {
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='radar'] [data-mk-series][data-mk-dim] {
+  opacity: 0.2;
+}
+
+[data-mk-chart-type='radar'] [data-mk-chart-legend] {
+  justify-content: center;
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='radar'] [data-mk-part='edge'] {
+    stroke: CanvasText !important;
+  }
+}

package/src/components/radar-chart/react.tsx

@@ -0,0 +1,14 @@
+'use client';
+import type { HTMLAttributes } from 'react';
+import { useChart } from '../chart/use-chart';
+import { createRadarChart, type RadarChartInstance, type RadarChartOptions } from './engine';
+
+export interface RadarChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'>, RadarChartOptions {
+  instanceRef?: { current: RadarChartInstance | null };
+}
+
+/** <RadarChart label="Perfil" axes={['Velocidad', 'Calidad', …]} series={[{ name: 'Ana', values }]} /> */
+export function RadarChart({ axes, series, max, levels, grid, size, label, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }: RadarChartProps) {
+  const ref = useChart(createRadarChart, { axes, series, max, levels, grid, size, label, legend, emptyLabel } as RadarChartOptions, { formatValue, onSelect }, instanceRef);
+  return <div {...props} ref={ref} className={['mk-chart mk-radar-chart', className].filter(Boolean).join(' ')} />;
+}