@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/activity-feed/react.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { forwardRef, useImperativeHandle, useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createActivityFeed, type ActivityFeedInstance, type ActivityFeedOptions, type ActivityItem } from './engine';
+
+export interface ActivityFeedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, Omit<ActivityFeedOptions, 'items'> {
+  /** Initial entries; later activity goes through the handle (prepend / append). */
+  items?: ActivityItem[];
+}
+
+export interface ActivityFeedHandle {
+  prepend(items: ActivityItem[]): void;
+  append(items: ActivityItem[]): void;
+}
+
+/** <ActivityFeed ref={feed} items={recent} onLoadMore={loadOlder} />, then feed.current.prepend(live). */
+export const ActivityFeed = forwardRef<ActivityFeedHandle, ActivityFeedProps>(function ActivityFeed({ items, locale, label, emptyLabel, onLoadMore, className, ...props }, handle) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ActivityFeedInstance | null>(null);
+  const load = useLatest(onLoadMore);
+  useImperativeHandle(handle, () => ({ prepend: (next) => instance.current?.prepend(next), append: (next) => instance.current?.append(next) }), []);
+  useIsomorphicLayoutEffect(() => {
+    const created = createActivityFeed(ref.current, { items, locale, label, emptyLabel, onLoadMore: onLoadMore ? () => load.current?.() ?? [] : undefined });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locale, label, emptyLabel, Boolean(onLoadMore)]);
+  return <div {...props} ref={ref} className={['mk-activity-feed', className].filter(Boolean).join(' ')} />;
+});

package/src/components/attachment/README.md

@@ -0,0 +1,27 @@
+# attachment
+
+Selector de archivos nativo con zona para arrastrar y soltar y una tarjeta por archivo (nombre, tipo, tamaño, progreso, estado y quitar). Valida `accept`, tamaño y cantidad; la subida pertenece a la app, que informa el progreso.
+
+```html
+<mk-attachment class="mk-attachment" accept="image/*,.pdf" multiple max-files="4" max-size="5242880"></mk-attachment>
+```
+
+```ts
+const attachment = createAttachment(root, {
+  accept: 'image/*,.pdf',
+  multiple: true,
+  maxFiles: 4,
+  maxSize: 5 * 1024 * 1024,
+  onFiles: (added) => added.forEach((file) => upload(file.file!, (pct) => attachment.setProgress(file.id, pct))),
+});
+```
+
+React: `<Attachment multiple accept=".pdf" onFiles={upload} uploads={{ [id]: { progress: 40 } }} />`, o `instanceRef` para llamar a la API.
+
+Opciones: `accept` (extensiones, MIME y `tipo/*`), `multiple`, `maxFiles` (sólo multiple), `maxSize` (bytes), `disabled`, `name`, `initialFiles` (metadatos `{id?, name, size, type, preview?, progress?, status?}`), `hint`, `labels`, `onFiles(added, files)`, `onRemove(file, files)`, `onReject(rejections)`. API: `addFiles(files)` (devuelve los aceptados), `remove(id)`, `setProgress(id, 0–100, status?)`, `clear()`, `files` (copias), `destroy()`.
+
+Eventos: `mk:files` `{added, files}`, `mk:remove` `{file, files}` y `mk:reject` `{file, code: 'type' | 'size' | 'count', message}` (uno por archivo). Los archivos válidos se conservan al añadir más; en modo simple el nuevo sustituye al anterior. Las vistas previas de imagen son object URLs que se revocan al quitar el archivo o al destruir. Los nombres se muestran siempre como texto.
+
+`disabled` desactiva selector, soltar y quitar (también `remove()`). Con `name` y `DataTransfer` disponible, el input lleva los archivos conservados para un envío nativo. Quitar un archivo deja el foco en el siguiente botón o en el selector. `destroy()` elimina lo creado y restaura atributos. El custom element expone `addFiles`, `removeFile(id)` (`remove()` sigue siendo el de `HTMLElement`), `setProgress` y `files`, y conserva los archivos al cambiar un atributo.
+
+Variables: `--mk-attachment-radius`, `--mk-attachment-accent`. Movimiento reducido elimina escalas y entradas.

package/src/components/attachment/attachment.css

@@ -0,0 +1,265 @@
+/* attachment — a soft dashed drop zone and file cards with progress (Melon Mind surfaces: 16–24 px radius). */
+.mk-attachment,
+mk-attachment {
+  --mk-attachment-radius: var(--mk-radius-lg, 24px);
+  --mk-attachment-accent: var(--mk-accent);
+  display: grid;
+  gap: 0.75rem;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.35rem;
+  padding: 1.75rem 1.25rem;
+  border: 1.5px dashed var(--mk-outline-soft);
+  border-radius: var(--mk-attachment-radius);
+  background: var(--mk-surface-2);
+  text-align: center;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.25s var(--mk-ease-press, ease);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:hover,
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop][data-mk-dragging] {
+  border-color: var(--mk-outline);
+  background: var(--mk-surface-3);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop][data-mk-dragging] {
+  transform: scale(1.015);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:active {
+  transform: scale(0.99);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+:is(.mk-attachment, mk-attachment)[data-mk-disabled] [data-mk-attachment-drop] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] input[type='file'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] [data-mk-part='icon'] {
+  display: grid;
+  place-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-bottom: 0.25rem;
+  border-radius: 50%;
+  background: var(--mk-text);
+  color: var(--mk-bg);
+  transition: translate 0.4s cubic-bezier(0.38, 0.49, 0, 2);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:is(:hover, [data-mk-dragging]) [data-mk-part='icon'] {
+  translate: 0 -4px;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] [data-mk-part='icon']::before {
+  content: '';
+  width: 1.25rem;
+  height: 1.25rem;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6.5 9.5 12 4l5.5 5.5M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] strong {
+  color: var(--mk-text);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] small {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-list] {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-list]:empty {
+  display: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.625rem 0.625rem 0.625rem 0.75rem;
+  border-radius: calc(var(--mk-attachment-radius) - 8px);
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item][data-mk-status='error'] {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-error) 45%, transparent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item] [data-mk-part='thumb'] {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.875rem;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='thumb'] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='meta'] {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='name'] {
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='detail'] {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-status='complete'] [data-mk-part='detail'] {
+  color: var(--mk-accent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-status='error'] [data-mk-part='detail'] {
+  color: var(--mk-error);
+}
+
+:is(.mk-attachment, mk-attachment) progress {
+  width: 100%;
+  height: 4px;
+  margin-top: 0.3rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-4);
+  appearance: none;
+  accent-color: var(--mk-attachment-accent);
+}
+
+:is(.mk-attachment, mk-attachment) progress[hidden] {
+  display: none;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-webkit-progress-bar {
+  background: transparent;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-webkit-progress-value {
+  border-radius: inherit;
+  background: var(--mk-attachment-accent);
+  transition: width 0.3s ease;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-moz-progress-bar {
+  border-radius: inherit;
+  background: var(--mk-attachment-accent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove] {
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s var(--mk-ease-press, ease);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mk-error) 12%, transparent);
+  color: var(--mk-error);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:active:not(:disabled) {
+  transform: scale(0.9);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-error] {
+  margin: 0;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--mk-radius-lg);
+  background: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+  font-size: 0.875rem;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-error][hidden] {
+  display: none;
+}
+
+@keyframes mk-attachment-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-attachment, mk-attachment) :is([data-mk-attachment-drop], [data-mk-attachment-item], [data-mk-attachment-remove]) {
+    transition: none;
+    animation: none;
+    transform: none !important;
+  }
+}

package/src/components/attachment/element.ts

@@ -0,0 +1,50 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createAttachment, type AttachmentInstance, type AttachmentStatus } from './engine';
+
+/**
+ * <mk-attachment class="mk-attachment" accept="image/*,.pdf" multiple max-files="4" max-size="5000000"></mk-attachment>
+ * Emits mk:files ({added, files}), mk:remove ({file, files}) and mk:reject ({file, code, message}).
+ * Changing an attribute keeps the files already chosen.
+ */
+export class MkAttachmentElement extends MkElement<AttachmentInstance> {
+  static options: Record<string, OptionType> = {
+    accept: 'string',
+    multiple: 'boolean',
+    maxFiles: 'number',
+    maxSize: 'number',
+    disabled: 'boolean',
+    name: 'string',
+    hint: 'string',
+    initialFiles: 'json',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createAttachment(this, options);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const files = this.instance.files;
+    this.instance.destroy();
+    this.instance = this.create({ ...this.options, initialFiles: files });
+  }
+
+  addFiles(files: Iterable<File> | ArrayLike<File>) {
+    return this.instance?.addFiles(files) ?? [];
+  }
+
+  /** Remove one file (HTMLElement.remove() still removes the element). */
+  removeFile(id: string) {
+    this.instance?.remove(id);
+  }
+
+  setProgress(id: string, value: number, status?: AttachmentStatus) {
+    this.instance?.setProgress(id, value, status);
+  }
+
+  get files() {
+    return this.instance?.files ?? [];
+  }
+}
+
+export const defineAttachment = () => defineElement('mk-attachment', MkAttachmentElement);