create-dalila 1.1.13 → 1.2.0

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

@@ -0,0 +1,161 @@
+/* Dalila UI — Design Tokens (Playground-aligned) */
+
+:root,
+[data-theme="light"] {
+  --d-bg: #ffffff;
+  --d-bg-card: #f8f8f8;
+  --d-bg-elevated: #f0f0f0;
+  --d-fg: #0a0a0a;
+  --d-fg-muted: #6b7280;
+  --d-accent: #2563eb;
+  --d-accent-hover: #1d4ed8;
+  --d-border: #e5e5e5;
+
+  --d-primary-50: #eff6ff;
+  --d-primary-100: #dbeafe;
+  --d-primary-200: #bfdbfe;
+  --d-primary-300: #93c5fd;
+  --d-primary-400: #60a5fa;
+  --d-primary-500: #3b82f6;
+  --d-primary-600: #2563eb;
+  --d-primary-700: #1d4ed8;
+  --d-primary-800: #1e40af;
+  --d-primary-900: #1e3a8a;
+
+  --d-accent-50: #fff7ed;
+  --d-accent-100: #ffedd5;
+  --d-accent-200: #fed7aa;
+  --d-accent-300: #fdba74;
+  --d-accent-400: #fb923c;
+  --d-accent-500: #f97316;
+  --d-accent-600: #ea580c;
+  --d-accent-700: #c2410c;
+
+  --d-slate-50: #fafafa;
+  --d-slate-100: #f4f4f5;
+  --d-slate-200: #e4e4e7;
+  --d-slate-300: #d4d4d8;
+  --d-slate-400: #a1a1aa;
+  --d-slate-500: #71717a;
+  --d-slate-600: #52525b;
+  --d-slate-700: #3f3f46;
+  --d-slate-800: #27272a;
+  --d-slate-900: #18181b;
+  --d-slate-950: #09090b;
+
+  /* Backward-compatible aliases expected by old examples */
+  --d-stone-50: var(--d-slate-50);
+  --d-stone-100: var(--d-slate-100);
+  --d-stone-200: var(--d-slate-200);
+  --d-stone-300: var(--d-slate-300);
+  --d-stone-400: var(--d-slate-400);
+  --d-stone-500: var(--d-slate-500);
+  --d-stone-600: var(--d-slate-600);
+  --d-stone-700: var(--d-slate-700);
+  --d-stone-800: var(--d-slate-800);
+  --d-stone-900: var(--d-slate-900);
+  --d-stone-950: var(--d-slate-950);
+
+  --d-success: #16a34a;
+  --d-success-light: rgba(22, 163, 74, 0.12);
+  --d-error: #dc2626;
+  --d-error-light: rgba(220, 38, 38, 0.12);
+  --d-warning: #d97706;
+  --d-warning-light: rgba(217, 119, 6, 0.12);
+  --d-info: #0284c7;
+  --d-info-light: rgba(2, 132, 199, 0.12);
+
+  --d-ring: rgba(37, 99, 235, 0.22);
+
+  --d-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --d-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+
+  --d-text-xs: 0.75rem;
+  --d-text-sm: 0.8125rem;
+  --d-text-base: 0.875rem;
+  --d-text-lg: 1rem;
+  --d-text-xl: 1.25rem;
+  --d-text-2xl: 1.5rem;
+  --d-text-3xl: 2rem;
+
+  --d-font-normal: 400;
+  --d-font-medium: 500;
+  --d-font-semibold: 600;
+  --d-font-bold: 700;
+
+  --d-leading: 1.6;
+
+  --d-space-1: 0.25rem;
+  --d-space-2: 0.5rem;
+  --d-space-3: 0.75rem;
+  --d-space-4: 1rem;
+  --d-space-5: 1.25rem;
+  --d-space-6: 1.5rem;
+  --d-space-8: 2rem;
+  --d-space-10: 2.5rem;
+  --d-space-12: 3rem;
+
+  --d-radius-sm: 6px;
+  --d-radius-md: 8px;
+  --d-radius-lg: 12px;
+  --d-radius-xl: 14px;
+  --d-radius-full: 9999px;
+
+  --d-shadow-xs: none;
+  --d-shadow-sm: none;
+  --d-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.08);
+  --d-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.12);
+  --d-shadow-glow: 0 0 0 1px var(--d-accent);
+
+  --d-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --d-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --d-duration-fast: 120ms;
+  --d-duration: 180ms;
+  --d-duration-slow: 280ms;
+
+  --d-surface-page: var(--d-bg);
+  --d-surface-card: var(--d-bg-card);
+  --d-surface-raised: var(--d-bg-elevated);
+  --d-surface-overlay: rgba(0, 0, 0, 0.4);
+
+  --d-text-primary: var(--d-fg);
+  --d-text-secondary: var(--d-fg-muted);
+  --d-text-muted: var(--d-fg-muted);
+  --d-text-inverse: #ffffff;
+
+  --d-border-color: var(--d-border);
+
+  --d-gradient-brand: linear-gradient(135deg, var(--d-primary-500), #8b5cf6);
+
+  --d-z-dropdown: 50;
+  --d-z-sticky: 100;
+  --d-z-overlay: 200;
+  --d-z-modal: 300;
+  --d-z-toast: 400;
+  --d-z-tooltip: 500;
+}
+
+[data-theme="dark"] {
+  --d-bg: #0a0a0a;
+  --d-bg-card: #141414;
+  --d-bg-elevated: #1a1a1a;
+  --d-fg: #fafafa;
+  --d-fg-muted: #737373;
+  --d-accent: #3b82f6;
+  --d-accent-hover: #2563eb;
+  --d-border: #262626;
+
+  --d-success: #22c55e;
+  --d-success-light: rgba(34, 197, 94, 0.14);
+  --d-error: #ef4444;
+  --d-error-light: rgba(239, 68, 68, 0.14);
+  --d-warning: #f59e0b;
+  --d-warning-light: rgba(245, 158, 11, 0.14);
+  --d-info: #38bdf8;
+  --d-info-light: rgba(56, 189, 248, 0.14);
+
+  --d-ring: rgba(59, 130, 246, 0.35);
+  --d-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
+  --d-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
+  --d-surface-overlay: rgba(0, 0, 0, 0.65);
+}

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

@@ -0,0 +1,53 @@
+/* Dalila UI — Tooltip */
+
+.d-tooltip {
+  position: relative;
+}
+
+.d-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--d-space-1) var(--d-space-2);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xs);
+  font-weight: var(--d-font-medium);
+  color: #fff;
+  background: var(--d-slate-900);
+  border-radius: var(--d-radius-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--d-duration-fast) ease;
+  z-index: var(--d-z-tooltip);
+}
+
+[data-theme="light"] .d-tooltip::after {
+  background: var(--d-slate-800);
+}
+
+.d-tooltip:hover::after {
+  opacity: 1;
+}
+
+.d-tooltip-bottom::after {
+  bottom: auto;
+  top: calc(100% + 6px);
+}
+
+.d-tooltip-left::after {
+  bottom: auto;
+  top: 50%;
+  left: auto;
+  right: calc(100% + 6px);
+  transform: translateY(-50%);
+}
+
+.d-tooltip-right::after {
+  bottom: auto;
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+}

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

@@ -0,0 +1,81 @@
+/* Dalila UI — Typography */
+
+.d-h1, .d-h2, .d-h3, .d-h4, .d-h5, .d-h6 {
+  font-family: var(--d-font-sans);
+  font-weight: var(--d-font-bold);
+  color: var(--d-text-primary);
+  line-height: 1.3;
+  margin: 0;
+}
+
+.d-h1 { font-size: var(--d-text-3xl); letter-spacing: -0.02em; }
+.d-h2 { font-size: var(--d-text-2xl); letter-spacing: -0.01em; }
+.d-h3 { font-size: var(--d-text-xl); }
+.d-h4 { font-size: var(--d-text-lg); }
+.d-h5 { font-size: var(--d-text-base); font-weight: var(--d-font-semibold); }
+.d-h6 { font-size: var(--d-text-sm); font-weight: var(--d-font-semibold); }
+
+.d-text {
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-base);
+  color: var(--d-text-primary);
+  line-height: var(--d-leading);
+  margin: 0;
+}
+
+.d-text-xs { font-size: var(--d-text-xs); }
+.d-text-sm { font-size: var(--d-text-sm); }
+.d-text-lg { font-size: var(--d-text-lg); }
+.d-text-xl { font-size: var(--d-text-xl); }
+.d-text-muted { color: var(--d-text-muted); }
+.d-text-accent { color: var(--d-accent); }
+.d-text-success { color: var(--d-success); }
+.d-text-error { color: var(--d-error); }
+.d-text-warning { color: var(--d-warning); }
+.d-text-mono { font-family: var(--d-font-mono); }
+.d-text-bold { font-weight: var(--d-font-bold); }
+.d-text-semibold { font-weight: var(--d-font-semibold); }
+.d-text-medium { font-weight: var(--d-font-medium); }
+
+.d-link {
+  color: var(--d-accent);
+  text-decoration: none;
+  transition: color var(--d-duration-fast) ease;
+}
+
+.d-link:hover {
+  color: var(--d-accent-hover);
+  text-decoration: underline;
+}
+
+.d-link-muted {
+  color: var(--d-text-muted);
+}
+
+.d-link-muted:hover {
+  color: var(--d-text-primary);
+}
+
+.d-code {
+  font-family: var(--d-font-mono);
+  font-size: 0.875em;
+  padding: 1px 5px;
+  background: var(--d-surface-raised);
+  border-radius: var(--d-radius-sm);
+  color: var(--d-accent);
+}
+
+.d-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  padding: 0.125rem 0.375rem;
+  font-family: var(--d-font-mono);
+  font-size: var(--d-text-xs);
+  color: var(--d-text-muted);
+  background: var(--d-surface-raised);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-sm);
+  box-shadow: 0 1px 0 var(--d-border-color);
+}

package/template/src/components/ui/ui-types.ts

@@ -0,0 +1,238 @@
+import type { Signal } from "../../core/signal.js";
+
+// ── Dialog ──────────────────────────────────────────────────────────
+
+export interface DialogOptions {
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+}
+
+export interface Dialog {
+  open: Signal<boolean>;
+  show(): void;
+  close(): void;
+  toggle(): void;
+  _attachTo(el: HTMLDialogElement): void;
+}
+
+// ── Drawer ──────────────────────────────────────────────────────────
+
+export type DrawerSide = "right" | "left" | "bottom";
+
+export interface DrawerOptions extends DialogOptions {
+  side?: DrawerSide;
+}
+
+export interface Drawer extends Dialog {
+  side: Signal<DrawerSide>;
+}
+
+// ── Toast ───────────────────────────────────────────────────────────
+
+export type ToastVariant = "success" | "error" | "warning" | "info";
+export type ToastPosition =
+  | "top-right"
+  | "top-left"
+  | "bottom-right"
+  | "bottom-left"
+  | "top-center"
+  | "bottom-center";
+
+export interface ToastItem {
+  id: string;
+  variant: ToastVariant;
+  title: string;
+  text?: string;
+  variantClass: string;
+  icon: string;
+}
+
+export interface ToastOptions {
+  position?: ToastPosition;
+  duration?: number;
+  maxToasts?: number;
+}
+
+export interface Toast {
+  items: Signal<ToastItem[]>;
+  activeVariant: Signal<ToastVariant | "idle">;
+  containerClass: Signal<string>;
+  show(variant: ToastVariant, title: string, text?: string, duration?: number): string;
+  success(title: string, text?: string): string;
+  error(title: string, text?: string): string;
+  warning(title: string, text?: string): string;
+  info(title: string, text?: string): string;
+  dismiss(id: string): void;
+  clear(): void;
+}
+
+// ── Tabs ────────────────────────────────────────────────────────────
+
+export interface TabsOptions {
+  initial?: string;
+  orientation?: "horizontal" | "vertical";
+}
+
+export interface Tabs {
+  active: Signal<string>;
+  select(tabId: string): void;
+  isActive(tabId: string): boolean;
+  handleClick(ev: Event): void;
+  _attachTo(el: HTMLElement): void;
+}
+
+export interface TabBindings {
+  tabClass: Signal<string>;
+  selected: Signal<string>;
+  visible: Signal<boolean>;
+}
+
+// ── Dropdown ────────────────────────────────────────────────────────
+
+export interface DropdownOptions {
+  closeOnSelect?: boolean;
+}
+
+export interface Dropdown {
+  open: Signal<boolean>;
+  toggle(ev?: Event): void;
+  close(): void;
+  select(ev?: Event): void;
+  _attachTo(el: HTMLElement): void;
+}
+
+// ── Combobox ────────────────────────────────────────────────────────
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+}
+
+export interface ComboboxOptions {
+  options: ComboboxOption[];
+  placeholder?: string;
+  name?: string;
+}
+
+export interface Combobox {
+  open: Signal<boolean>;
+  query: Signal<string>;
+  value: Signal<string>;
+  label: Signal<string>;
+  filtered: Signal<ComboboxOption[]>;
+  highlightedIndex: Signal<number>;
+  show(): void;
+  close(): void;
+  toggle(): void;
+  handleInput(ev: Event): void;
+  handleSelect(ev: Event): void;
+  handleKeydown(ev: KeyboardEvent): void;
+  _attachTo(el: HTMLElement): void;
+}
+
+// ── Accordion ───────────────────────────────────────────────────────
+
+export interface AccordionOptions {
+  single?: boolean;
+  initial?: string[];
+}
+
+export interface Accordion {
+  openItems: Signal<Set<string>>;
+  toggle(itemId: string): void;
+  open(itemId: string): void;
+  close(itemId: string): void;
+  isOpen(itemId: string): Signal<boolean>;
+  _attachTo(el: HTMLElement): void;
+}
+
+// ── Calendar ────────────────────────────────────────────────────────
+
+export interface CalendarDay {
+  date: number;
+  month: "prev" | "current" | "next";
+  fullDate: Date;
+  isToday: boolean;
+  isSelected: boolean;
+  disabled: boolean;
+}
+
+export interface CalendarOptions {
+  initial?: Date;
+  min?: Date;
+  max?: Date;
+  dayLabels?: string[];
+  monthLabels?: string[];
+}
+
+export interface Calendar {
+  year: Signal<number>;
+  month: Signal<number>;
+  selected: Signal<Date | null>;
+  title: Signal<string>;
+  days: Signal<CalendarDay[]>;
+  dayLabels: string[];
+  prev(): void;
+  next(): void;
+  select(date: Date): void;
+  handleDayClick(ev: Event): void;
+}
+
+// ── Dropzone ────────────────────────────────────────────────────────
+
+export interface DropzoneOptions {
+  accept?: string;
+  multiple?: boolean;
+  maxFiles?: number;
+  maxSize?: number;
+}
+
+export interface Dropzone {
+  dragging: Signal<boolean>;
+  files: Signal<File[]>;
+  browse(): void;
+  handleClick(): void;
+  handleDragover(ev: DragEvent): void;
+  handleDragleave(): void;
+  handleDrop(ev: DragEvent): void;
+  _attachTo(el: HTMLElement): void;
+}
+
+// ── Popover ─────────────────────────────────────────────────────────
+
+export type PopoverPlacement =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "top-start"
+  | "bottom-start";
+
+export interface PopoverOptions {
+  placement?: PopoverPlacement;
+  gap?: number;
+  viewportPadding?: number;
+}
+
+export interface Popover {
+  open: Signal<boolean>;
+  placement: Signal<PopoverPlacement>;
+  show(): void;
+  hide(): void;
+  toggle(): void;
+  position(trigger: HTMLElement, popoverEl: HTMLElement): void;
+  _attachTo(trigger: HTMLElement, popoverEl: HTMLElement): void;
+}
+
+// ── Mount helpers ───────────────────────────────────────────────────
+
+export interface TabsMount {
+  api: Tabs;
+  bindings: [string, string][];
+}
+
+export interface PopoverMount {
+  api: Popover;
+  triggerId?: string;
+  panelId?: string;
+}

package/template/src/components/ui/validate.ts

@@ -0,0 +1,83 @@
+// ── Prop Validation ─────────────────────────────────────────────────
+
+const VALID_TOAST_POSITIONS = new Set([
+  "top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center",
+]);
+
+const VALID_POPOVER_PLACEMENTS = new Set([
+  "top", "bottom", "left", "right", "top-start", "bottom-start",
+]);
+
+const VALID_DRAWER_SIDES = new Set(["right", "left", "bottom"]);
+
+function warn(component: string, message: string): void {
+  console.warn(`[Dalila] ${component}: ${message}`);
+}
+
+function warnInvalidType(component: string, prop: string, expected: string, got: unknown): void {
+  warn(component, `"${prop}" expected ${expected}, got ${typeof got} (${String(got)})`);
+}
+
+export function validateDialogOptions(opts: Record<string, unknown>): void {
+  if (opts.closeOnBackdrop !== undefined && typeof opts.closeOnBackdrop !== "boolean") {
+    warnInvalidType("createDialog", "closeOnBackdrop", "boolean", opts.closeOnBackdrop);
+  }
+  if (opts.closeOnEscape !== undefined && typeof opts.closeOnEscape !== "boolean") {
+    warnInvalidType("createDialog", "closeOnEscape", "boolean", opts.closeOnEscape);
+  }
+}
+
+export function validateDrawerOptions(opts: Record<string, unknown>): void {
+  validateDialogOptions(opts);
+  if (opts.side !== undefined && !VALID_DRAWER_SIDES.has(opts.side as string)) {
+    warn("createDrawer", `"side" must be one of "right"|"left"|"bottom", got "${String(opts.side)}"`);
+  }
+}
+
+export function validateToastOptions(opts: Record<string, unknown>): void {
+  if (opts.position !== undefined && !VALID_TOAST_POSITIONS.has(opts.position as string)) {
+    warn("createToast", `"position" must be a valid ToastPosition, got "${String(opts.position)}"`);
+  }
+  if (opts.duration !== undefined && (typeof opts.duration !== "number" || opts.duration < 0)) {
+    warn("createToast", `"duration" must be a number >= 0, got ${String(opts.duration)}`);
+  }
+  if (opts.maxToasts !== undefined && (typeof opts.maxToasts !== "number" || opts.maxToasts <= 0)) {
+    warn("createToast", `"maxToasts" must be a number > 0, got ${String(opts.maxToasts)}`);
+  }
+}
+
+export function validatePopoverOptions(opts: Record<string, unknown>): void {
+  if (opts.placement !== undefined && !VALID_POPOVER_PLACEMENTS.has(opts.placement as string)) {
+    warn("createPopover", `"placement" must be a valid PopoverPlacement, got "${String(opts.placement)}"`);
+  }
+  if (opts.gap !== undefined && (typeof opts.gap !== "number" || opts.gap < 0)) {
+    warn("createPopover", `"gap" must be a number >= 0, got ${String(opts.gap)}`);
+  }
+  if (opts.viewportPadding !== undefined && (typeof opts.viewportPadding !== "number" || opts.viewportPadding < 0)) {
+    warn("createPopover", `"viewportPadding" must be a number >= 0, got ${String(opts.viewportPadding)}`);
+  }
+}
+
+export function validateDropzoneOptions(opts: Record<string, unknown>): void {
+  if (opts.maxFiles !== undefined && (typeof opts.maxFiles !== "number" || opts.maxFiles <= 0)) {
+    warn("createDropzone", `"maxFiles" must be a number > 0, got ${String(opts.maxFiles)}`);
+  }
+  if (opts.maxSize !== undefined && (typeof opts.maxSize !== "number" || opts.maxSize <= 0)) {
+    warn("createDropzone", `"maxSize" must be a number > 0, got ${String(opts.maxSize)}`);
+  }
+}
+
+export function validateCalendarOptions(opts: Record<string, unknown>): void {
+  const min = opts.min as Date | undefined;
+  const max = opts.max as Date | undefined;
+  if (min && max && min > max) {
+    warn("createCalendar", `"min" must be before "max"`);
+  }
+}
+
+export function validateComboboxOptions(opts: Record<string, unknown>): void {
+  const options = opts.options;
+  if (!Array.isArray(options) || options.length === 0) {
+    warn("createCombobox", `"options" must be a non-empty array`);
+  }
+}

package/template/src/style.css

@@ -1,3 +1,16 @@
+/**
+ * Dalila UI Components
+ *
+ * To use Dalila UI components, import the necessary styles:
+ *
+ * @import './components/ui/button/button.css';
+ * @import './components/ui/card/card.css';
+ * @import './components/ui/dialog/dialog.css';
+ *
+ * Or import all styles at once:
+ * @import './components/ui/dalila/dalila.css';
+ */
+
 * {
   box-sizing: border-box;
   margin: 0;