create-dalila 1.1.13 → 1.2.0

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

@@ -0,0 +1,157 @@
+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/card/card.css

@@ -0,0 +1,93 @@
+/* Dalila UI — Card */
+
+.d-card {
+  position: relative;
+  background: var(--d-surface-card);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  overflow: hidden;
+}
+
+.d-card-header {
+  padding: var(--d-space-6) var(--d-space-6) var(--d-space-3);
+}
+
+.d-card-body {
+  padding: var(--d-space-3) var(--d-space-6);
+}
+
+.d-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--d-space-3);
+  padding: var(--d-space-3) var(--d-space-6) var(--d-space-6);
+}
+
+.d-card-body:only-child {
+  padding: var(--d-space-6);
+}
+
+.d-card-title {
+  margin: 0;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-lg);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+  line-height: 1.3;
+}
+
+.d-card-description {
+  margin: var(--d-space-1) 0 0;
+  font-size: var(--d-text-sm);
+  color: var(--d-text-secondary);
+  line-height: var(--d-leading);
+}
+
+.d-card-accent {
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="dark"] .d-card-accent {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.d-card-section {
+  overflow: hidden;
+}
+
+.d-card-section img {
+  display: block;
+  width: 100%;
+}
+
+.d-card-hover {
+  transition: border-color var(--d-duration-fast) ease;
+  cursor: pointer;
+}
+
+.d-card-hover:hover {
+  border-color: #404040;
+}
+
+[data-theme="light"] .d-card-hover:hover {
+  border-color: #c9c9c9;
+}
+
+.d-card-flat {
+  background: var(--d-surface-raised);
+}
+
+.d-card-header + .d-card-body {
+  border-top: 1px solid var(--d-border-color);
+  padding-top: var(--d-space-4);
+}
+
+.d-card-body + .d-card-footer {
+  border-top: 1px solid var(--d-border-color);
+  padding-top: var(--d-space-4);
+}
+
+.d-card-compact .d-card-header { padding: var(--d-space-4) var(--d-space-4) var(--d-space-2); }
+.d-card-compact .d-card-body { padding: var(--d-space-2) var(--d-space-4); }
+.d-card-compact .d-card-footer { padding: var(--d-space-2) var(--d-space-4) var(--d-space-4); }

package/template/src/components/ui/checkbox/checkbox.css

@@ -0,0 +1,57 @@
+/* Dalila UI — Checkbox */
+
+.d-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--d-space-2);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-base);
+  color: var(--d-text-primary);
+  cursor: pointer;
+  user-select: none;
+}
+
+.d-checkbox input {
+  position: relative;
+  appearance: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  background: var(--d-surface-page);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-sm);
+  cursor: pointer;
+  transition: all var(--d-duration-fast) ease;
+}
+
+.d-checkbox input:checked {
+  background: var(--d-accent);
+  border-color: var(--d-accent);
+}
+
+.d-checkbox input:checked::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 5px;
+  height: 9px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.d-checkbox input:focus-visible {
+  outline: none;
+  box-shadow: var(--d-shadow-glow);
+}
+
+.d-checkbox input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.d-checkbox:has(input:disabled) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/template/src/components/ui/chip/chip.css

@@ -0,0 +1,62 @@
+/* Dalila UI — Chip / Tag */
+
+.d-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--d-space-1);
+  padding: 0.25rem 0.625rem;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xs);
+  font-weight: var(--d-font-medium);
+  color: var(--d-text-primary);
+  background: var(--d-surface-raised);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-full);
+  white-space: nowrap;
+}
+
+.d-chip-primary {
+  color: var(--d-accent);
+  background: rgba(37, 99, 235, 0.1);
+  border-color: transparent;
+}
+
+.d-chip-success {
+  color: var(--d-success);
+  background: var(--d-success-light);
+  border-color: transparent;
+}
+
+.d-chip-error {
+  color: var(--d-error);
+  background: var(--d-error-light);
+  border-color: transparent;
+}
+
+.d-chip-warning {
+  color: var(--d-warning);
+  background: var(--d-warning-light);
+  border-color: transparent;
+}
+
+.d-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  font-size: 0.75rem;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.6;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: opacity var(--d-duration-fast) ease;
+}
+
+.d-chip-remove:hover {
+  opacity: 1;
+}

package/template/src/components/ui/collapsible/collapsible.css

@@ -0,0 +1,61 @@
+/* Dalila UI — Collapsible */
+
+.d-collapsible {
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-md);
+  overflow: hidden;
+}
+
+.d-collapsible > summary,
+.d-collapsible-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--d-space-3) var(--d-space-4);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  font-weight: var(--d-font-medium);
+  color: var(--d-text-primary);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  transition: background var(--d-duration-fast) ease;
+}
+
+.d-collapsible > summary::-webkit-details-marker {
+  display: none;
+}
+
+.d-collapsible > summary:hover,
+.d-collapsible-trigger:hover {
+  background: var(--d-surface-raised);
+}
+
+.d-collapsible > summary::after,
+.d-collapsible-trigger::after {
+  content: "";
+  width: 0.4rem;
+  height: 0.4rem;
+  border-right: 2px solid var(--d-text-muted);
+  border-bottom: 2px solid var(--d-text-muted);
+  transform: rotate(45deg);
+  transition: transform var(--d-duration) var(--d-ease);
+  flex-shrink: 0;
+}
+
+.d-collapsible[open] > summary::after {
+  transform: rotate(-135deg);
+}
+
+.d-collapsible-body {
+  padding: 0 var(--d-space-4) var(--d-space-4);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-secondary);
+  line-height: var(--d-leading);
+}
+
+.d-collapsible[open] > .d-collapsible-body,
+.d-collapsible.open .d-collapsible-body {
+  padding-top: var(--d-space-2);
+}

package/template/src/components/ui/combobox/combobox.css

@@ -0,0 +1,85 @@
+/* Dalila UI — Combobox */
+
+.d-combobox {
+  position: relative;
+}
+
+.d-combobox-input {
+  width: 100%;
+  padding-right: var(--d-space-8);
+}
+
+.d-combobox-trigger {
+  position: absolute;
+  right: var(--d-space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: none;
+  border: none;
+  color: var(--d-text-muted);
+  cursor: pointer;
+  border-radius: var(--d-radius-sm);
+  transition: color var(--d-duration-fast) ease;
+}
+
+.d-combobox-trigger:hover {
+  color: var(--d-text-primary);
+}
+
+.d-combobox-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: var(--d-z-dropdown);
+  max-height: 12rem;
+  overflow-y: auto;
+  padding: var(--d-space-1) 0;
+  background: var(--d-surface-card);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-md);
+  box-shadow: var(--d-shadow-md);
+  list-style: none;
+  margin: 0;
+
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--d-duration-fast) ease;
+}
+
+.d-combobox.open .d-combobox-list {
+  opacity: 1;
+  visibility: visible;
+}
+
+.d-combobox-option {
+  padding: var(--d-space-2) var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-primary);
+  cursor: pointer;
+  transition: background var(--d-duration-fast) ease;
+}
+
+.d-combobox-option:hover,
+.d-combobox-option.highlighted {
+  background: var(--d-surface-raised);
+}
+
+.d-combobox-option.selected {
+  color: var(--d-accent);
+  font-weight: var(--d-font-medium);
+}
+
+.d-combobox-empty {
+  padding: var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-muted);
+  text-align: center;
+}

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

@@ -0,0 +1,181 @@
+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,
+  };
+}