@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/range-slider/range-slider.css

@@ -0,0 +1,191 @@
+/* range-slider — Melonmind line: a neutral track, the accent for the chosen span, white thumbs with a soft
+   shadow and a glass value bubble. The native thumbs stay as transparent hit areas; the engine draws and moves the rest. */
+.mk-range-slider,
+mk-range-slider {
+  --mk-range-thumb: 1.5rem;
+  --mk-range-height: 8px;
+  --mk-range-track: var(--mk-surface-4);
+  --mk-range-fill: var(--mk-accent);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-range-track] {
+  position: relative;
+  display: grid;
+  align-items: center;
+  min-width: 0;
+  height: 2.75rem;
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-range-visual] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* Track */
+:is(.mk-range-slider, mk-range-slider) [data-mk-range-visual]::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  inset-inline: 0;
+  height: var(--mk-range-height);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-range-track);
+  translate: 0 -50%;
+}
+
+/* The span between the thumb centres. */
+:is(.mk-range-slider, mk-range-slider) [data-mk-part='fill'] {
+  position: absolute;
+  top: 50%;
+  left: calc((100% - var(--mk-range-thumb)) * var(--mk-range-start, 0) + var(--mk-range-thumb) / 2);
+  right: calc(100% - ((100% - var(--mk-range-thumb)) * var(--mk-range-end, 0) + var(--mk-range-thumb) / 2));
+  height: var(--mk-range-height);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-range-fill);
+  translate: 0 -50%;
+}
+
+:is(.mk-range-slider, mk-range-slider)[data-mk-range='single'] [data-mk-part='fill'] {
+  left: 0;
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-part='thumb'] {
+  position: absolute;
+  top: 50%;
+  left: calc((100% - var(--mk-range-thumb)) * var(--mk-range-start, 0) + var(--mk-range-thumb) / 2);
+  width: var(--mk-range-thumb);
+  height: var(--mk-range-thumb);
+  margin: calc(var(--mk-range-thumb) / -2) 0 0 calc(var(--mk-range-thumb) / -2);
+  border-radius: 50%;
+  background: var(--mk-surface-1);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--mk-text) 8%, transparent),
+    0 2px 8px color-mix(in srgb, var(--mk-shadow-color) 22%, transparent);
+}
+
+/* Single value: its one thumb sits at the end of the fill. */
+:is(.mk-range-slider, mk-range-slider) [data-mk-part='thumb']:last-child {
+  left: calc((100% - var(--mk-range-thumb)) * var(--mk-range-end, 0) + var(--mk-range-thumb) / 2);
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-part='thumb']::after {
+  content: '';
+  position: absolute;
+  inset: 30%;
+  border-radius: 50%;
+  background: var(--mk-range-fill);
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-part='thumb'][data-mk-focus] {
+  box-shadow:
+    0 0 0 4px color-mix(in srgb, var(--mk-accent) 35%, transparent),
+    0 2px 8px color-mix(in srgb, var(--mk-shadow-color) 22%, transparent);
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-part='bubble'] {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  min-width: 2.5rem;
+  padding: 0.25rem 0.6rem;
+  width: max-content;
+  translate: -50% 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-glass-inverse);
+  box-shadow: var(--mk-glass-bevel);
+  backdrop-filter: blur(16px);
+  color: var(--mk-on-glass-inverse);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  white-space: nowrap;
+  opacity: 0;
+}
+
+/* The native inputs: transparent, the same size, on top for pointer and keyboard. */
+:is(.mk-range-slider, mk-range-slider) [data-mk-range-track] input[type='range'] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: transparent;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: grab;
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-range-track] input[type='range']:active {
+  cursor: grabbing;
+}
+
+:is(.mk-range-slider, mk-range-slider)[data-mk-range='interval'] [data-mk-range-track] input[type='range'] {
+  pointer-events: none;
+}
+
+:is(.mk-range-slider, mk-range-slider) input[type='range']::-webkit-slider-runnable-track {
+  height: 100%;
+  background: transparent;
+}
+
+:is(.mk-range-slider, mk-range-slider) input[type='range']::-moz-range-track {
+  background: transparent;
+}
+
+:is(.mk-range-slider, mk-range-slider) input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--mk-range-thumb);
+  height: 2.75rem;
+  border: 0;
+  background: transparent;
+  pointer-events: auto;
+}
+
+:is(.mk-range-slider, mk-range-slider) input[type='range']::-moz-range-thumb {
+  width: var(--mk-range-thumb);
+  height: 2.75rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  pointer-events: auto;
+}
+
+:is(.mk-range-slider, mk-range-slider) input[type='range']:focus-visible {
+  outline: none;
+}
+
+:is(.mk-range-slider, mk-range-slider) input[type='range']:disabled {
+  cursor: not-allowed;
+}
+
+:is(.mk-range-slider, mk-range-slider):has(input:disabled) [data-mk-range-visual] {
+  opacity: 0.45;
+}
+
+:is(.mk-range-slider, mk-range-slider) [data-mk-range-output] {
+  min-width: 4ch;
+  padding: 0.4rem 0.85rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-3);
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-range-slider, mk-range-slider) [data-mk-part='thumb'][data-mk-active] [data-mk-part='bubble'] {
+    opacity: 1;
+  }
+}

package/src/components/range-slider/react.tsx

@@ -0,0 +1,66 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createRangeSlider, type RangeSliderInstance, type RangeSliderOptions, type RangeValue } from './engine';
+
+export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput' | 'defaultValue'>, RangeSliderOptions {
+  /** Uncontrolled start; an array makes an interval. */
+  defaultValue?: RangeValue;
+  /** Show the formatted value beside the track (default true). */
+  showOutput?: boolean;
+}
+
+/**
+ * <RangeSlider min={0} max={100} defaultValue={[20, 80]} label="Precio" onChange={setRange} />.
+ * Controlled with `value`; otherwise the edited value survives rerenders and new bounds.
+ */
+export function RangeSlider({ min, max, step, value, defaultValue, disabled, name, label, formatValue, onInput, onChange, showOutput = true, className, ...props }: RangeSliderProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<RangeSliderInstance | null>(null);
+  const edited = useRef<RangeValue | undefined>(undefined);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const format = useLatest(formatValue);
+  const formatted = formatValue !== undefined;
+  const start = value ?? defaultValue;
+  const count = Array.isArray(start) ? 2 : 1;
+  const current = useLatest(value);
+  useIsomorphicLayoutEffect(() => {
+    const created = createRangeSlider(ref.current, {
+      min,
+      max,
+      step,
+      disabled,
+      name,
+      label,
+      value: current.current ?? edited.current ?? start,
+      formatValue: formatted ? (n) => format.current?.(n) ?? String(n) : undefined,
+      onInput: (next) => input.current?.(next),
+      onChange: (next) => change.current?.(next),
+    });
+    instance.current = created;
+    return () => {
+      edited.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+    // `start` only seeds the first creation; edits and `value` take over after it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [min, max, step, disabled, name, label, formatted, count]);
+  const valueKey = JSON.stringify(value);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== undefined) instance.current?.setValue(value, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueKey]);
+  const initial = Array.isArray(start) ? start : [start ?? min ?? 0];
+  return (
+    <div {...props} ref={ref} className={['mk-range-slider', className].filter(Boolean).join(' ')}>
+      <div data-mk-range-track="">
+        {initial.map((n, i) => (
+          <input key={i} type="range" data-mk-range-input="" defaultValue={n} />
+        ))}
+      </div>
+      {showOutput && <output data-mk-range-output="" />}
+    </div>
+  );
+}

package/src/components/resizable-panel/README.md

@@ -0,0 +1,61 @@
+# resizable-panel
+
+Paneles redimensionables con divisores arrastrables, uno al lado del otro o apilados. Cada divisor es una línea fina con un asa que crece y toma el color de acento al pasar el puntero, al enfocarlo y al arrastrarlo; mientras se mueve, una burbuja muestra los dos tamaños («32 % · 68 %»). Funciona con mouse, lápiz y pantalla táctil.
+
+Al llegar al límite de un panel, el arrastre cede solo una cuarta parte del camino (efecto goma) y al soltarlo vuelve con un resorte (.45 s, curva swing). Un panel plegable arrastrado muy por debajo de su mínimo se cierra de golpe (.3 s, curva swing) y se vuelve a abrir si lo arrastras de regreso, con Intro sobre su divisor o con los botones del divisor (`handleButtons`). Doble clic en un divisor devuelve los tamaños iniciales (.45 s, curva signature). Los tamaños se pueden recordar entre visitas (`storageKey`).
+
+## HTML / Astro
+
+```html
+<mk-resizable-panel class="mk-resizable-panel" sizes="22,48,30" collapsible="2" handle-buttons storage-key="correo">
+  <aside data-label="Carpetas" data-min="15">…</aside>
+  <main data-label="Mensajes">…</main>
+  <section data-label="Vista previa" data-min="20">…</section>
+</mk-resizable-panel>
+```
+
+Cada panel puede llevar `data-size`, `data-min`, `data-max` (en %), `data-collapsible` y `data-label`. Conviene poner el relleno (`padding`) en un elemento interior: un panel cerrado no conserva el suyo.
+
+## React
+
+```tsx
+const panels = useRef<ResizablePanelHandle>(null);
+
+<ResizablePanel ref={panels} sizes={[25, 75]} collapsible={[0]} handleButtons onResizeEnd={guardar} style={{ height: 420 }}>
+  <aside>…</aside>
+  <main>…</main>
+</ResizablePanel>;
+
+panels.current?.toggle(0);
+```
+
+Unos `sizes` nuevos se deslizan hasta ahí; agregar o quitar un panel reinicia el componente.
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `orientation` | `orientation` | `'horizontal'` | `'horizontal'`: lado a lado; `'vertical'`: apilados. |
+| `sizes` | `sizes` (lista con comas) | `data-size`, si no, iguales | Tamaños en %; los que falten se reparten lo que sobra. |
+| `min` / `max` | `min` / `max` | `10` / `100` | Límites en % (los `data-min` y `data-max` de cada panel mandan). |
+| `collapsible` | `collapsible` (índices) | `[]` | Paneles que se cierran al arrastrarlos más allá de la mitad de su mínimo. |
+| `collapsed` | `collapsed` (índices) | `[]` | Paneles cerrados al empezar. |
+| `step` | `step` | `5` | Lo que mueven las flechas (Mayús: el cuádruple). |
+| `storageKey` | `storage-key` | — | Recordar tamaños y paneles cerrados en `localStorage`. |
+| `handleButtons` | `handle-buttons` | `false` | Botones en los divisores para cerrar y abrir los paneles de al lado. |
+| `labels` | `labels` (lista) | `data-label` | Nombres de los paneles para las etiquetas de los divisores. |
+| `onResize(sizes)` | — | — | Mientras cambia (una vez por cuadro). |
+| `onResizeEnd(sizes)` | — | — | Al terminar un arrastre, una tecla o una animación. |
+| `onCollapse(index, closed)` | — | — | Un panel se cerró o se abrió. |
+
+## API y eventos
+
+`setSizes(sizes, animate = true)`, `collapse(index)`, `expand(index)`, `toggle(index)`, `reset()`, `setOrientation(orientation)`, `sizes`, `collapsed`, `orientation`, `destroy()`. Eventos `mk:resize` con `{ sizes }` y `mk:collapse` con `{ index, collapsed }`.
+
+## Teclado
+
+Sobre un divisor: ← → (o ↑ ↓ si están apilados) mueven el 5 %, con Mayús el 20 %; Inicio y Fin llevan el panel a sus límites; Intro cierra o abre el panel plegable de al lado. En un límite, el asa se sacude un poco.
+
+## Accesibilidad
+
+Patrón *window splitter* de WAI-ARIA: cada divisor es un `separator` enfocable con `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, un texto («40 %, cerrado»), `aria-controls` apuntando al panel anterior y una etiqueta con los nombres de los dos paneles. Un panel cerrado queda oculto también para los lectores de pantalla, y un estado discreto anuncia cada cierre y apertura. Con movimiento reducido los cambios son inmediatos.

package/src/components/resizable-panel/element.ts

@@ -0,0 +1,36 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createResizablePanel, type ResizablePanelInstance } from './engine';
+
+/**
+ * <mk-resizable-panel class="mk-resizable-panel" sizes="25,75" collapsible="0" storage-key="layout">
+ *   <aside data-min="15">…</aside><main>…</main>
+ * </mk-resizable-panel>. Emits mk:resize ({sizes}) and mk:collapse ({index, collapsed}).
+ */
+export class MkResizablePanelElement extends MkElement<ResizablePanelInstance> {
+  static options: Record<string, OptionType> = {
+    orientation: 'string',
+    sizes: 'list',
+    min: 'number',
+    max: 'number',
+    collapsible: 'list',
+    collapsed: 'list',
+    step: 'number',
+    storageKey: 'string',
+    handleButtons: 'boolean',
+    labels: 'list',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    const numbers = (value: unknown) => (Array.isArray(value) ? value.map(Number).filter(Number.isFinite) : undefined);
+    return createResizablePanel(this, { ...options, sizes: numbers(options.sizes), collapsible: numbers(options.collapsible), collapsed: numbers(options.collapsed) });
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'orientation') this.instance.setOrientation(next === 'vertical' ? 'vertical' : 'horizontal');
+    else if (name === 'sizes') this.instance.setSizes((next ?? '').split(',').map(Number).filter(Number.isFinite));
+    else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineResizablePanel = () => defineElement('mk-resizable-panel', MkResizablePanelElement);