@llui/components 0.0.1

package/dist/components/date-picker.js

@@ -0,0 +1,294 @@
+function pad(n) {
+    return n.toString().padStart(2, '0');
+}
+function parseIso(iso) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!match)
+        return null;
+    return { y: Number(match[1]), m: Number(match[2]), d: Number(match[3]) };
+}
+function toIso(y, m, d) {
+    return `${y}-${pad(m)}-${pad(d)}`;
+}
+function daysInMonth(year, month) {
+    return new Date(year, month, 0).getDate();
+}
+function todayIso() {
+    const now = new Date();
+    return toIso(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+function addDays(iso, days) {
+    const p = parseIso(iso);
+    if (!p)
+        return iso;
+    const d = new Date(p.y, p.m - 1, p.d);
+    d.setDate(d.getDate() + days);
+    return toIso(d.getFullYear(), d.getMonth() + 1, d.getDate());
+}
+function isInRange(iso, min, max) {
+    if (min && iso < min)
+        return false;
+    if (max && iso > max)
+        return false;
+    return true;
+}
+export function init(opts = {}) {
+    const today = todayIso();
+    const parsed = opts.value ? parseIso(opts.value) : null;
+    const visibleMonth = opts.visibleMonth ?? parsed?.m ?? new Date().getMonth() + 1;
+    const visibleYear = opts.visibleYear ?? parsed?.y ?? new Date().getFullYear();
+    return {
+        value: opts.value ?? null,
+        visibleMonth,
+        visibleYear,
+        focused: opts.value ?? today,
+        min: opts.min ?? null,
+        max: opts.max ?? null,
+        weekStartsOn: opts.weekStartsOn ?? 0,
+        disabled: opts.disabled ?? false,
+    };
+}
+function normalizeMonth(year, month) {
+    let y = year;
+    let m = month;
+    while (m > 12) {
+        m -= 12;
+        y += 1;
+    }
+    while (m < 1) {
+        m += 12;
+        y -= 1;
+    }
+    return { year: y, month: m };
+}
+function syncVisibleMonth(state, date) {
+    const p = parseIso(date);
+    if (!p)
+        return state;
+    if (p.y === state.visibleYear && p.m === state.visibleMonth)
+        return state;
+    return { ...state, visibleYear: p.y, visibleMonth: p.m };
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: msg.value, focused: msg.value ?? state.focused }, []];
+        case 'setFocused':
+            return [syncVisibleMonth({ ...state, focused: msg.date }, msg.date), []];
+        case 'prevMonth': {
+            const n = normalizeMonth(state.visibleYear, state.visibleMonth - 1);
+            return [{ ...state, visibleYear: n.year, visibleMonth: n.month }, []];
+        }
+        case 'nextMonth': {
+            const n = normalizeMonth(state.visibleYear, state.visibleMonth + 1);
+            return [{ ...state, visibleYear: n.year, visibleMonth: n.month }, []];
+        }
+        case 'prevYear':
+            return [{ ...state, visibleYear: state.visibleYear - 1 }, []];
+        case 'nextYear':
+            return [{ ...state, visibleYear: state.visibleYear + 1 }, []];
+        case 'selectFocused':
+            if (!isInRange(state.focused, state.min, state.max))
+                return [state, []];
+            return [{ ...state, value: state.focused }, []];
+        case 'moveFocus': {
+            const next = addDays(state.focused, msg.days);
+            return [syncVisibleMonth({ ...state, focused: next }, next), []];
+        }
+        case 'focusStartOfWeek': {
+            const p = parseIso(state.focused);
+            if (!p)
+                return [state, []];
+            const d = new Date(p.y, p.m - 1, p.d);
+            const delta = (d.getDay() - state.weekStartsOn + 7) % 7;
+            return [update(state, { type: 'moveFocus', days: -delta })[0], []];
+        }
+        case 'focusEndOfWeek': {
+            const p = parseIso(state.focused);
+            if (!p)
+                return [state, []];
+            const d = new Date(p.y, p.m - 1, p.d);
+            const delta = 6 - ((d.getDay() - state.weekStartsOn + 7) % 7);
+            return [update(state, { type: 'moveFocus', days: delta })[0], []];
+        }
+        case 'focusToday': {
+            const today = todayIso();
+            return [syncVisibleMonth({ ...state, focused: today }, today), []];
+        }
+        case 'clear':
+            return [{ ...state, value: null }, []];
+    }
+}
+/**
+ * Compute the grid of days visible in the current month view. Always returns
+ * full weeks: leading days from previous month and trailing from next month
+ * to fill the grid.
+ */
+export function monthGrid(state) {
+    const y = state.visibleYear;
+    const m = state.visibleMonth;
+    const first = new Date(y, m - 1, 1);
+    const firstDay = first.getDay();
+    const leadDays = (firstDay - state.weekStartsOn + 7) % 7;
+    const totalDays = daysInMonth(y, m);
+    const today = todayIso();
+    const cells = [];
+    // Leading: previous month's trailing days
+    for (let i = leadDays; i > 0; i--) {
+        const d = new Date(y, m - 1, 1 - i);
+        const iso = toIso(d.getFullYear(), d.getMonth() + 1, d.getDate());
+        cells.push({
+            iso,
+            day: d.getDate(),
+            inMonth: false,
+            isToday: iso === today,
+            isSelected: iso === state.value,
+            isFocused: iso === state.focused,
+            isDisabled: !isInRange(iso, state.min, state.max),
+        });
+    }
+    // Current month
+    for (let d = 1; d <= totalDays; d++) {
+        const iso = toIso(y, m, d);
+        cells.push({
+            iso,
+            day: d,
+            inMonth: true,
+            isToday: iso === today,
+            isSelected: iso === state.value,
+            isFocused: iso === state.focused,
+            isDisabled: !isInRange(iso, state.min, state.max),
+        });
+    }
+    // Trailing: next month's leading days to fill to multiple of 7
+    const remaining = (7 - (cells.length % 7)) % 7;
+    for (let d = 1; d <= remaining; d++) {
+        const next = new Date(y, m, d);
+        const iso = toIso(next.getFullYear(), next.getMonth() + 1, next.getDate());
+        cells.push({
+            iso,
+            day: d,
+            inMonth: false,
+            isToday: iso === today,
+            isSelected: iso === state.value,
+            isFocused: iso === state.focused,
+            isDisabled: !isInRange(iso, state.min, state.max),
+        });
+    }
+    return cells;
+}
+const MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+export function connect(get, send, opts = {}) {
+    const prevLabel = opts.prevLabel ?? 'Previous month';
+    const nextLabel = opts.nextLabel ?? 'Next month';
+    const gridLabel = opts.gridLabel ?? ((y, m) => `${MONTH_NAMES[m - 1]} ${y}`);
+    return {
+        root: {
+            'data-scope': 'date-picker',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        grid: {
+            role: 'grid',
+            'aria-label': (s) => gridLabel(get(s).visibleYear, get(s).visibleMonth),
+            'data-scope': 'date-picker',
+            'data-part': 'grid',
+        },
+        prevMonthTrigger: {
+            type: 'button',
+            'aria-label': prevLabel,
+            disabled: (s) => get(s).disabled,
+            'data-scope': 'date-picker',
+            'data-part': 'prev-month-trigger',
+            onClick: () => send({ type: 'prevMonth' }),
+        },
+        nextMonthTrigger: {
+            type: 'button',
+            'aria-label': nextLabel,
+            disabled: (s) => get(s).disabled,
+            'data-scope': 'date-picker',
+            'data-part': 'next-month-trigger',
+            onClick: () => send({ type: 'nextMonth' }),
+        },
+        dayCell: (cell) => ({
+            cell: {
+                role: 'gridcell',
+                'aria-selected': cell.isSelected,
+                'aria-disabled': cell.isDisabled ? 'true' : undefined,
+                tabIndex: cell.isFocused ? 0 : -1,
+                'data-scope': 'date-picker',
+                'data-part': 'day-cell',
+                'data-date': cell.iso,
+                'data-in-month': cell.inMonth ? '' : undefined,
+                'data-today': cell.isToday ? '' : undefined,
+                'data-selected': cell.isSelected ? '' : undefined,
+                'data-focused': cell.isFocused ? '' : undefined,
+                'data-disabled': cell.isDisabled ? '' : undefined,
+                onClick: () => {
+                    if (cell.isDisabled)
+                        return;
+                    send({ type: 'setFocused', date: cell.iso });
+                    send({ type: 'selectFocused' });
+                },
+                onFocus: () => send({ type: 'setFocused', date: cell.iso }),
+                onKeyDown: (e) => {
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                            e.preventDefault();
+                            send({ type: 'moveFocus', days: -1 });
+                            return;
+                        case 'ArrowRight':
+                            e.preventDefault();
+                            send({ type: 'moveFocus', days: 1 });
+                            return;
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            send({ type: 'moveFocus', days: -7 });
+                            return;
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            send({ type: 'moveFocus', days: 7 });
+                            return;
+                        case 'PageUp':
+                            e.preventDefault();
+                            send({ type: 'prevMonth' });
+                            return;
+                        case 'PageDown':
+                            e.preventDefault();
+                            send({ type: 'nextMonth' });
+                            return;
+                        case 'Home':
+                            e.preventDefault();
+                            send({ type: 'focusStartOfWeek' });
+                            return;
+                        case 'End':
+                            e.preventDefault();
+                            send({ type: 'focusEndOfWeek' });
+                            return;
+                        case 'Enter':
+                        case ' ':
+                            e.preventDefault();
+                            send({ type: 'selectFocused' });
+                            return;
+                    }
+                },
+            },
+        }),
+    };
+}
+export const datePicker = { init, update, connect, monthGrid };

package/dist/components/dialog.d.ts

@@ -0,0 +1,152 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+/**
+ * Dialog — modal / non-modal overlay. Ties together focus-trap, dismissable,
+ * body scroll lock, sibling aria-hidden, and portal-to-body rendering into
+ * a single view helper.
+ *
+ * Two layers:
+ *   - **state machine** (`init`, `update`, `connect`) — pure, minimal.
+ *   - **`overlay()` view helper** — opens the dialog's DOM tree inside a
+ *     body portal, wires up all accessibility utilities on mount, tears
+ *     them down on close, restores focus to the trigger.
+ *
+ * ```ts
+ * const parts = dialog.connect<State>(s => s.confirm, sendDialog, { id: 'confirm' })
+ *
+ * view: (send) => [
+ *   button({ ...parts.trigger, class: 'btn' }, [text('Delete')]),
+ *   ...dialog.overlay({
+ *     get: s => s.confirm,
+ *     send: sendDialog,
+ *     parts,
+ *     content: () => [
+ *       div({ ...parts.content, class: 'dialog' }, [
+ *         h2({ ...parts.title }, [text('Are you sure?')]),
+ *         button({ ...parts.closeTrigger, class: 'btn' }, [text('Cancel')]),
+ *       ]),
+ *     ],
+ *     transition: fade({ duration: 150 }),
+ *   }),
+ * ]
+ * ```
+ */
+export interface DialogState {
+    open: boolean;
+}
+export type DialogMsg = {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'toggle';
+} | {
+    type: 'setOpen';
+    open: boolean;
+};
+export interface DialogInit {
+    open?: boolean;
+}
+export declare function init(opts?: DialogInit): DialogState;
+export declare function update(state: DialogState, msg: DialogMsg): [DialogState, never[]];
+export interface DialogParts<S> {
+    trigger: {
+        type: 'button';
+        'aria-haspopup': 'dialog';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        id: string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'dialog';
+        'data-part': 'trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    backdrop: {
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'dialog';
+        'data-part': 'backdrop';
+        'aria-hidden': 'true';
+    };
+    positioner: {
+        'data-scope': 'dialog';
+        'data-part': 'positioner';
+    };
+    content: {
+        role: 'dialog' | 'alertdialog';
+        id: string;
+        'aria-modal': 'true' | undefined;
+        'aria-labelledby': string;
+        'aria-describedby': string;
+        tabIndex: -1;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'dialog';
+        'data-part': 'content';
+    };
+    title: {
+        id: string;
+        'data-scope': 'dialog';
+        'data-part': 'title';
+    };
+    description: {
+        id: string;
+        'data-scope': 'dialog';
+        'data-part': 'description';
+    };
+    closeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'dialog';
+        'data-part': 'close-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    /** Unique id per dialog instance (used for ARIA wiring). */
+    id: string;
+    /** ARIA role (default: 'dialog'). Use 'alertdialog' for destructive confirmations. */
+    role?: 'dialog' | 'alertdialog';
+    /** Modal dialogs trap focus and lock scroll (default: true). */
+    modal?: boolean;
+    /** Accessible label for the close button (default: 'Close'). */
+    closeLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => DialogState, send: Send<DialogMsg>, opts: ConnectOptions): DialogParts<S>;
+export interface OverlayOptions<S> {
+    /** State accessor. */
+    get: (s: S) => DialogState;
+    /** Send dispatcher for dialog messages. */
+    send: Send<DialogMsg>;
+    /** Parts from `connect()` — used to locate the content element by id. */
+    parts: DialogParts<S>;
+    /** Content rendering. */
+    content: () => Node[];
+    /** Optional transition to apply on open/close (from `@llui/transitions`). */
+    transition?: TransitionOptions;
+    /** Close on Escape key (default: true). */
+    closeOnEscape?: boolean;
+    /** Close on click outside content (default: true). */
+    closeOnOutsideClick?: boolean;
+    /** Trap focus inside the dialog while open (default: true for modal). */
+    trapFocus?: boolean;
+    /** Lock body scroll while open (default: true for modal). */
+    lockScroll?: boolean;
+    /** Apply aria-hidden to sibling trees (default: true for modal). */
+    hideSiblings?: boolean;
+    /** Target element / selector for the portal (default: 'body'). */
+    target?: string | HTMLElement;
+    /** Element to focus initially (default: first focusable inside content). */
+    initialFocus?: Element | (() => Element | null);
+    /** Restore focus on close (default: true). */
+    restoreFocus?: boolean;
+}
+/**
+ * Build the dialog's DOM tree and wire up all accessibility utilities.
+ * Returns a `show()` structural block that tracks `get(state).open`.
+ */
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const dialog: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"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"}

package/dist/components/dialog.js

@@ -0,0 +1,140 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { pushFocusTrap } from '../utils/focus-trap';
+import { pushDismissable } from '../utils/dismissable';
+import { setAriaHiddenOutside } from '../utils/aria-hidden';
+import { lockBodyScroll } from '../utils/remove-scroll';
+export function init(opts = {}) {
+    return { open: opts.open ?? false };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'open':
+            return [{ ...state, open: true }, []];
+        case 'close':
+            return [{ ...state, open: false }, []];
+        case 'toggle':
+            return [{ ...state, open: !state.open }, []];
+        case 'setOpen':
+            return [{ ...state, open: msg.open }, []];
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const contentId = `${base}:content`;
+    const titleId = `${base}:title`;
+    const descId = `${base}:description`;
+    const triggerId = `${base}:trigger`;
+    const role = opts.role ?? 'dialog';
+    const modal = opts.modal !== false;
+    const closeLabel = opts.closeLabel ?? 'Close';
+    return {
+        trigger: {
+            type: 'button',
+            'aria-haspopup': 'dialog',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            id: triggerId,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'dialog',
+            'data-part': 'trigger',
+            onClick: () => send({ type: 'open' }),
+        },
+        backdrop: {
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'dialog',
+            'data-part': 'backdrop',
+            'aria-hidden': 'true',
+        },
+        positioner: {
+            'data-scope': 'dialog',
+            'data-part': 'positioner',
+        },
+        content: {
+            role,
+            id: contentId,
+            'aria-modal': modal ? 'true' : undefined,
+            'aria-labelledby': titleId,
+            'aria-describedby': descId,
+            tabIndex: -1,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'dialog',
+            'data-part': 'content',
+        },
+        title: {
+            id: titleId,
+            'data-scope': 'dialog',
+            'data-part': 'title',
+        },
+        description: {
+            id: descId,
+            'data-scope': 'dialog',
+            'data-part': 'description',
+        },
+        closeTrigger: {
+            type: 'button',
+            'aria-label': closeLabel,
+            'data-scope': 'dialog',
+            'data-part': 'close-trigger',
+            onClick: () => send({ type: 'close' }),
+        },
+    };
+}
+/**
+ * Build the dialog's DOM tree and wire up all accessibility utilities.
+ * Returns a `show()` structural block that tracks `get(state).open`.
+ */
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const closeOnEscape = opts.closeOnEscape !== false;
+    const closeOnOutsideClick = opts.closeOnOutsideClick !== false;
+    const trapFocus = opts.trapFocus !== false;
+    const lockScroll = opts.lockScroll !== false;
+    const hideSiblings = opts.hideSiblings !== false;
+    const restoreFocus = opts.restoreFocus !== false;
+    const parts = opts.parts;
+    const contentId = parts.content.id;
+    const triggerId = parts.trigger.id;
+    return show({
+        when: (s) => opts.get(s).open,
+        render: () => portal({
+            target,
+            render: () => {
+                onMount(() => {
+                    const contentEl = document.getElementById(contentId);
+                    if (!contentEl)
+                        return;
+                    const triggerEl = document.getElementById(triggerId);
+                    const cleanups = [];
+                    if (lockScroll)
+                        cleanups.push(lockBodyScroll());
+                    if (hideSiblings)
+                        cleanups.push(setAriaHiddenOutside(contentEl));
+                    if (trapFocus) {
+                        cleanups.push(pushFocusTrap({
+                            container: contentEl,
+                            initialFocus: opts.initialFocus,
+                            restoreFocus,
+                        }));
+                    }
+                    if (closeOnEscape || closeOnOutsideClick) {
+                        cleanups.push(pushDismissable({
+                            element: contentEl,
+                            ignore: () => (triggerEl ? [triggerEl] : []),
+                            disableEscape: !closeOnEscape,
+                            disableOutside: !closeOnOutsideClick,
+                            onDismiss: () => opts.send({ type: 'close' }),
+                        }));
+                    }
+                    return () => {
+                        for (let i = cleanups.length - 1; i >= 0; i--)
+                            cleanups[i]();
+                    };
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const dialog = { init, update, connect, overlay };