@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/collapsible/index.tsx

@@ -0,0 +1,172 @@
+/**
+ * Collapsible compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Collapsible } from "@/components/ui";
+ *
+ * <Collapsible.Root>
+ *   <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     <p>Collapsible content here.</p>
+ *   </Collapsible.Content>
+ * </Collapsible.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CollapsibleRootProps 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;
+  /** Disable the collapsible */
+  disabled?: boolean;
+}
+
+export interface CollapsibleTriggerProps extends HTMLAttributes<HTMLElement> {
+  /** Trigger content */
+  children?: ReactNode;
+}
+
+export interface CollapsibleContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Keep mounted when collapsed */
+  forceMount?: boolean;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Collapsible root component.
+ */
+const CollapsibleRoot = forwardRef<HTMLElement, CollapsibleRootProps>(function CollapsibleRoot(
+  {
+    children,
+    className,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+    ...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-collapsible",
+    {
+      ref: combinedRef,
+      class: className,
+      open: open || undefined,
+      disabled: disabled || undefined,
+      ...props,
+    },
+    children
+  );
+});
+CollapsibleRoot.displayName = "Collapsible.Root";
+
+/**
+ * Collapsible trigger component.
+ */
+const CollapsibleTrigger = forwardRef<HTMLElement, CollapsibleTriggerProps>(
+  function CollapsibleTrigger({ children, className, ...props }, ref) {
+    return createElement("ds-collapsible-trigger", { ref, class: className, ...props }, children);
+  }
+);
+CollapsibleTrigger.displayName = "Collapsible.Trigger";
+
+/**
+ * Collapsible content component.
+ */
+const CollapsibleContent = forwardRef<HTMLElement, CollapsibleContentProps>(
+  function CollapsibleContent({ children, className, forceMount = false, ...props }, ref) {
+    return createElement(
+      "ds-collapsible-content",
+      {
+        ref,
+        class: className,
+        "force-mount": forceMount || undefined,
+        ...props,
+      },
+      children
+    );
+  }
+);
+CollapsibleContent.displayName = "Collapsible.Content";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Collapsible = {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent,
+};
+
+// Also export individual components
+export { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent };

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

@@ -0,0 +1,97 @@
+/**
+ * Collapsible Content component - content section that expands/collapses.
+ *
+ * @element ds-collapsible-content
+ *
+ * @slot - Content to show/hide
+ */
+
+import { type Presence, createPresence, prefersReducedMotion } from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsCollapsibleContent extends DSElement {
+  /** Keep mounted when collapsed (for animations) */
+  @property({ type: Boolean, attribute: "force-mount" })
+  forceMount = false;
+
+  /** Current state for animations */
+  @state()
+  dataState: "open" | "closed" = "closed";
+
+  /** Whether we're currently animating out */
+  @state()
+  private isAnimatingOut = false;
+
+  private presence: Presence | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "region");
+    this.updateVisibility();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.presence?.destroy();
+    this.presence = null;
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("dataState")) {
+      this.handleStateChange();
+    }
+  }
+
+  private handleStateChange(): void {
+    this.setAttribute("data-state", this.dataState);
+
+    if (this.dataState === "open") {
+      this.isAnimatingOut = false;
+      this.updateVisibility();
+    } else if (!this.forceMount && !prefersReducedMotion()) {
+      // Animate out before hiding
+      this.isAnimatingOut = true;
+
+      this.presence?.destroy();
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.isAnimatingOut = false;
+          this.updateVisibility();
+        },
+      });
+      this.presence.hide(this);
+    } else {
+      this.updateVisibility();
+    }
+  }
+
+  private updateVisibility(): void {
+    if (this.forceMount) {
+      this.hidden = false;
+      return;
+    }
+
+    // Stay visible during exit animation
+    if (this.isAnimatingOut) {
+      this.hidden = false;
+      return;
+    }
+
+    this.hidden = this.dataState === "closed";
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-collapsible-content", DsCollapsibleContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-collapsible-content": DsCollapsibleContent;
+  }
+}

package/templates/collapsible/wc/collapsible-trigger.ts

@@ -0,0 +1,39 @@
+/**
+ * Collapsible Trigger component - button that toggles collapsible.
+ *
+ * @element ds-collapsible-trigger
+ *
+ * @slot - Trigger content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsCollapsibleTrigger extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Ensure focusability
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+
+    // Set button role if not already set
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "button");
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-collapsible-trigger", DsCollapsibleTrigger);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-collapsible-trigger": DsCollapsibleTrigger;
+  }
+}

package/templates/collapsible/wc/collapsible.ts

@@ -0,0 +1,143 @@
+/**
+ * Collapsible component - toggleable content visibility.
+ *
+ * Provides an expandable/collapsible content section with animation support.
+ *
+ * @element ds-collapsible
+ *
+ * @slot trigger - Button or element that toggles the collapsible
+ * @slot - Collapsible content (ds-collapsible-content)
+ *
+ * @fires ds:open - Fired when collapsible opens
+ * @fires ds:close - Fired when collapsible closes
+ *
+ * @example
+ * ```html
+ * <ds-collapsible>
+ *   <button slot="trigger">Toggle Content</button>
+ *   <ds-collapsible-content>
+ *     <p>Collapsible content here.</p>
+ *   </ds-collapsible-content>
+ * </ds-collapsible>
+ * ```
+ */
+
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+// Import child components
+import type { DsCollapsibleContent } from "./collapsible-content.js";
+import "./collapsible-content.js";
+import "./collapsible-trigger.js";
+
+export class DsCollapsible extends DSElement {
+  /** Whether the collapsible is open */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /** Disable the collapsible */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Internal ID for ARIA relationships */
+  @state()
+  private contentId = `collapsible-${crypto.randomUUID().slice(0, 8)}`;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleTriggerClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleTriggerClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  /**
+   * Toggle the open state.
+   */
+  public toggle(): void {
+    if (this.disabled) return;
+    this.setOpen(!this.open);
+  }
+
+  /**
+   * Set the open state.
+   */
+  public setOpen(open: boolean): void {
+    if (this.disabled || this.open === open) return;
+
+    this.open = open;
+    emitEvent(this, open ? StandardEvents.OPEN : StandardEvents.CLOSE);
+    this.updateContent();
+  }
+
+  private handleTriggerClick = (event: Event): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"], ds-collapsible-trigger');
+
+    if (trigger && this.contains(trigger)) {
+      this.toggle();
+    }
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"], ds-collapsible-trigger');
+
+    if (trigger && this.contains(trigger)) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.toggle();
+      }
+    }
+  };
+
+  override updated(): void {
+    this.updateContent();
+    this.updateTrigger();
+  }
+
+  private updateContent(): void {
+    const content = this.querySelector("ds-collapsible-content") as DsCollapsibleContent | null;
+    if (content) {
+      content.id = this.contentId;
+      content.dataState = this.open ? "open" : "closed";
+    }
+  }
+
+  private updateTrigger(): void {
+    const trigger =
+      this.querySelector('[slot="trigger"]') || this.querySelector("ds-collapsible-trigger");
+
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", String(this.open));
+      trigger.setAttribute("aria-controls", this.contentId);
+      if (this.disabled) {
+        trigger.setAttribute("aria-disabled", "true");
+      } else {
+        trigger.removeAttribute("aria-disabled");
+      }
+    }
+  }
+
+  override render() {
+    return html`
+      <slot name="trigger"></slot>
+      <slot></slot>
+    `;
+  }
+}
+
+define("ds-collapsible", DsCollapsible);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-collapsible": DsCollapsible;
+  }
+}

package/templates/collapsible/wc/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Collapsible component barrel exports.
+ */
+
+export { DsCollapsible } from "./collapsible.js";
+export { DsCollapsibleTrigger } from "./collapsible-trigger.js";
+export { DsCollapsibleContent } from "./collapsible-content.js";

package/templates/combobox/combobox-content.tsx

@@ -0,0 +1,141 @@
+/**
+ * Combobox Content component - container for combobox options.
+ */
+
+import {
+  type AnchorPosition,
+  type DismissableLayer,
+  type RovingFocus,
+  createAnchorPosition,
+  createDismissableLayer,
+  createRovingFocus,
+} from "@hypoth-ui/primitives-dom";
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { useComboboxContext } from "./combobox-context.js";
+
+export interface ComboboxContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content container */
+  children?: ReactNode;
+  /** Optional label for accessibility */
+  "aria-label"?: string;
+}
+
+/**
+ * Container for combobox options.
+ * Handles positioning, dismiss behavior, and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Content>
+ *   <Combobox.Option value="apple">Apple</Combobox.Option>
+ *   <Combobox.Option value="banana">Banana</Combobox.Option>
+ * </Combobox.Content>
+ * ```
+ */
+export const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>(
+  ({ children, className, ...restProps }, ref) => {
+    const { behavior, open, setOpen, loading } = useComboboxContext("Combobox.Content");
+    const internalRef = useRef<HTMLDivElement>(null);
+
+    // Behavior instances
+    const anchorPositionRef = useRef<AnchorPosition | null>(null);
+    const dismissLayerRef = useRef<DismissableLayer | null>(null);
+    const rovingFocusRef = useRef<RovingFocus | null>(null);
+    const inputRef = useRef<HTMLElement | null>(null);
+
+    // Merge refs
+    const mergedRef = useCallback(
+      (element: HTMLDivElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = element;
+        }
+      },
+      [ref]
+    );
+
+    // Setup and cleanup behaviors when open changes
+    useEffect(() => {
+      const content = internalRef.current;
+      if (!content || !open) return;
+
+      // Find input element (previous sibling or parent context)
+      const input = content.previousElementSibling as HTMLElement;
+      inputRef.current = input;
+
+      // Setup anchor positioning
+      if (input) {
+        anchorPositionRef.current = createAnchorPosition({
+          anchor: input,
+          floating: content,
+          placement: "bottom-start",
+          offset: 4,
+          flip: true,
+          onPositionChange: (pos) => {
+            content.setAttribute("data-placement", pos.placement);
+          },
+        });
+      }
+
+      // Setup dismiss layer
+      dismissLayerRef.current = createDismissableLayer({
+        container: content,
+        excludeElements: input ? [input] : [],
+        onDismiss: () => setOpen(false),
+        closeOnEscape: true,
+        closeOnOutsideClick: true,
+      });
+      dismissLayerRef.current.activate();
+
+      // Setup roving focus
+      rovingFocusRef.current = createRovingFocus({
+        container: content,
+        selector: '[role="option"]:not([aria-disabled="true"])',
+        direction: "vertical",
+        loop: true,
+        skipDisabled: true,
+      });
+
+      // Cleanup
+      return () => {
+        anchorPositionRef.current?.destroy();
+        anchorPositionRef.current = null;
+        dismissLayerRef.current?.deactivate();
+        dismissLayerRef.current = null;
+        rovingFocusRef.current?.destroy();
+        rovingFocusRef.current = null;
+      };
+    }, [open, setOpen]);
+
+    // Don't render if not open
+    if (!open) return null;
+
+    const listboxProps = behavior.getListboxProps();
+
+    return (
+      <div
+        ref={mergedRef}
+        role={listboxProps.role}
+        id={listboxProps.id}
+        aria-multiselectable={listboxProps["aria-multiselectable"]}
+        aria-busy={loading || undefined}
+        className={className}
+        data-state="open"
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ComboboxContent.displayName = "Combobox.Content";

package/templates/combobox/combobox-context.ts

@@ -0,0 +1,36 @@
+/**
+ * Combobox context for compound component pattern.
+ */
+
+import type { ComboboxBehavior, Option } from "@hypoth-ui/primitives-dom";
+import { createCompoundContext } from "../../utils/create-context.js";
+
+export interface ComboboxContextValue<Multi extends boolean = false> {
+  /** Combobox behavior instance */
+  behavior: ComboboxBehavior<string, Multi>;
+  /** Whether combobox is open */
+  open: boolean;
+  /** Set open state */
+  setOpen: (open: boolean) => void;
+  /** Current value(s) */
+  value: Multi extends true ? string[] : string | null;
+  /** Set value(s) */
+  setValue: (value: Multi extends true ? string[] : string | null) => void;
+  /** Input value */
+  inputValue: string;
+  /** Set input value */
+  setInputValue: (value: string) => void;
+  /** Highlighted value for keyboard navigation */
+  highlightedValue: string | null;
+  /** Set highlighted value */
+  setHighlightedValue: (value: string | null) => void;
+  /** Whether multi-select mode */
+  multiple: Multi;
+  /** Filtered options */
+  filteredOptions: Option<string>[];
+  /** Loading state */
+  loading: boolean;
+}
+
+export const [ComboboxProvider, useComboboxContext] =
+  createCompoundContext<ComboboxContextValue<boolean>>("Combobox");

package/templates/combobox/combobox-empty.tsx

@@ -0,0 +1,38 @@
+/**
+ * Combobox Empty component - shown when no options match.
+ */
+
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import { useComboboxContext } from "./combobox-context.js";
+
+export interface ComboboxEmptyProps extends HTMLAttributes<HTMLOutputElement> {
+  /** Empty state content */
+  children?: ReactNode;
+}
+
+/**
+ * Empty state shown when no options match the search.
+ *
+ * @example
+ * ```tsx
+ * <Combobox.Empty>No results found</Combobox.Empty>
+ * ```
+ */
+export const ComboboxEmpty = forwardRef<HTMLOutputElement, ComboboxEmptyProps>(
+  ({ children, className, ...restProps }, ref) => {
+    const { filteredOptions, loading, inputValue } = useComboboxContext("Combobox.Empty");
+
+    // Only show if no options and not loading and has input
+    if (filteredOptions.length > 0 || loading || !inputValue) {
+      return null;
+    }
+
+    return (
+      <output ref={ref} aria-live="polite" className={className} {...restProps}>
+        {children}
+      </output>
+    );
+  }
+);
+
+ComboboxEmpty.displayName = "Combobox.Empty";