@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/resizable-panel/react.tsx

@@ -0,0 +1,74 @@
+'use client';
+import { Children, forwardRef, useImperativeHandle, useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createResizablePanel, type ResizablePanelInstance, type ResizablePanelOptions } from './engine';
+
+export interface ResizablePanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onResize'>, ResizablePanelOptions {}
+
+export type ResizablePanelHandle = Pick<ResizablePanelInstance, 'setSizes' | 'collapse' | 'expand' | 'toggle' | 'reset'>;
+
+/**
+ * <ResizablePanel sizes={[25, 75]} collapsible={[0]} onResizeEnd={save}><aside /><main /></ResizablePanel>.
+ * New `sizes` glide there; adding or taking away a panel starts it again.
+ */
+export const ResizablePanel = forwardRef<ResizablePanelHandle, ResizablePanelProps>(function ResizablePanel(
+  { orientation, sizes, min, max, collapsible, collapsed, step, storageKey, handleButtons, labels, onResize, onResizeEnd, onCollapse, className, children, ...props },
+  handle,
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ResizablePanelInstance | null>(null);
+  const resize = useLatest(onResize);
+  const resizeEnd = useLatest(onResizeEnd);
+  const collapse = useLatest(onCollapse);
+  const shown = useRef(sizes);
+  useImperativeHandle(
+    handle,
+    () => ({
+      setSizes: (next, animate) => instance.current?.setSizes(next, animate),
+      collapse: (index) => instance.current?.collapse(index),
+      expand: (index) => instance.current?.expand(index),
+      toggle: (index) => instance.current?.toggle(index),
+      reset: () => instance.current?.reset(),
+    }),
+    [],
+  );
+  const count = Children.count(children);
+  useIsomorphicLayoutEffect(() => {
+    const created = createResizablePanel(ref.current, {
+      orientation,
+      sizes: shown.current,
+      min,
+      max,
+      collapsible,
+      collapsed,
+      step,
+      storageKey,
+      handleButtons,
+      labels,
+      onResize: (next) => resize.current?.(next),
+      onResizeEnd: (next) => resizeEnd.current?.(next),
+      onCollapse: (index, shut) => collapse.current?.(index, shut),
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [count, min, max, String(collapsible), step, storageKey, handleButtons, String(labels)]);
+  useIsomorphicLayoutEffect(() => {
+    if (orientation) instance.current?.setOrientation(orientation);
+  }, [orientation]);
+  const sizesKey = JSON.stringify(sizes ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (!sizes || JSON.stringify(shown.current ?? null) === sizesKey) return;
+    shown.current = sizes;
+    instance.current?.setSizes(sizes);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sizesKey]);
+  return (
+    <div {...props} ref={ref} className={['mk-resizable-panel', className].filter(Boolean).join(' ')}>
+      {children}
+    </div>
+  );
+});

package/src/components/resizable-panel/resizable-panel.css

@@ -0,0 +1,242 @@
+/* resizable-panel — panels in a row (or a column) with separators between them: a 12 px hit area with a hairline
+   (outline-soft) and a 4 × 28 px grip that grows and takes the accent on hover, focus and drag; an 8 px bubble with
+   the two sizes while dragging; small 8 px buttons on the separator to shut and open the panels beside it. Shut
+   panels hide their content. Panels scroll on their own. */
+.mk-resizable-panel,
+mk-resizable-panel {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+:is(.mk-resizable-panel, mk-resizable-panel)[data-mk-orientation='vertical'] {
+  flex-direction: column;
+}
+
+[data-mk-panel] {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+[data-mk-panel][data-mk-collapsed] {
+  overflow: hidden;
+  border-width: 0;
+  padding: 0;
+  visibility: hidden;
+}
+
+[data-mk-resize-handle] {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 12px;
+  outline: none;
+  cursor: col-resize;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle] {
+  width: auto;
+  height: 12px;
+  cursor: row-resize;
+}
+
+[data-mk-resize-handle]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(50% - 0.5px);
+  width: 1px;
+  background: var(--mk-outline-soft);
+  transition:
+    background-color 0.15s,
+    left 0.2s cubic-bezier(0.38, 0.49, 0, 1.5),
+    width 0.2s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle]::before {
+  top: calc(50% - 0.5px);
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 1px;
+  transition:
+    background-color 0.15s,
+    top 0.2s cubic-bezier(0.38, 0.49, 0, 1.5),
+    height 0.2s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-resize-handle]:is(:hover, :focus-visible, [data-mk-dragging])::before {
+  left: calc(50% - 1.5px);
+  width: 3px;
+  background: color-mix(in srgb, var(--mk-accent) 55%, transparent);
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle]:is(:hover, :focus-visible, [data-mk-dragging])::before {
+  top: calc(50% - 1.5px);
+  left: 0;
+  width: auto;
+  height: 3px;
+}
+
+[data-mk-resize-grip] {
+  position: relative;
+  width: 4px;
+  height: 28px;
+  border-radius: 4px;
+  background: var(--mk-outline);
+  transition:
+    width 0.3s cubic-bezier(0.38, 0.49, 0, 1.5),
+    height 0.3s cubic-bezier(0.38, 0.49, 0, 1.5),
+    background-color 0.15s;
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle] [data-mk-resize-grip] {
+  width: 28px;
+  height: 4px;
+}
+
+[data-mk-resize-handle]:is(:hover, :focus-visible) [data-mk-resize-grip] {
+  height: 40px;
+  background: var(--mk-accent);
+}
+
+[data-mk-resize-handle][data-mk-dragging] [data-mk-resize-grip] {
+  height: 56px;
+  background: var(--mk-accent);
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle]:is(:hover, :focus-visible) [data-mk-resize-grip] {
+  width: 40px;
+  height: 4px;
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle][data-mk-dragging] [data-mk-resize-grip] {
+  width: 56px;
+  height: 4px;
+}
+
+[data-mk-resize-handle]:focus-visible [data-mk-resize-grip] {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 30%, transparent);
+}
+
+[data-mk-resizing],
+[data-mk-resizing] * {
+  cursor: col-resize;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+[data-mk-orientation='vertical'][data-mk-resizing],
+[data-mk-orientation='vertical'][data-mk-resizing] * {
+  cursor: row-resize;
+}
+
+/* The buttons that shut and open the panels beside a separator. */
+[data-mk-resize-button] {
+  position: absolute;
+  left: calc(50% - 0.625rem);
+  display: grid;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-muted);
+  opacity: 0;
+  cursor: pointer;
+  transition:
+    opacity 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+[data-mk-resize-button='start'] {
+  top: calc(50% - 3rem);
+}
+
+[data-mk-resize-button='end'] {
+  top: calc(50% + 1.75rem);
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle] [data-mk-resize-button] {
+  top: calc(50% - 0.625rem);
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle] [data-mk-resize-button='start'] {
+  left: calc(50% - 3rem);
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle] [data-mk-resize-button='end'] {
+  left: calc(50% + 1.75rem);
+}
+
+[data-mk-resize-handle]:is(:hover, :focus-visible) [data-mk-resize-button],
+[data-mk-panel][data-mk-collapsed] + [data-mk-resize-handle] [data-mk-resize-button='start'],
+[data-mk-resize-handle]:has(+ [data-mk-panel][data-mk-collapsed]) [data-mk-resize-button='end'] {
+  opacity: 1;
+}
+
+/* At an edge (the panel beyond it shut), the buttons stay inside the panels' box. */
+[data-mk-resize-handle][data-edge='end'] [data-mk-resize-button] {
+  right: 0;
+  left: auto;
+}
+
+[data-mk-resize-handle][data-edge='start'] [data-mk-resize-button] {
+  left: 0;
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle][data-edge='end'] [data-mk-resize-button] {
+  top: auto;
+  bottom: 0;
+  left: calc(50% - 0.625rem);
+}
+
+[data-mk-orientation='vertical'] > [data-mk-resize-handle][data-edge='start'] [data-mk-resize-button] {
+  top: 0;
+  left: calc(50% - 0.625rem);
+}
+
+[data-mk-resize-button]:hover {
+  border-color: var(--mk-accent);
+  color: var(--mk-accent);
+}
+
+[data-mk-resize-bubble] {
+  position: absolute;
+  z-index: 3;
+  padding: 0.25rem 0.5rem;
+  border-radius: 8px;
+  background: var(--mk-glass-inverse, var(--mk-text));
+  color: var(--mk-on-glass-inverse, var(--mk-surface-1));
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  white-space: nowrap;
+  translate: -50% -50%;
+  pointer-events: none;
+}
+
+[data-mk-resize-bubble][hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-resize-handle]::before,
+  [data-mk-resize-grip] {
+    transition: none;
+  }
+}

package/src/components/rich-text-editor/README.md

@@ -0,0 +1,57 @@
+# rich-text-editor
+
+Editor de texto enriquecido: un área de escritura con una barra para negrita, cursiva, subrayado, tachado, títulos, listas, citas, código y enlaces. Los botones rebotan al pulsarlos, y los formatos que tiene el texto bajo el cursor se iluminan mientras te mueves (su píldora crece desde dentro). Atajos: Ctrl/⌘ + B, I, U y K, Ctrl/⌘ + Mayús + X para tachar, y Ctrl/⌘ + Z e Y para deshacer y rehacer.
+
+Admite Markdown mientras escribes: «# » y «## » crean títulos, «- » o «* » una lista, «1. » una lista numerada, «> » una cita, y **negrita** o `código` se convierten en línea con un breve destello. Lo que pegas conserva solo el formato seguro (sin estilos, clases ni scripts). El editor de enlaces crece desde su botón. El contador pasa a rojo y el área se sacude una vez al superar `maxLength`. Un campo oculto lleva el HTML para los formularios, y el texto de ayuda se desvanece al escribir.
+
+## HTML / Astro
+
+```html
+<form>
+  <mk-rich-text-editor class="mk-rich-text-editor" name="descripcion" max-length="500" placeholder="Cuenta tu idea…">
+    <p>Contenido <strong>inicial</strong>.</p>
+  </mk-rich-text-editor>
+</form>
+
+<script>
+  const editor = document.querySelector('mk-rich-text-editor');
+  editor.addEventListener('mk:change', (event) => console.log(event.detail.html, event.detail.text));
+</script>
+```
+
+## React
+
+```tsx
+const [html, setHtml] = useState('<p>Hola</p>');
+
+<RichTextEditor value={html} onChange={(next) => setHtml(next)} maxLength={500} toolbar={['bold', 'italic', '|', 'ul', 'ol', '|', 'link']} />;
+```
+
+`value` es el contenido inicial; después, un valor distinto que llegue de la app lo reemplaza (el eco de `onChange` no).
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `value` | `value` | el HTML escrito dentro | Contenido inicial (se limpia igual que lo pegado). |
+| `placeholder` | `placeholder` | `'Escribe algo…'` | Texto de ayuda con el área vacía. |
+| `toolbar` | `toolbar` (lista) | todos | Botones en orden; `'|'` separa grupos: `bold`, `italic`, `underline`, `strike`, `h2`, `h3`, `ul`, `ol`, `quote`, `code`, `link`, `clear`, `undo`, `redo`. |
+| `maxLength` | `max-length` | — | Caracteres antes de que el contador se ponga rojo (se puede seguir escribiendo). |
+| `counter` | `counter` | `'words'` (`'characters'` con `maxLength`) | `'words'`, `'characters'` o `false`. |
+| `name` | `name` | — | Campo oculto con el HTML para formularios. |
+| `label` | `label` | `'Editor de texto'` | Nombre accesible del área. |
+| `readOnly` | `read-only` | `false` | Solo lectura, sin barra. |
+| `markdown` | `markdown` | `true` | Atajos de Markdown al escribir. |
+| `onChange(html, texto)` | — | — | Cada cambio. |
+
+## API y eventos
+
+`setValue(html)`, `focus()`, `exec(comando, valor?)` (por ejemplo, `exec('link', 'https://…')`), `value` (HTML limpio), `text`, `element`, `destroy()`. Evento `mk:change` con `{ html, text }`. El limpiador (`sanitizeHtml`) también se exporta.
+
+## Variables CSS
+
+`--mk-rte-max-height` (alto máximo del área antes de desplazarse, `28rem`).
+
+## Accesibilidad
+
+El área es un `textbox` multilínea con nombre; la barra es un `toolbar` de WAI-ARIA (← → Inicio Fin entre botones, una sola parada de tabulación) con botones etiquetados (incluyen su atajo) y `aria-pressed` para los formatos. Pasar el límite marca `aria-invalid` y se anuncia; el editor de enlaces se cierra con Escape y devuelve el foco y la selección al texto. Con movimiento reducido los cambios son inmediatos.

package/src/components/rich-text-editor/element.ts

@@ -0,0 +1,34 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createRichTextEditor, type RichCommand, type RichTextEditorInstance } from './engine';
+
+/**
+ * <mk-rich-text-editor class="mk-rich-text-editor" name="cuerpo" max-length="500" placeholder="Cuenta tu idea…">
+ *   <p>Contenido <strong>inicial</strong></p>
+ * </mk-rich-text-editor>. Emits mk:change ({html, text}).
+ */
+export class MkRichTextEditorElement extends MkElement<RichTextEditorInstance> {
+  static options: Record<string, OptionType> = {
+    value: 'string',
+    placeholder: 'string',
+    toolbar: 'list',
+    maxLength: 'number',
+    counter: 'string',
+    name: 'string',
+    label: 'string',
+    readOnly: 'boolean',
+    markdown: 'boolean',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    const counter = options.counter === 'false' ? false : options.counter === 'characters' ? 'characters' : options.counter === 'words' ? 'words' : undefined;
+    return createRichTextEditor(this, { ...options, counter, toolbar: options.toolbar as Array<RichCommand | '|'> | undefined });
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'value') this.instance.setValue(next ?? '');
+    else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineRichTextEditor = () => defineElement('mk-rich-text-editor', MkRichTextEditorElement);