@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/accordion/index.tsx

@@ -0,0 +1,266 @@
+/**
+ * Accordion compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Accordion } from "@/components/ui";
+ *
+ * // Single expand mode
+ * <Accordion.Root type="single" defaultValue="item-1" collapsible>
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>Section 1</Accordion.Trigger>
+ *     <Accordion.Content>Content 1</Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item value="item-2">
+ *     <Accordion.Trigger>Section 2</Accordion.Trigger>
+ *     <Accordion.Content>Content 2</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ *
+ * // Multiple expand mode
+ * <Accordion.Root type="multiple" defaultValue={["item-1", "item-2"]}>
+ *   ...
+ * </Accordion.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type AccordionType = "single" | "multiple";
+export type AccordionOrientation = "horizontal" | "vertical";
+
+interface AccordionSingleProps {
+  type: "single";
+  /** Controlled value */
+  value?: string;
+  /** Default value (uncontrolled) */
+  defaultValue?: string;
+  /** Called when value changes */
+  onValueChange?: (value: string) => void;
+  /** Allow collapsing all items */
+  collapsible?: boolean;
+}
+
+interface AccordionMultipleProps {
+  type: "multiple";
+  /** Controlled value */
+  value?: string[];
+  /** Default value (uncontrolled) */
+  defaultValue?: string[];
+  /** Called when value changes */
+  onValueChange?: (value: string[]) => void;
+}
+
+type AccordionRootBaseProps = HTMLAttributes<HTMLElement> & {
+  children?: ReactNode;
+  orientation?: AccordionOrientation;
+};
+
+export type AccordionRootProps = AccordionRootBaseProps &
+  (AccordionSingleProps | AccordionMultipleProps);
+
+export interface AccordionItemProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  /** Unique value identifying this item */
+  value: string;
+  /** Disable this item */
+  disabled?: boolean;
+}
+
+export interface AccordionTriggerProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface AccordionContentProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  /** Keep mounted when collapsed */
+  forceMount?: boolean;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Accordion root component.
+ */
+const AccordionRoot = forwardRef<HTMLElement, AccordionRootProps>(
+  function AccordionRoot(props, ref) {
+    const { children, className, type = "single", orientation = "vertical" } = props;
+
+    // Handle single vs multiple mode
+    const isSingle = type === "single";
+    const singleProps = props as AccordionSingleProps;
+    const multipleProps = props as AccordionMultipleProps;
+
+    // State management
+    const [internalValue, setInternalValue] = useState<string | string[]>(() => {
+      if (isSingle) {
+        return singleProps.defaultValue ?? "";
+      }
+      return multipleProps.defaultValue ?? [];
+    });
+
+    const isControlled = isSingle
+      ? singleProps.value !== undefined
+      : multipleProps.value !== undefined;
+
+    const value = isControlled
+      ? isSingle
+        ? singleProps.value
+        : multipleProps.value
+      : internalValue;
+
+    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 handleChange = useCallback(
+      (event: Event) => {
+        const customEvent = event as CustomEvent<{ value: string }>;
+        const newValue = customEvent.detail.value;
+
+        if (isSingle) {
+          if (!isControlled) {
+            setInternalValue(newValue);
+          }
+          (singleProps.onValueChange as ((v: string) => void) | undefined)?.(newValue);
+        } else {
+          // Parse JSON array
+          let parsedValue: string[] = [];
+          try {
+            parsedValue = JSON.parse(newValue);
+          } catch {
+            parsedValue = newValue ? [newValue] : [];
+          }
+
+          if (!isControlled) {
+            setInternalValue(parsedValue);
+          }
+          (multipleProps.onValueChange as ((v: string[]) => void) | undefined)?.(parsedValue);
+        }
+      },
+      [isSingle, isControlled, singleProps.onValueChange, multipleProps.onValueChange]
+    );
+
+    // Attach event listeners
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+
+      element.addEventListener("ds:change", handleChange);
+
+      return () => {
+        element.removeEventListener("ds:change", handleChange);
+      };
+    }, [handleChange]);
+
+    // Convert value to string for WC
+    const valueString = isSingle ? (value as string) : JSON.stringify(value);
+
+    // Extract collapsible from single props
+    const collapsible = isSingle ? singleProps.collapsible : undefined;
+
+    return createElement(
+      "ds-accordion",
+      {
+        ref: combinedRef,
+        class: className,
+        type,
+        value: isControlled ? valueString : undefined,
+        "default-value": !isControlled ? valueString : undefined,
+        collapsible: isSingle && collapsible ? true : undefined,
+        orientation,
+      },
+      children
+    );
+  }
+);
+AccordionRoot.displayName = "Accordion.Root";
+
+/**
+ * Accordion item component.
+ */
+const AccordionItem = forwardRef<HTMLElement, AccordionItemProps>(function AccordionItem(
+  { children, className, value, disabled = false, ...props },
+  ref
+) {
+  return createElement(
+    "ds-accordion-item",
+    {
+      ref,
+      class: className,
+      value,
+      disabled: disabled || undefined,
+      ...props,
+    },
+    children
+  );
+});
+AccordionItem.displayName = "Accordion.Item";
+
+/**
+ * Accordion trigger component.
+ */
+const AccordionTrigger = forwardRef<HTMLElement, AccordionTriggerProps>(function AccordionTrigger(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-accordion-trigger", { ref, class: className, ...props }, children);
+});
+AccordionTrigger.displayName = "Accordion.Trigger";
+
+/**
+ * Accordion content component.
+ */
+const AccordionContent = forwardRef<HTMLElement, AccordionContentProps>(function AccordionContent(
+  { children, className, forceMount = false, ...props },
+  ref
+) {
+  return createElement(
+    "ds-accordion-content",
+    {
+      ref,
+      class: className,
+      "force-mount": forceMount || undefined,
+      ...props,
+    },
+    children
+  );
+});
+AccordionContent.displayName = "Accordion.Content";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+};
+
+// Also export individual components
+export { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,113 @@
+/**
+ * Accordion Content component - expandable content section.
+ *
+ * @element ds-accordion-content
+ *
+ * @slot - Accordion content
+ */
+
+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 DsAccordionContent extends DSElement {
+  /** Keep mounted when collapsed (for animations) */
+  @property({ type: Boolean, attribute: "force-mount" })
+  forceMount = false;
+
+  /** Internal expanded state */
+  @state()
+  private expanded = false;
+
+  /** Trigger ID for aria-labelledby */
+  @state()
+  private triggerId = "";
+
+  /** Whether we're 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;
+  }
+
+  /**
+   * Set the expanded state (called by parent).
+   */
+  public setExpanded(expanded: boolean): void {
+    const wasExpanded = this.expanded;
+    this.expanded = expanded;
+    this.setAttribute("data-state", expanded ? "open" : "closed");
+
+    if (wasExpanded && !expanded) {
+      // Collapsing - animate out
+      this.handleCollapse();
+    } else {
+      this.isAnimatingOut = false;
+      this.updateVisibility();
+    }
+  }
+
+  /**
+   * Set the trigger ID for aria-labelledby.
+   */
+  public setTriggerId(id: string): void {
+    this.triggerId = id;
+    this.setAttribute("aria-labelledby", id);
+  }
+
+  private handleCollapse(): void {
+    if (!this.forceMount && !prefersReducedMotion()) {
+      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;
+    }
+
+    if (this.isAnimatingOut) {
+      this.hidden = false;
+      return;
+    }
+
+    this.hidden = !this.expanded;
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-accordion-content", DsAccordionContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-accordion-content": DsAccordionContent;
+  }
+}

package/templates/accordion/wc/accordion-item.ts

@@ -0,0 +1,111 @@
+/**
+ * Accordion Item component - container for trigger and content.
+ *
+ * @element ds-accordion-item
+ *
+ * @slot - Accordion trigger and content
+ */
+
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { DsAccordionContent } from "./accordion-content.js";
+import type { DsAccordionTrigger } from "./accordion-trigger.js";
+
+export class DsAccordionItem extends DSElement {
+  /** Unique value identifying this item */
+  @property({ reflect: true })
+  value = "";
+
+  /** Disable this item */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Internal expanded state */
+  @state()
+  private expanded = false;
+
+  /** ID for ARIA relationships */
+  private contentId = "";
+  private triggerId = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate IDs
+    const id = crypto.randomUUID().slice(0, 8);
+    this.contentId = `accordion-content-${this.value}-${id}`;
+    this.triggerId = `accordion-trigger-${this.value}-${id}`;
+
+    this.setAttribute("data-state", "closed");
+  }
+
+  /**
+   * Set the expanded state (called by parent).
+   */
+  public setExpanded(expanded: boolean): void {
+    this.expanded = expanded;
+    this.setAttribute("data-state", expanded ? "open" : "closed");
+    this.updateChildren();
+  }
+
+  /**
+   * Get whether the item is expanded.
+   */
+  public isExpanded(): boolean {
+    return this.expanded;
+  }
+
+  /**
+   * Get the content ID.
+   */
+  public getContentId(): string {
+    return this.contentId;
+  }
+
+  /**
+   * Get the trigger ID.
+   */
+  public getTriggerId(): string {
+    return this.triggerId;
+  }
+
+  private updateChildren(): void {
+    const trigger = this.querySelector("ds-accordion-trigger") as DsAccordionTrigger | null;
+    const content = this.querySelector("ds-accordion-content") as DsAccordionContent | null;
+
+    if (trigger) {
+      trigger.id = this.triggerId;
+      trigger.setExpanded(this.expanded);
+      trigger.setContentId(this.contentId);
+      if (this.disabled) {
+        trigger.setAttribute("aria-disabled", "true");
+      } else {
+        trigger.removeAttribute("aria-disabled");
+      }
+    }
+
+    if (content) {
+      content.id = this.contentId;
+      content.setExpanded(this.expanded);
+      content.setTriggerId(this.triggerId);
+    }
+  }
+
+  override updated(): void {
+    this.updateChildren();
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-accordion-item", DsAccordionItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-accordion-item": DsAccordionItem;
+  }
+}

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

@@ -0,0 +1,105 @@
+/**
+ * Accordion Trigger component - button that toggles accordion item.
+ *
+ * @element ds-accordion-trigger
+ *
+ * @slot - Trigger label content
+ */
+
+import { html } from "lit";
+import { state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+import type { DsAccordionItem } from "./accordion-item.js";
+
+export class DsAccordionTrigger extends DSElement {
+  /** Internal expanded state */
+  @state()
+  private expanded = false;
+
+  /** Content panel ID */
+  @state()
+  private contentId = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set ARIA role and attributes
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+
+    // Handle click and keyboard
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  /**
+   * Set the expanded state (called by parent).
+   */
+  public setExpanded(expanded: boolean): void {
+    this.expanded = expanded;
+    this.updateAccessibility();
+  }
+
+  /**
+   * Set the content ID for aria-controls.
+   */
+  public setContentId(id: string): void {
+    this.contentId = id;
+    this.updateAccessibility();
+  }
+
+  private handleClick = (): void => {
+    if (this.hasAttribute("aria-disabled")) return;
+    this.toggle();
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.hasAttribute("aria-disabled")) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.toggle();
+    }
+  };
+
+  private toggle(): void {
+    const item = this.closest("ds-accordion-item") as DsAccordionItem | null;
+    if (!item) return;
+
+    emitEvent(this, "ds:accordion-toggle", {
+      detail: { value: item.value },
+      bubbles: true,
+    });
+  }
+
+  private updateAccessibility(): void {
+    this.setAttribute("aria-expanded", String(this.expanded));
+    if (this.contentId) {
+      this.setAttribute("aria-controls", this.contentId);
+    }
+  }
+
+  override updated(): void {
+    this.updateAccessibility();
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-accordion-trigger", DsAccordionTrigger);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-accordion-trigger": DsAccordionTrigger;
+  }
+}