@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/navigation-menu/index.tsx

@@ -0,0 +1,328 @@
+/**
+ * NavigationMenu compound component exports.
+ *
+ * NavigationMenu provides mega-menu style navigation with smooth transitions.
+ *
+ * @example
+ * ```tsx
+ * import { NavigationMenu } from "@/components/ui";
+ *
+ * <NavigationMenu.Root>
+ *   <NavigationMenu.List>
+ *     <NavigationMenu.Item value="products">
+ *       <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
+ *       <NavigationMenu.Content>
+ *         <NavigationMenu.Link href="/products/a">Product A</NavigationMenu.Link>
+ *       </NavigationMenu.Content>
+ *     </NavigationMenu.Item>
+ *   </NavigationMenu.List>
+ *   <NavigationMenu.Viewport />
+ * </NavigationMenu.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type NavigationMenuOrientation = "horizontal" | "vertical";
+
+export interface NavigationMenuRootProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Controlled active value */
+  value?: string;
+  /** Default active value (uncontrolled) */
+  defaultValue?: string;
+  /** Called when active value changes */
+  onValueChange?: (value: string) => void;
+  /** Delay in ms before opening on hover */
+  delayDuration?: number;
+  /** Delay in ms before closing when pointer leaves */
+  skipDelayDuration?: number;
+  /** Orientation (horizontal or vertical) */
+  orientation?: NavigationMenuOrientation;
+}
+
+export interface NavigationMenuListProps extends HTMLAttributes<HTMLElement> {
+  /** List items */
+  children?: ReactNode;
+}
+
+export interface NavigationMenuItemProps extends HTMLAttributes<HTMLElement> {
+  /** Item content */
+  children?: ReactNode;
+  /** Unique value for this item */
+  value: string;
+}
+
+export interface NavigationMenuTriggerProps extends HTMLAttributes<HTMLElement> {
+  /** Trigger content */
+  children?: ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export interface NavigationMenuContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+}
+
+export interface NavigationMenuLinkProps extends HTMLAttributes<HTMLElement> {
+  /** Link content */
+  children?: ReactNode;
+  /** URL to navigate to */
+  href?: string;
+  /** Whether this link is currently active */
+  active?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Called when link is clicked */
+  onNavigate?: (href: string) => void;
+}
+
+export interface NavigationMenuIndicatorProps extends HTMLAttributes<HTMLElement> {}
+
+export interface NavigationMenuViewportProps extends HTMLAttributes<HTMLElement> {}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * NavigationMenu root component.
+ */
+const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(
+  function NavigationMenuRoot(
+    {
+      children,
+      className,
+      value: controlledValue,
+      defaultValue = "",
+      onValueChange,
+      delayDuration = 200,
+      skipDelayDuration = 300,
+      orientation = "horizontal",
+      ...props
+    },
+    ref
+  ) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const elementRef = useRef<HTMLElement>(null);
+
+    // Combine refs
+    const combinedRef = (node: HTMLElement | null) => {
+      (elementRef as React.MutableRefObject<HTMLElement | null>).current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+      }
+    };
+
+    const handleValueChange = useCallback(
+      (event: Event) => {
+        const customEvent = event as CustomEvent<{ value: string }>;
+        const newValue = customEvent.detail.value;
+
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [isControlled, onValueChange]
+    );
+
+    // Attach event listeners
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+
+      element.addEventListener("ds:value-change", handleValueChange);
+
+      return () => {
+        element.removeEventListener("ds:value-change", handleValueChange);
+      };
+    }, [handleValueChange]);
+
+    return createElement(
+      "ds-navigation-menu",
+      {
+        ref: combinedRef,
+        class: className,
+        value,
+        "delay-duration": delayDuration,
+        "skip-delay-duration": skipDelayDuration,
+        orientation,
+        ...props,
+      },
+      children
+    );
+  }
+);
+NavigationMenuRoot.displayName = "NavigationMenu.Root";
+
+/**
+ * NavigationMenu list component.
+ */
+const NavigationMenuList = forwardRef<HTMLElement, NavigationMenuListProps>(
+  function NavigationMenuList({ children, className, ...props }, ref) {
+    return createElement("ds-navigation-menu-list", { ref, class: className, ...props }, children);
+  }
+);
+NavigationMenuList.displayName = "NavigationMenu.List";
+
+/**
+ * NavigationMenu item component.
+ */
+const NavigationMenuItem = forwardRef<HTMLElement, NavigationMenuItemProps>(
+  function NavigationMenuItem({ children, className, value, ...props }, ref) {
+    return createElement(
+      "ds-navigation-menu-item",
+      { ref, class: className, value, ...props },
+      children
+    );
+  }
+);
+NavigationMenuItem.displayName = "NavigationMenu.Item";
+
+/**
+ * NavigationMenu trigger component.
+ */
+const NavigationMenuTrigger = forwardRef<HTMLElement, NavigationMenuTriggerProps>(
+  function NavigationMenuTrigger({ children, className, disabled = false, ...props }, ref) {
+    return createElement(
+      "ds-navigation-menu-trigger",
+      { ref, class: className, disabled: disabled || undefined, ...props },
+      children
+    );
+  }
+);
+NavigationMenuTrigger.displayName = "NavigationMenu.Trigger";
+
+/**
+ * NavigationMenu content component.
+ */
+const NavigationMenuContent = forwardRef<HTMLElement, NavigationMenuContentProps>(
+  function NavigationMenuContent({ children, className, ...props }, ref) {
+    return createElement(
+      "ds-navigation-menu-content",
+      { ref, class: className, ...props },
+      children
+    );
+  }
+);
+NavigationMenuContent.displayName = "NavigationMenu.Content";
+
+/**
+ * NavigationMenu link component.
+ */
+const NavigationMenuLink = forwardRef<HTMLElement, NavigationMenuLinkProps>(
+  function NavigationMenuLink(
+    { children, className, href, active = false, disabled = false, onNavigate, ...props },
+    ref
+  ) {
+    const elementRef = useRef<HTMLElement>(null);
+
+    // Combine refs
+    const combinedRef = (node: HTMLElement | null) => {
+      (elementRef as React.MutableRefObject<HTMLElement | null>).current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+      }
+    };
+
+    // Attach navigate handler
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element || !onNavigate) return;
+
+      const handleNavigate = (event: Event) => {
+        event.preventDefault();
+        const customEvent = event as CustomEvent<{ href: string }>;
+        onNavigate(customEvent.detail.href);
+      };
+      element.addEventListener("ds:navigate", handleNavigate);
+
+      return () => {
+        element.removeEventListener("ds:navigate", handleNavigate);
+      };
+    }, [onNavigate]);
+
+    return createElement(
+      "ds-navigation-menu-link",
+      {
+        ref: combinedRef,
+        class: className,
+        href,
+        active: active || undefined,
+        disabled: disabled || undefined,
+        ...props,
+      },
+      children
+    );
+  }
+);
+NavigationMenuLink.displayName = "NavigationMenu.Link";
+
+/**
+ * NavigationMenu indicator component.
+ */
+const NavigationMenuIndicator = forwardRef<HTMLElement, NavigationMenuIndicatorProps>(
+  function NavigationMenuIndicator({ className, ...props }, ref) {
+    return createElement("ds-navigation-menu-indicator", { ref, class: className, ...props });
+  }
+);
+NavigationMenuIndicator.displayName = "NavigationMenu.Indicator";
+
+/**
+ * NavigationMenu viewport component.
+ */
+const NavigationMenuViewport = forwardRef<HTMLElement, NavigationMenuViewportProps>(
+  function NavigationMenuViewport({ className, ...props }, ref) {
+    return createElement("ds-navigation-menu-viewport", { ref, class: className, ...props });
+  }
+);
+NavigationMenuViewport.displayName = "NavigationMenu.Viewport";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const NavigationMenu = {
+  Root: NavigationMenuRoot,
+  List: NavigationMenuList,
+  Item: NavigationMenuItem,
+  Trigger: NavigationMenuTrigger,
+  Content: NavigationMenuContent,
+  Link: NavigationMenuLink,
+  Indicator: NavigationMenuIndicator,
+  Viewport: NavigationMenuViewport,
+};
+
+// Also export individual components
+export {
+  NavigationMenuRoot,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};

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

@@ -0,0 +1,12 @@
+/**
+ * NavigationMenu component exports.
+ */
+
+export { DsNavigationMenu } from "./navigation-menu.js";
+export { DsNavigationMenuList } from "./navigation-menu-list.js";
+export { DsNavigationMenuItem } from "./navigation-menu-item.js";
+export { DsNavigationMenuTrigger } from "./navigation-menu-trigger.js";
+export { DsNavigationMenuContent } from "./navigation-menu-content.js";
+export { DsNavigationMenuLink } from "./navigation-menu-link.js";
+export { DsNavigationMenuIndicator } from "./navigation-menu-indicator.js";
+export { DsNavigationMenuViewport } from "./navigation-menu-viewport.js";

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

@@ -0,0 +1,30 @@
+/**
+ * NavigationMenuContent component - dropdown content panel.
+ *
+ * @element ds-navigation-menu-content
+ *
+ * @slot - Content (links, cards, etc.)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsNavigationMenuContent extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-navigation-menu-content", DsNavigationMenuContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu-content": DsNavigationMenuContent;
+  }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * NavigationMenuIndicator component - visual indicator for active item.
+ *
+ * Shows which navigation item is currently active/hovered.
+ *
+ * @element ds-navigation-menu-indicator
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsNavigationMenuIndicator extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("aria-hidden", "true");
+  }
+
+  override render() {
+    return html`<div class="ds-navigation-menu-indicator__arrow"></div>`;
+  }
+}
+
+define("ds-navigation-menu-indicator", DsNavigationMenuIndicator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu-indicator": DsNavigationMenuIndicator;
+  }
+}

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

@@ -0,0 +1,60 @@
+/**
+ * NavigationMenuItem component - wrapper for trigger and content.
+ *
+ * @element ds-navigation-menu-item
+ *
+ * @slot - Trigger and content
+ */
+
+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";
+
+export class DsNavigationMenuItem extends DSElement {
+  /** Unique value for this item */
+  @property({ type: String, reflect: true })
+  value = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "none");
+    this.setAttribute("data-state", "closed");
+
+    this.addEventListener("mouseenter", this.handleMouseEnter);
+    this.addEventListener("mouseleave", this.handleMouseLeave);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.removeEventListener("mouseleave", this.handleMouseLeave);
+  }
+
+  private handleMouseEnter = (): void => {
+    emitEvent(this, "ds:navigation-item-enter", {
+      detail: { value: this.value },
+      bubbles: true,
+    });
+  };
+
+  private handleMouseLeave = (): void => {
+    emitEvent(this, "ds:navigation-item-leave", {
+      detail: { value: this.value },
+      bubbles: true,
+    });
+  };
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-navigation-menu-item", DsNavigationMenuItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu-item": DsNavigationMenuItem;
+  }
+}

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

@@ -0,0 +1,97 @@
+/**
+ * NavigationMenuLink component - navigation link.
+ *
+ * @element ds-navigation-menu-link
+ *
+ * @slot - Link content
+ *
+ * @fires ds:navigate - Fired when link is clicked (for SPA navigation)
+ */
+
+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";
+
+export class DsNavigationMenuLink extends DSElement {
+  /** URL to navigate to */
+  @property({ type: String, reflect: true })
+  href = "";
+
+  /** Whether this link is currently active */
+  @property({ type: Boolean, reflect: true })
+  active = false;
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("tabindex", "0");
+
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  private handleClick = (event: MouseEvent): void => {
+    if (this.disabled) return;
+
+    // Emit navigate event for SPA handling
+    const navigateEvent = emitEvent(this, "ds:navigate", {
+      detail: { href: this.href },
+      bubbles: true,
+      cancelable: true,
+    });
+
+    // If not canceled and has href, do native navigation
+    if (!navigateEvent.defaultPrevented && this.href) {
+      // Allow Ctrl/Cmd+click for new tab
+      if (event.ctrlKey || event.metaKey) {
+        window.open(this.href, "_blank");
+      } else {
+        window.location.href = this.href;
+      }
+    }
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick(new MouseEvent("click"));
+    }
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("active")) {
+      this.setAttribute("aria-current", this.active ? "page" : "false");
+    }
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-navigation-menu-link", DsNavigationMenuLink);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu-link": DsNavigationMenuLink;
+  }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * NavigationMenuList component - container for navigation items.
+ *
+ * @element ds-navigation-menu-list
+ *
+ * @slot - Navigation menu items
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsNavigationMenuList extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "menubar");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-navigation-menu-list", DsNavigationMenuList);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu-list": DsNavigationMenuList;
+  }
+}

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

@@ -0,0 +1,110 @@
+/**
+ * NavigationMenuTrigger component - button that opens content panel.
+ *
+ * @element ds-navigation-menu-trigger
+ *
+ * @slot - Trigger content
+ */
+
+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";
+
+export class DsNavigationMenuTrigger extends DSElement {
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  private observer: MutationObserver | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("aria-haspopup", "menu");
+    this.updateAriaExpanded();
+
+    // Observe parent item's data-state changes to update aria-expanded
+    const item = this.closest("ds-navigation-menu-item");
+    if (item) {
+      this.observer = new MutationObserver(() => {
+        this.updateAriaExpanded();
+      });
+      this.observer.observe(item, { attributes: true, attributeFilter: ["data-state"] });
+    }
+
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+
+  /**
+   * Update aria-expanded based on parent item's state.
+   * Per APG, menuitem with submenu should have aria-expanded.
+   */
+  private updateAriaExpanded(): void {
+    const item = this.closest("ds-navigation-menu-item");
+    const isOpen = item?.getAttribute("data-state") === "open";
+    this.setAttribute("aria-expanded", String(isOpen));
+  }
+
+  private getItemValue(): string {
+    const item = this.closest("ds-navigation-menu-item");
+    return item?.getAttribute("value") || "";
+  }
+
+  private handleClick = (): void => {
+    if (this.disabled) return;
+
+    const value = this.getItemValue();
+    emitEvent(this, "ds:navigation-trigger", {
+      detail: { value, type: "click" },
+      bubbles: true,
+    });
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const value = this.getItemValue();
+      emitEvent(this, "ds:navigation-trigger", {
+        detail: { value, type: "focus" },
+        bubbles: true,
+      });
+    }
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-navigation-menu-trigger", DsNavigationMenuTrigger);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-navigation-menu-trigger": DsNavigationMenuTrigger;
+  }
+}