@hypoth-ui/cli 0.0.1 → 0.1.0

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

@@ -0,0 +1,30 @@
+/**
+ * PaginationItem component - wrapper for pagination link.
+ *
+ * @element ds-pagination-item
+ *
+ * @slot - Pagination link
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsPaginationItem extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-pagination-item", DsPaginationItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagination-item": DsPaginationItem;
+  }
+}

package/templates/pagination/wc/pagination-link.ts

@@ -0,0 +1,76 @@
+/**
+ * PaginationLink component - page number link.
+ *
+ * @element ds-pagination-link
+ *
+ * @slot - Page number content
+ */
+
+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 DsPaginationLink extends DSElement {
+  /** Page number */
+  @property({ type: Number, reflect: true })
+  page = 1;
+
+  /** Whether this is the current page */
+  @property({ type: Boolean, reflect: true })
+  active = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+
+    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);
+  }
+
+  private handleClick = (): void => {
+    if (this.active) return;
+
+    emitEvent(this, "ds:page-select", {
+      detail: { page: this.page },
+      bubbles: true,
+    });
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick();
+    }
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("active")) {
+      if (this.active) {
+        this.setAttribute("aria-current", "page");
+      } else {
+        this.removeAttribute("aria-current");
+      }
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-pagination-link", DsPaginationLink);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagination-link": DsPaginationLink;
+  }
+}

package/templates/pagination/wc/pagination-next.ts

@@ -0,0 +1,69 @@
+/**
+ * PaginationNext component - go to next page button.
+ *
+ * @element ds-pagination-next
+ *
+ * @slot - Button content (defaults to "Next")
+ */
+
+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 DsPaginationNext extends DSElement {
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("aria-label", "Go to next page");
+
+    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);
+  }
+
+  private handleClick = (): void => {
+    if (this.disabled) return;
+
+    const pagination = this.closest("ds-pagination") as
+      | (HTMLElement & { nextPage: () => void })
+      | null;
+    pagination?.nextPage();
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick();
+    }
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+
+  override render() {
+    return html`<slot>Next</slot>`;
+  }
+}
+
+define("ds-pagination-next", DsPaginationNext);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagination-next": DsPaginationNext;
+  }
+}

package/templates/pagination/wc/pagination-previous.ts

@@ -0,0 +1,69 @@
+/**
+ * PaginationPrevious component - go to previous page button.
+ *
+ * @element ds-pagination-previous
+ *
+ * @slot - Button content (defaults to "Previous")
+ */
+
+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 DsPaginationPrevious extends DSElement {
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("aria-label", "Go to previous page");
+
+    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);
+  }
+
+  private handleClick = (): void => {
+    if (this.disabled) return;
+
+    const pagination = this.closest("ds-pagination") as
+      | (HTMLElement & { previousPage: () => void })
+      | null;
+    pagination?.previousPage();
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick();
+    }
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+
+  override render() {
+    return html`<slot>Previous</slot>`;
+  }
+}
+
+define("ds-pagination-previous", DsPaginationPrevious);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagination-previous": DsPaginationPrevious;
+  }
+}

package/templates/pagination/wc/pagination.ts

@@ -0,0 +1,156 @@
+/**
+ * Pagination component - page navigation.
+ *
+ * @element ds-pagination
+ *
+ * @slot - Pagination content
+ *
+ * @fires ds:page-change - Fired when page changes
+ *
+ * @example
+ * ```html
+ * <ds-pagination page="1" total-pages="10">
+ *   <ds-pagination-content>
+ *     <ds-pagination-previous></ds-pagination-previous>
+ *     <ds-pagination-item>
+ *       <ds-pagination-link page="1">1</ds-pagination-link>
+ *     </ds-pagination-item>
+ *     <ds-pagination-ellipsis></ds-pagination-ellipsis>
+ *     <ds-pagination-next></ds-pagination-next>
+ *   </ds-pagination-content>
+ * </ds-pagination>
+ * ```
+ */
+
+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";
+
+// Import child components
+import "./pagination-content.js";
+import "./pagination-item.js";
+import "./pagination-link.js";
+import "./pagination-previous.js";
+import "./pagination-next.js";
+import "./pagination-ellipsis.js";
+
+export class DsPagination extends DSElement {
+  /** Current page (1-indexed) */
+  @property({ type: Number, reflect: true })
+  page = 1;
+
+  /** Total number of pages */
+  @property({ type: Number, attribute: "total-pages" })
+  totalPages = 1;
+
+  /** Number of sibling pages to show */
+  @property({ type: Number, attribute: "sibling-count" })
+  siblingCount = 1;
+
+  /** Number of boundary pages to show */
+  @property({ type: Number, attribute: "boundary-count" })
+  boundaryCount = 1;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "Pagination");
+
+    this.addEventListener("ds:page-select", this.handlePageSelect as EventListener);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:page-select", this.handlePageSelect as EventListener);
+  }
+
+  /**
+   * Navigate to a specific page.
+   */
+  public goToPage(newPage: number): void {
+    const clampedPage = Math.max(1, Math.min(newPage, this.totalPages));
+
+    if (clampedPage !== this.page) {
+      this.page = clampedPage;
+      this.updateActiveState();
+
+      emitEvent(this, "ds:page-change", {
+        detail: { page: this.page },
+        bubbles: true,
+      });
+    }
+  }
+
+  /**
+   * Go to previous page.
+   */
+  public previousPage(): void {
+    this.goToPage(this.page - 1);
+  }
+
+  /**
+   * Go to next page.
+   */
+  public nextPage(): void {
+    this.goToPage(this.page + 1);
+  }
+
+  private handlePageSelect = (event: CustomEvent<{ page: number }>): void => {
+    event.stopPropagation();
+    this.goToPage(event.detail.page);
+  };
+
+  private updateActiveState(): void {
+    const links = this.querySelectorAll("ds-pagination-link");
+    for (const link of links) {
+      const linkPage = Number(link.getAttribute("page"));
+      if (linkPage === this.page) {
+        link.setAttribute("aria-current", "page");
+        link.setAttribute("active", "");
+      } else {
+        link.removeAttribute("aria-current");
+        link.removeAttribute("active");
+      }
+    }
+
+    // Update prev/next disabled state
+    const prevButton = this.querySelector("ds-pagination-previous");
+    const nextButton = this.querySelector("ds-pagination-next");
+
+    if (prevButton) {
+      if (this.page <= 1) {
+        prevButton.setAttribute("disabled", "");
+      } else {
+        prevButton.removeAttribute("disabled");
+      }
+    }
+
+    if (nextButton) {
+      if (this.page >= this.totalPages) {
+        nextButton.setAttribute("disabled", "");
+      } else {
+        nextButton.removeAttribute("disabled");
+      }
+    }
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("page") || changedProperties.has("totalPages")) {
+      this.updateActiveState();
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-pagination", DsPagination);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagination": DsPagination;
+  }
+}

package/templates/pin-input/index.ts

@@ -0,0 +1,39 @@
+/**
+ * PinInput compound component for PIN/OTP entry.
+ *
+ * @example
+ * ```tsx
+ * // Basic 6-digit PIN
+ * <PinInput.Root length={6} onComplete={(value) => verifyOTP(value)}>
+ *   {Array.from({ length: 6 }, (_, i) => (
+ *     <PinInput.Field key={i} index={i} />
+ *   ))}
+ * </PinInput.Root>
+ *
+ * // With custom styling
+ * <PinInput.Root length={4} mask>
+ *   <div className="pin-container">
+ *     <PinInput.Field index={0} className="pin-field" />
+ *     <PinInput.Field index={1} className="pin-field" />
+ *     <span className="separator">-</span>
+ *     <PinInput.Field index={2} className="pin-field" />
+ *     <PinInput.Field index={3} className="pin-field" />
+ *   </div>
+ * </PinInput.Root>
+ * ```
+ */
+
+export { PinInputRoot, type PinInputRootProps } from "./pin-input-root.js";
+export { PinInputField, type PinInputFieldProps } from "./pin-input-field.js";
+export {
+  usePinInputContext,
+  type PinInputContextValue,
+} from "./pin-input-context.js";
+
+export const PinInput = {
+  Root: PinInputRoot,
+  Field: PinInputField,
+} as const;
+
+import { PinInputField } from "./pin-input-field.js";
+import { PinInputRoot } from "./pin-input-root.js";

package/templates/pin-input/pin-input-context.ts

@@ -0,0 +1,30 @@
+/**
+ * PinInput context for compound component pattern.
+ */
+
+import type { PinInputBehavior } from "@hypoth-ui/primitives-dom";
+import { createCompoundContext } from "../../utils/create-context.js";
+
+export interface PinInputContextValue {
+  /** PinInput behavior instance */
+  behavior: PinInputBehavior;
+  /** Current value */
+  value: string;
+  /** Number of digits */
+  length: number;
+  /** Focused input index */
+  focusedIndex: number | null;
+  /** Set focused index */
+  setFocusedIndex: (index: number | null) => void;
+  /** Register input ref */
+  registerInput: (index: number, ref: HTMLInputElement | null) => void;
+  /** Focus specific input */
+  focusInput: (index: number) => void;
+  /** Disabled state */
+  disabled: boolean;
+  /** Mask input */
+  mask: boolean;
+}
+
+export const [PinInputProvider, usePinInputContext] =
+  createCompoundContext<PinInputContextValue>("PinInput");

package/templates/pin-input/pin-input-field.tsx

@@ -0,0 +1,186 @@
+/**
+ * PinInput Field component - individual digit input field.
+ */
+
+import {
+  type ClipboardEvent,
+  type FocusEvent,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { usePinInputContext } from "./pin-input-context.js";
+
+export interface PinInputFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+  /** Field index (0-based) */
+  index: number;
+}
+
+/**
+ * Individual input field for a single PIN digit.
+ *
+ * @example
+ * ```tsx
+ * <PinInput.Field index={0} />
+ * <PinInput.Field index={1} />
+ * <PinInput.Field index={2} />
+ * ```
+ */
+export const PinInputField = forwardRef<HTMLInputElement, PinInputFieldProps>(
+  ({ index, className, onFocus, onBlur, onKeyDown, onPaste, ...restProps }, ref) => {
+    const { behavior, focusedIndex, setFocusedIndex, registerInput, focusInput, disabled, mask } =
+      usePinInputContext("PinInput.Field");
+
+    const internalRef = useRef<HTMLInputElement>(null);
+    const inputProps = behavior.getInputProps(index);
+    const value = behavior.getValueAt(index);
+    const isFocused = focusedIndex === index;
+
+    // Register ref with context
+    useEffect(() => {
+      const element = internalRef.current;
+      registerInput(index, element);
+
+      return () => {
+        registerInput(index, null);
+      };
+    }, [index, registerInput]);
+
+    // Merge refs
+    const mergedRef = useCallback(
+      (element: HTMLInputElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = element;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLInputElement | null>).current = element;
+        }
+      },
+      [ref]
+    );
+
+    const handleInput = useCallback(
+      (event: React.FormEvent<HTMLInputElement>) => {
+        const input = event.currentTarget;
+        const char = input.value.slice(-1);
+
+        if (char) {
+          behavior.input(index, char);
+
+          // Auto-advance to next input
+          const nextIndex = behavior.state.focusedIndex;
+          if (nextIndex !== null && nextIndex !== index) {
+            focusInput(nextIndex);
+          }
+        }
+
+        // Reset input value to single character
+        input.value = behavior.getValueAt(index);
+      },
+      [behavior, index, focusInput]
+    );
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLInputElement>) => {
+        switch (event.key) {
+          case "Backspace": {
+            event.preventDefault();
+            behavior.backspace(index);
+            const prevIndex = behavior.state.focusedIndex;
+            if (prevIndex !== null && prevIndex !== index) {
+              focusInput(prevIndex);
+            }
+            break;
+          }
+          case "ArrowLeft":
+            event.preventDefault();
+            behavior.focusPrev();
+            if (behavior.state.focusedIndex !== null) {
+              focusInput(behavior.state.focusedIndex);
+            }
+            break;
+          case "ArrowRight":
+            event.preventDefault();
+            behavior.focusNext();
+            if (behavior.state.focusedIndex !== null) {
+              focusInput(behavior.state.focusedIndex);
+            }
+            break;
+          case "Delete": {
+            event.preventDefault();
+            const chars = behavior.state.value.split("");
+            chars[index] = " ";
+            behavior.setValue(chars.join(""));
+            break;
+          }
+        }
+
+        onKeyDown?.(event);
+      },
+      [behavior, index, focusInput, onKeyDown]
+    );
+
+    const handlePaste = useCallback(
+      (event: ClipboardEvent<HTMLInputElement>) => {
+        event.preventDefault();
+        const pastedText = event.clipboardData.getData("text");
+        if (pastedText) {
+          behavior.paste(pastedText);
+          if (behavior.state.focusedIndex !== null) {
+            focusInput(behavior.state.focusedIndex);
+          }
+        }
+        onPaste?.(event);
+      },
+      [behavior, focusInput, onPaste]
+    );
+
+    const handleFocus = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        setFocusedIndex(index);
+        behavior.focus(index);
+        event.currentTarget.select();
+        onFocus?.(event);
+      },
+      [behavior, index, setFocusedIndex, onFocus]
+    );
+
+    const handleBlur = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        setFocusedIndex(null);
+        onBlur?.(event);
+      },
+      [setFocusedIndex, onBlur]
+    );
+
+    return (
+      <input
+        ref={mergedRef}
+        type={mask ? "password" : inputProps.type}
+        inputMode={inputProps.inputMode}
+        maxLength={inputProps.maxLength}
+        autoComplete={inputProps.autoComplete}
+        aria-label={inputProps["aria-label"]}
+        tabIndex={inputProps.tabIndex}
+        value={value}
+        disabled={disabled}
+        className={className}
+        data-index={index}
+        data-focused={isFocused || undefined}
+        data-filled={value ? true : undefined}
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePaste}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...restProps}
+      />
+    );
+  }
+);
+
+PinInputField.displayName = "PinInput.Field";