create-dalila 1.1.13 → 1.2.0

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

@@ -0,0 +1,42 @@
+/*
+ * Dalila UI — All components
+ * Import this single file to get everything.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="dalila.css" />
+ */
+
+@import "./tokens.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./button.css";
+@import "./input.css";
+@import "./checkbox.css";
+@import "./radio.css";
+@import "./slider.css";
+@import "./toggle.css";
+@import "./form.css";
+@import "./card.css";
+@import "./badge.css";
+@import "./chip.css";
+@import "./avatar.css";
+@import "./alert.css";
+@import "./toast.css";
+@import "./tooltip.css";
+@import "./popover.css";
+@import "./dropdown.css";
+@import "./combobox.css";
+@import "./tabs.css";
+@import "./accordion.css";
+@import "./collapsible.css";
+@import "./dialog.css";
+@import "./drawer.css";
+@import "./table.css";
+@import "./pagination.css";
+@import "./breadcrumb.css";
+@import "./separator.css";
+@import "./skeleton.css";
+@import "./spinner.css";
+@import "./empty-state.css";
+@import "./calendar.css";
+@import "./dropzone.css";

package/template/src/components/ui/dalila-core/dalila-core.css

@@ -0,0 +1,14 @@
+/*
+ * Dalila UI — Core (minimal)
+ * Tokens + typography + layout + button + input + form.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="dalila-core.css" />
+ */
+
+@import "./tokens.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./button.css";
+@import "./input.css";
+@import "./form.css";

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

@@ -0,0 +1,125 @@
+/* Dalila UI — Dialog */
+
+.d-dialog::backdrop {
+  background: var(--d-surface-overlay);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.d-dialog {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  max-width: min(28rem, calc(100vw - var(--d-space-8)));
+  max-height: calc(100vh - var(--d-space-8));
+  width: 100%;
+
+  padding: 0;
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  background: var(--d-surface-card);
+  color: var(--d-text-primary);
+
+  box-shadow: var(--d-shadow-lg);
+  overflow: hidden;
+
+  opacity: 0;
+  transform: scale(0.97) translateY(8px);
+  transition:
+    opacity var(--d-duration-slow) var(--d-ease),
+    transform var(--d-duration-slow) var(--d-ease),
+    overlay var(--d-duration-slow) var(--d-ease) allow-discrete,
+    display var(--d-duration-slow) var(--d-ease) allow-discrete;
+}
+
+.d-dialog[open] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+@starting-style {
+  .d-dialog[open] {
+    opacity: 0;
+    transform: scale(0.97) translateY(8px);
+  }
+}
+
+.d-dialog-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--d-space-4);
+  padding: var(--d-space-6) var(--d-space-6) var(--d-space-3);
+}
+
+.d-dialog-title {
+  margin: 0;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xl);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+  line-height: 1.3;
+}
+
+.d-dialog-body {
+  padding: var(--d-space-3) var(--d-space-6);
+  font-size: var(--d-text-base);
+  color: var(--d-text-secondary);
+  line-height: var(--d-leading);
+  overflow-y: auto;
+}
+
+.d-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--d-space-3);
+  padding: var(--d-space-4) var(--d-space-6) var(--d-space-6);
+}
+
+.d-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  width: 2rem;
+  height: 2rem;
+
+  font-size: var(--d-text-xl);
+  color: var(--d-text-muted);
+
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--d-radius-sm);
+  cursor: pointer;
+  transition: color var(--d-duration-fast) ease, border-color var(--d-duration-fast) ease;
+}
+
+.d-dialog-close:hover {
+  color: var(--d-text-primary);
+  border-color: var(--d-border-color);
+}
+
+.d-dialog-sm { max-width: min(22rem, calc(100vw - var(--d-space-8))); }
+.d-dialog-lg { max-width: min(36rem, calc(100vw - var(--d-space-8))); }
+.d-dialog-xl { max-width: min(48rem, calc(100vw - var(--d-space-8))); }
+
+@media (max-width: 640px) {
+  .d-dialog {
+    margin: auto 0 0;
+    max-width: 100%;
+    max-height: 85vh;
+    border-radius: var(--d-radius-lg) var(--d-radius-lg) 0 0;
+    transform: translateY(100%);
+  }
+
+  .d-dialog[open] {
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    .d-dialog[open] {
+      transform: translateY(100%);
+    }
+  }
+}

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

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

@@ -0,0 +1,122 @@
+/* Dalila UI — Drawer & Sheet */
+
+.d-drawer::backdrop {
+  background: var(--d-surface-overlay);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.d-drawer {
+  position: fixed;
+  margin: 0;
+  border: none;
+  padding: 0;
+  max-height: 100vh;
+  height: 100%;
+  background: var(--d-surface-card);
+  color: var(--d-text-primary);
+  box-shadow: var(--d-shadow-lg);
+  overflow: hidden;
+
+  inset: 0 0 0 auto;
+  width: min(24rem, 85vw);
+  border-left: 1px solid var(--d-border-color);
+
+  opacity: 0;
+  transform: translateX(1rem);
+  transition:
+    transform var(--d-duration-slow) var(--d-ease),
+    opacity var(--d-duration-slow) var(--d-ease),
+    overlay var(--d-duration-slow) var(--d-ease) allow-discrete,
+    display var(--d-duration-slow) var(--d-ease) allow-discrete;
+}
+
+.d-drawer[open] {
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+@starting-style {
+  .d-drawer[open] {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+/* Left variant */
+.d-drawer-left {
+  inset: 0 auto 0 0;
+  border-left: none;
+  border-right: 1px solid var(--d-border-color);
+  transform: translateX(-1rem);
+}
+
+.d-drawer-left[open] {
+  transform: translateX(0);
+}
+
+@starting-style {
+  .d-drawer-left[open] {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+}
+
+.d-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--d-space-4);
+  padding: var(--d-space-6);
+  border-bottom: 1px solid var(--d-border-color);
+  flex-shrink: 0;
+}
+
+.d-drawer-title {
+  margin: 0;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xl);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+}
+
+.d-drawer-body {
+  padding: var(--d-space-6);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.d-drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--d-space-3);
+  padding: var(--d-space-4) var(--d-space-6);
+  border-top: 1px solid var(--d-border-color);
+  flex-shrink: 0;
+}
+
+/* Sheet variant (bottom) */
+.d-sheet {
+  inset: auto 0 0 0;
+  width: 100%;
+  height: auto;
+  max-height: 85vh;
+  border-left: none;
+  border-top: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg) var(--d-radius-lg) 0 0;
+  transform: translateY(100%);
+}
+
+.d-sheet[open] {
+  display: flex;
+  flex-direction: column;
+  transform: translateY(0);
+}
+
+@starting-style {
+  .d-sheet[open] {
+    transform: translateY(100%);
+  }
+}

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

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

@@ -0,0 +1,87 @@
+/* Dalila UI — Dropdown & Menu */
+
+.d-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+
+.d-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--d-z-dropdown);
+  min-width: 12rem;
+  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);
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: all var(--d-duration-fast) ease;
+}
+
+.d-dropdown.open .d-menu,
+.d-menu.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.d-menu-right {
+  left: auto;
+  right: 0;
+}
+
+.d-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--d-space-2);
+  width: 100%;
+  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);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background var(--d-duration-fast) ease;
+  text-align: left;
+  text-decoration: none;
+}
+
+.d-menu-item:hover {
+  background: var(--d-surface-raised);
+}
+
+.d-menu-item-danger {
+  color: var(--d-error);
+}
+
+.d-menu-item-danger:hover {
+  background: var(--d-error-light);
+}
+
+.d-menu-item:disabled,
+.d-menu-item[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.d-menu-separator {
+  height: 1px;
+  background: var(--d-border-color);
+  margin: var(--d-space-1) 0;
+}
+
+.d-menu-label {
+  padding: var(--d-space-2) var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xs);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}

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

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

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

@@ -0,0 +1,47 @@
+/* Dalila UI — Dropzone / File Upload */
+
+.d-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--d-space-3);
+  padding: var(--d-space-8);
+  background: var(--d-surface-page);
+  border: 2px dashed var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  cursor: pointer;
+  transition: all var(--d-duration-fast) ease;
+  text-align: center;
+  font-family: var(--d-font-sans);
+}
+
+.d-dropzone:hover,
+.d-dropzone.dragover {
+  border-color: var(--d-accent);
+  background: rgba(37, 99, 235, 0.04);
+}
+
+.d-dropzone-icon {
+  font-size: 2rem;
+  color: var(--d-text-muted);
+}
+
+.d-dropzone-text {
+  font-size: var(--d-text-sm);
+  color: var(--d-text-muted);
+}
+
+.d-dropzone-text strong {
+  color: var(--d-accent);
+  font-weight: var(--d-font-medium);
+}
+
+.d-dropzone-hint {
+  font-size: var(--d-text-xs);
+  color: var(--d-text-muted);
+}
+
+.d-dropzone input[type="file"] {
+  display: none;
+}