@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,78 @@
+/* tooltip — Melon Mind's inverse glass in a compact 8 px bubble: .8125rem text, at most 18rem wide, a 12 × 6 px arrow
+   that points at the trigger's centre. It lives in the top layer, so the reset below undoes the popover UA styles. */
+.mk-tooltip,
+mk-tooltip {
+  display: inline-flex;
+}
+
+[data-mk-tooltip-bubble] {
+  --mk-tooltip-bg: var(--mk-glass-inverse, rgb(24 24 24 / 0.9));
+  position: fixed;
+  inset: auto;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(18rem, calc(100vw - 16px));
+  margin: 0;
+  padding: 0.4rem 0.65rem;
+  border: 0;
+  border-radius: 8px;
+  overflow: visible;
+  background: var(--mk-tooltip-bg);
+  color: var(--mk-on-glass-inverse, #fff);
+  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  font: 500 0.8125rem/1.35 var(--mk-font, system-ui, sans-serif);
+  text-align: start;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
+[data-mk-tooltip-bubble][data-mk-interactive] {
+  pointer-events: auto;
+}
+
+[data-mk-tooltip-bubble][hidden] {
+  display: none;
+}
+
+/* A triangle outside the bubble's edge (no overlap, so the translucent glass is not doubled). */
+[data-mk-tooltip-arrow] {
+  position: absolute;
+  background: var(--mk-tooltip-bg);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='top'] > [data-mk-tooltip-arrow],
+[data-mk-tooltip-bubble][data-mk-side='bottom'] > [data-mk-tooltip-arrow] {
+  left: calc(var(--mk-tooltip-arrow, 50%) - 6px);
+  width: 12px;
+  height: 6px;
+}
+
+[data-mk-tooltip-bubble][data-mk-side='top'] > [data-mk-tooltip-arrow] {
+  top: 100%;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='bottom'] > [data-mk-tooltip-arrow] {
+  bottom: 100%;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='left'] > [data-mk-tooltip-arrow],
+[data-mk-tooltip-bubble][data-mk-side='right'] > [data-mk-tooltip-arrow] {
+  top: calc(var(--mk-tooltip-arrow, 50%) - 6px);
+  width: 6px;
+  height: 12px;
+}
+
+[data-mk-tooltip-bubble][data-mk-side='left'] > [data-mk-tooltip-arrow] {
+  left: 100%;
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='right'] > [data-mk-tooltip-arrow] {
+  right: 100%;
+  clip-path: polygon(100% 0, 100% 100%, 0 50%);
+}

package/src/components/tree-view/README.md

@@ -0,0 +1,61 @@
+# tree-view
+
+Árbol jerárquico con nodos expandibles, checkboxes y búsqueda. Una rama se abre por su altura (.32 s, curva signature) mientras sus hijos entran deslizándose desde un blur, 25 ms entre uno y otro, y su flecha gira; al cerrarse hace lo mismo al revés. La fila seleccionada va sobre una píldora que se desliza hasta cada nueva elección (.3 s, curva swing).
+
+Con `checkable`, las casillas tienen tres estados: la palomita se dibuja sola y la casilla hace pop; una rama con solo algunos hijos marcados muestra un guion. Marcar una rama marca todo lo que tiene dentro. La búsqueda resalta las letras que coinciden (sin importar tildes ni mayúsculas), abre las ramas que las contienen y oculta lo demás; al borrarla vuelve lo que estaba abierto. `loadChildren()` llena una rama la primera vez que se abre (mientras tanto, una fila «Cargando…»).
+
+## HTML / Astro
+
+```html
+<mk-tree-view class="mk-tree-view" checkable search="Filtrar carpetas" expanded="docs"
+  nodes='[{"id":"docs","label":"Documentos","icon":"📁","children":[
+            {"id":"cv","label":"Currículum.pdf","icon":"📄"},
+            {"id":"facturas","label":"Facturas","icon":"📁","children":[{"id":"f1","label":"Enero"},{"id":"f2","label":"Febrero"}]}]},
+          {"id":"fotos","label":"Fotos","icon":"🖼️","children":[{"id":"playa","label":"Playa"}]}]'></mk-tree-view>
+
+<script>
+  const tree = document.querySelector('mk-tree-view');
+  tree.addEventListener('mk:check', (event) => console.log(event.detail.checked));
+  tree.addEventListener('mk:select', (event) => console.log(event.detail.node));
+</script>
+```
+
+`expanded="all"` abre todas las ramas; `search` sin texto activa la búsqueda con su texto por defecto.
+
+## React
+
+```tsx
+const tree = useRef<TreeViewHandle>(null);
+
+<TreeView ref={tree} nodes={carpetas} checkable checked={ids} onCheck={setIds} search expanded={['docs']} />;
+
+tree.current?.expandAll();
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `nodes` | `nodes` (JSON) | `[]` | `{ id, label, children?, icon?, disabled?, hasChildren?, data? }[]`. |
+| `checkable` | `checkable` | `false` | Casillas de tres estados. |
+| `checked` | `checked` (lista con comas) | `[]` | Ids marcados (una rama marca lo que tiene dentro). |
+| `expanded` | `expanded` (lista o `all`) | `[]` | Ramas abiertas al empezar; `true` abre todas. |
+| `selected` | `selected` | — | Id seleccionado (sin casillas). |
+| `search` | `search` | `false` | Campo de búsqueda; un texto es su marcador. |
+| `label` | `label` | `'Árbol'` | Nombre accesible. |
+| `loadChildren(node)` | — | — | Hijos de un nodo con `hasChildren`, la primera vez que se abre. |
+| `renderLabel(node, element, query)` | — | — | Dibujar la etiqueta a mano (lo usan `json-viewer` y `file-explorer`). |
+| `searchText(node)` | — | la etiqueta | El texto donde busca la búsqueda. |
+| `onSelect(node)`, `onCheck(ids)`, `onExpand(node, abierto)` | — | — | Cada cambio. |
+
+## API y eventos
+
+`expand(id)`, `collapse(id)`, `toggle(id)`, `expandAll()`, `collapseAll()`, `reveal(id)` (abre lo que tiene encima y lo muestra), `select(id, notify = false)`, `setChecked(ids)`, `filter(texto)`, `setNodes(nodes)`, `focusItem(id)`, `selected`, `checked`, `expanded`, `element`, `destroy()`. Eventos `mk:select` con `{ id, node }`, `mk:check` con `{ checked }` y `mk:expand` con `{ id, expanded }`.
+
+## Teclado
+
+↑ ↓ mueven, → abre o entra, ← cierra o sube, Inicio y Fin van a los extremos, `*` abre las ramas hermanas, Intro selecciona, Espacio marca (o selecciona) y escribir salta a la etiqueta que empieza así. Desde la búsqueda, ↓ entra al árbol.
+
+## Accesibilidad
+
+Patrón de árbol de WAI-ARIA: `role="tree"` con `treeitem` que llevan `aria-level`, `aria-setsize`, `aria-posinset`, `aria-expanded`, `aria-selected` o `aria-checked` (`mixed` para el guion), y un solo elemento tabulable (tabindex móvil). Un estado discreto anuncia las coincidencias y cada casilla marcada. Con movimiento reducido las ramas se abren y la píldora salta sin animación.

package/src/components/tree-view/element.ts

@@ -0,0 +1,32 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createTreeView, type TreeNode, type TreeViewInstance } from './engine';
+
+/**
+ * <mk-tree-view class="mk-tree-view" checkable search
+ *   nodes='[{"id":"a","label":"Proyectos","children":[{"id":"a1","label":"Melon"}]}]'></mk-tree-view>
+ * Emits mk:select ({id, node}), mk:check ({checked}), mk:expand ({id, expanded}).
+ */
+export class MkTreeViewElement extends MkElement<TreeViewInstance> {
+  static options: Record<string, OptionType> = { nodes: 'json', checkable: 'boolean', checked: 'list', expanded: 'list', selected: 'string', search: 'string', label: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    // search="" (present without text) turns the field on with its default placeholder.
+    const search = this.hasAttribute('search') ? (this.getAttribute('search') || true) : undefined;
+    const expanded = this.getAttribute('expanded') === 'all' ? true : options.expanded;
+    return createTreeView(this, { ...options, search, expanded } as Parameters<typeof createTreeView>[1]);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'nodes') {
+      try {
+        this.instance.setNodes(JSON.parse(next ?? '[]') as TreeNode[]);
+      } catch {
+        // Malformed JSON: keep the current nodes.
+      }
+    } else if (name === 'selected') this.instance.select(next);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineTreeView = () => defineElement('mk-tree-view', MkTreeViewElement);