@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/navigation-menu/wc/navigation-menu-viewport.ts

@@ -0,0 +1,85 @@
+/**
+ * NavigationMenuViewport component - container for content panels.
+ *
+ * Renders the active content panel with smooth transitions.
+ *
+ * @element ds-navigation-menu-viewport
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsNavigationMenuViewport extends DSElement {
+  private contentObserver: MutationObserver | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("hidden", "");
+    this.setAttribute("data-state", "closed");
+
+    // Observe parent for content changes
+    this.setupContentObserver();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.contentObserver?.disconnect();
+    this.contentObserver = null;
+  }
+
+  private setupContentObserver(): void {
+    const menu = this.closest("ds-navigation-menu");
+    if (!menu) return;
+
+    // Update viewport content when menu value changes
+    this.contentObserver = new MutationObserver(() => {
+      this.updateContent();
+    });
+
+    this.contentObserver.observe(menu, {
+      attributes: true,
+      attributeFilter: ["value"],
+    });
+
+    // Initial update
+    this.updateContent();
+  }
+
+  private updateContent(): void {
+    const menu = this.closest("ds-navigation-menu");
+    if (!menu) return;
+
+    const value = menu.getAttribute("value");
+
+    // Move active content into viewport
+    const items = menu.querySelectorAll("ds-navigation-menu-item");
+
+    // Clear viewport
+    this.innerHTML = "";
+
+    for (const item of items) {
+      const itemValue = item.getAttribute("value");
+      const content = item.querySelector("ds-navigation-menu-content");
+
+      if (itemValue === value && content) {
+        // Clone content to viewport
+        const clone = content.cloneNode(true) as HTMLElement;
+        clone.setAttribute("data-value", itemValue || "");
+        this.appendChild(clone);
+      }
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-navigation-menu-viewport", DsNavigationMenuViewport);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu-viewport": DsNavigationMenuViewport;
+  }
+}

package/templates/navigation-menu/wc/navigation-menu.ts

@@ -0,0 +1,272 @@
+/**
+ * NavigationMenu component - mega-menu style navigation.
+ *
+ * Provides a horizontal navigation bar with dropdown content panels
+ * that transition smoothly between items.
+ *
+ * @element ds-navigation-menu
+ *
+ * @slot - Navigation menu content (ds-navigation-menu-list)
+ *
+ * @fires ds:value-change - Fired when active menu item changes
+ *
+ * @example
+ * ```html
+ * <ds-navigation-menu>
+ *   <ds-navigation-menu-list>
+ *     <ds-navigation-menu-item>
+ *       <ds-navigation-menu-trigger>Products</ds-navigation-menu-trigger>
+ *       <ds-navigation-menu-content>
+ *         <ds-navigation-menu-link href="/products/a">Product A</ds-navigation-menu-link>
+ *       </ds-navigation-menu-content>
+ *     </ds-navigation-menu-item>
+ *   </ds-navigation-menu-list>
+ *   <ds-navigation-menu-viewport></ds-navigation-menu-viewport>
+ * </ds-navigation-menu>
+ * ```
+ */
+
+import {
+  type DismissableLayer,
+  type RovingFocus,
+  createDismissableLayer,
+  createRovingFocus,
+} from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+// Import child components to ensure they're registered
+import "./navigation-menu-list.js";
+import "./navigation-menu-item.js";
+import "./navigation-menu-trigger.js";
+import "./navigation-menu-content.js";
+import "./navigation-menu-link.js";
+import "./navigation-menu-indicator.js";
+import "./navigation-menu-viewport.js";
+
+export class DsNavigationMenu extends DSElement {
+  /** Currently active item value */
+  @property({ type: String, reflect: true })
+  value = "";
+
+  /** Delay in ms before opening on hover */
+  @property({ type: Number, attribute: "delay-duration" })
+  delayDuration = 200;
+
+  /** Delay in ms before closing when pointer leaves */
+  @property({ type: Number, attribute: "skip-delay-duration" })
+  skipDelayDuration = 300;
+
+  /** Orientation (horizontal or vertical) */
+  @property({ type: String, reflect: true })
+  orientation: "horizontal" | "vertical" = "horizontal";
+
+  private rovingFocus: RovingFocus | null = null;
+  private dismissLayer: DismissableLayer | null = null;
+  private openTimer: ReturnType<typeof setTimeout> | null = null;
+  private closeTimer: ReturnType<typeof setTimeout> | null = null;
+  private previousValue = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "Main");
+
+    // Listen for trigger interactions
+    this.addEventListener("ds:navigation-trigger", this.handleTriggerInteraction as EventListener);
+    this.addEventListener("ds:navigation-item-enter", this.handleItemEnter as EventListener);
+    this.addEventListener("ds:navigation-item-leave", this.handleItemLeave as EventListener);
+
+    this.updateComplete.then(() => {
+      this.setupRovingFocus();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "ds:navigation-trigger",
+      this.handleTriggerInteraction as EventListener
+    );
+    this.removeEventListener("ds:navigation-item-enter", this.handleItemEnter as EventListener);
+    this.removeEventListener("ds:navigation-item-leave", this.handleItemLeave as EventListener);
+    this.cleanup();
+  }
+
+  /**
+   * Opens a navigation item by value.
+   */
+  public open(itemValue: string): void {
+    if (this.value === itemValue) return;
+
+    this.clearTimers();
+    this.previousValue = this.value;
+    this.value = itemValue;
+    this.updateActiveItem();
+    this.setupDismissLayer();
+
+    emitEvent(this, "ds:value-change", {
+      detail: { value: this.value },
+      bubbles: true,
+    });
+  }
+
+  /**
+   * Closes the navigation menu.
+   */
+  public close(): void {
+    if (!this.value) return;
+
+    this.clearTimers();
+    this.previousValue = this.value;
+    this.value = "";
+    this.updateActiveItem();
+    this.dismissLayer?.deactivate();
+    this.dismissLayer = null;
+
+    emitEvent(this, "ds:value-change", {
+      detail: { value: "" },
+      bubbles: true,
+    });
+  }
+
+  private clearTimers(): void {
+    if (this.openTimer) {
+      clearTimeout(this.openTimer);
+      this.openTimer = null;
+    }
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  }
+
+  private handleTriggerInteraction = (
+    event: CustomEvent<{ value: string; type: "click" | "focus" }>
+  ): void => {
+    const { value } = event.detail;
+
+    if (this.value === value) {
+      // Toggle off if clicking same item
+      this.close();
+    } else {
+      this.open(value);
+    }
+  };
+
+  private handleItemEnter = (event: CustomEvent<{ value: string }>): void => {
+    const { value } = event.detail;
+    this.clearTimers();
+
+    // Use skip delay if switching between items
+    const delay = this.value ? 0 : this.delayDuration;
+
+    this.openTimer = setTimeout(() => {
+      this.open(value);
+    }, delay);
+  };
+
+  private handleItemLeave = (): void => {
+    this.clearTimers();
+
+    this.closeTimer = setTimeout(() => {
+      this.close();
+    }, this.skipDelayDuration);
+  };
+
+  private handleDismiss = (): void => {
+    this.close();
+  };
+
+  private setupRovingFocus(): void {
+    const list = this.querySelector("ds-navigation-menu-list");
+    if (!list) return;
+
+    this.rovingFocus = createRovingFocus({
+      container: list as HTMLElement,
+      selector: "ds-navigation-menu-trigger, ds-navigation-menu-link:not([disabled])",
+      direction: this.orientation === "horizontal" ? "horizontal" : "vertical",
+      loop: true,
+      skipDisabled: true,
+    });
+  }
+
+  private setupDismissLayer(): void {
+    if (this.dismissLayer) {
+      this.dismissLayer.deactivate();
+    }
+
+    const viewport = this.querySelector("ds-navigation-menu-viewport");
+    if (!viewport) return;
+
+    this.dismissLayer = createDismissableLayer({
+      container: viewport as HTMLElement,
+      excludeElements: [this],
+      onDismiss: this.handleDismiss,
+      closeOnEscape: true,
+      closeOnOutsideClick: true,
+    });
+    this.dismissLayer.activate();
+  }
+
+  private updateActiveItem(): void {
+    const items = this.querySelectorAll("ds-navigation-menu-item");
+    for (const item of items) {
+      const itemValue = item.getAttribute("value") || "";
+      const isActive = itemValue === this.value;
+
+      if (isActive) {
+        item.setAttribute("data-state", "open");
+      } else {
+        item.setAttribute("data-state", "closed");
+      }
+    }
+
+    // Update viewport
+    const viewport = this.querySelector("ds-navigation-menu-viewport") as HTMLElement | null;
+    if (viewport) {
+      if (this.value) {
+        viewport.removeAttribute("hidden");
+        viewport.setAttribute("data-state", "open");
+      } else {
+        viewport.setAttribute("data-state", "closed");
+        // Wait for animation before hiding
+        setTimeout(() => {
+          if (!this.value) {
+            viewport.setAttribute("hidden", "");
+          }
+        }, 200);
+      }
+    }
+  }
+
+  private cleanup(): void {
+    this.clearTimers();
+    this.rovingFocus?.destroy();
+    this.rovingFocus = null;
+    this.dismissLayer?.deactivate();
+    this.dismissLayer = null;
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("value")) {
+      this.updateActiveItem();
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-navigation-menu", DsNavigationMenu);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu": DsNavigationMenu;
+  }
+}

package/templates/number-input/index.ts

@@ -0,0 +1,46 @@
+/**
+ * NumberInput compound component for numeric value input.
+ *
+ * @example
+ * ```tsx
+ * // Basic number input with buttons
+ * <NumberInput.Root min={0} max={100} onValueChange={(v) => console.log(v)}>
+ *   <NumberInput.Decrement>-</NumberInput.Decrement>
+ *   <NumberInput.Input />
+ *   <NumberInput.Increment>+</NumberInput.Increment>
+ * </NumberInput.Root>
+ *
+ * // Currency input
+ * <NumberInput.Root format="currency" currency="USD" precision={2}>
+ *   <NumberInput.Input />
+ * </NumberInput.Root>
+ * ```
+ */
+
+export { NumberInputRoot, type NumberInputRootProps } from "./number-input-root.js";
+export { NumberInputField, type NumberInputFieldProps } from "./number-input-field.js";
+export {
+  NumberInputIncrement,
+  type NumberInputIncrementProps,
+} from "./number-input-increment.js";
+export {
+  NumberInputDecrement,
+  type NumberInputDecrementProps,
+} from "./number-input-decrement.js";
+export {
+  useNumberInputContext,
+  type NumberInputContextValue,
+  type NumberInputFormat,
+} from "./number-input-context.js";
+
+export const NumberInput = {
+  Root: NumberInputRoot,
+  Input: NumberInputField,
+  Increment: NumberInputIncrement,
+  Decrement: NumberInputDecrement,
+} as const;
+
+import { NumberInputDecrement } from "./number-input-decrement.js";
+import { NumberInputField } from "./number-input-field.js";
+import { NumberInputIncrement } from "./number-input-increment.js";
+import { NumberInputRoot } from "./number-input-root.js";

package/templates/number-input/number-input-context.ts

@@ -0,0 +1,38 @@
+/**
+ * NumberInput context for compound component pattern.
+ */
+
+import type { NumberInputBehavior } from "@hypoth-ui/primitives-dom";
+import { createCompoundContext } from "../../utils/create-context.js";
+
+export type NumberInputFormat = "decimal" | "currency" | "percent";
+
+export interface NumberInputContextValue {
+  /** NumberInput behavior instance */
+  behavior: NumberInputBehavior;
+  /** Current value */
+  value: number | null;
+  /** Set value */
+  setValue: (value: number | null) => void;
+  /** Min constraint */
+  min: number | undefined;
+  /** Max constraint */
+  max: number | undefined;
+  /** Step */
+  step: number;
+  /** Precision */
+  precision: number;
+  /** Disabled state */
+  disabled: boolean;
+  /** Input value string */
+  inputValue: string;
+  /** Set input value */
+  setInputValue: (value: string) => void;
+  /** Is input focused */
+  isFocused: boolean;
+  /** Set focus state */
+  setIsFocused: (focused: boolean) => void;
+}
+
+export const [NumberInputProvider, useNumberInputContext] =
+  createCompoundContext<NumberInputContextValue>("NumberInput");

package/templates/number-input/number-input-decrement.tsx

@@ -0,0 +1,53 @@
+/**
+ * NumberInput Decrement button component.
+ */
+
+import { type ButtonHTMLAttributes, type MouseEvent, forwardRef, useCallback } from "react";
+import { useNumberInputContext } from "./number-input-context.js";
+
+export interface NumberInputDecrementProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * Button to decrement the number input value.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput.Decrement className="decrement-btn">-</NumberInput.Decrement>
+ * ```
+ */
+export const NumberInputDecrement = forwardRef<HTMLButtonElement, NumberInputDecrementProps>(
+  ({ className, onClick, children, disabled: disabledProp, ...restProps }, ref) => {
+    const { behavior, value, min, disabled, setInputValue } =
+      useNumberInputContext("NumberInput.Decrement");
+
+    const isAtMin = min !== undefined && value !== null && value <= min;
+    const isDisabled = disabled || disabledProp || isAtMin;
+
+    const handleClick = useCallback(
+      (event: MouseEvent<HTMLButtonElement>) => {
+        if (isDisabled) return;
+        behavior.decrement();
+        setInputValue(behavior.state.inputValue);
+        onClick?.(event);
+      },
+      [behavior, isDisabled, setInputValue, onClick]
+    );
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        tabIndex={-1}
+        aria-label="Decrement"
+        disabled={isDisabled}
+        className={className}
+        onClick={handleClick}
+        {...restProps}
+      >
+        {children ?? "−"}
+      </button>
+    );
+  }
+);
+
+NumberInputDecrement.displayName = "NumberInput.Decrement";

package/templates/number-input/number-input-field.tsx

@@ -0,0 +1,93 @@
+/**
+ * NumberInput Field component - the input element.
+ */
+
+import {
+  type ChangeEvent,
+  type FocusEvent,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+} from "react";
+import { useNumberInputContext } from "./number-input-context.js";
+
+export interface NumberInputFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {}
+
+/**
+ * The input field for the number input.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput.Input className="number-input" />
+ * ```
+ */
+export const NumberInputField = forwardRef<HTMLInputElement, NumberInputFieldProps>(
+  ({ className, onBlur, onFocus, onKeyDown, ...restProps }, ref) => {
+    const { behavior, disabled, inputValue, setInputValue, setIsFocused } =
+      useNumberInputContext("NumberInput.Input");
+
+    const inputProps = behavior.getInputProps();
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        const newValue = event.target.value;
+        setInputValue(newValue);
+        behavior.handleInput(newValue);
+      },
+      [behavior, setInputValue]
+    );
+
+    const handleBlur = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        setIsFocused(false);
+        behavior.commit();
+        setInputValue(behavior.state.inputValue);
+        onBlur?.(event);
+      },
+      [behavior, setInputValue, setIsFocused, onBlur]
+    );
+
+    const handleFocus = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        setIsFocused(true);
+        onFocus?.(event);
+      },
+      [setIsFocused, onFocus]
+    );
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLInputElement>) => {
+        behavior.handleKeyDown(event.nativeEvent);
+        setInputValue(behavior.state.inputValue);
+        onKeyDown?.(event);
+      },
+      [behavior, setInputValue, onKeyDown]
+    );
+
+    return (
+      <input
+        ref={ref}
+        type={inputProps.type}
+        inputMode={inputProps.inputMode}
+        role={inputProps.role}
+        value={inputValue}
+        disabled={disabled}
+        aria-valuemin={inputProps["aria-valuemin"]}
+        aria-valuemax={inputProps["aria-valuemax"]}
+        aria-valuenow={inputProps["aria-valuenow"]}
+        aria-disabled={inputProps["aria-disabled"]}
+        aria-invalid={inputProps["aria-invalid"]}
+        className={className}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        {...restProps}
+      />
+    );
+  }
+);
+
+NumberInputField.displayName = "NumberInput.Input";

package/templates/number-input/number-input-increment.tsx

@@ -0,0 +1,53 @@
+/**
+ * NumberInput Increment button component.
+ */
+
+import { type ButtonHTMLAttributes, type MouseEvent, forwardRef, useCallback } from "react";
+import { useNumberInputContext } from "./number-input-context.js";
+
+export interface NumberInputIncrementProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * Button to increment the number input value.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput.Increment className="increment-btn">+</NumberInput.Increment>
+ * ```
+ */
+export const NumberInputIncrement = forwardRef<HTMLButtonElement, NumberInputIncrementProps>(
+  ({ className, onClick, children, disabled: disabledProp, ...restProps }, ref) => {
+    const { behavior, value, max, disabled, setInputValue } =
+      useNumberInputContext("NumberInput.Increment");
+
+    const isAtMax = max !== undefined && value !== null && value >= max;
+    const isDisabled = disabled || disabledProp || isAtMax;
+
+    const handleClick = useCallback(
+      (event: MouseEvent<HTMLButtonElement>) => {
+        if (isDisabled) return;
+        behavior.increment();
+        setInputValue(behavior.state.inputValue);
+        onClick?.(event);
+      },
+      [behavior, isDisabled, setInputValue, onClick]
+    );
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        tabIndex={-1}
+        aria-label="Increment"
+        disabled={isDisabled}
+        className={className}
+        onClick={handleClick}
+        {...restProps}
+      >
+        {children ?? "+"}
+      </button>
+    );
+  }
+);
+
+NumberInputIncrement.displayName = "NumberInput.Increment";