@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/auto/auto-init.ts

@@ -17,6 +17,58 @@ import { createSticker } from '../recipes/sticker/create-sticker';
 import { createScrollDock } from '../recipes/scroll-dock/create-scroll-dock';
 import { createLocalClock } from '../recipes/local-clock/create-local-clock';
 import { createTrailer } from '../components/trailer/engine';
+import { createCreditCard } from '../components/credit-card/engine';
+import { createCommandSearch } from '../components/command-search/engine';
+import { createHoldConfirm } from '../components/hold-confirm/engine';
+import { createImagePreview } from '../components/image-preview/engine';
+import { createLikeButton } from '../components/like-button/engine';
+import { createNotificationBell } from '../components/notification-bell/engine';
+import { createPasswordStrength } from '../components/password-strength/engine';
+import { createScratchCard } from '../components/scratch-card/engine';
+import { createStarRating } from '../components/star-rating/engine';
+import { createSwipeActions } from '../components/swipe-actions/engine';
+import { createAttachment } from '../components/attachment/engine';
+import { createSkeleton } from '../components/skeleton/engine';
+import { createQuestionnaire } from '../components/questionnaire/engine';
+import { createCodeBlock } from '../components/code-block/engine';
+import { createContextMenu } from '../components/context-menu/engine';
+import { createDrawer } from '../components/drawer/engine';
+import { createLinkPreview } from '../components/link-preview/engine';
+import { createProgress } from '../components/progress/engine';
+import { createRangeSlider } from '../components/range-slider/engine';
+import { createChart } from '../components/chart/engine';
+import { createColorSlider } from '../components/color-slider/engine';
+import { createColorArea } from '../components/color-area/engine';
+import { createColorField } from '../components/color-field/engine';
+import { createColorPicker } from '../components/color-picker/engine';
+import { createTimeField } from '../components/time-field/engine';
+import { createRangeCalendar } from '../components/range-calendar/engine';
+import { createDateRangePicker } from '../components/date-range-picker/engine';
+import { createTooltip } from '../components/tooltip/engine';
+import { createPopover } from '../components/popover/engine';
+import { createLoadingButton } from '../components/loading-button/engine';
+import { createBreadcrumb } from '../components/breadcrumb/engine';
+import { createEmptyState } from '../components/empty-state/engine';
+import { createStatCard } from '../components/stat-card/engine';
+import { createChartTooltip } from '../components/chart-tooltip/engine';
+import { createMultiSelect } from '../components/multi-select/engine';
+import { createTagInput } from '../components/tag-input/engine';
+import { createDateTimePicker } from '../components/date-time-picker/engine';
+import { createFilterBuilder } from '../components/filter-builder/engine';
+import { createTimeline } from '../components/timeline/engine';
+import { createActivityFeed } from '../components/activity-feed/engine';
+import { createTreeView } from '../components/tree-view/engine';
+import { createFileExplorer } from '../components/file-explorer/engine';
+import { createJsonViewer } from '../components/json-viewer/engine';
+import { createVirtualList } from '../components/virtual-list/engine';
+import { createResizablePanel } from '../components/resizable-panel/engine';
+import { createSplitView } from '../components/split-view/engine';
+import { createDataTable } from '../components/data-table/engine';
+import { createEditableTable } from '../components/editable-table/engine';
+import { createRichTextEditor } from '../components/rich-text-editor/engine';
+import { createSelect } from '../components/select/engine';
+import { createAddToCart } from '../components/add-to-cart/engine';
+import { createScrollIsland } from '../components/scroll-island/engine';
 import { ScrollTrigger } from '../core/gsap';
 import { warnOnce, type Instance } from '../core/types';
 import { createSpringCards } from '../recipes/spring-cards/create-spring-cards';
@@ -73,6 +125,58 @@ const factories = {
   'input-otp': createInputOtp,
   'calendar': createCalendar,
   'slot-picker': createSlotPicker,
+  'credit-card': createCreditCard,
+  'command-search': createCommandSearch,
+  'hold-confirm': createHoldConfirm,
+  'image-preview': createImagePreview,
+  'like-button': createLikeButton,
+  'notification-bell': createNotificationBell,
+  'password-strength': createPasswordStrength,
+  'scratch-card': createScratchCard,
+  'star-rating': createStarRating,
+  'swipe-actions': createSwipeActions,
+  'attachment': createAttachment,
+  'skeleton': createSkeleton,
+  'questionnaire': createQuestionnaire,
+  'code-block': createCodeBlock,
+  'context-menu': createContextMenu,
+  'drawer': createDrawer,
+  'link-preview': createLinkPreview,
+  'progress': createProgress,
+  'range-slider': createRangeSlider,
+  'chart': createChart,
+  'color-slider': createColorSlider,
+  'color-area': createColorArea,
+  'color-field': createColorField,
+  'color-picker': createColorPicker,
+  'time-field': createTimeField,
+  'range-calendar': createRangeCalendar,
+  'date-range-picker': createDateRangePicker,
+  'tooltip': createTooltip,
+  'popover': createPopover,
+  'loading-button': createLoadingButton,
+  'breadcrumb': createBreadcrumb,
+  'empty-state': createEmptyState,
+  'stat-card': createStatCard,
+  'chart-tooltip': createChartTooltip,
+  'multi-select': createMultiSelect,
+  'tag-input': createTagInput,
+  'date-time-picker': createDateTimePicker,
+  'filter-builder': createFilterBuilder,
+  'timeline': createTimeline,
+  'activity-feed': createActivityFeed,
+  'tree-view': createTreeView,
+  'file-explorer': createFileExplorer,
+  'json-viewer': createJsonViewer,
+  'virtual-list': createVirtualList,
+  'resizable-panel': createResizablePanel,
+  'split-view': createSplitView,
+  'data-table': createDataTable,
+  'editable-table': createEditableTable,
+  'rich-text-editor': createRichTextEditor,
+  'select': createSelect,
+  'add-to-cart': createAddToCart,
+  'scroll-island': createScrollIsland,
   'weight-hover': createWeightHover,
   'sticker': createSticker,
   'scroll-dock': createScrollDock,

package/src/components/activity-feed/README.md

@@ -0,0 +1,56 @@
+# activity-feed
+
+Registro de acciones de usuarios en el sistema: lo más reciente arriba, agrupado por día («Hoy», «Ayer», «Lunes, 16 de noviembre»). Cada entrada tiene un avatar (foto, o iniciales sobre un color que sale del nombre, así cada persona conserva el suyo) con una insignia del tipo de acción, la frase «**Ana Gómez** comentó en <u>Tarea 12</u>», una hora relativa que se actualiza cada minuto y, si hace falta, una cita.
+
+La actividad nueva (`prepend()`) entra arriba: las entradas de abajo se deslizan (el resorte de layout del kit, .62 s) mientras las nuevas caen saliendo de un blur y conservan un resaltado suave que se apaga. Si quien lee bajó por la lista, en lugar de moverle el contenido aparece una píldora «↑ 3 novedades» (el número rueda con cada llegada); al pulsarla sube y las mete. «Cargar más» al final pide entradas antiguas a `onLoadMore()` y las deja entrar en cascada; cuando ya no hay, lo dice.
+
+## HTML / Astro
+
+```html
+<mk-activity-feed class="mk-activity-feed" style="--mk-af-height: 28rem"
+  items='[{"id":"1","actor":"Ana Gómez","action":"comentó en","target":"Tarea 12","href":"/tareas/12","time":"2026-11-23T09:12","kind":"comment","detail":"¿Lo vemos mañana?"},
+          {"id":"2","actor":{"name":"Luis Peña","avatar":"/luis.jpg"},"action":"cerró","target":"Tarea 9","time":"2026-11-22T18:40","kind":"complete"}]'></mk-activity-feed>
+
+<script>
+  const feed = document.querySelector('mk-activity-feed');
+  // Llega algo en vivo (un socket, un intervalo…):
+  feed.prependItems([{ id: '3', actor: 'Sofía Ruiz', action: 'subió', target: 'propuesta.pdf', time: new Date(), kind: 'upload' }]);
+  // Entradas antiguas cuando quieras:
+  feed.appendItems(older);
+</script>
+```
+
+## React
+
+```tsx
+const feed = useRef<ActivityFeedHandle>(null);
+
+<ActivityFeed ref={feed} items={recent} onLoadMore={() => api.olderThan(cursor)} style={{ maxHeight: 448 }} />;
+
+// después
+feed.current?.prepend([nueva]);
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `items` | `items` (JSON) | `[]` | `{ id, actor, action, target?, href?, time, detail?, kind? }[]`; `actor` es un nombre o `{ name, avatar? }`. |
+| `onLoadMore()` | — | — | Muestra «Cargar más»; resuelve con las entradas anteriores o con `[]` cuando no hay más. |
+| `locale` | `locale` | el `lang` más cercano | Idioma de las fechas. |
+| `label` | `label` | `'Actividad'` | Nombre accesible. |
+| `emptyLabel` | `empty-label` | `'Sin actividad todavía'` | Texto sin entradas. |
+
+`kind` (la insignia): `comment`, `create`, `update`, `delete`, `upload`, `complete` o `mention`.
+
+## API
+
+`prepend(items)` (en el elemento, `prependItems`), `append(items)` (`appendItems`), `setItems(items)`, `items`, `destroy()`.
+
+## Variables CSS
+
+`--mk-af-height` (alto máximo antes de desplazarse dentro; también vale `max-height` en el elemento), `--mk-af-avatar-l` y `--mk-af-avatar-ink-l` (luminosidad del fondo y de las iniciales del avatar).
+
+## Accesibilidad
+
+Un `role="feed"` con cada entrada como `article`; las horas son `<time datetime>` con la fecha completa en su título. Un estado discreto anuncia lo nuevo («Sofía Ruiz subió propuesta.pdf», «3 novedades») y lo que se cargó. Al pulsar la píldora el foco pasa a la primera entrada nueva. Con movimiento reducido todo cambia sin animación.

package/src/components/activity-feed/activity-feed.css

@@ -0,0 +1,239 @@
+/* activity-feed — day headings in small caps, entries on 12 px rows: a 2.25rem avatar (a picture, or initials on a hue
+   from the name) with a badge for the kind of action, the sentence, a quote on surface-3, a muted time. New entries
+   keep an accent-soft highlight that fades; the "novedades" pill sticks to the top. Give the root a max-height (or
+   --mk-af-height) to scroll inside it. */
+.mk-activity-feed,
+mk-activity-feed {
+  --mk-af-height: none;
+  --mk-af-avatar-l: 86%;
+  --mk-af-avatar-ink-l: 28%;
+  position: relative;
+  display: block;
+  max-height: var(--mk-af-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--mk-text);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-mk-mode='light'])) :is(.mk-activity-feed, mk-activity-feed) {
+    --mk-af-avatar-l: 28%;
+    --mk-af-avatar-ink-l: 86%;
+  }
+}
+
+:where(:root[data-mk-mode='dark']) :is(.mk-activity-feed, mk-activity-feed) {
+  --mk-af-avatar-l: 28%;
+  --mk-af-avatar-ink-l: 86%;
+}
+
+[data-mk-af-new] {
+  position: sticky;
+  top: 0.5rem;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  width: max-content;
+  height: 2rem;
+  margin: 0 auto 0.5rem;
+  padding: 0 0.9rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-af-new][hidden] {
+  display: none;
+}
+
+[data-mk-af-day] + [data-mk-af-day] {
+  margin-top: 1rem;
+}
+
+/* Section > heading: strong enough for a page's own h3 rules (a card's `.card h3`, say). */
+[data-mk-af-day] > [data-mk-af-heading] {
+  margin: 0 0 0.35rem;
+  padding: 0 0.5rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+[data-mk-af-day] ul {
+  display: grid;
+  gap: 0.15rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-mk-af-item] {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.6rem 0.5rem;
+  border-radius: 12px;
+  outline: none;
+}
+
+[data-mk-af-item]:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-af-item][data-mk-fresh] {
+  animation: mk-af-fresh 2.4s ease-out both;
+}
+
+@keyframes mk-af-fresh {
+  from {
+    background: color-mix(in srgb, var(--mk-accent-soft) 90%, transparent);
+  }
+
+  to {
+    background: transparent;
+  }
+}
+
+[data-mk-af-avatar] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  background: hsl(var(--mk-af-hue, 210) 55% var(--mk-af-avatar-l));
+  color: hsl(var(--mk-af-hue, 210) 50% var(--mk-af-avatar-ink-l));
+  font-size: 0.8125rem;
+  font-weight: 700;
+}
+
+[data-mk-af-avatar] img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+[data-mk-af-badge] {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  display: grid;
+  place-items: center;
+  width: 1.05rem;
+  height: 1.05rem;
+  border-radius: 50%;
+  background: var(--mk-text);
+  color: var(--mk-surface-1, var(--mk-bg));
+  box-shadow: 0 0 0 2px var(--mk-surface-1, var(--mk-bg));
+}
+
+[data-mk-af-badge='comment'],
+[data-mk-af-badge='mention'] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-af-badge='complete'] {
+  background: #1f9d5b;
+  color: #fff;
+}
+
+[data-mk-af-badge='delete'] {
+  background: var(--mk-error, #c62828);
+  color: var(--mk-on-error, #fff);
+}
+
+[data-mk-af-line] {
+  margin: 0;
+  font-size: 0.9375rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-af-line] b {
+  font-weight: 600;
+}
+
+[data-mk-af-target] {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
+  text-underline-offset: 3px;
+}
+
+a[data-mk-af-target]:hover {
+  text-decoration-color: currentColor;
+}
+
+[data-mk-af-detail] {
+  margin: 0.4rem 0 0;
+  padding: 0.5rem 0.75rem;
+  border-radius: 10px;
+  background: var(--mk-surface-3);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-af-time] {
+  display: block;
+  margin-top: 0.2rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-af-more] {
+  display: block;
+  height: 2.25rem;
+  margin: 0.75rem auto 0;
+  padding: 0 1rem;
+  border: 0;
+  border-radius: 10px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-af-more][hidden],
+[data-mk-af-empty][hidden] {
+  display: none;
+}
+
+[data-mk-af-more][aria-busy='true'] {
+  cursor: progress;
+  opacity: 0.7;
+}
+
+[data-mk-af-more]:focus-visible,
+[data-mk-af-new]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-af-end],
+[data-mk-af-empty] {
+  margin: 0.75rem 0 0;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-af-item][data-mk-fresh] {
+    animation: none;
+  }
+}

package/src/components/activity-feed/element.ts

@@ -0,0 +1,36 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createActivityFeed, type ActivityFeedInstance, type ActivityItem } from './engine';
+
+/**
+ * <mk-activity-feed class="mk-activity-feed" items='[{"id":"1","actor":"Ana Gómez","action":"comentó en","target":"Tarea 12","time":"2026-11-23T09:12","kind":"comment"}]'>
+ * </mk-activity-feed>. element.prepend([...]) / element.append([...]) for live and older activity.
+ */
+export class MkActivityFeedElement extends MkElement<ActivityFeedInstance> {
+  static options: Record<string, OptionType> = { items: 'json', locale: 'string', label: 'string', emptyLabel: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createActivityFeed(this, options);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'items') {
+      try {
+        this.instance.setItems(JSON.parse(next ?? '[]') as ActivityItem[]);
+      } catch {
+        // Malformed JSON: keep the current entries.
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+
+  /** New activity on top (not Element.prepend). */
+  prependItems(items: ActivityItem[]) {
+    this.instance?.prepend(items);
+  }
+
+  appendItems(items: ActivityItem[]) {
+    this.instance?.append(items);
+  }
+}
+
+export const defineActivityFeed = () => defineElement('mk-activity-feed', MkActivityFeedElement);