@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/chart/react.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createChart, type ChartInstance, type ChartOptions } from './engine';
+
+export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'>, ChartOptions {
+  instanceRef?: { current: ChartInstance | null };
+}
+
+/**
+ * <Chart type="bar" stacked labels={weeks} series={[{ name: 'Ana', values }]} formatValue={money} label="Sesiones por semana" />.
+ * Data changes redraw in place; the selection survives when its point still exists.
+ */
+export function Chart({ type, labels, series, points, stacked, formatValue, label, height, emptyLabel, legend, tooltip, onSelect, instanceRef, className, ...props }: ChartProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ChartInstance | null>(null);
+  const format = useLatest(formatValue);
+  const select = useLatest(onSelect);
+  const formatted = formatValue !== undefined;
+  const data = { type, labels, series, points, stacked, label, height, emptyLabel, legend, tooltip };
+  const key = JSON.stringify(data);
+  const latest = useLatest(data);
+  const options = (): ChartOptions => ({
+    ...latest.current,
+    formatValue: formatted ? (value) => format.current?.(value) ?? String(value) : undefined,
+    onSelect: (index) => select.current?.(index),
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createChart(ref.current, options());
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+    // Created once; data is pushed below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const first = useRef(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, formatted]);
+  return <div {...props} ref={ref} className={['mk-chart', className].filter(Boolean).join(' ')} />;
+}

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

@@ -0,0 +1,53 @@
+# chart-tooltip
+
+Tooltip avanzado para gráficas. Sobre la `chart` de motion-kit (creada con `tooltip: false`) sigue la selección de la propia gráfica, que le pasa el punto, cada serie y su valor anterior por `mk:select`, y deja la guía y los marcadores a la gráfica. Sobre cualquier otra gráfica sigue al puntero por `labels` (de borde a borde en líneas, en el centro de cada hueco en barras, dentro de `inset`) y dibuja una guía punteada y, con `min`/`max`, un marcador por serie. El teclado también la mueve (flechas, Inicio, Fin, Escape).
+
+La tarjeta es el cristal invertido de Melon Mind: la etiqueta y una fila por serie con su valor, la variación respecto al punto anterior (▲ ▼ %) y, si lo pides, su parte del total, más una fila de total. Aparece con un pop (.25 s), se desliza entre puntos hacia el lado con espacio y los valores que cambian ruedan en su dirección. Un clic la fija: se queda aunque el puntero salga (el pin aparece con un giro); otro clic o Escape la suelta.
+
+## HTML / Astro
+
+```html
+<mk-chart-tooltip class="mk-chart-tooltip" share>
+  <mk-chart class="mk-chart" type="line" tooltip="false" labels="Ene,Feb,Mar"
+    series='[{"name":"Ingresos","values":[120,150,140]},{"name":"Gastos","values":[80,95,70]}]'></mk-chart>
+</mk-chart-tooltip>
+
+<!-- Sobre otra gráfica (SVG o canvas propios): -->
+<mk-chart-tooltip labels="L,M,X,J,V" series='[{"name":"Visitas","values":[4,6,5,8,7]}]'
+  inset='{"left":40,"right":16,"top":12,"bottom":28}' min="0" max="10">
+  <canvas id="grafica"></canvas>
+</mk-chart-tooltip>
+```
+
+## React
+
+```tsx
+<ChartTooltip share total>
+  <Chart type="bar" labels={weeks} series={teams} tooltip={false} />
+</ChartTooltip>
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `labels`, `series` | `labels`, `series` (JSON) | — | Datos, en modo independiente (`{ name, values, color? }`). |
+| `align` | `align` | `'edge'` | `edge` (líneas) o `center` (barras). |
+| `inset` | `inset` (JSON) | 0 | Margen del área de la gráfica dentro del contenedor, en px. |
+| `min`, `max` | `min`, `max` | — | Escala vertical: con ella se dibujan marcadores. |
+| `formatValue(n)` | — | 2 decimales | Formato de los valores. |
+| `delta` | `delta` | `true` | Variación respecto al punto anterior. |
+| `share` | `share` | `false` | Parte del total de cada fila. |
+| `total` | `total` | con 2+ series | Fila de total. |
+| `sort` | `sort` | `false` | Filas de mayor a menor. |
+| `pin` | `pin` | `true` | Un clic fija la tarjeta. |
+| `label` | `label` | `'Gráfica'` | Nombre accesible en modo independiente. |
+| `onIndexChange(index)` | — | — | Al cambiar de punto. |
+
+## API y eventos
+
+`show(i)`, `hide()`, `update(options)`, `index`, `pinned`, `destroy()`. Evento `mk:index-change` con `{ index, pinned }`.
+
+## Accesibilidad
+
+Sobre `chart`, la tabla y los anuncios son los de la gráfica. En modo independiente el contenedor es enfocable y un estado discreto anuncia cada punto al moverse con el teclado. Con movimiento reducido no hay pop ni deslizamientos.

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

@@ -0,0 +1,167 @@
+/* chart-tooltip — an overlay on the chart it wraps: a dotted guide, 10 px markers ringed in the surface colour and
+   a 12 px card in Melon Mind's inverse glass (label, rows with a swatch, value, change and share, a total). */
+.mk-chart-tooltip,
+mk-chart-tooltip {
+  /* The chart palette (same as chart.css), so series over any chart get their colours without it. */
+  --mk-chart-mono: var(--mk-text);
+  --mk-chart-1: #2a78d6;
+  --mk-chart-2: #eb6834;
+  --mk-chart-3: #1baf7a;
+  --mk-chart-4: #eda100;
+  --mk-chart-5: #e87ba4;
+  --mk-chart-6: #008300;
+  --mk-chart-7: #6250d6;
+  --mk-chart-8: #e34948;
+  position: relative;
+  display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-mk-mode='light'])) :is(.mk-chart-tooltip, mk-chart-tooltip) {
+    --mk-chart-1: #3987e5;
+    --mk-chart-2: #d95926;
+    --mk-chart-3: #199e70;
+    --mk-chart-4: #c98500;
+    --mk-chart-5: #d55181;
+    --mk-chart-6: #008300;
+    --mk-chart-7: #9085e9;
+    --mk-chart-8: #e66767;
+  }
+}
+
+:where(:root[data-mk-mode='dark']) :is(.mk-chart-tooltip, mk-chart-tooltip) {
+  --mk-chart-1: #3987e5;
+  --mk-chart-2: #d95926;
+  --mk-chart-3: #199e70;
+  --mk-chart-4: #c98500;
+  --mk-chart-5: #d55181;
+  --mk-chart-6: #008300;
+  --mk-chart-7: #9085e9;
+  --mk-chart-8: #e66767;
+}
+
+:is(.mk-chart-tooltip, mk-chart-tooltip):focus-visible {
+  border-radius: 12px;
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 4px;
+}
+
+[data-mk-ct-layer] {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+[data-mk-ct-guide] {
+  position: absolute;
+  left: 0;
+  width: 0;
+  border-left: 1.5px dotted var(--mk-muted);
+}
+
+[data-mk-ct-marker] {
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2.5px var(--mk-surface-1);
+}
+
+[data-mk-ct-card] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: grid;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  min-width: 11rem;
+  max-width: min(18rem, calc(100% - 8px));
+  padding: 0.65rem 0.8rem;
+  border-radius: 12px;
+  background: var(--mk-glass-inverse, rgb(24 24 24 / 0.9));
+  color: var(--mk-on-glass-inverse, #fff);
+  box-shadow: var(--mk-glass-bevel, 0 12px 32px -12px rgb(0 0 0 / 0.4));
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+}
+
+[data-mk-ct-card][hidden],
+[data-mk-ct-guide][hidden],
+[data-mk-ct-marker][hidden],
+[data-mk-ct-pin][hidden],
+[data-mk-ct-delta][hidden] {
+  display: none;
+}
+
+[data-mk-ct-head] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+[data-mk-ct-title] {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-ct-pin] {
+  display: inline-grid;
+  place-items: center;
+  opacity: 0.8;
+}
+
+[data-mk-ct-rows] {
+  display: grid;
+  gap: 0.3rem;
+}
+
+[data-mk-ct-row] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+[data-mk-ct-swatch] {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 3px;
+}
+
+[data-mk-ct-swatch][data-mk-mono] {
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+[data-mk-ct-name] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-ct-value] {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-align: end;
+}
+
+[data-mk-ct-delta] {
+  grid-column: 2 / -1;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.78;
+}
+
+[data-mk-ct-row='total'] {
+  padding-top: 0.3rem;
+  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+}

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

@@ -0,0 +1,37 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createChartTooltip, type ChartTooltipInstance } from './engine';
+
+/**
+ * <mk-chart-tooltip class="mk-chart-tooltip" share total>
+ *   <mk-chart class="mk-chart" tooltip="false" …></mk-chart>
+ * </mk-chart-tooltip>
+ * Over another chart give it labels, series (JSON), align, inset (JSON), min and max.
+ * Emits mk:index-change ({index, pinned}).
+ */
+export class MkChartTooltipElement extends MkElement<ChartTooltipInstance> {
+  static options: Record<string, OptionType> = {
+    labels: 'list',
+    series: 'json',
+    align: 'string',
+    inset: 'json',
+    min: 'number',
+    max: 'number',
+    delta: 'boolean',
+    share: 'boolean',
+    total: 'boolean',
+    sort: 'boolean',
+    pin: 'boolean',
+    label: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createChartTooltip(this, options);
+  }
+
+  attributeChangedCallback(_name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    this.instance.update(this.options);
+  }
+}
+
+export const defineChartTooltip = () => defineElement('mk-chart-tooltip', MkChartTooltipElement);