@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/alert-dialog/index.tsx

@@ -0,0 +1,360 @@
+/**
+ * AlertDialog compound component exports.
+ *
+ * AlertDialog is used for important confirmations that require explicit user action.
+ * Unlike Dialog, it cannot be dismissed by clicking outside or pressing Escape.
+ *
+ * @example
+ * ```tsx
+ * import { AlertDialog } from "@/components/ui";
+ *
+ * <AlertDialog.Root>
+ *   <AlertDialog.Trigger>
+ *     <button>Delete Account</button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Header>
+ *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+ *       <AlertDialog.Description>
+ *         This action cannot be undone.
+ *       </AlertDialog.Description>
+ *     </AlertDialog.Header>
+ *     <AlertDialog.Footer>
+ *       <AlertDialog.Cancel>
+ *         <button>Cancel</button>
+ *       </AlertDialog.Cancel>
+ *       <AlertDialog.Action>
+ *         <button>Delete</button>
+ *       </AlertDialog.Action>
+ *     </AlertDialog.Footer>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type AlertDialogContentSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface AlertDialogRootProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean;
+  /** Called when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether to animate open/close transitions */
+  animated?: boolean;
+}
+
+export interface AlertDialogTriggerProps extends HTMLAttributes<HTMLElement> {
+  /** Trigger content (typically a button) */
+  children?: ReactNode;
+}
+
+export interface AlertDialogContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Size of the content */
+  size?: AlertDialogContentSize;
+}
+
+export interface AlertDialogHeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Header content */
+  children?: ReactNode;
+}
+
+export interface AlertDialogFooterProps extends HTMLAttributes<HTMLElement> {
+  /** Footer content */
+  children?: ReactNode;
+}
+
+export interface AlertDialogTitleProps extends HTMLAttributes<HTMLElement> {
+  /** Title content */
+  children?: ReactNode;
+}
+
+export interface AlertDialogDescriptionProps extends HTMLAttributes<HTMLElement> {
+  /** Description content */
+  children?: ReactNode;
+}
+
+export interface AlertDialogActionProps extends HTMLAttributes<HTMLElement> {
+  /** Action button content */
+  children?: ReactNode;
+  /** Called when action is clicked */
+  onClick?: () => void;
+}
+
+export interface AlertDialogCancelProps extends HTMLAttributes<HTMLElement> {
+  /** Cancel button content */
+  children?: ReactNode;
+  /** Called when cancel is clicked */
+  onClick?: () => void;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * AlertDialog root component.
+ */
+const AlertDialogRoot = forwardRef<HTMLElement, AlertDialogRootProps>(function AlertDialogRoot(
+  {
+    children,
+    className,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    animated = true,
+    ...props
+  },
+  ref
+) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  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 handleOpenChange = useCallback(
+    (event: Event) => {
+      const customEvent = event as CustomEvent;
+      const isOpen = customEvent.type === "ds:open";
+
+      if (!isControlled) {
+        setInternalOpen(isOpen);
+      }
+      onOpenChange?.(isOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  // Attach event listeners
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    element.addEventListener("ds:open", handleOpenChange);
+    element.addEventListener("ds:close", handleOpenChange);
+
+    return () => {
+      element.removeEventListener("ds:open", handleOpenChange);
+      element.removeEventListener("ds:close", handleOpenChange);
+    };
+  }, [handleOpenChange]);
+
+  return createElement(
+    "ds-alert-dialog",
+    {
+      ref: combinedRef,
+      class: className,
+      open: open || undefined,
+      animated: animated || undefined,
+      ...props,
+    },
+    children
+  );
+});
+AlertDialogRoot.displayName = "AlertDialog.Root";
+
+/**
+ * AlertDialog trigger component.
+ */
+const AlertDialogTrigger = forwardRef<HTMLElement, AlertDialogTriggerProps>(
+  function AlertDialogTrigger({ children, className, ...props }, ref) {
+    return createElement("ds-alert-dialog-trigger", { ref, class: className, ...props }, children);
+  }
+);
+AlertDialogTrigger.displayName = "AlertDialog.Trigger";
+
+/**
+ * AlertDialog content component.
+ */
+const AlertDialogContent = forwardRef<HTMLElement, AlertDialogContentProps>(
+  function AlertDialogContent({ children, className, size = "md", ...props }, ref) {
+    return createElement(
+      "ds-alert-dialog-content",
+      { ref, class: className, size, ...props },
+      children
+    );
+  }
+);
+AlertDialogContent.displayName = "AlertDialog.Content";
+
+/**
+ * AlertDialog header component.
+ */
+const AlertDialogHeader = forwardRef<HTMLElement, AlertDialogHeaderProps>(
+  function AlertDialogHeader({ children, className, ...props }, ref) {
+    return createElement("ds-alert-dialog-header", { ref, class: className, ...props }, children);
+  }
+);
+AlertDialogHeader.displayName = "AlertDialog.Header";
+
+/**
+ * AlertDialog footer component.
+ */
+const AlertDialogFooter = forwardRef<HTMLElement, AlertDialogFooterProps>(
+  function AlertDialogFooter({ children, className, ...props }, ref) {
+    return createElement("ds-alert-dialog-footer", { ref, class: className, ...props }, children);
+  }
+);
+AlertDialogFooter.displayName = "AlertDialog.Footer";
+
+/**
+ * AlertDialog title component.
+ */
+const AlertDialogTitle = forwardRef<HTMLElement, AlertDialogTitleProps>(function AlertDialogTitle(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-alert-dialog-title", { ref, class: className, ...props }, children);
+});
+AlertDialogTitle.displayName = "AlertDialog.Title";
+
+/**
+ * AlertDialog description component.
+ */
+const AlertDialogDescription = forwardRef<HTMLElement, AlertDialogDescriptionProps>(
+  function AlertDialogDescription({ children, className, ...props }, ref) {
+    return createElement(
+      "ds-alert-dialog-description",
+      { ref, class: className, ...props },
+      children
+    );
+  }
+);
+AlertDialogDescription.displayName = "AlertDialog.Description";
+
+/**
+ * AlertDialog action component.
+ */
+const AlertDialogAction = forwardRef<HTMLElement, AlertDialogActionProps>(
+  function AlertDialogAction({ children, className, onClick, ...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 click handler
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element || !onClick) return;
+
+      const handleClick = () => onClick();
+      element.addEventListener("click", handleClick);
+
+      return () => {
+        element.removeEventListener("click", handleClick);
+      };
+    }, [onClick]);
+
+    return createElement(
+      "ds-alert-dialog-action",
+      { ref: combinedRef, class: className, ...props },
+      children
+    );
+  }
+);
+AlertDialogAction.displayName = "AlertDialog.Action";
+
+/**
+ * AlertDialog cancel component.
+ */
+const AlertDialogCancel = forwardRef<HTMLElement, AlertDialogCancelProps>(
+  function AlertDialogCancel({ children, className, onClick, ...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 click handler
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element || !onClick) return;
+
+      const handleClick = () => onClick();
+      element.addEventListener("click", handleClick);
+
+      return () => {
+        element.removeEventListener("click", handleClick);
+      };
+    }, [onClick]);
+
+    return createElement(
+      "ds-alert-dialog-cancel",
+      { ref: combinedRef, class: className, ...props },
+      children
+    );
+  }
+);
+AlertDialogCancel.displayName = "AlertDialog.Cancel";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Content: AlertDialogContent,
+  Header: AlertDialogHeader,
+  Footer: AlertDialogFooter,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+};
+
+// Also export individual components
+export {
+  AlertDialogRoot,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/templates/alert-dialog/wc/alert-dialog-action.ts

@@ -0,0 +1,43 @@
+/**
+ * AlertDialogAction component - confirms the action and closes the dialog.
+ *
+ * @element ds-alert-dialog-action
+ *
+ * @slot - Action button content
+ *
+ * @fires ds:alert-dialog-action - Fired when action is clicked
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export class DsAlertDialogAction extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+
+  private handleClick = (): void => {
+    // Emit action event - parent will handle closing
+    emitEvent(this, "ds:alert-dialog-action", { bubbles: true });
+  };
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-action", DsAlertDialogAction);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-action": DsAlertDialogAction;
+  }
+}

package/templates/alert-dialog/wc/alert-dialog-cancel.ts

@@ -0,0 +1,43 @@
+/**
+ * AlertDialogCancel component - cancels the action and closes the dialog.
+ *
+ * @element ds-alert-dialog-cancel
+ *
+ * @slot - Cancel button content
+ *
+ * @fires ds:alert-dialog-cancel - Fired when cancel is clicked
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export class DsAlertDialogCancel extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+
+  private handleClick = (): void => {
+    // Emit cancel event - parent will handle closing
+    emitEvent(this, "ds:alert-dialog-cancel", { bubbles: true });
+  };
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-cancel", DsAlertDialogCancel);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-cancel": DsAlertDialogCancel;
+  }
+}

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

@@ -0,0 +1,42 @@
+/**
+ * AlertDialogContent component - container for alert dialog content.
+ *
+ * @element ds-alert-dialog-content
+ *
+ * @slot - Alert dialog content (header, body, footer)
+ */
+
+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 AlertDialogContentSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export class DsAlertDialogContent extends DSElement {
+  /** Size of the alert dialog content */
+  @property({ reflect: true })
+  size: AlertDialogContentSize = "md";
+
+  /** Data state for animations */
+  @property({ attribute: "data-state", reflect: true })
+  dataState: "open" | "closed" = "closed";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // ARIA attributes are set by parent DsAlertDialog
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-content", DsAlertDialogContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-content": DsAlertDialogContent;
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * AlertDialogDescription component - description for the alert dialog.
+ *
+ * @element ds-alert-dialog-description
+ *
+ * @slot - Description content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsAlertDialogDescription extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID if not present (for aria-describedby)
+    if (!this.id) {
+      this.id = `alert-dialog-desc-${crypto.randomUUID().slice(0, 8)}`;
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-description", DsAlertDialogDescription);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-description": DsAlertDialogDescription;
+  }
+}

package/templates/alert-dialog/wc/alert-dialog-footer.ts

@@ -0,0 +1,25 @@
+/**
+ * AlertDialogFooter component - footer section for alert dialog actions.
+ *
+ * @element ds-alert-dialog-footer
+ *
+ * @slot - Footer content (action and cancel buttons)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsAlertDialogFooter extends DSElement {
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-footer", DsAlertDialogFooter);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-footer": DsAlertDialogFooter;
+  }
+}

package/templates/alert-dialog/wc/alert-dialog-header.ts

@@ -0,0 +1,25 @@
+/**
+ * AlertDialogHeader component - header section for alert dialog.
+ *
+ * @element ds-alert-dialog-header
+ *
+ * @slot - Header content (title and description)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsAlertDialogHeader extends DSElement {
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-header", DsAlertDialogHeader);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-header": DsAlertDialogHeader;
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * AlertDialogTitle component - title for the alert dialog.
+ *
+ * @element ds-alert-dialog-title
+ *
+ * @slot - Title content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsAlertDialogTitle extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID if not present (for aria-labelledby)
+    if (!this.id) {
+      this.id = `alert-dialog-title-${crypto.randomUUID().slice(0, 8)}`;
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-title", DsAlertDialogTitle);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-title": DsAlertDialogTitle;
+  }
+}

package/templates/alert-dialog/wc/alert-dialog-trigger.ts

@@ -0,0 +1,46 @@
+/**
+ * AlertDialogTrigger component - element that opens the alert dialog.
+ *
+ * @element ds-alert-dialog-trigger
+ *
+ * @slot - Trigger content (typically a button)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { DsAlertDialog } from "./alert-dialog.js";
+
+export class DsAlertDialogTrigger extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set slot attribute
+    this.setAttribute("slot", "trigger");
+
+    // Add click handler
+    this.addEventListener("click", this.handleClick);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+
+  private handleClick = (): void => {
+    const alertDialog = this.closest("ds-alert-dialog") as DsAlertDialog | null;
+    alertDialog?.show();
+  };
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-alert-dialog-trigger", DsAlertDialogTrigger);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert-dialog-trigger": DsAlertDialogTrigger;
+  }
+}