@luna_ui/luna 0.11.0 → 0.20.0

package/src/event-utils.ts

@@ -1,227 +0,0 @@
-/**
- * Event utilities for common event handling patterns
- *
- * These utilities are tree-shakeable - only import what you use.
- *
- * @example
- * import { getTargetValue, getDataId, stopEvent } from "@luna_ui/luna/event-utils";
- *
- * on=events().input(fn(e) {
- *   const value = getTargetValue(e);
- *   setValue(value);
- * })
- */
-
-/**
- * Get value from input/textarea/select element
- */
-export function getTargetValue(e: Event): string {
-  return (e.target as HTMLInputElement)?.value ?? "";
-}
-
-/**
- * Get checked state from checkbox/radio input
- */
-export function getTargetChecked(e: Event): boolean {
-  return (e.target as HTMLInputElement)?.checked ?? false;
-}
-
-/**
- * Get selected index from select element
- */
-export function getSelectedIndex(e: Event): number {
-  return (e.target as HTMLSelectElement)?.selectedIndex ?? -1;
-}
-
-/**
- * Get client position (relative to viewport) from mouse/pointer/touch event
- */
-export function getClientPos(e: MouseEvent | PointerEvent | TouchEvent): { x: number; y: number } {
-  if ("touches" in e && e.touches.length > 0) {
-    return { x: e.touches[0].clientX, y: e.touches[0].clientY };
-  }
-  const me = e as MouseEvent;
-  return { x: me.clientX, y: me.clientY };
-}
-
-/**
- * Get offset position (relative to target element) from mouse/pointer event
- */
-export function getOffsetPos(e: MouseEvent | PointerEvent): { x: number; y: number } {
-  return { x: e.offsetX, y: e.offsetY };
-}
-
-/**
- * Get page position (relative to document) from mouse/pointer/touch event
- */
-export function getPagePos(e: MouseEvent | PointerEvent | TouchEvent): { x: number; y: number } {
-  if ("touches" in e && e.touches.length > 0) {
-    return { x: e.touches[0].pageX, y: e.touches[0].pageY };
-  }
-  const me = e as MouseEvent;
-  return { x: me.pageX, y: me.pageY };
-}
-
-/**
- * Get movement delta from mouse/pointer event
- */
-export function getMovement(e: MouseEvent | PointerEvent): { dx: number; dy: number } {
-  return { dx: e.movementX, dy: e.movementY };
-}
-
-/**
- * Get data attribute from event target or closest ancestor
- */
-export function getDataAttr(e: Event, key: string): string | null {
-  const target = e.target as HTMLElement;
-  return target?.closest(`[data-${key}]`)?.getAttribute(`data-${key}`) ?? null;
-}
-
-/**
- * Get data-id from closest ancestor (common pattern for list items)
- */
-export function getDataId(e: Event): string | null {
-  return getDataAttr(e, "id");
-}
-
-/**
- * Get all data attributes from event target as object
- */
-export function getDataset(e: Event): DOMStringMap {
-  return (e.target as HTMLElement)?.dataset ?? {};
-}
-
-/**
- * Check if event target matches a CSS selector
- */
-export function matchesSelector(e: Event, selector: string): boolean {
-  const target = e.target as HTMLElement;
-  return target?.matches?.(selector) ?? false;
-}
-
-/**
- * Get closest ancestor matching selector from event target
- */
-export function getClosest<T extends Element = HTMLElement>(e: Event, selector: string): T | null {
-  const target = e.target as HTMLElement;
-  return target?.closest?.(selector) as T | null;
-}
-
-/**
- * Prevent default behavior
- */
-export function preventDefault(e: Event): void {
-  e.preventDefault();
-}
-
-/**
- * Stop event propagation
- */
-export function stopPropagation(e: Event): void {
-  e.stopPropagation();
-}
-
-/**
- * Prevent default and stop propagation (convenience)
- */
-export function stopEvent(e: Event): void {
-  e.preventDefault();
-  e.stopPropagation();
-}
-
-/**
- * Check if IME is composing (for input/keyboard events)
- * Use this to avoid handling partial IME input
- */
-export function isComposing(e: Event): boolean {
-  return (e as InputEvent | KeyboardEvent).isComposing ?? false;
-}
-
-/**
- * Check if modifier key is pressed
- */
-export function hasModifier(e: KeyboardEvent | MouseEvent, modifier: "ctrl" | "alt" | "shift" | "meta"): boolean {
-  switch (modifier) {
-    case "ctrl": return e.ctrlKey;
-    case "alt": return e.altKey;
-    case "shift": return e.shiftKey;
-    case "meta": return e.metaKey;
-  }
-}
-
-/**
- * Check if Cmd (Mac) or Ctrl (Windows/Linux) is pressed
- */
-export function hasCmdOrCtrl(e: KeyboardEvent | MouseEvent): boolean {
-  // Mac uses metaKey (Cmd), others use ctrlKey
-  return e.metaKey || e.ctrlKey;
-}
-
-/**
- * Get keyboard key with normalized names
- */
-export function getKey(e: KeyboardEvent): string {
-  return e.key;
-}
-
-/**
- * Check if Enter key was pressed (outside IME composition)
- */
-export function isEnterKey(e: KeyboardEvent): boolean {
-  return e.key === "Enter" && !isComposing(e);
-}
-
-/**
- * Check if Escape key was pressed
- */
-export function isEscapeKey(e: KeyboardEvent): boolean {
-  return e.key === "Escape";
-}
-
-/**
- * Get wheel delta (normalized across browsers)
- */
-export function getWheelDelta(e: WheelEvent): { deltaX: number; deltaY: number; deltaZ: number } {
-  return {
-    deltaX: e.deltaX,
-    deltaY: e.deltaY,
-    deltaZ: e.deltaZ,
-  };
-}
-
-/**
- * Get which mouse button was pressed
- * 0 = primary (left), 1 = auxiliary (middle), 2 = secondary (right)
- */
-export function getButton(e: MouseEvent): number {
-  return e.button;
-}
-
-/**
- * Check if primary (left) mouse button was pressed
- */
-export function isPrimaryButton(e: MouseEvent): boolean {
-  return e.button === 0;
-}
-
-/**
- * Check if secondary (right) mouse button was pressed
- */
-export function isSecondaryButton(e: MouseEvent): boolean {
-  return e.button === 2;
-}
-
-/**
- * Get files from drag event
- */
-export function getDroppedFiles(e: DragEvent): FileList | null {
-  return e.dataTransfer?.files ?? null;
-}
-
-/**
- * Get text data from drag/clipboard event
- */
-export function getTextData(e: DragEvent | ClipboardEvent): string {
-  const dt = "dataTransfer" in e ? e.dataTransfer : e.clipboardData;
-  return dt?.getData("text/plain") ?? "";
-}

package/src/hydration/createHydrator.ts

@@ -1,62 +0,0 @@
-/**
- * createHydrator - Wraps hydration logic with automatic guard and cleanup
- *
- * Features:
- * - Prevents double hydration via data-hydrated check
- * - Automatically sets data-hydrated="true" on completion
- * - Optional cleanup function support
- */
-
-export type HydrateFn = (
-  element: Element,
-  state: unknown,
-  name: string
-) => void | (() => void);
-
-export type CleanupFn = () => void;
-
-/**
- * Create a hydration function with automatic guards
- *
- * @example
- * ```ts
- * export const hydrate = createHydrator((el, state) => {
- *   // Your hydration logic here
- *   el.querySelector('button').onclick = () => { ... };
- *
- *   // Optional: return cleanup function
- *   return () => { ... };
- * });
- * ```
- */
-export function createHydrator(
-  fn: (element: Element, state: unknown, name: string) => void | CleanupFn
-): HydrateFn {
-  // Store cleanup functions by element
-  const cleanups = new WeakMap<Element, CleanupFn>();
-
-  return (element: Element, state: unknown, name: string): void => {
-    // Skip if already hydrated
-    if ((element as HTMLElement).dataset.hydrated) {
-      return;
-    }
-
-    // Run cleanup if re-hydrating (HMR scenario)
-    const existingCleanup = cleanups.get(element);
-    if (existingCleanup) {
-      existingCleanup();
-      cleanups.delete(element);
-    }
-
-    // Run hydration
-    const cleanup = fn(element, state, name);
-
-    // Store cleanup if provided
-    if (typeof cleanup === 'function') {
-      cleanups.set(element, cleanup);
-    }
-
-    // Mark as hydrated
-    (element as HTMLElement).dataset.hydrated = 'true';
-  };
-}

package/src/hydration/delegate.ts

@@ -1,62 +0,0 @@
-/**
- * onDelegate - Event delegation helper
- *
- * Attach event handlers using event delegation pattern.
- * Efficient for multiple similar elements.
- */
-
-/**
- * Set up delegated event handling
- *
- * @example
- * ```ts
- * onDelegate(el, 'click', '[data-dialog-trigger]', () => {
- *   dialog.dataset.state = 'open';
- * });
- *
- * onDelegate(el, 'click', '[data-dialog-close]', (e, target) => {
- *   dialog.dataset.state = 'closed';
- * });
- * ```
- */
-export function onDelegate<K extends keyof HTMLElementEventMap>(
-  root: Element,
-  event: K,
-  selector: string,
-  handler: (event: HTMLElementEventMap[K], target: Element) => void
-): () => void {
-  const delegateHandler = (e: Event) => {
-    const target = (e.target as Element)?.closest(selector);
-    if (target && root.contains(target)) {
-      handler(e as HTMLElementEventMap[K], target);
-    }
-  };
-
-  root.addEventListener(event, delegateHandler);
-
-  // Return cleanup function
-  return () => {
-    root.removeEventListener(event, delegateHandler);
-  };
-}
-
-/**
- * Attach click handler to multiple elements matching selector
- *
- * @example
- * ```ts
- * onClick(el, '[data-tab-trigger]', (target) => {
- *   const tabId = target.dataset.tabId;
- *   // activate tab...
- * });
- * ```
- */
-export function onClick(
-  root: Element,
-  selector: string,
-  handler: (target: Element, event: MouseEvent) => void
-): () => void {
-  return onDelegate(root, 'click', selector, (e, target) => {
-    handler(target, e);
-  });
-}

package/src/hydration/drag.ts

@@ -1,214 +0,0 @@
-/**
- * drag - Horizontal drag helper for sliders/range inputs
- *
- * Handles mouse and touch drag interactions.
- * Updates CSS custom property for visual positioning.
- */
-
-export interface DragOptions {
-  /**
-   * Selector for the track element (defines drag bounds).
-   * Required for calculating position.
-   */
-  track: string;
-
-  /**
-   * CSS custom property to update with percentage (0-100).
-   * @default '--slider-percent'
-   */
-  cssProperty?: string;
-
-  /**
-   * Attribute to update with the calculated value.
-   * @default 'data-value'
-   */
-  attribute?: string;
-
-  /**
-   * Minimum value.
-   * @default 0
-   */
-  min?: number;
-
-  /**
-   * Maximum value.
-   * @default 100
-   */
-  max?: number;
-
-  /**
-   * Step increment (for keyboard navigation).
-   * @default 1
-   */
-  step?: number;
-
-  /**
-   * Selector for value display element.
-   * If provided, its textContent will be updated.
-   */
-  display?: string;
-
-  /**
-   * Callback when value changes.
-   */
-  onChange?: (value: number, percent: number, element: Element) => void;
-}
-
-/**
- * Set up drag behavior for slider-like components
- *
- * @example
- * ```ts
- * // Basic slider
- * drag(el, '[data-slider]', {
- *   track: '[data-slider-track]',
- *   display: '[data-slider-value]'
- * });
- *
- * // Custom range
- * drag(el, '[data-range]', {
- *   track: '[data-range-track]',
- *   min: -50,
- *   max: 50,
- *   cssProperty: '--range-position',
- *   onChange: (value) => console.log('Value:', value)
- * });
- * ```
- */
-export function drag(
-  root: Element,
-  selector: string,
-  options: DragOptions
-): () => void {
-  const {
-    track: trackSelector,
-    cssProperty = '--slider-percent',
-    attribute = 'data-value',
-    min = 0,
-    max = 100,
-    step = 1,
-    display: displaySelector,
-    onChange,
-  } = options;
-
-  const cleanups: Array<() => void> = [];
-
-  root.querySelectorAll(selector).forEach((slider) => {
-    const track = slider.querySelector(trackSelector);
-    const thumb = slider.querySelector('[data-slider-thumb]');
-    const display = displaySelector ? root.querySelector(displaySelector) : null;
-
-    if (!track) return;
-
-    // Get initial value from attribute
-    let value = parseInt(slider.getAttribute(attribute) || '50', 10);
-
-    const update = (val: number) => {
-      // Clamp value
-      value = Math.max(min, Math.min(max, val));
-      const pct = ((value - min) / (max - min)) * 100;
-
-      // Update attribute
-      slider.setAttribute(attribute, String(value));
-
-      // Update aria
-      slider.setAttribute('aria-valuenow', String(value));
-
-      // Update CSS custom property
-      (slider as HTMLElement).style.setProperty(cssProperty, String(pct));
-
-      // Update display
-      if (display) {
-        display.textContent = String(value);
-      }
-
-      onChange?.(value, pct, slider);
-    };
-
-    // Set initial CSS property
-    const initialPct = ((value - min) / (max - min)) * 100;
-    (slider as HTMLElement).style.setProperty(cssProperty, String(initialPct));
-
-    // Calculate value from position
-    const calcValue = (clientX: number): number => {
-      const rect = track.getBoundingClientRect();
-      const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      return Math.round(min + pct * (max - min));
-    };
-
-    // Drag handlers
-    const handleDrag = (e: MouseEvent | TouchEvent) => {
-      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-      update(calcValue(clientX));
-    };
-
-    const handleStart = (e: MouseEvent | TouchEvent) => {
-      e.preventDefault();
-      handleDrag(e);
-
-      const handleMove = (e: MouseEvent | TouchEvent) => handleDrag(e);
-      const handleEnd = () => {
-        document.removeEventListener('mousemove', handleMove);
-        document.removeEventListener('mouseup', handleEnd);
-        document.removeEventListener('touchmove', handleMove as EventListener);
-        document.removeEventListener('touchend', handleEnd);
-      };
-
-      document.addEventListener('mousemove', handleMove);
-      document.addEventListener('mouseup', handleEnd);
-      document.addEventListener('touchmove', handleMove as EventListener);
-      document.addEventListener('touchend', handleEnd);
-    };
-
-    // Attach to track
-    track.addEventListener('mousedown', handleStart as EventListener);
-    track.addEventListener('touchstart', handleStart as EventListener);
-
-    // Attach to thumb if exists
-    if (thumb) {
-      thumb.addEventListener('mousedown', handleStart as EventListener);
-      thumb.addEventListener('touchstart', handleStart as EventListener);
-    }
-
-    // Keyboard navigation
-    const handleKeydown = (e: KeyboardEvent) => {
-      switch (e.key) {
-        case 'ArrowRight':
-        case 'ArrowUp':
-          update(value + step);
-          e.preventDefault();
-          break;
-        case 'ArrowLeft':
-        case 'ArrowDown':
-          update(value - step);
-          e.preventDefault();
-          break;
-        case 'Home':
-          update(min);
-          e.preventDefault();
-          break;
-        case 'End':
-          update(max);
-          e.preventDefault();
-          break;
-      }
-    };
-
-    if (thumb) {
-      thumb.addEventListener('keydown', handleKeydown as EventListener);
-    }
-
-    // Cleanup
-    cleanups.push(() => {
-      track.removeEventListener('mousedown', handleStart as EventListener);
-      track.removeEventListener('touchstart', handleStart as EventListener);
-      if (thumb) {
-        thumb.removeEventListener('mousedown', handleStart as EventListener);
-        thumb.removeEventListener('touchstart', handleStart as EventListener);
-        thumb.removeEventListener('keydown', handleKeydown as EventListener);
-      }
-    });
-  });
-
-  return () => cleanups.forEach((fn) => fn());
-}

package/src/hydration/index.ts

@@ -1,12 +0,0 @@
-/**
- * @luna/hydration - SSR Hydration Helpers
- *
- * Composable helpers for hydrating SSR-rendered components.
- * CSS-first approach: JS handles events, CSS handles visuals.
- */
-
-export { createHydrator, type HydrateFn, type CleanupFn } from './createHydrator';
-export { toggle, type ToggleOptions } from './toggle';
-export { drag, type DragOptions } from './drag';
-export { onDelegate, onClick } from './delegate';
-export { keyboard, onEscape, type KeyboardHandlers } from './keyboard';

package/src/hydration/keyboard.ts

@@ -1,64 +0,0 @@
-/**
- * keyboard - Keyboard event handler helper
- *
- * Map keyboard keys to handler functions.
- */
-
-export type KeyboardHandlers = {
-  [key: string]: (event: KeyboardEvent) => void;
-};
-
-/**
- * Set up keyboard handlers on an element or document
- *
- * @example
- * ```ts
- * // Handle Escape on document
- * keyboard(document, {
- *   Escape: () => close()
- * });
- *
- * // Handle arrow keys on a specific element
- * keyboard(slider, {
- *   ArrowUp: () => increment(),
- *   ArrowDown: () => decrement(),
- *   ArrowLeft: () => decrement(),
- *   ArrowRight: () => increment()
- * });
- * ```
- */
-export function keyboard(
-  target: Element | Document | null,
-  handlers: KeyboardHandlers
-): () => void {
-  if (!target) return () => {};
-
-  const handler = (e: Event) => {
-    const key = (e as KeyboardEvent).key;
-    const fn = handlers[key];
-    if (fn) {
-      fn(e as KeyboardEvent);
-    }
-  };
-
-  target.addEventListener('keydown', handler);
-
-  // Return cleanup function
-  return () => {
-    target.removeEventListener('keydown', handler);
-  };
-}
-
-/**
- * Handle Escape key to close something
- *
- * @example
- * ```ts
- * onEscape(() => {
- *   dialog.dataset.state = 'closed';
- * });
- * ```
- */
-export function onEscape(handler: () => void): () => void {
-  return keyboard(document, { Escape: handler });
-}