@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/tooltip/tooltip.tsx

@@ -0,0 +1,62 @@
+import type React from "react";
+import { type HTMLAttributes, createElement, forwardRef, useEffect, useRef } from "react";
+import type { Placement } from "./popover.js";
+
+export interface TooltipProps extends HTMLAttributes<HTMLElement> {
+  /** Whether the tooltip is open */
+  open?: boolean;
+  /** Placement relative to trigger */
+  placement?: Placement;
+  /** Offset from trigger in pixels */
+  offset?: number;
+  /** Delay before showing tooltip (ms) */
+  showDelay?: number;
+  /** Delay before hiding tooltip (ms) */
+  hideDelay?: number;
+  /** Tooltip content */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-tooltip Web Component.
+ * Informational tooltip shown on hover/focus.
+ */
+export const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, forwardedRef) => {
+  const {
+    open = false,
+    placement = "top",
+    offset = 8,
+    showDelay = 400,
+    hideDelay = 100,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const internalRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  return createElement(
+    "ds-tooltip",
+    {
+      ref: internalRef,
+      open: open || undefined,
+      placement,
+      offset,
+      "show-delay": showDelay,
+      "hide-delay": hideDelay,
+      class: className,
+      ...rest,
+    },
+    children
+  );
+});
+
+Tooltip.displayName = "Tooltip";

package/templates/tooltip/wc/tooltip-content.ts

@@ -0,0 +1,64 @@
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export type TooltipContentState = "open" | "closed";
+
+/**
+ * Tooltip content container.
+ *
+ * @element ds-tooltip-content
+ *
+ * @slot - Content to display in the tooltip
+ *
+ * @attr {string} data-state - Animation state ("open" or "closed")
+ *
+ * @example
+ * ```html
+ * <ds-tooltip>
+ *   <button slot="trigger">Hover me</button>
+ *   <ds-tooltip-content>Helpful information</ds-tooltip-content>
+ * </ds-tooltip>
+ * ```
+ */
+export class DsTooltipContent extends DSElement {
+  /** Unique ID for ARIA association */
+  @property({ type: String, reflect: true })
+  override id = "";
+
+  /** Animation state (open or closed) - set by parent ds-tooltip */
+  @property({ type: String, reflect: true, attribute: "data-state" })
+  dataState: TooltipContentState = "closed";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID if not set
+    if (!this.id) {
+      this.id = `tooltip-content-${crypto.randomUUID().slice(0, 8)}`;
+    }
+
+    // Set role for accessibility
+    this.setAttribute("role", "tooltip");
+
+    // Hidden by default (parent tooltip controls visibility)
+    this.setAttribute("hidden", "");
+  }
+
+  override render() {
+    return html`
+      <div class="ds-tooltip-content" part="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-tooltip-content", DsTooltipContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-tooltip-content": DsTooltipContent;
+  }
+}

package/templates/tooltip/wc/tooltip.ts

@@ -0,0 +1,289 @@
+import {
+  type AnchorPosition,
+  type Placement,
+  type Presence,
+  createAnchorPosition,
+  createPresence,
+  prefersReducedMotion,
+} from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+// Import child component to ensure it's registered
+import type { DsTooltipContent } from "./tooltip-content.js";
+import "./tooltip-content.js";
+
+/**
+ * Tooltip component with hover/focus trigger and configurable delays.
+ *
+ * Shows informational content on hover or focus with positioning
+ * relative to the trigger element.
+ *
+ * @element ds-tooltip
+ *
+ * @slot trigger - Element that triggers the tooltip
+ * @slot - Tooltip content (ds-tooltip-content)
+ *
+ * @example
+ * ```html
+ * <ds-tooltip>
+ *   <button slot="trigger">Hover for info</button>
+ *   <ds-tooltip-content>Additional information here</ds-tooltip-content>
+ * </ds-tooltip>
+ * ```
+ */
+export class DsTooltip extends DSElement {
+  /** Whether the tooltip is open */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /** Placement relative to trigger */
+  @property({ type: String, reflect: true })
+  placement: Placement = "top";
+
+  /** Offset distance from trigger in pixels */
+  @property({ type: Number })
+  offset = 8;
+
+  /** Delay before showing tooltip (ms) */
+  @property({ type: Number, attribute: "show-delay" })
+  showDelay = 400;
+
+  /** Delay before hiding tooltip (ms) */
+  @property({ type: Number, attribute: "hide-delay" })
+  hideDelay = 100;
+
+  /** Whether to animate open/close transitions */
+  @property({ type: Boolean })
+  animated = true;
+
+  private anchorPosition: AnchorPosition | null = null;
+  private presence: Presence | null = null;
+  private showTimeout: ReturnType<typeof setTimeout> | null = null;
+  private hideTimeout: ReturnType<typeof setTimeout> | null = null;
+  private escapeHandler: ((event: KeyboardEvent) => void) | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Setup after first render
+    this.updateComplete.then(() => {
+      this.setupTriggerListeners();
+      this.setupContentListeners();
+      this.setupTriggerAccessibility();
+      this.setupEscapeHandler();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.cleanup();
+    this.removeEscapeHandler();
+  }
+
+  /**
+   * Shows the tooltip immediately.
+   */
+  public show(): void {
+    this.clearTimeouts();
+    if (this.open) return;
+
+    this.open = true;
+  }
+
+  /**
+   * Hides the tooltip immediately.
+   */
+  public hide(): void {
+    this.clearTimeouts();
+    if (!this.open) return;
+
+    this.cleanup();
+    this.open = false;
+  }
+
+  private clearTimeouts(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+
+  private scheduleShow(): void {
+    this.clearTimeouts();
+    if (this.open) return;
+
+    this.showTimeout = setTimeout(() => {
+      this.open = true;
+      this.showTimeout = null;
+    }, this.showDelay);
+  }
+
+  private scheduleHide(): void {
+    this.clearTimeouts();
+    if (!this.open) return;
+
+    this.hideTimeout = setTimeout(() => {
+      const content = this.querySelector("ds-tooltip-content") as DsTooltipContent | null;
+
+      // If animated, use presence for exit animation
+      if (this.animated && content && !prefersReducedMotion()) {
+        this.presence = createPresence({
+          onExitComplete: () => {
+            this.cleanup();
+            this.open = false;
+          },
+        });
+        this.presence.hide(content);
+      } else {
+        this.cleanup();
+        this.open = false;
+      }
+      this.hideTimeout = null;
+    }, this.hideDelay);
+  }
+
+  private handleTriggerMouseEnter = (): void => {
+    this.scheduleShow();
+  };
+
+  private handleTriggerMouseLeave = (): void => {
+    this.scheduleHide();
+  };
+
+  private handleTriggerFocusIn = (): void => {
+    this.scheduleShow();
+  };
+
+  private handleTriggerFocusOut = (): void => {
+    this.scheduleHide();
+  };
+
+  private handleContentMouseEnter = (): void => {
+    // Cancel hide when mouse enters tooltip content (hover persistence)
+    this.clearTimeouts();
+  };
+
+  private handleContentMouseLeave = (): void => {
+    this.scheduleHide();
+  };
+
+  private setupTriggerListeners(): void {
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (!trigger) return;
+
+    trigger.addEventListener("mouseenter", this.handleTriggerMouseEnter);
+    trigger.addEventListener("mouseleave", this.handleTriggerMouseLeave);
+    trigger.addEventListener("focusin", this.handleTriggerFocusIn);
+    trigger.addEventListener("focusout", this.handleTriggerFocusOut);
+  }
+
+  private setupContentListeners(): void {
+    const content = this.querySelector("ds-tooltip-content");
+    if (!content) return;
+
+    content.addEventListener("mouseenter", this.handleContentMouseEnter);
+    content.addEventListener("mouseleave", this.handleContentMouseLeave);
+  }
+
+  private setupTriggerAccessibility(): void {
+    const trigger = this.querySelector('[slot="trigger"]');
+    const content = this.querySelector("ds-tooltip-content");
+
+    if (trigger && content) {
+      // Set aria-describedby on trigger pointing to tooltip content
+      trigger.setAttribute("aria-describedby", content.id);
+    }
+  }
+
+  private setupEscapeHandler(): void {
+    this.escapeHandler = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && this.open) {
+        event.preventDefault();
+        this.hide();
+      }
+    };
+    document.addEventListener("keydown", this.escapeHandler);
+  }
+
+  private removeEscapeHandler(): void {
+    if (this.escapeHandler) {
+      document.removeEventListener("keydown", this.escapeHandler);
+      this.escapeHandler = null;
+    }
+  }
+
+  private setupPositioning(): void {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    const content = this.querySelector("ds-tooltip-content") as HTMLElement | null;
+
+    if (!trigger || !content) return;
+
+    this.anchorPosition = createAnchorPosition({
+      anchor: trigger,
+      floating: content,
+      placement: this.placement,
+      offset: this.offset,
+      flip: true,
+      onPositionChange: (pos) => {
+        content.setAttribute("data-placement", pos.placement);
+      },
+    });
+  }
+
+  private cleanup(): void {
+    this.clearTimeouts();
+    this.anchorPosition?.destroy();
+    this.anchorPosition = null;
+    this.presence?.destroy();
+    this.presence = null;
+  }
+
+  override async updated(changedProperties: Map<string, unknown>): Promise<void> {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("open")) {
+      const content = this.querySelector("ds-tooltip-content") as DsTooltipContent | null;
+
+      if (this.open) {
+        // Show content
+        content?.removeAttribute("hidden");
+
+        // Set data-state to open for entry animation
+        if (content) {
+          content.dataState = "open";
+        }
+
+        // Wait for DOM update
+        await this.updateComplete;
+
+        // Setup positioning
+        this.setupPositioning();
+      } else {
+        // Hide content
+        content?.setAttribute("hidden", "");
+      }
+    }
+  }
+
+  override render() {
+    return html`
+      <slot name="trigger"></slot>
+      <slot></slot>
+    `;
+  }
+}
+
+define("ds-tooltip", DsTooltip);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-tooltip": DsTooltip;
+  }
+}

package/templates/tree/index.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+/**
+ * Tree compound component exports
+ */
+
+import { TreeItem } from "./tree-item.js";
+import { TreeRoot } from "./tree.js";
+
+export type { TreeRootProps, TreeSelectionMode, TreeSize } from "./tree.js";
+export type { TreeItemProps } from "./tree-item.js";
+
+/**
+ * Tree compound component for hierarchical data display.
+ *
+ * @example
+ * ```tsx
+ * <Tree selectionMode="single" onSelectionChange={(ids) => console.log(ids)}>
+ *   <Tree.Item itemId="1">
+ *     Documents
+ *     <div slot="children">
+ *       <Tree.Item itemId="1-1">Work</Tree.Item>
+ *       <Tree.Item itemId="1-2">Personal</Tree.Item>
+ *     </div>
+ *   </Tree.Item>
+ *   <Tree.Item itemId="2">Pictures</Tree.Item>
+ * </Tree>
+ * ```
+ */
+export const Tree = Object.assign(TreeRoot, {
+  Item: TreeItem,
+});
+
+export { TreeItem };
+
+// TypeScript declarations for JSX
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "ds-tree": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+        ref?: React.Ref<HTMLElement>;
+        "selection-mode"?: string;
+        size?: string;
+        lines?: boolean;
+        label?: string;
+        "onDs-selection-change"?: (event: CustomEvent) => void;
+      };
+      "ds-tree-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+        ref?: React.Ref<HTMLElement>;
+        "item-id"?: string;
+        expanded?: boolean;
+        selected?: boolean;
+        disabled?: boolean;
+        "onDs-expand"?: (event: CustomEvent) => void;
+        "onDs-select"?: (event: CustomEvent) => void;
+        "onDs-activate"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/templates/tree/tree-item.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useEffect,
+  useRef,
+} from "react";
+import "@hypoth-ui/wc";
+
+export interface TreeItemProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+  /**
+   * Unique item ID.
+   */
+  itemId?: string;
+
+  /**
+   * Whether item is expanded.
+   * @default false
+   */
+  expanded?: boolean;
+
+  /**
+   * Whether item is selected.
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Whether item is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Callback when expand state changes.
+   */
+  onExpand?: (itemId: string, expanded: boolean) => void;
+
+  /**
+   * Callback when item is selected.
+   */
+  onItemSelect?: (itemId: string, selected: boolean) => void;
+
+  /**
+   * Callback when item is activated (Enter/double-click).
+   */
+  onActivate?: (itemId: string) => void;
+
+  /**
+   * Item label content.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Tree item component for hierarchical nodes.
+ */
+export const TreeItem = forwardRef<HTMLElement, TreeItemProps>(function TreeItem(
+  {
+    itemId,
+    expanded = false,
+    selected = false,
+    disabled = false,
+    onExpand,
+    onItemSelect,
+    onActivate,
+    children,
+    className,
+    ...props
+  },
+  forwardedRef
+) {
+  const internalRef = useRef<HTMLElement>(null);
+
+  // Sync forwarded ref
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  // Set up event listeners
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element) return;
+
+    const handleExpand = (e: Event) => {
+      const event = e as CustomEvent<{ itemId: string; expanded: boolean }>;
+      onExpand?.(event.detail.itemId, event.detail.expanded);
+    };
+
+    const handleSelect = (e: Event) => {
+      const event = e as CustomEvent<{ itemId: string; selected: boolean }>;
+      onItemSelect?.(event.detail.itemId, event.detail.selected);
+    };
+
+    const handleActivate = (e: Event) => {
+      const event = e as CustomEvent<{ itemId: string }>;
+      onActivate?.(event.detail.itemId);
+    };
+
+    element.addEventListener("ds:expand", handleExpand);
+    element.addEventListener("ds:select", handleSelect);
+    element.addEventListener("ds:activate", handleActivate);
+
+    return () => {
+      element.removeEventListener("ds:expand", handleExpand);
+      element.removeEventListener("ds:select", handleSelect);
+      element.removeEventListener("ds:activate", handleActivate);
+    };
+  }, [onExpand, onItemSelect, onActivate]);
+
+  return createElement(
+    "ds-tree-item",
+    {
+      ref: internalRef,
+      "item-id": itemId,
+      expanded: expanded || undefined,
+      selected: selected || undefined,
+      disabled: disabled || undefined,
+      class: className,
+      ...props,
+    },
+    children
+  );
+});