@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/src/components/pill-button/pill-button.css

@@ -0,0 +1,134 @@
+/* pill-button — a dark pill whose fill gathers into a circle around the icon on hover (and spreads back on leave).
+   The fill is one layer clipped with inset(); the label and icon sit above it. `expand` starts as the circle. */
+.mk-pill-button:is(button, a),
+[data-mk-pill] {
+  --mk-pill-height: 3rem;
+  --mk-pill-dot: 2.25rem;
+  --mk-pill-ink: var(--mk-text);
+  --mk-pill-on-ink: var(--mk-bg);
+  --mk-pill-gap: calc((var(--mk-pill-height) - var(--mk-pill-dot)) / 2);
+  --mk-pill-gathered: inset(var(--mk-pill-gap) var(--mk-pill-gap) var(--mk-pill-gap) calc(100% - var(--mk-pill-gap) - var(--mk-pill-dot)) round var(--mk-radius-full));
+  --mk-pill-spread: inset(0 0 0 0 round var(--mk-radius-full));
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  gap: 1.25rem;
+  height: var(--mk-pill-height);
+  padding: 0 calc(var(--mk-pill-gap) + (var(--mk-pill-dot) - 1.125rem) / 2) 0 1.5rem;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-pill-on-ink);
+  font: 500 1rem/1 var(--mk-font);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+mk-pill-button {
+  display: inline-flex;
+}
+
+[data-mk-pill-fill] {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--mk-pill-ink);
+  clip-path: var(--mk-pill-spread);
+  transition: clip-path 0.5s var(--mk-ease-swatch);
+}
+
+[data-mk-pill-label] {
+  display: inline-block;
+  color: var(--mk-pill-on-ink);
+  transition:
+    transform 0.45s var(--mk-ease-swatch),
+    color 0.2s ease 0.05s;
+}
+
+[data-mk-pill-icon] {
+  display: inline-grid;
+  place-items: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--mk-pill-on-ink);
+  transition: transform 0.45s var(--mk-ease-swatch);
+}
+
+[data-mk-pill-icon] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Gathered: on hover, keyboard focus or a tap. */
+@media (hover: hover) {
+  :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-fill] {
+    clip-path: var(--mk-pill-gathered);
+  }
+  :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-label] {
+    color: var(--mk-pill-ink);
+    transform: translateX(-0.5rem);
+  }
+  :is([data-mk-pill], .mk-pill-button:is(button, a)):hover [data-mk-pill-icon] {
+    transform: translateX(2px);
+  }
+}
+[data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-gathered);
+}
+[data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-label] {
+  color: var(--mk-pill-ink);
+  transform: translateX(-0.5rem);
+}
+
+/* expand: the circle spreads into the pill. */
+[data-mk-pill='expand'] [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-gathered);
+}
+[data-mk-pill='expand'] [data-mk-pill-label] {
+  color: var(--mk-pill-ink);
+}
+@media (hover: hover) {
+  [data-mk-pill='expand']:hover [data-mk-pill-fill] {
+    clip-path: var(--mk-pill-spread);
+  }
+  [data-mk-pill='expand']:hover [data-mk-pill-label] {
+    color: var(--mk-pill-on-ink);
+    transform: translateX(0.25rem);
+  }
+}
+[data-mk-pill='expand']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-spread);
+}
+[data-mk-pill='expand']:is(:focus-visible, [data-mk-active]) [data-mk-pill-label] {
+  color: var(--mk-pill-on-ink);
+  transform: translateX(0.25rem);
+}
+
+:is([data-mk-pill], .mk-pill-button:is(button, a)):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+:is([data-mk-pill], .mk-pill-button:is(button, a)):is(:disabled, [aria-disabled='true']) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-pill-fill],
+  [data-mk-pill-label],
+  [data-mk-pill-icon] {
+    transition-duration: 0.01s;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-pill] {
+    border: 1px solid ButtonText;
+  }
+}

package/src/components/pill-button/react.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { useRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect } from '../../react/use-recipe';
+import { createPillButton, PILL_ARROW } from './engine';
+
+export interface PillButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Start as the circle and spread into the pill on hover. */
+  expand?: boolean;
+  /** The icon (default: an arrow). */
+  icon?: ReactNode;
+}
+
+/** <PillButton onClick={ask}>Haz una pregunta</PillButton> */
+export function PillButton({ expand, icon, className, children, type = 'button', ...props }: PillButtonProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createPillButton(ref.current, { expand });
+    return () => instance.destroy();
+  }, [expand]);
+  return (
+    <button {...props} type={type} ref={ref} className={['mk-pill-button', className].filter(Boolean).join(' ')}>
+      <span data-mk-pill-label="">{children}</span>
+      {icon ? (
+        <span data-mk-pill-icon="" aria-hidden="true">
+          {icon}
+        </span>
+      ) : (
+        <span data-mk-pill-icon="" aria-hidden="true" dangerouslySetInnerHTML={{ __html: PILL_ARROW }} />
+      )}
+    </button>
+  );
+}

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(' ')} />;
+}