@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/data-table/react.tsx

@@ -0,0 +1,94 @@
+'use client';
+import { forwardRef, useImperativeHandle, useRef, type HTMLAttributes, type ReactElement, type Ref } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createDataTable, type DataRow, type DataTableInstance, type DataTableOptions } from './engine';
+
+export interface DataTableProps<T extends DataRow> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, Omit<DataTableOptions<T>, 'rows'> {
+  rows: T[];
+}
+
+export type DataTableHandle<T extends DataRow = DataRow> = Pick<
+  DataTableInstance<T>,
+  'sortBy' | 'setPage' | 'setPageSize' | 'setQuery' | 'setFilter' | 'setColumnVisible' | 'select' | 'removeRows' | 'updateRow'
+>;
+
+/**
+ * <DataTable columns={columns} rows={rows} selectable actions={[…]} onAction={(id, row) => …} />.
+ * New rows go in place (sorting, filters and selection stay); cells are text (`format`) or drawn by `render`.
+ */
+function DataTableInner<T extends DataRow>(
+  {
+    columns, rows, rowKey, caption, pageSize, pageSizes, selectable, search, filters, filter, columnsMenu, actions, bulkActions, sort, loading, emptyTitle, emptyDescription, locale,
+    onSortChange, onSelectionChange, onAction, onBulkAction, onPageChange, onFilterChange, onRender, className, ...props
+  }: DataTableProps<T>,
+  handle: Ref<DataTableHandle<T>>,
+) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<DataTableInstance<T> | null>(null);
+  const shown = useRef(rows);
+  const callbacks = useLatest({ onSortChange, onSelectionChange, onAction, onBulkAction, onPageChange, onFilterChange, onRender });
+  useImperativeHandle(
+    handle,
+    () => ({
+      sortBy: (key, direction) => instance.current?.sortBy(key, direction),
+      setPage: (page) => instance.current?.setPage(page),
+      setPageSize: (size) => instance.current?.setPageSize(size),
+      setQuery: (query) => instance.current?.setQuery(query),
+      setFilter: (next) => instance.current?.setFilter(next),
+      setColumnVisible: (key, visible) => instance.current?.setColumnVisible(key, visible),
+      select: (ids) => instance.current?.select(ids),
+      removeRows: (ids) => instance.current?.removeRows(ids),
+      updateRow: (id, patch) => instance.current?.updateRow(id, patch),
+    }),
+    [],
+  );
+  // Columns are compared by what they show (functions in them do not restart the table).
+  const columnsKey = JSON.stringify((columns ?? []).map(({ key, label, type, hidden, sortable, filterable, align, width, options: choices }) => [key, label, type, hidden, sortable, filterable, align, width, choices]));
+  const setupKey = JSON.stringify([columnsKey, rowKey, caption, pageSize, pageSizes, selectable, search, filters, columnsMenu, actions, bulkActions, emptyTitle, emptyDescription, locale]);
+  useIsomorphicLayoutEffect(() => {
+    const created = createDataTable<T>(ref.current, {
+      columns,
+      rows: shown.current,
+      rowKey,
+      caption,
+      pageSize,
+      pageSizes,
+      selectable,
+      search,
+      filters,
+      filter,
+      columnsMenu,
+      actions,
+      bulkActions,
+      sort,
+      loading,
+      emptyTitle,
+      emptyDescription,
+      locale,
+      onSortChange: (next) => callbacks.current.onSortChange?.(next),
+      onSelectionChange: (ids, chosen) => callbacks.current.onSelectionChange?.(ids, chosen),
+      onAction: (action, row) => callbacks.current.onAction?.(action, row),
+      onBulkAction: (action, chosen) => callbacks.current.onBulkAction?.(action, chosen),
+      onPageChange: (page) => callbacks.current.onPageChange?.(page),
+      onFilterChange: (next, query) => callbacks.current.onFilterChange?.(next, query),
+      onRender: (body) => callbacks.current.onRender?.(body),
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setupKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (shown.current === rows) return;
+    shown.current = rows;
+    instance.current?.setRows(rows);
+  }, [rows]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setLoading(Boolean(loading));
+  }, [loading]);
+  return <div {...props} ref={ref} className={['mk-data-table', className].filter(Boolean).join(' ')} />;
+}
+
+export const DataTable = forwardRef(DataTableInner) as <T extends DataRow>(props: DataTableProps<T> & { ref?: Ref<DataTableHandle<T>> }) => ReactElement;

package/src/components/date-range-picker/README.md

@@ -0,0 +1,51 @@
+# date-range-picker
+
+Selector de rango de fechas: un campo con dos fechas por segmentos (inicio – fin, en el orden del idioma: dd/mm/aaaa en español) y un botón de calendario. El botón abre un `range-calendar` en un diálogo anclado que crece desde él (dos meses desde 680 px de ancho, uno por debajo) y, si das `presets`, unos atajos encima. Como las opciones de `menu`, el contenido (atajos, cabecera y meses) entra en cascada mientras la superficie crece.
+
+Al escribir dos fechas completas se validan: un fin anterior al inicio, una fecha fuera de `min`/`max` o un rango que cruza días no disponibles marcan el campo (`aria-invalid`), lo explican debajo y lo sacuden una vez al salir del campo. Al elegir en el calendario se rellenan las dos fechas (los dígitos ruedan); el panel se queda a la vista mientras la banda se dibuja y el día final rebota, y un momento más (0,35 s), y luego se pliega de vuelta en el botón, que recupera el foco. Si vuelves a tocar el calendario mientras tanto, no se cierra. Un atajo se aplica y cierra al momento, como una opción de menú. Al reabrirlo muestra el mes del rango y descarta un rango a medio elegir. `onChange` solo informa de rangos válidos.
+
+Importa también `css/components/dialog.css` y `css/components/range-calendar.css` (o el CSS completo). La CLI los copia: la entrada `requires` dialog y range-calendar.
+
+## HTML / Astro
+
+```html
+<mk-date-range-picker class="mk-date-range-picker" name="viaje" min="2026-11-10"
+  presets='[{"label":"Puente de diciembre","start":"2026-12-05","end":"2026-12-08"}]'></mk-date-range-picker>
+```
+
+## React
+
+```tsx
+const [range, setRange] = useState<{ start: Date; end: Date } | null>(null);
+<DateRangePicker value={range} onChange={setRange} unavailable={['2026-12-25']} />
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `value` | `start`, `end` | — | Rango `{start, end}` (Date o `'AAAA-MM-DD'`). |
+| `min`, `max` | `min`, `max` | — | Límites. |
+| `unavailable` | `unavailable` (lista con comas) | — | Días `'AAAA-MM-DD'` o una función `(día) => boolean`. |
+| `firstDay` | `first-day` | `1` (lunes) | Primer día de la semana del calendario. |
+| `locale` | `locale` | `lang` de la página, o `es` | Orden de los segmentos y nombres. |
+| `today` | `today` | hoy | Para demos y pruebas. |
+| `label` | `label` | `'Fechas'` | Nombre accesible del campo. |
+| `name` | `name` | — | Inputs ocultos `name[start]` y `name[end]` (`AAAA-MM-DD`). |
+| `presets` | `presets` (JSON) | — | `{ label, start, end }[]`: atajos encima del calendario. |
+| `disabled` | `disabled` | `false` | Desactiva campo y botón. |
+| `onChange(range)` | — | — | Rango válido `{start, end}` (Date). |
+
+## Errores
+
+«La fecha de fin es anterior a la de inicio», «Fecha fuera del rango permitido» y «El rango incluye días no disponibles», en `[data-mk-range-error]` (ligado al campo con `aria-describedby`).
+
+## Teclado
+
+En los campos, el de `time-field`: flechas cambian el segmento, los dígitos lo rellenan y avanzan, Retroceso borra y vuelve, ← / → cambian de segmento. En el calendario, el de `range-calendar`. Escape o un clic fuera cierran el panel y el foco vuelve al botón.
+
+## API y eventos
+
+`open()`, `close()`, `setValue(range | null)`, `value`, `isOpen`, `destroy()`. Evento `mk:change` con `{ start, end, length }`.
+
+Con movimiento reducido el panel aparece sin crecer, se cierra en cuanto eliges y no hay rodillo, sacudida ni píldora.

package/src/components/date-range-picker/date-range-picker.css

@@ -0,0 +1,167 @@
+/* date-range-picker — one 12 px field on surface-3 holding two segmented dates, a dash and an 8 px calendar button;
+   the focused segment sits on a 6 px accent-soft pill that glides; invalid draws an error ring and a message below.
+   The popover (an anchored dialog: needs dialog.css and range-calendar.css) has 20 px corners and preset chips. */
+.mk-date-range-picker,
+mk-date-range-picker {
+  display: inline-block;
+  max-width: 100%;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font-variant-numeric: tabular-nums;
+  transition: box-shadow 0.2s ease;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field][aria-invalid='true'] {
+  box-shadow: 0 0 0 2px var(--mk-error, #d93025);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segments] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segments][aria-disabled='true'] {
+  opacity: 0.5;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment] {
+  position: relative;
+  z-index: 1;
+  padding: 0.2rem 0.15rem;
+  border-radius: 6px;
+  caret-color: transparent;
+  outline: none;
+  cursor: default;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment][data-mk-empty] {
+  color: var(--mk-muted);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment]:focus {
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment]::selection {
+  background: transparent;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment-literal] {
+  padding: 0 0.05rem;
+  color: var(--mk-muted);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment-focus] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 1.75rem;
+  margin-top: -0.875rem;
+  border-radius: 6px;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-dash] {
+  color: var(--mk-muted);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-button] {
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: inherit;
+  cursor: pointer;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-button]:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-button]:disabled {
+  cursor: not-allowed;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-error] {
+  margin: 0.4rem 0 0;
+  color: var(--mk-error, #d93025);
+  font-size: 0.8125rem;
+}
+
+/* Classes, not data attributes: the copy that folds back into the button on close keeps only the classes. */
+.mk-dialog.mk-range-popover {
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+  width: max-content;
+  max-width: calc(100vw - 16px);
+}
+
+.mk-dialog.mk-range-popover > .mk-range-calendar {
+  display: grid;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+[data-mk-range-presets] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  padding: 0.75rem 0.75rem 0;
+}
+
+[data-mk-range-preset] {
+  min-height: 2rem;
+  padding: 0 0.8rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+[data-mk-range-preset]:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment]:focus {
+    background: var(--mk-accent-soft);
+  }
+
+  :is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment-focus] {
+    display: none;
+  }
+
+  :is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field] {
+    transition: none;
+  }
+}

package/src/components/date-range-picker/element.ts

@@ -0,0 +1,52 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createDateRangePicker, type DateRangePickerInstance } from './engine';
+
+/**
+ * <mk-date-range-picker class="mk-date-range-picker" start="2026-11-23" end="2026-11-26" name="viaje"
+ *   presets='[{"label":"Puente","start":"2026-12-05","end":"2026-12-08"}]'></mk-date-range-picker>
+ * Emits mk:change ({start, end, length}) for valid ranges.
+ */
+export class MkDateRangePickerElement extends MkElement<DateRangePickerInstance> {
+  static options: Record<string, OptionType> = {
+    start: 'string',
+    end: 'string',
+    min: 'string',
+    max: 'string',
+    unavailable: 'list',
+    firstDay: 'number',
+    locale: 'string',
+    today: 'string',
+    label: 'string',
+    name: 'string',
+    presets: 'json',
+    disabled: 'boolean',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    const { start, end, ...rest } = options as { start?: string; end?: string };
+    return createDateRangePicker(this, { ...rest, value: start && end ? { start, end } : null });
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'start' || name === 'end') {
+      const start = this.getAttribute('start');
+      const end = this.getAttribute('end');
+      this.instance.setValue(start && end ? { start, end } : null);
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+
+  open() {
+    this.instance?.open();
+  }
+
+  close() {
+    this.instance?.close();
+  }
+
+  get value() {
+    return this.instance?.value ?? null;
+  }
+}
+
+export const defineDateRangePicker = () => defineElement('mk-date-range-picker', MkDateRangePickerElement);