create-dalila 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-dalila",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Create Dalila apps with one command",
   "bin": {
     "create-dalila": "index.js"

package/template/src/style.css

@@ -1,14 +1,16 @@
 /**
  * Dalila UI Components
  *
- * To use Dalila UI components, import the necessary styles:
+ * 1. Import styles locally:
+ *    @import './components/ui/button/button.css';
+ *    @import './components/ui/card/card.css';
+ *    @import './components/ui/dialog/dialog.css';
  *
- * @import './components/ui/button/button.css';
- * @import './components/ui/card/card.css';
- * @import './components/ui/dialog/dialog.css';
+ *    Or import all at once:
+ *    @import './components/ui/dalila/dalila.css';
  *
- * Or import all styles at once:
- * @import './components/ui/dalila/dalila.css';
+ * 2. Import JavaScript functionality from the npm package:
+ *    import { createDialog, createToast } from 'dalila/components/ui';
  */
 
 * {

package/template/src/components/ui/accordion/index.ts

@@ -1,121 +0,0 @@
-import { signal, computed, type Signal } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-import type { Accordion, AccordionOptions } from "../ui-types.js";
-
-export function createAccordion(options: AccordionOptions = {}): Accordion {
-  const { single = false, initial = [] } = options;
-  const hasInitial = Object.prototype.hasOwnProperty.call(options, "initial");
-  const seededInitial = single ? initial.slice(0, 1) : initial;
-  const openItems = signal(new Set<string>(seededInitial));
-
-  const toggle = (itemId: string) => {
-    openItems.update((current) => {
-      const next = new Set(current);
-      if (next.has(itemId)) {
-        next.delete(itemId);
-      } else {
-        if (single) next.clear();
-        next.add(itemId);
-      }
-      return next;
-    });
-  };
-
-  const open = (itemId: string) => {
-    openItems.update((current) => {
-      const next = new Set(current);
-      if (single) next.clear();
-      next.add(itemId);
-      return next;
-    });
-  };
-
-  const close = (itemId: string) => {
-    openItems.update((current) => {
-      const next = new Set(current);
-      next.delete(itemId);
-      return next;
-    });
-  };
-
-  const _isOpenCache = new Map<string, Signal<boolean>>();
-
-  const isOpen = (itemId: string): Signal<boolean> => {
-    let sig = _isOpenCache.get(itemId);
-    if (!sig) {
-      sig = computed(() => openItems().has(itemId));
-      _isOpenCache.set(itemId, sig);
-    }
-    return sig;
-  };
-
-  const _attachTo = (el: HTMLElement) => {
-    const scope = getCurrentScope();
-    let syncing = false;
-
-    const allDetails = () =>
-      Array.from(el.querySelectorAll<HTMLDetailsElement>("details[data-accordion]"));
-
-    const syncDOMFromSignal = (set: Set<string>) => {
-      syncing = true;
-      for (const details of allDetails()) {
-        const itemId = details.dataset.accordion;
-        if (!itemId) continue;
-        details.open = set.has(itemId);
-      }
-      syncing = false;
-    };
-
-    const syncSignalFromDOM = () => {
-      const next = new Set<string>();
-      for (const details of allDetails()) {
-        if (!details.open) continue;
-        const itemId = details.dataset.accordion;
-        if (!itemId) continue;
-        if (single) {
-          next.clear();
-        }
-        next.add(itemId);
-      }
-      openItems.set(next);
-    };
-
-    const onToggle = (ev: Event) => {
-      const details = ev.target as HTMLDetailsElement;
-      if (syncing) return;
-
-      const itemId = details.dataset.accordion;
-      if (!itemId) return;
-
-      openItems.update((current) => {
-        const next = new Set(current);
-        if (details.open) {
-          if (single) next.clear();
-          next.add(itemId);
-        } else {
-          next.delete(itemId);
-        }
-        return next;
-      });
-    };
-
-    const unsub = openItems.on((set) => {
-      if (!syncing) syncDOMFromSignal(set);
-    });
-
-    // If initial was not provided, respect current DOM open state.
-    if (!hasInitial) syncSignalFromDOM();
-    else syncDOMFromSignal(openItems());
-
-    el.addEventListener("toggle", onToggle, true);
-
-    if (scope) {
-      scope.onCleanup(() => {
-        unsub();
-        el.removeEventListener("toggle", onToggle, true);
-      });
-    }
-  };
-
-  return { openItems, toggle, open, close, isOpen, _attachTo };
-}

package/template/src/components/ui/calendar/index.ts

@@ -1,157 +0,0 @@
-import { signal, computed } from "../../../core/signal.js";
-import { batch } from "../../../core/scheduler.js";
-import type { Calendar, CalendarDay, CalendarOptions } from "../ui-types.js";
-import { validateCalendarOptions } from "../validate.js";
-
-const DEFAULT_DAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-const DEFAULT_MONTH_LABELS = [
-  "January", "February", "March", "April", "May", "June",
-  "July", "August", "September", "October", "November", "December",
-];
-
-function isSameDay(a: Date, b: Date): boolean {
-  return (
-    a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate()
-  );
-}
-
-export function createCalendar(options: CalendarOptions = {}): Calendar {
-  validateCalendarOptions(options as Record<string, unknown>);
-  const {
-    initial,
-    min,
-    max,
-    dayLabels: customDayLabels,
-    monthLabels: customMonthLabels,
-  } = options;
-
-  const now = initial ?? new Date();
-  const monthLabels = customMonthLabels ?? DEFAULT_MONTH_LABELS;
-  const calDayLabels = customDayLabels ?? DEFAULT_DAY_LABELS;
-
-  const year = signal(now.getFullYear());
-  const month = signal(now.getMonth());
-  const selected = signal<Date | null>(initial ?? null);
-
-  const title = computed(() => `${monthLabels[month()]} ${year()}`);
-
-  const days = computed<CalendarDay[]>(() => {
-    const y = year();
-    const m = month();
-    const sel = selected();
-    const today = new Date();
-
-    const firstDow = new Date(y, m, 1).getDay();
-    const daysInMonth = new Date(y, m + 1, 0).getDate();
-    const prevMonthDays = new Date(y, m, 0).getDate();
-
-    const grid: CalendarDay[] = [];
-    const GRID_SIZE = 42;
-
-    // Previous month days
-    for (let i = firstDow - 1; i >= 0; i--) {
-      const date = prevMonthDays - i;
-      const fullDate = new Date(y, m - 1, date);
-      grid.push({
-        date,
-        month: "prev",
-        fullDate,
-        isToday: isSameDay(fullDate, today),
-        isSelected: sel !== null && isSameDay(fullDate, sel),
-        disabled: isOutOfBounds(fullDate),
-      });
-    }
-
-    // Current month days
-    for (let d = 1; d <= daysInMonth; d++) {
-      const fullDate = new Date(y, m, d);
-      grid.push({
-        date: d,
-        month: "current",
-        fullDate,
-        isToday: isSameDay(fullDate, today),
-        isSelected: sel !== null && isSameDay(fullDate, sel),
-        disabled: isOutOfBounds(fullDate),
-      });
-    }
-
-    // Next month days
-    const remaining = GRID_SIZE - grid.length;
-    for (let d = 1; d <= remaining; d++) {
-      const fullDate = new Date(y, m + 1, d);
-      grid.push({
-        date: d,
-        month: "next",
-        fullDate,
-        isToday: isSameDay(fullDate, today),
-        isSelected: sel !== null && isSameDay(fullDate, sel),
-        disabled: isOutOfBounds(fullDate),
-      });
-    }
-
-    return grid;
-  });
-
-  function isOutOfBounds(date: Date): boolean {
-    if (min && date < min) return true;
-    if (max && date > max) return true;
-    return false;
-  }
-
-  const prev = () => {
-    batch(() => {
-      if (month() === 0) {
-        month.set(11);
-        year.update((y) => y - 1);
-      } else {
-        month.update((m) => m - 1);
-      }
-    });
-  };
-
-  const next = () => {
-    batch(() => {
-      if (month() === 11) {
-        month.set(0);
-        year.update((y) => y + 1);
-      } else {
-        month.update((m) => m + 1);
-      }
-    });
-  };
-
-  const select = (date: Date) => {
-    if (isOutOfBounds(date)) return;
-    selected.set(date);
-  };
-
-  const handleDayClick = (ev: Event) => {
-    const target = (ev.target as HTMLElement).closest<HTMLElement>(
-      "[data-date]"
-    );
-    if (!target) return;
-
-    const dateStr = target.dataset.date;
-    if (!dateStr) return;
-
-    const date = new Date(dateStr);
-    if (isNaN(date.getTime())) return;
-
-    select(date);
-  };
-
-  return {
-    year,
-    month,
-    selected,
-    title,
-    days,
-    dayLabels: calDayLabels,
-    prev,
-    next,
-    select,
-    handleDayClick,
-  };
-}

package/template/src/components/ui/combobox/index.ts

@@ -1,181 +0,0 @@
-import { signal, computed } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-import type { Combobox, ComboboxOptions, ComboboxOption } from "../ui-types.js";
-import { validateComboboxOptions } from "../validate.js";
-import { isBrowser } from "../env.js";
-
-let comboboxUid = 0;
-
-export function createCombobox(options: ComboboxOptions): Combobox {
-  validateComboboxOptions(options as unknown as Record<string, unknown>);
-  const { options: items, placeholder = "", name: fieldName } = options;
-
-  const open = signal(false);
-  const query = signal("");
-  const value = signal("");
-  const label = signal("");
-  const highlightedIndex = signal(-1);
-
-  const filtered = computed<ComboboxOption[]>(() => {
-    const q = query().toLowerCase();
-    if (!q) return items;
-    return items.filter((opt) => opt.label.toLowerCase().includes(q));
-  });
-
-  const show = () => open.set(true);
-  const close = () => {
-    open.set(false);
-    highlightedIndex.set(-1);
-  };
-  const toggle = () => open.update((v) => !v);
-
-  const handleInput = (ev: Event) => {
-    const input = ev.target as HTMLInputElement;
-    query.set(input.value);
-    open.set(true);
-    highlightedIndex.set(-1);
-  };
-
-  const handleSelect = (ev: Event) => {
-    const target = (ev.target as HTMLElement).closest<HTMLElement>(
-      "[data-value]"
-    );
-    if (!target) return;
-    const val = target.dataset.value ?? "";
-    const lbl = target.textContent?.trim() ?? val;
-    value.set(val);
-    label.set(lbl);
-    query.set(lbl);
-    close();
-  };
-
-  const handleKeydown = (ev: KeyboardEvent) => {
-    const list = filtered();
-
-    switch (ev.key) {
-      case "ArrowDown":
-        ev.preventDefault();
-        if (!open()) {
-          show();
-        } else {
-          highlightedIndex.update((i) =>
-            i < list.length - 1 ? i + 1 : 0
-          );
-        }
-        break;
-
-      case "ArrowUp":
-        ev.preventDefault();
-        if (open()) {
-          highlightedIndex.update((i) =>
-            i > 0 ? i - 1 : list.length - 1
-          );
-        }
-        break;
-
-      case "Enter":
-        ev.preventDefault();
-        if (open() && highlightedIndex() >= 0) {
-          const opt = list[highlightedIndex()];
-          if (opt) {
-            value.set(opt.value);
-            label.set(opt.label);
-            query.set(opt.label);
-            close();
-          }
-        }
-        break;
-
-      case "Escape":
-        close();
-        break;
-    }
-  };
-
-  const _attachTo = (el: HTMLElement) => {
-    const scope = getCurrentScope();
-    const uid = ++comboboxUid;
-
-    // ARIA setup
-    const input = el.querySelector<HTMLElement>("input");
-    const list = el.querySelector<HTMLElement>(
-      "ul, [data-d-tag='d-combobox-list'], .d-combobox-list"
-    );
-
-    if (input) {
-      if (placeholder) input.setAttribute("placeholder", placeholder);
-      input.setAttribute("role", "combobox");
-      input.setAttribute("aria-autocomplete", "list");
-      input.setAttribute("aria-expanded", "false");
-    }
-
-    if (list) {
-      const listId = list.id || `d-combobox-list-${uid}`;
-      if (!list.id) list.id = listId;
-      list.setAttribute("role", "listbox");
-      if (input) input.setAttribute("aria-controls", listId);
-    }
-
-    const unsubExpanded = open.on((isOpen) => {
-      input?.setAttribute("aria-expanded", String(isOpen));
-    });
-
-    const unsubHighlight = highlightedIndex.on((idx) => {
-      if (idx >= 0 && list) {
-        const opts = list.querySelectorAll("[data-value]");
-        const active = opts[idx] as HTMLElement | undefined;
-        if (active) {
-          const activeId = active.id || `d-combobox-opt-${uid}-${idx}`;
-          if (!active.id) active.id = activeId;
-          active.setAttribute("role", "option");
-          input?.setAttribute("aria-activedescendant", activeId);
-        }
-      } else {
-        input?.removeAttribute("aria-activedescendant");
-      }
-    });
-
-    // Hidden input for form submission
-    let hidden = el.querySelector<HTMLInputElement>('input[type="hidden"]');
-    if (!hidden) {
-      hidden = el.ownerDocument.createElement("input");
-      hidden.type = "hidden";
-      hidden.name = fieldName || (input as HTMLInputElement | null)?.getAttribute("name") || "";
-      el.appendChild(hidden);
-    }
-
-    const unsubValue = value.on((v) => {
-      if (hidden) hidden.value = v;
-    });
-
-    const onDocClick = (e: MouseEvent) => {
-      if (!el.contains(e.target as Node)) close();
-    };
-    if (isBrowser) document.addEventListener("click", onDocClick);
-
-    if (scope) {
-      scope.onCleanup(() => {
-        unsubExpanded();
-        unsubHighlight();
-        unsubValue();
-        if (isBrowser) document.removeEventListener("click", onDocClick);
-      });
-    }
-  };
-
-  return {
-    open,
-    query,
-    value,
-    label,
-    filtered,
-    highlightedIndex,
-    show,
-    close,
-    toggle,
-    handleInput,
-    handleSelect,
-    handleKeydown,
-    _attachTo,
-  };
-}

package/template/src/components/ui/dialog/index.ts

@@ -1,68 +0,0 @@
-import { signal, type Signal } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-import type { Dialog, DialogOptions } from "../ui-types.js";
-import { validateDialogOptions } from "../validate.js";
-
-/**
- * Shared dialog behavior — used by both createDialog and createDrawer.
- */
-export function _attachDialogBehavior(
-  el: HTMLDialogElement,
-  open: Signal<boolean>,
-  closeFn: () => void,
-  opts: { closeOnBackdrop: boolean; closeOnEscape: boolean }
-): void {
-  const scope = getCurrentScope();
-
-  // Sync signal → native dialog
-  const unsub = open.on((isOpen) => {
-    if (isOpen && !el.open) el.showModal();
-    else if (!isOpen && el.open) el.close();
-  });
-
-  // Native close event → sync signal
-  const onClose = () => open.set(false);
-  el.addEventListener("close", onClose);
-
-  // Backdrop click
-  const onBackdropClick = (e: MouseEvent) => {
-    if (opts.closeOnBackdrop && e.target === el) closeFn();
-  };
-  el.addEventListener("click", onBackdropClick);
-
-  // Escape key
-  if (!opts.closeOnEscape) {
-    const onCancel = (e: Event) => e.preventDefault();
-    el.addEventListener("cancel", onCancel);
-    if (scope) {
-      scope.onCleanup(() => el.removeEventListener("cancel", onCancel));
-    }
-  }
-
-  // ARIA
-  el.setAttribute("aria-modal", "true");
-
-  if (scope) {
-    scope.onCleanup(() => {
-      unsub();
-      el.removeEventListener("close", onClose);
-      el.removeEventListener("click", onBackdropClick);
-    });
-  }
-}
-
-export function createDialog(options: DialogOptions = {}): Dialog {
-  validateDialogOptions(options as Record<string, unknown>);
-  const { closeOnBackdrop = true, closeOnEscape = true } = options;
-  const open = signal(false);
-
-  const show = () => open.set(true);
-  const close = () => open.set(false);
-  const toggle = () => open.update((v) => !v);
-
-  const _attachTo = (el: HTMLDialogElement) => {
-    _attachDialogBehavior(el, open, close, { closeOnBackdrop, closeOnEscape });
-  };
-
-  return { open, show, close, toggle, _attachTo };
-}

package/template/src/components/ui/drawer/index.ts

@@ -1,53 +0,0 @@
-import { signal } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-import { _attachDialogBehavior } from "../dialog/index.js";
-import type { Drawer, DrawerOptions, DrawerSide } from "../ui-types.js";
-import { validateDrawerOptions } from "../validate.js";
-
-const SIDE_CLASSES: Record<DrawerSide, string> = {
-  right: "",
-  left: "d-drawer-left",
-  bottom: "d-sheet",
-};
-
-export function createDrawer(options: DrawerOptions = {}): Drawer {
-  validateDrawerOptions(options as Record<string, unknown>);
-  const {
-    closeOnBackdrop = true,
-    closeOnEscape = true,
-    side: initialSide = "right",
-  } = options;
-
-  const open = signal(false);
-  const side = signal<DrawerSide>(initialSide);
-
-  const show = () => open.set(true);
-  const close = () => open.set(false);
-  const toggle = () => open.update((v) => !v);
-
-  const _attachTo = (el: HTMLDialogElement) => {
-    const scope = getCurrentScope();
-
-    // Shared dialog behavior (open sync, backdrop, escape, ARIA)
-    _attachDialogBehavior(el, open, close, { closeOnBackdrop, closeOnEscape });
-
-    // Apply initial side class
-    const initial = SIDE_CLASSES[side()];
-    if (initial) el.classList.add(initial);
-
-    // React to side changes
-    const unsub = side.on((s) => {
-      for (const cls of Object.values(SIDE_CLASSES)) {
-        if (cls) el.classList.remove(cls);
-      }
-      const cls = SIDE_CLASSES[s];
-      if (cls) el.classList.add(cls);
-    });
-
-    if (scope) {
-      scope.onCleanup(() => unsub());
-    }
-  };
-
-  return { open, side, show, close, toggle, _attachTo };
-}

package/template/src/components/ui/dropdown/index.ts

@@ -1,57 +0,0 @@
-import { signal } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-import type { Dropdown, DropdownOptions } from "../ui-types.js";
-import { isBrowser } from "../env.js";
-
-export function createDropdown(options: DropdownOptions = {}): Dropdown {
-  const { closeOnSelect = true } = options;
-  const open = signal(false);
-
-  const toggle = (ev?: Event) => {
-    if (ev) ev.stopPropagation();
-    open.update((v) => !v);
-  };
-
-  const close = () => open.set(false);
-
-  const select = (ev?: Event) => {
-    if (ev) ev.stopPropagation();
-    if (closeOnSelect) close();
-  };
-
-  const _attachTo = (el: HTMLElement) => {
-    const scope = getCurrentScope();
-
-    // ARIA
-    const trigger = el.querySelector<HTMLElement>(
-      "button, [role='button'], [data-d-tag='d-button']"
-    );
-    const menu = el.querySelector<HTMLElement>(
-      "[data-d-tag='d-menu'], .d-menu"
-    );
-
-    if (menu) menu.setAttribute("role", "menu");
-    if (trigger) {
-      trigger.setAttribute("aria-haspopup", "true");
-      trigger.setAttribute("aria-expanded", "false");
-    }
-
-    const unsubAria = open.on((isOpen) => {
-      trigger?.setAttribute("aria-expanded", String(isOpen));
-    });
-
-    const onDocClick = (e: MouseEvent) => {
-      if (!el.contains(e.target as Node)) close();
-    };
-    if (isBrowser) document.addEventListener("click", onDocClick);
-
-    if (scope) {
-      scope.onCleanup(() => {
-        unsubAria();
-        if (isBrowser) document.removeEventListener("click", onDocClick);
-      });
-    }
-  };
-
-  return { open, toggle, close, select, _attachTo };
-}