@luna_ui/luna 0.3.5 → 0.5.3

package/src/hydration/keyboard.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 });
+}

package/src/hydration/toggle.ts

@@ -0,0 +1,101 @@
+/**
+ * toggle - Binary state toggle helper
+ *
+ * Toggles between two states on click, using data-* or aria-* attributes.
+ * CSS handles visual changes via attribute selectors.
+ */
+
+export interface ToggleOptions {
+  /**
+   * Selector for the element to toggle state on.
+   * If not provided, the trigger element itself is used.
+   * Use closest() to find ancestor.
+   */
+  target?: string;
+
+  /**
+   * The two states to toggle between.
+   * @default ['open', 'closed'] for data-state
+   * @default ['true', 'false'] for aria-checked
+   */
+  states?: [string, string];
+
+  /**
+   * Attribute to update.
+   * @default 'data-state'
+   */
+  attribute?: string;
+
+  /**
+   * Callback when state changes.
+   */
+  onChange?: (state: string, element: Element) => void;
+}
+
+/**
+ * Set up click-to-toggle behavior on matching elements
+ *
+ * @example
+ * ```ts
+ * // Toggle data-state on parent [data-accordion-item]
+ * toggle(el, '[data-accordion-trigger]', {
+ *   target: '[data-accordion-item]',
+ *   states: ['open', 'closed']
+ * });
+ *
+ * // Toggle aria-checked on the button itself
+ * toggle(el, '[data-switch-toggle]', {
+ *   attribute: 'aria-checked',
+ *   states: ['true', 'false']
+ * });
+ * ```
+ */
+export function toggle(
+  root: Element,
+  selector: string,
+  options: ToggleOptions = {}
+): () => void {
+  const {
+    target,
+    attribute = 'data-state',
+    states = attribute === 'aria-checked' ? ['true', 'false'] : ['open', 'closed'],
+    onChange,
+  } = options;
+
+  const [stateA, stateB] = states;
+  const handlers: Array<{ el: Element; handler: EventListener }> = [];
+
+  root.querySelectorAll(selector).forEach((trigger) => {
+    const handler = () => {
+      // Find target element
+      const targetEl = target
+        ? trigger.closest(target)
+        : trigger;
+
+      if (!targetEl) return;
+
+      // Get current state and toggle
+      const current = targetEl.getAttribute(attribute);
+      const next = current === stateA ? stateB : stateA;
+
+      targetEl.setAttribute(attribute, next);
+
+      // Also update aria-checked if toggling data-state on a button
+      if (attribute === 'data-state' && targetEl.tagName === 'BUTTON') {
+        targetEl.setAttribute('aria-checked', next === stateA ? 'true' : 'false');
+      }
+
+      onChange?.(next, targetEl);
+    };
+
+    trigger.addEventListener('click', handler);
+    handlers.push({ el: trigger, handler });
+  });
+
+  // Return cleanup function
+  return () => {
+    handlers.forEach(({ el, handler }) => {
+      el.removeEventListener('click', handler);
+    });
+  };
+}

package/src/index.ts

@@ -23,8 +23,11 @@ export interface ForProps<T> {
 export interface ShowProps<T> {
   when: T | Accessor<T>;
   fallback?: LunaNode;
-  /** Must be a function to ensure proper lifecycle (onCleanup/onMount) support */
-  children: (() => LunaNode) | ((item: NonNullable<T>) => LunaNode);
+  /**
+   * Children receives an accessor function (SolidJS-style).
+   * Use: {(item) => <p>{item()}</p>}
+   */
+  children: (() => LunaNode) | ((item: Accessor<NonNullable<T>>) => LunaNode);
 }
 
 export interface IndexProps<T> {
@@ -48,8 +51,11 @@ export interface ProviderProps<T> {
 
 export interface MatchProps<T> {
   when: T | Accessor<T>;
-  /** Must be a function to ensure proper lifecycle (onCleanup/onMount) support */
-  children: (() => LunaNode) | ((item: NonNullable<T>) => LunaNode);
+  /**
+   * Children receives an accessor function (SolidJS-style).
+   * Use: {(item) => <p>{item()}</p>}
+   */
+  children: (() => LunaNode) | ((item: Accessor<NonNullable<T>>) => LunaNode);
 }
 
 export interface SwitchProps {
@@ -149,7 +155,7 @@ import {
   portalToSelector,
   portalWithShadow,
   portalToElementWithShadow,
-} from "../../../target/js/release/build/platform/js/api/api.js";
+} from "../../../target/js/release/build/js/api/api.js";
 
 // ============================================================================
 // SolidJS-compatible Signal API
@@ -447,6 +453,9 @@ export function For<T>(props: ForProps<T>): any {
 
 /**
  * Show component for conditional rendering (SolidJS-style)
+ *
+ * The children function receives an accessor (getter function), not the raw value.
+ * This matches SolidJS behavior where you use: {(item) => <p>{item()}</p>}
  */
 export function Show<T>(props: ShowProps<T>): any {
   const { when, children } = props;
@@ -455,9 +464,13 @@ export function Show<T>(props: ShowProps<T>): any {
   // Convert when to a getter if it's not already
   const condition = typeof when === "function" ? when : () => when;
 
+  // Create a stable accessor for the condition value
+  // This matches SolidJS behavior where children receives an accessor
+  const valueAccessor = () => condition() as NonNullable<T>;
+
   return show(
     () => Boolean(condition()),
-    () => resolveChild(children, condition())
+    () => resolveChild(children, valueAccessor)
   );
 }
 
@@ -564,17 +577,22 @@ export function Switch(props: SwitchProps): any {
 
 /**
  * Match component for use inside Switch (SolidJS-style)
+ *
+ * The children function receives an accessor (getter function), matching SolidJS.
  */
 export function Match<T>(props: MatchProps<T>): { __isMatch: true; when: () => boolean; condition: () => T; children: () => any } {
   const { when, children } = props;
   const condition = typeof when === "function" ? when : () => when;
 
+  // Create a stable accessor for the condition value (SolidJS-style)
+  const valueAccessor = () => condition() as NonNullable<T>;
+
   return {
     __isMatch: true,
     when: () => Boolean(condition()),
     condition,
-    // Wrap children in a function that resolves with condition value
-    children: () => resolveChild(children, condition()),
+    // Pass accessor instead of raw value to match SolidJS behavior
+    children: () => resolveChild(children, valueAccessor),
   };
 }