@hypoth-ui/cli 0.0.1 → 0.1.0

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

@@ -0,0 +1,120 @@
+/**
+ * PinInput Root component - provides context to all PinInput compound components.
+ */
+
+import { createPinInputBehavior } from "@hypoth-ui/primitives-dom";
+import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import { PinInputProvider } from "./pin-input-context.js";
+
+export interface PinInputRootProps {
+  /** PinInput content */
+  children?: ReactNode;
+  /** Number of input fields */
+  length?: number;
+  /** Controlled value */
+  value?: string;
+  /** Default value (uncontrolled) */
+  defaultValue?: string;
+  /** Called when value changes */
+  onValueChange?: (value: string) => void;
+  /** Called when all digits entered */
+  onComplete?: (value: string) => void;
+  /** Allow alphanumeric characters */
+  alphanumeric?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Mask input (like password) */
+  mask?: boolean;
+}
+
+/**
+ * Root component for PinInput compound pattern.
+ * Provides context to Field components.
+ *
+ * @example
+ * ```tsx
+ * <PinInput.Root length={6} onComplete={(value) => verifyOTP(value)}>
+ *   <PinInput.Field index={0} />
+ *   <PinInput.Field index={1} />
+ *   <PinInput.Field index={2} />
+ *   <PinInput.Field index={3} />
+ *   <PinInput.Field index={4} />
+ *   <PinInput.Field index={5} />
+ * </PinInput.Root>
+ * ```
+ */
+export function PinInputRoot({
+  children,
+  length = 6,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  onComplete,
+  alphanumeric = false,
+  disabled = false,
+  mask = false,
+}: PinInputRootProps) {
+  // Support controlled and uncontrolled modes
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const setValue = useCallback(
+    (nextValue: string) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Create behavior instance
+  // biome-ignore lint/correctness/useExhaustiveDependencies: behavior is created once
+  const behavior = useMemo(
+    () =>
+      createPinInputBehavior({
+        length,
+        defaultValue: value,
+        alphanumeric,
+        disabled,
+        onValueChange: setValue,
+        onComplete,
+      }),
+    []
+  );
+
+  const registerInput = useCallback((index: number, ref: HTMLInputElement | null) => {
+    inputRefs.current[index] = ref;
+  }, []);
+
+  const focusInput = useCallback((index: number) => {
+    const input = inputRefs.current[index];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      behavior,
+      value,
+      length,
+      focusedIndex,
+      setFocusedIndex,
+      registerInput,
+      focusInput,
+      disabled,
+      mask,
+    }),
+    [behavior, value, length, focusedIndex, registerInput, focusInput, disabled, mask]
+  );
+
+  return <PinInputProvider value={contextValue}>{children}</PinInputProvider>;
+}
+
+PinInputRoot.displayName = "PinInput.Root";

package/templates/pin-input/wc/index.ts

@@ -0,0 +1 @@
+export { DsPinInput } from "./pin-input.js";

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

@@ -0,0 +1,259 @@
+/**
+ * PinInput component for PIN/OTP entry with auto-advance.
+ *
+ * @element ds-pin-input
+ * @fires ds:change - Fired on value change with { value }
+ * @fires ds:complete - Fired when all digits entered
+ *
+ * @example
+ * ```html
+ * <!-- 6-digit PIN -->
+ * <ds-pin-input length="6"></ds-pin-input>
+ *
+ * <!-- 4-digit with initial value -->
+ * <ds-pin-input length="4" value="1234"></ds-pin-input>
+ *
+ * <!-- Alphanumeric code -->
+ * <ds-pin-input length="6" alphanumeric></ds-pin-input>
+ * ```
+ */
+
+import { type PinInputBehavior, createPinInputBehavior } from "@hypoth-ui/primitives-dom";
+import { html, nothing } 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";
+
+export class DsPinInput extends DSElement {
+  /** Number of input fields */
+  @property({ type: Number, reflect: true })
+  length = 6;
+
+  /** Current value */
+  @property({ type: String, reflect: true })
+  value = "";
+
+  /** Allow alphanumeric characters */
+  @property({ type: Boolean, reflect: true })
+  alphanumeric = false;
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Mask input (like password) */
+  @property({ type: Boolean, reflect: true })
+  mask = false;
+
+  /** ARIA label */
+  @property({ type: String, attribute: "aria-label" })
+  override ariaLabel: string | null = null;
+
+  @state()
+  private behavior: PinInputBehavior | null = null;
+
+  @state()
+  private focusedIndex: number | null = null;
+
+  private inputRefs: (HTMLInputElement | null)[] = [];
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.initBehavior();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.behavior?.destroy();
+    this.behavior = null;
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has("length") ||
+      changedProperties.has("alphanumeric") ||
+      changedProperties.has("disabled")
+    ) {
+      this.initBehavior();
+    }
+  }
+
+  private initBehavior(): void {
+    this.behavior?.destroy();
+
+    this.behavior = createPinInputBehavior({
+      length: this.length,
+      defaultValue: this.value,
+      alphanumeric: this.alphanumeric,
+      disabled: this.disabled,
+      onValueChange: (value) => {
+        this.value = value;
+        emitEvent(this, StandardEvents.CHANGE, { detail: { value } });
+      },
+      onComplete: (value) => {
+        emitEvent(this, "ds:complete", { detail: { value } });
+      },
+    });
+
+    this.inputRefs = new Array(this.length).fill(null);
+  }
+
+  /** Public method to clear the input */
+  clear(): void {
+    this.behavior?.clear();
+    this.focusInput(0);
+  }
+
+  /** Public method to set value programmatically */
+  setValue(value: string): void {
+    this.behavior?.setValue(value);
+  }
+
+  private focusInput(index: number): void {
+    const input = this.inputRefs[index];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }
+
+  private handleInput(index: number, event: InputEvent): void {
+    if (!this.behavior) return;
+
+    const input = event.target as HTMLInputElement;
+    const char = input.value.slice(-1); // Get last character
+
+    if (char) {
+      this.behavior.input(index, char);
+
+      // Auto-advance to next input
+      const nextIndex = this.behavior.state.focusedIndex;
+      if (nextIndex !== null && nextIndex !== index) {
+        this.focusInput(nextIndex);
+      }
+    }
+
+    // Clear input to prevent accumulation
+    input.value = this.behavior.getValueAt(index);
+  }
+
+  private handleKeyDown(index: number, event: KeyboardEvent): void {
+    if (!this.behavior) return;
+
+    switch (event.key) {
+      case "Backspace": {
+        event.preventDefault();
+        this.behavior.backspace(index);
+        const prevIndex = this.behavior.state.focusedIndex;
+        if (prevIndex !== null && prevIndex !== index) {
+          this.focusInput(prevIndex);
+        }
+        break;
+      }
+      case "ArrowLeft":
+        event.preventDefault();
+        this.behavior.focusPrev();
+        if (this.behavior.state.focusedIndex !== null) {
+          this.focusInput(this.behavior.state.focusedIndex);
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        this.behavior.focusNext();
+        if (this.behavior.state.focusedIndex !== null) {
+          this.focusInput(this.behavior.state.focusedIndex);
+        }
+        break;
+      case "Delete": {
+        event.preventDefault();
+        // Clear current position without moving
+        const chars = this.behavior.state.value.split("");
+        chars[index] = " ";
+        this.behavior.setValue(chars.join(""));
+        break;
+      }
+    }
+  }
+
+  private handlePaste(event: ClipboardEvent): void {
+    event.preventDefault();
+    const pastedText = event.clipboardData?.getData("text") ?? "";
+    if (pastedText && this.behavior) {
+      this.behavior.paste(pastedText);
+      // Focus last filled position
+      const focusedIdx = this.behavior.state.focusedIndex;
+      if (focusedIdx !== null) {
+        this.focusInput(focusedIdx);
+      }
+    }
+  }
+
+  private handleFocus(index: number): void {
+    this.focusedIndex = index;
+    this.behavior?.focus(index);
+  }
+
+  private handleBlur(): void {
+    this.focusedIndex = null;
+  }
+
+  override render() {
+    if (!this.behavior) return nothing;
+
+    const containerProps = this.behavior.getContainerProps();
+    const inputs = [];
+
+    for (let i = 0; i < this.length; i++) {
+      const inputProps = this.behavior.getInputProps(i);
+      const value = this.behavior.getValueAt(i);
+      const isFocused = this.focusedIndex === i;
+
+      inputs.push(html`
+        <input
+          class="ds-pin-input__field"
+          type=${this.mask ? "password" : inputProps.type}
+          inputmode=${inputProps.inputMode}
+          maxlength=${inputProps.maxLength}
+          autocomplete=${inputProps.autoComplete}
+          aria-label=${inputProps["aria-label"]}
+          tabindex=${inputProps.tabIndex}
+          .value=${value}
+          ?disabled=${this.disabled}
+          data-index=${i}
+          data-focused=${isFocused || nothing}
+          data-filled=${value ? true : nothing}
+          @input=${(e: InputEvent) => this.handleInput(i, e)}
+          @keydown=${(e: KeyboardEvent) => this.handleKeyDown(i, e)}
+          @paste=${this.handlePaste}
+          @focus=${() => this.handleFocus(i)}
+          @blur=${this.handleBlur}
+          .ref=${(el: HTMLInputElement | null) => {
+            this.inputRefs[i] = el;
+          }}
+        />
+      `);
+    }
+
+    return html`
+      <div
+        class="ds-pin-input"
+        role=${containerProps.role}
+        aria-label=${this.ariaLabel || containerProps["aria-label"]}
+        data-disabled=${this.disabled || nothing}
+      >
+        ${inputs}
+      </div>
+    `;
+  }
+}
+
+define("ds-pin-input", DsPinInput);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pin-input": DsPinInput;
+  }
+}

package/templates/popover/popover.tsx

@@ -0,0 +1,121 @@
+import type React from "react";
+import {
+  type HTMLAttributes,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+
+export type Placement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
+
+export interface PopoverProps extends HTMLAttributes<HTMLElement> {
+  /** Whether the popover is open */
+  open?: boolean;
+  /** Placement relative to trigger */
+  placement?: Placement;
+  /** Offset from trigger in pixels */
+  offset?: number;
+  /** Whether to flip placement when near viewport edge */
+  flip?: boolean;
+  /** Whether Escape closes the popover */
+  closeOnEscape?: boolean;
+  /** Whether clicking outside closes the popover */
+  closeOnOutsideClick?: boolean;
+  /** Handler for open event */
+  onOpen?: () => void;
+  /** Handler for close event */
+  onClose?: () => void;
+  /** Popover content */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-popover Web Component.
+ * Non-modal popover with anchor positioning.
+ */
+export const Popover = forwardRef<HTMLElement, PopoverProps>((props, forwardedRef) => {
+  const {
+    open = false,
+    placement = "bottom",
+    offset = 8,
+    flip = true,
+    closeOnEscape = true,
+    closeOnOutsideClick = true,
+    onOpen,
+    onClose,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const internalRef = useRef<HTMLElement>(null);
+
+  // Store handlers in refs for stable callback references
+  const onOpenRef = useRef(onOpen);
+  const onCloseRef = useRef(onClose);
+  onOpenRef.current = onOpen;
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  // Stable handlers that read from refs
+  const handleOpen = useCallback(() => {
+    onOpenRef.current?.();
+  }, []);
+
+  const handleClose = useCallback(() => {
+    onCloseRef.current?.();
+  }, []);
+
+  // Handle events - no handler deps needed
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element) return;
+
+    element.addEventListener("ds:open", handleOpen);
+    element.addEventListener("ds:close", handleClose);
+
+    return () => {
+      element.removeEventListener("ds:open", handleOpen);
+      element.removeEventListener("ds:close", handleClose);
+    };
+  }, [handleOpen, handleClose]);
+
+  return createElement(
+    "ds-popover",
+    {
+      ref: internalRef,
+      open: open || undefined,
+      placement,
+      offset,
+      flip: flip || undefined,
+      "close-on-escape": closeOnEscape ? undefined : "false",
+      "close-on-outside-click": closeOnOutsideClick ? undefined : "false",
+      class: className,
+      ...rest,
+    },
+    children
+  );
+});
+
+Popover.displayName = "Popover";

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

@@ -0,0 +1,66 @@
+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 PopoverContentState = "open" | "closed";
+
+/**
+ * Popover content container.
+ *
+ * @element ds-popover-content
+ *
+ * @slot - Content to display in the popover
+ *
+ * @attr {string} data-state - Animation state ("open" or "closed")
+ *
+ * @example
+ * ```html
+ * <ds-popover>
+ *   <button slot="trigger">Open</button>
+ *   <ds-popover-content>
+ *     <p>Popover content here</p>
+ *     <button>Action</button>
+ *   </ds-popover-content>
+ * </ds-popover>
+ * ```
+ */
+export class DsPopoverContent extends DSElement {
+  /** Unique ID for ARIA association */
+  @property({ type: String, reflect: true })
+  override id = "";
+
+  /** Animation state (open or closed) - set by parent ds-popover */
+  @property({ type: String, reflect: true, attribute: "data-state" })
+  dataState: PopoverContentState = "closed";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID if not set
+    if (!this.id) {
+      this.id = `popover-content-${crypto.randomUUID().slice(0, 8)}`;
+    }
+
+    // Hidden by default (parent popover controls visibility)
+    this.setAttribute("hidden", "");
+  }
+
+  override render() {
+    // Note: No role attribute by default since popover is non-modal
+    // Developers can add aria-label or role="dialog" if needed
+    return html`
+      <div class="ds-popover-content" part="container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+define("ds-popover-content", DsPopoverContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-popover-content": DsPopoverContent;
+  }
+}