@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/dialog/dialog-root.tsx

@@ -0,0 +1,104 @@
+/**
+ * Dialog Root component - provides context to all Dialog compound components.
+ */
+
+import { type DialogRole, createDialogBehavior } from "@hypoth-ui/primitives-dom";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { useStableId } from "../../hooks/use-stable-id.js";
+import { DialogProvider } from "./dialog-context.js";
+
+export interface DialogRootProps {
+  /** Dialog content */
+  children?: ReactNode;
+  /** Custom ID for the dialog (SSR-safe auto-generated if not provided) */
+  id?: string;
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean;
+  /** Called when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Dialog role */
+  role?: DialogRole;
+  /** Whether dialog is modal (traps focus) */
+  modal?: boolean;
+}
+
+/**
+ * Root component for Dialog compound pattern.
+ * Provides context to Trigger, Content, Title, Description, and Close.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger>Open</Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Title>Dialog Title</Dialog.Title>
+ *     <Dialog.Description>Dialog description</Dialog.Description>
+ *     <Dialog.Close>Close</Dialog.Close>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+export function DialogRoot({
+  children,
+  id,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  role = "dialog",
+  modal = true,
+}: DialogRootProps) {
+  // Generate SSR-safe stable ID using React 18's useId under the hood
+  const stableId = useStableId({ id, prefix: "dialog" });
+
+  // Support both controlled and uncontrolled modes
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  // Track description presence for aria-describedby
+  const [descriptionId, setDescriptionId] = useState<string | null>(null);
+
+  const setOpen = useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  // Create behavior instance - intentionally created once with initial values
+  // biome-ignore lint/correctness/useExhaustiveDependencies: behavior is created once, open state synced via setOpen callback
+  const behavior = useMemo(
+    () =>
+      createDialogBehavior({
+        defaultOpen: open,
+        role,
+        closeOnEscape: true,
+        closeOnOutsideClick: true,
+        onOpenChange: setOpen,
+        // Use SSR-safe stable ID generator
+        generateId: () => stableId,
+      }),
+    [stableId]
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      behavior,
+      open,
+      setOpen,
+      modal,
+      descriptionId,
+      setDescriptionId,
+    }),
+    [behavior, open, setOpen, modal, descriptionId]
+  );
+
+  return <DialogProvider value={contextValue}>{children}</DialogProvider>;
+}
+
+DialogRoot.displayName = "Dialog.Root";

package/templates/dialog/dialog-title.tsx

@@ -0,0 +1,38 @@
+/**
+ * Dialog Title component - accessible title for the dialog.
+ */
+
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import { useDialogContext } from "./dialog-context.js";
+
+export interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  /** Title content */
+  children?: ReactNode;
+}
+
+/**
+ * Accessible title for the dialog.
+ * Automatically linked to dialog via aria-labelledby.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Content>
+ *   <Dialog.Title>Confirm Action</Dialog.Title>
+ *   ...
+ * </Dialog.Content>
+ * ```
+ */
+export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ children, ...restProps }, ref) => {
+    const { behavior } = useDialogContext("Dialog.Title");
+    const titleProps = behavior.getTitleProps();
+
+    return (
+      <h2 ref={ref} id={titleProps.id} {...restProps}>
+        {children}
+      </h2>
+    );
+  }
+);
+
+DialogTitle.displayName = "Dialog.Title";

package/templates/dialog/dialog-trigger.tsx

@@ -0,0 +1,94 @@
+/**
+ * Dialog Trigger component - opens the dialog when activated.
+ */
+
+import {
+  type ButtonHTMLAttributes,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { Slot } from "../../primitives/slot.js";
+import { useDialogContext } from "./dialog-context.js";
+
+export interface DialogTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Trigger content */
+  children?: ReactNode;
+  /** Render as child element (polymorphic) */
+  asChild?: boolean;
+}
+
+/**
+ * Trigger button that opens the dialog.
+ * Supports asChild for custom trigger elements.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *
+ * <Dialog.Trigger asChild>
+ *   <button className="custom-button">Custom Trigger</button>
+ * </Dialog.Trigger>
+ * ```
+ */
+export const DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(
+  ({ children, asChild = false, onClick, ...restProps }, ref) => {
+    const { behavior, open, setOpen } = useDialogContext("Dialog.Trigger");
+    const internalRef = useRef<HTMLButtonElement>(null);
+
+    // Register trigger element with behavior
+    useEffect(() => {
+      const element = internalRef.current;
+      behavior.setTriggerElement(element);
+      return () => {
+        behavior.setTriggerElement(null);
+      };
+    }, [behavior]);
+
+    // Handle click to open dialog
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        setOpen(true);
+        onClick?.(event);
+      },
+      [setOpen, onClick]
+    );
+
+    // Get trigger props from behavior
+    const triggerProps = behavior.getTriggerProps();
+
+    const Component = asChild ? Slot : "button";
+
+    // Merge refs
+    const mergedRef = useCallback(
+      (element: HTMLButtonElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLButtonElement | null>).current = element;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLButtonElement | null>).current = element;
+        }
+      },
+      [ref]
+    );
+
+    return (
+      <Component
+        ref={mergedRef}
+        type={asChild ? undefined : "button"}
+        id={triggerProps.id}
+        aria-haspopup={triggerProps["aria-haspopup"]}
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={triggerProps["aria-controls"]}
+        onClick={handleClick}
+        {...restProps}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+DialogTrigger.displayName = "Dialog.Trigger";

package/templates/dialog/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Dialog compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Dialog } from "@/components/ui";
+ *
+ * <Dialog.Root>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Title>Dialog Title</Dialog.Title>
+ *     <Dialog.Description>Dialog description</Dialog.Description>
+ *     <Dialog.Close>Close</Dialog.Close>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+
+import { DialogClose, type DialogCloseProps } from "./dialog-close.js";
+import {
+  DialogContent,
+  type DialogContentProps,
+  type DialogContentSize,
+} from "./dialog-content.js";
+import { DialogDescription, type DialogDescriptionProps } from "./dialog-description.js";
+import { DialogRoot, type DialogRootProps } from "./dialog-root.js";
+import { DialogTitle, type DialogTitleProps } from "./dialog-title.js";
+import { DialogTrigger, type DialogTriggerProps } from "./dialog-trigger.js";
+
+// Compound component
+export const Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+};
+
+// Type exports
+export type {
+  DialogCloseProps,
+  DialogContentProps,
+  DialogContentSize,
+  DialogDescriptionProps,
+  DialogRootProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+};
+
+// Re-export DialogRole from primitives-dom
+export type { DialogRole } from "@hypoth-ui/primitives-dom";

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

@@ -0,0 +1,59 @@
+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 DialogContentSize = "sm" | "md" | "lg" | "xl" | "full";
+export type DialogContentState = "open" | "closed";
+
+/**
+ * Dialog content container component.
+ *
+ * Contains the dialog's content including title, description, and actions.
+ * Receives accessibility attributes from parent ds-dialog.
+ *
+ * @element ds-dialog-content
+ *
+ * @slot - Dialog content (title, description, body, actions)
+ *
+ * @csspart container - The content container element
+ *
+ * @attr {string} data-state - Animation state ("open" or "closed")
+ *
+ * @example
+ * ```html
+ * <ds-dialog-content size="lg">
+ *   <ds-dialog-title>Large Dialog</ds-dialog-title>
+ *   <p>Dialog body content here.</p>
+ *   <div class="ds-dialog__footer">
+ *     <button>Cancel</button>
+ *     <button>Confirm</button>
+ *   </div>
+ * </ds-dialog-content>
+ * ```
+ */
+export class DsDialogContent extends DSElement {
+  /** Size variant of the dialog */
+  @property({ type: String, reflect: true })
+  size: DialogContentSize = "md";
+
+  /** Animation state (open or closed) - set by parent ds-dialog */
+  @property({ type: String, reflect: true, attribute: "data-state" })
+  dataState: DialogContentState = "open";
+
+  override render() {
+    return html`
+      <div class="ds-dialog-content" part="container" data-size=${this.size}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-dialog-content", DsDialogContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dialog-content": DsDialogContent;
+  }
+}

package/templates/dialog/wc/dialog-description.ts

@@ -0,0 +1,58 @@
+import { html, nothing } from "lit";
+import { state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Dialog description component.
+ *
+ * Renders the dialog's accessible description. The parent ds-dialog
+ * automatically connects this to the dialog content via aria-describedby.
+ *
+ * @element ds-dialog-description
+ *
+ * @csspart description - The description element
+ *
+ * @example
+ * ```html
+ * <ds-dialog-description>
+ *   This action cannot be undone.
+ * </ds-dialog-description>
+ * ```
+ */
+export class DsDialogDescription extends DSElement {
+  /** Preserved text content from initial children */
+  @state()
+  private descriptionText = "";
+
+  override connectedCallback(): void {
+    // Capture original text content before Lit renders
+    this.descriptionText = this.textContent?.trim() ?? "";
+
+    super.connectedCallback();
+
+    // Generate ID if not provided
+    if (!this.id) {
+      this.id = `dialog-desc-${crypto.randomUUID().slice(0, 8)}`;
+    }
+  }
+
+  override render() {
+    // Only render p if there's content
+    if (!this.descriptionText) {
+      return nothing;
+    }
+
+    return html`
+      <p class="ds-dialog-description" part="description">${this.descriptionText}</p>
+    `;
+  }
+}
+
+define("ds-dialog-description", DsDialogDescription);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dialog-description": DsDialogDescription;
+  }
+}

package/templates/dialog/wc/dialog-title.ts

@@ -0,0 +1,56 @@
+import { html, nothing } from "lit";
+import { state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Dialog title component.
+ *
+ * Renders the dialog's accessible title. The parent ds-dialog
+ * automatically connects this to the dialog content via aria-labelledby.
+ *
+ * @element ds-dialog-title
+ *
+ * @csspart title - The title element
+ *
+ * @example
+ * ```html
+ * <ds-dialog-title>Confirm Deletion</ds-dialog-title>
+ * ```
+ */
+export class DsDialogTitle extends DSElement {
+  /** Preserved text content from initial children */
+  @state()
+  private titleText = "";
+
+  override connectedCallback(): void {
+    // Capture original text content before Lit renders
+    this.titleText = this.textContent?.trim() ?? "";
+
+    super.connectedCallback();
+
+    // Generate ID if not provided
+    if (!this.id) {
+      this.id = `dialog-title-${crypto.randomUUID().slice(0, 8)}`;
+    }
+  }
+
+  override render() {
+    // Only render h2 if there's content (avoid empty heading a11y violation)
+    if (!this.titleText) {
+      return nothing;
+    }
+
+    return html`
+      <h2 class="ds-dialog-title" part="title">${this.titleText}</h2>
+    `;
+  }
+}
+
+define("ds-dialog-title", DsDialogTitle);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dialog-title": DsDialogTitle;
+  }
+}