@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/dropdown-menu/index.tsx

@@ -0,0 +1,454 @@
+/**
+ * DropdownMenu compound component exports.
+ *
+ * DropdownMenu is used for action menus triggered by a button, with support
+ * for items, separators, labels, checkbox items, and radio groups.
+ *
+ * @example
+ * ```tsx
+ * import { DropdownMenu } from "@/components/ui";
+ *
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>
+ *     <button>Actions</button>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Label>Actions</DropdownMenu.Label>
+ *     <DropdownMenu.Item value="edit">Edit</DropdownMenu.Item>
+ *     <DropdownMenu.Separator />
+ *     <DropdownMenu.Item value="delete" variant="destructive">Delete</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type DropdownMenuPlacement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
+
+export type DropdownMenuItemVariant = "default" | "destructive";
+
+export interface DropdownMenuRootProps 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;
+  /** Placement relative to trigger */
+  placement?: DropdownMenuPlacement;
+  /** Offset distance from trigger in pixels */
+  offset?: number;
+  /** Whether to flip placement when near viewport edge */
+  flip?: boolean;
+  /** Whether to animate open/close transitions */
+  animated?: boolean;
+  /** Modal behavior - blocks interaction outside menu */
+  modal?: boolean;
+}
+
+export interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLElement> {
+  /** Trigger content (typically a button) */
+  children?: ReactNode;
+}
+
+export interface DropdownMenuContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+}
+
+export interface DropdownMenuItemProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+  /** Item content */
+  children?: ReactNode;
+  /** Value for selection events */
+  value?: string;
+  /** Visual variant */
+  variant?: DropdownMenuItemVariant;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Called when item is selected */
+  onSelect?: (value: string) => void;
+}
+
+export interface DropdownMenuSeparatorProps extends HTMLAttributes<HTMLElement> {}
+
+export interface DropdownMenuLabelProps extends HTMLAttributes<HTMLElement> {
+  /** Label content */
+  children?: ReactNode;
+}
+
+export interface DropdownMenuCheckboxItemProps extends HTMLAttributes<HTMLElement> {
+  /** Item content */
+  children?: ReactNode;
+  /** Whether the checkbox is checked */
+  checked?: boolean;
+  /** Called when checkbox state changes */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export interface DropdownMenuRadioGroupProps extends HTMLAttributes<HTMLElement> {
+  /** Radio items */
+  children?: ReactNode;
+  /** Currently selected value */
+  value?: string;
+  /** Called when selection changes */
+  onValueChange?: (value: string) => void;
+}
+
+export interface DropdownMenuRadioItemProps extends HTMLAttributes<HTMLElement> {
+  /** Item content */
+  children?: ReactNode;
+  /** Value for this radio item */
+  value: string;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * DropdownMenu root component.
+ */
+const DropdownMenuRoot = forwardRef<HTMLElement, DropdownMenuRootProps>(function DropdownMenuRoot(
+  {
+    children,
+    className,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    placement = "bottom-start",
+    offset = 4,
+    flip = true,
+    animated = true,
+    modal = 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-dropdown-menu",
+    {
+      ref: combinedRef,
+      class: className,
+      open: open || undefined,
+      placement,
+      offset,
+      flip: flip || undefined,
+      animated: animated || undefined,
+      modal: modal || undefined,
+      ...props,
+    },
+    children
+  );
+});
+DropdownMenuRoot.displayName = "DropdownMenu.Root";
+
+/**
+ * DropdownMenu trigger component.
+ */
+const DropdownMenuTrigger = forwardRef<HTMLElement, DropdownMenuTriggerProps>(
+  function DropdownMenuTrigger({ children, className, ...props }, ref) {
+    return createElement("span", { ref, className, slot: "trigger", ...props }, children);
+  }
+);
+DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
+
+/**
+ * DropdownMenu content component.
+ */
+const DropdownMenuContent = forwardRef<HTMLElement, DropdownMenuContentProps>(
+  function DropdownMenuContent({ children, className, ...props }, ref) {
+    return createElement("ds-dropdown-menu-content", { ref, class: className, ...props }, children);
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenu.Content";
+
+/**
+ * DropdownMenu item component.
+ */
+const DropdownMenuItem = forwardRef<HTMLElement, DropdownMenuItemProps>(function DropdownMenuItem(
+  { children, className, value, variant = "default", disabled = false, onSelect, ...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 select handler
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !onSelect) return;
+
+    const handleSelect = (event: Event) => {
+      const customEvent = event as CustomEvent<{ value: string }>;
+      onSelect(customEvent.detail.value);
+    };
+    element.addEventListener("ds:select", handleSelect);
+
+    return () => {
+      element.removeEventListener("ds:select", handleSelect);
+    };
+  }, [onSelect]);
+
+  return createElement(
+    "ds-dropdown-menu-item",
+    {
+      ref: combinedRef,
+      class: className,
+      value,
+      variant,
+      disabled: disabled || undefined,
+      ...props,
+    },
+    children
+  );
+});
+DropdownMenuItem.displayName = "DropdownMenu.Item";
+
+/**
+ * DropdownMenu separator component.
+ */
+const DropdownMenuSeparator = forwardRef<HTMLElement, DropdownMenuSeparatorProps>(
+  function DropdownMenuSeparator({ className, ...props }, ref) {
+    return createElement("ds-dropdown-menu-separator", { ref, class: className, ...props });
+  }
+);
+DropdownMenuSeparator.displayName = "DropdownMenu.Separator";
+
+/**
+ * DropdownMenu label component.
+ */
+const DropdownMenuLabel = forwardRef<HTMLElement, DropdownMenuLabelProps>(
+  function DropdownMenuLabel({ children, className, ...props }, ref) {
+    return createElement("ds-dropdown-menu-label", { ref, class: className, ...props }, children);
+  }
+);
+DropdownMenuLabel.displayName = "DropdownMenu.Label";
+
+/**
+ * DropdownMenu checkbox item component.
+ */
+const DropdownMenuCheckboxItem = forwardRef<HTMLElement, DropdownMenuCheckboxItemProps>(
+  function DropdownMenuCheckboxItem(
+    { children, className, checked = false, onCheckedChange, disabled = false, ...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 change handler
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element || !onCheckedChange) return;
+
+      const handleSelect = (event: Event) => {
+        const customEvent = event as CustomEvent<{ checked: boolean }>;
+        onCheckedChange(customEvent.detail.checked);
+      };
+      element.addEventListener("ds:select", handleSelect);
+
+      return () => {
+        element.removeEventListener("ds:select", handleSelect);
+      };
+    }, [onCheckedChange]);
+
+    return createElement(
+      "ds-dropdown-menu-checkbox-item",
+      {
+        ref: combinedRef,
+        class: className,
+        checked: checked || undefined,
+        disabled: disabled || undefined,
+        ...props,
+      },
+      children
+    );
+  }
+);
+DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
+
+/**
+ * DropdownMenu radio group component.
+ */
+const DropdownMenuRadioGroup = forwardRef<HTMLElement, DropdownMenuRadioGroupProps>(
+  function DropdownMenuRadioGroup({ children, className, value, onValueChange, ...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 change handler
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element || !onValueChange) return;
+
+      const handleChange = (event: Event) => {
+        const customEvent = event as CustomEvent<{ value: string }>;
+        onValueChange(customEvent.detail.value);
+      };
+      element.addEventListener("ds:change", handleChange);
+
+      return () => {
+        element.removeEventListener("ds:change", handleChange);
+      };
+    }, [onValueChange]);
+
+    return createElement(
+      "ds-dropdown-menu-radio-group",
+      {
+        ref: combinedRef,
+        class: className,
+        value,
+        ...props,
+      },
+      children
+    );
+  }
+);
+DropdownMenuRadioGroup.displayName = "DropdownMenu.RadioGroup";
+
+/**
+ * DropdownMenu radio item component.
+ */
+const DropdownMenuRadioItem = forwardRef<HTMLElement, DropdownMenuRadioItemProps>(
+  function DropdownMenuRadioItem({ children, className, value, disabled = false, ...props }, ref) {
+    return createElement(
+      "ds-dropdown-menu-radio-item",
+      {
+        ref,
+        class: className,
+        value,
+        disabled: disabled || undefined,
+        ...props,
+      },
+      children
+    );
+  }
+);
+DropdownMenuRadioItem.displayName = "DropdownMenu.RadioItem";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Content: DropdownMenuContent,
+  Item: DropdownMenuItem,
+  Separator: DropdownMenuSeparator,
+  Label: DropdownMenuLabel,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  RadioGroup: DropdownMenuRadioGroup,
+  RadioItem: DropdownMenuRadioItem,
+};
+
+// Also export individual components
+export {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+};

package/templates/dropdown-menu/wc/dropdown-menu-checkbox-item.ts

@@ -0,0 +1,93 @@
+/**
+ * DropdownMenuCheckboxItem component - toggleable checkbox menu item.
+ *
+ * @element ds-dropdown-menu-checkbox-item
+ *
+ * @slot - Item content
+ *
+ * @fires ds:select - Fired when item is toggled
+ */
+
+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 DsDropdownMenuCheckboxItem extends DSElement {
+  /** Whether the checkbox is checked */
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.setAttribute("role", "menuitemcheckbox");
+    this.setAttribute("tabindex", "-1");
+    this.updateAriaChecked();
+
+    this.addEventListener("click", this.handleToggle);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleToggle);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  private handleToggle = (): void => {
+    if (this.disabled) return;
+
+    this.checked = !this.checked;
+    this.updateAriaChecked();
+
+    emitEvent(this, "ds:select", {
+      detail: { checked: this.checked },
+      bubbles: true,
+    });
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleToggle();
+    }
+  };
+
+  private updateAriaChecked(): void {
+    this.setAttribute("aria-checked", String(this.checked));
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+    }
+    if (changedProperties.has("checked")) {
+      this.updateAriaChecked();
+    }
+  }
+
+  override render() {
+    return html`
+      <span class="ds-dropdown-menu-checkbox-item__indicator" aria-hidden="true">
+        ${this.checked ? "✓" : ""}
+      </span>
+      <slot></slot>
+    `;
+  }
+}
+
+define("ds-dropdown-menu-checkbox-item", DsDropdownMenuCheckboxItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu-checkbox-item": DsDropdownMenuCheckboxItem;
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * DropdownMenuContent component - container for menu items.
+ *
+ * @element ds-dropdown-menu-content
+ *
+ * @slot - Menu items
+ */
+
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsDropdownMenuContent extends DSElement {
+  /** Data state for animations */
+  @property({ attribute: "data-state", reflect: true })
+  dataState: "open" | "closed" = "closed";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID for ARIA
+    if (!this.id) {
+      this.id = `dropdown-menu-content-${crypto.randomUUID().slice(0, 8)}`;
+    }
+
+    // Set ARIA role
+    this.setAttribute("role", "menu");
+    this.setAttribute("hidden", "");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-dropdown-menu-content", DsDropdownMenuContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu-content": DsDropdownMenuContent;
+  }
+}

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

@@ -0,0 +1,85 @@
+/**
+ * DropdownMenuItem component - selectable menu item.
+ *
+ * @element ds-dropdown-menu-item
+ *
+ * @slot - Item content
+ *
+ * @fires ds:select - Fired when item is selected
+ */
+
+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 type DropdownMenuItemVariant = "default" | "destructive";
+
+export class DsDropdownMenuItem extends DSElement {
+  /** Value for selection events */
+  @property()
+  value = "";
+
+  /** Visual variant */
+  @property({ reflect: true })
+  variant: DropdownMenuItemVariant = "default";
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set ARIA role
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("tabindex", "-1");
+
+    // Listen for selection triggers
+    this.addEventListener("click", this.handleSelect);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleSelect);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  private handleSelect = (): void => {
+    if (this.disabled) return;
+
+    emitEvent(this, "ds:select", {
+      detail: { value: this.value },
+      bubbles: true,
+    });
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleSelect();
+    }
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-dropdown-menu-item", DsDropdownMenuItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu-item": DsDropdownMenuItem;
+  }
+}

package/templates/dropdown-menu/wc/dropdown-menu-label.ts

@@ -0,0 +1,31 @@
+/**
+ * DropdownMenuLabel component - non-interactive label for menu sections.
+ *
+ * @element ds-dropdown-menu-label
+ *
+ * @slot - Label content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsDropdownMenuLabel extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    // Labels are not focusable
+    this.setAttribute("aria-hidden", "true");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-dropdown-menu-label", DsDropdownMenuLabel);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-dropdown-menu-label": DsDropdownMenuLabel;
+  }
+}