@hypoth-ui/cli 0.0.1 → 0.1.0

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

@@ -0,0 +1,137 @@
+/**
+ * NumberInput Root component - provides context to all NumberInput compound components.
+ */
+
+import { createNumberInputBehavior } from "@hypoth-ui/primitives-dom";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { type NumberInputFormat, NumberInputProvider } from "./number-input-context.js";
+
+export interface NumberInputRootProps {
+  /** NumberInput content */
+  children?: ReactNode;
+  /** Minimum allowed value */
+  min?: number;
+  /** Maximum allowed value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Decimal precision */
+  precision?: number;
+  /** Controlled value */
+  value?: number | null;
+  /** Default value (uncontrolled) */
+  defaultValue?: number;
+  /** Called when value changes */
+  onValueChange?: (value: number) => void;
+  /** Format type */
+  format?: NumberInputFormat;
+  /** Currency code (for currency format) */
+  currency?: string;
+  /** Locale for formatting */
+  locale?: string;
+  /** Allow empty input */
+  allowEmpty?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/**
+ * Root component for NumberInput compound pattern.
+ * Provides context to Input, Increment, and Decrement components.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput.Root min={0} max={100} onValueChange={(v) => console.log(v)}>
+ *   <NumberInput.Decrement>-</NumberInput.Decrement>
+ *   <NumberInput.Input />
+ *   <NumberInput.Increment>+</NumberInput.Increment>
+ * </NumberInput.Root>
+ * ```
+ */
+export function NumberInputRoot({
+  children,
+  min,
+  max,
+  step = 1,
+  precision = 0,
+  value: controlledValue,
+  defaultValue = 0,
+  onValueChange,
+  format = "decimal",
+  currency = "USD",
+  locale = "en-US",
+  allowEmpty = false,
+  disabled = false,
+}: NumberInputRootProps) {
+  // Support controlled and uncontrolled modes
+  const [internalValue, setInternalValue] = useState<number | null>(
+    defaultValue ?? (allowEmpty ? null : 0)
+  );
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  // Input state
+  const [inputValue, setInputValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+
+  const setValue = useCallback(
+    (nextValue: number | null) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      if (nextValue !== null) {
+        onValueChange?.(nextValue);
+      }
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Create behavior instance
+  // biome-ignore lint/correctness/useExhaustiveDependencies: behavior is created once
+  const behavior = useMemo(
+    () =>
+      createNumberInputBehavior({
+        min,
+        max,
+        step,
+        precision,
+        defaultValue: value ?? undefined,
+        format,
+        currency,
+        locale,
+        allowEmpty,
+        disabled,
+        onValueChange: setValue,
+      }),
+    []
+  );
+
+  // Initialize input value - sync from behavior on mount
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional one-time init
+  useMemo(() => {
+    setInputValue(behavior.state.inputValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      behavior,
+      value,
+      setValue,
+      min,
+      max,
+      step,
+      precision,
+      disabled,
+      inputValue,
+      setInputValue,
+      isFocused,
+      setIsFocused,
+    }),
+    [behavior, value, setValue, min, max, step, precision, disabled, inputValue, isFocused]
+  );
+
+  return <NumberInputProvider value={contextValue}>{children}</NumberInputProvider>;
+}
+
+NumberInputRoot.displayName = "NumberInput.Root";

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

@@ -0,0 +1 @@
+export { DsNumberInput, type NumberInputFormat } from "./number-input.js";

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

@@ -0,0 +1,283 @@
+/**
+ * NumberInput component for numeric value input with increment/decrement controls.
+ *
+ * @element ds-number-input
+ * @fires ds:change - Fired on value change with { value }
+ *
+ * @example
+ * ```html
+ * <!-- Basic number input -->
+ * <ds-number-input min="0" max="100" value="50"></ds-number-input>
+ *
+ * <!-- With step and precision -->
+ * <ds-number-input step="0.01" precision="2" value="9.99"></ds-number-input>
+ *
+ * <!-- Currency format -->
+ * <ds-number-input format="currency" currency="USD" precision="2"></ds-number-input>
+ * ```
+ */
+
+import { type NumberInputBehavior, createNumberInputBehavior } 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 type NumberInputFormat = "decimal" | "currency" | "percent";
+
+export class DsNumberInput extends DSElement {
+  /** Minimum allowed value */
+  @property({ type: Number, reflect: true })
+  min: number | undefined = undefined;
+
+  /** Maximum allowed value */
+  @property({ type: Number, reflect: true })
+  max: number | undefined = undefined;
+
+  /** Step increment */
+  @property({ type: Number, reflect: true })
+  step = 1;
+
+  /** Current value */
+  @property({ type: Number, reflect: true })
+  value: number | undefined = undefined;
+
+  /** Decimal precision */
+  @property({ type: Number, reflect: true })
+  precision = 0;
+
+  /** Format type */
+  @property({ type: String, reflect: true })
+  format: NumberInputFormat = "decimal";
+
+  /** Currency code (for currency format) */
+  @property({ type: String, reflect: true })
+  currency = "USD";
+
+  /** Locale for formatting */
+  @property({ type: String, reflect: true })
+  locale = "en-US";
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Placeholder text */
+  @property({ type: String })
+  placeholder = "";
+
+  /** Form field name */
+  @property({ type: String, reflect: true })
+  name = "";
+
+  /** ARIA label */
+  @property({ type: String, attribute: "aria-label" })
+  override ariaLabel: string | null = null;
+
+  /** Allow empty input */
+  @property({ type: Boolean, attribute: "allow-empty" })
+  allowEmpty = false;
+
+  /** Show increment/decrement buttons */
+  @property({ type: Boolean, attribute: "show-buttons" })
+  showButtons = true;
+
+  /** Prefix text (displayed before input) */
+  @property({ type: String })
+  prefix = "";
+
+  /** Suffix text (displayed after input) */
+  @property({ type: String })
+  suffix = "";
+
+  @state()
+  private behavior: NumberInputBehavior | null = null;
+
+  @state()
+  private inputValue = "";
+
+  @state()
+  private isFocused = false;
+
+  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);
+
+    // Re-init behavior if key props change
+    if (
+      changedProperties.has("min") ||
+      changedProperties.has("max") ||
+      changedProperties.has("step") ||
+      changedProperties.has("precision") ||
+      changedProperties.has("format") ||
+      changedProperties.has("currency") ||
+      changedProperties.has("locale") ||
+      changedProperties.has("allowEmpty") ||
+      changedProperties.has("disabled")
+    ) {
+      this.initBehavior();
+    }
+  }
+
+  private initBehavior(): void {
+    this.behavior?.destroy();
+
+    this.behavior = createNumberInputBehavior({
+      min: this.min,
+      max: this.max,
+      step: this.step,
+      precision: this.precision,
+      defaultValue: this.value,
+      format: this.format,
+      currency: this.currency,
+      locale: this.locale,
+      allowEmpty: this.allowEmpty,
+      disabled: this.disabled,
+      onValueChange: (value) => {
+        this.value = value;
+        emitEvent(this, StandardEvents.CHANGE, { detail: { value } });
+      },
+    });
+
+    this.inputValue = this.behavior.state.inputValue;
+  }
+
+  private handleInput(event: Event): void {
+    if (!this.behavior) return;
+    const input = event.target as HTMLInputElement;
+    this.inputValue = input.value;
+    this.behavior.handleInput(input.value);
+  }
+
+  private handleBlur(): void {
+    if (!this.behavior) return;
+    this.isFocused = false;
+    this.behavior.commit();
+    this.inputValue = this.behavior.state.inputValue;
+  }
+
+  private handleFocus(): void {
+    this.isFocused = true;
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (!this.behavior) return;
+    this.behavior.handleKeyDown(event);
+    this.inputValue = this.behavior.state.inputValue;
+  }
+
+  private handleIncrement(): void {
+    if (!this.behavior || this.disabled) return;
+    this.behavior.increment();
+    this.inputValue = this.behavior.state.inputValue;
+  }
+
+  private handleDecrement(): void {
+    if (!this.behavior || this.disabled) return;
+    this.behavior.decrement();
+    this.inputValue = this.behavior.state.inputValue;
+  }
+
+  override render() {
+    if (!this.behavior) return nothing;
+
+    const inputProps = this.behavior.getInputProps();
+    const isAtMin = this.min !== undefined && this.value !== undefined && this.value <= this.min;
+    const isAtMax = this.max !== undefined && this.value !== undefined && this.value >= this.max;
+
+    return html`
+      <div
+        class="ds-number-input"
+        data-disabled=${this.disabled || nothing}
+        data-focused=${this.isFocused || nothing}
+        data-invalid=${!this.behavior.state.isValid || nothing}
+      >
+        ${
+          this.showButtons
+            ? html`
+              <button
+                type="button"
+                class="ds-number-input__decrement"
+                aria-label="Decrement"
+                tabindex="-1"
+                ?disabled=${this.disabled || isAtMin}
+                @click=${this.handleDecrement}
+              >
+                <span aria-hidden="true">−</span>
+              </button>
+            `
+            : nothing
+        }
+
+        ${
+          this.prefix
+            ? html`<span class="ds-number-input__prefix" aria-hidden="true">${this.prefix}</span>`
+            : nothing
+        }
+
+        <input
+          type=${inputProps.type}
+          inputmode=${inputProps.inputMode}
+          role=${inputProps.role}
+          class="ds-number-input__field"
+          .value=${this.inputValue}
+          placeholder=${this.placeholder || nothing}
+          name=${this.name || nothing}
+          aria-label=${this.ariaLabel || nothing}
+          aria-valuemin=${inputProps["aria-valuemin"] ?? nothing}
+          aria-valuemax=${inputProps["aria-valuemax"] ?? nothing}
+          aria-valuenow=${inputProps["aria-valuenow"] ?? nothing}
+          aria-disabled=${inputProps["aria-disabled"] ?? nothing}
+          aria-invalid=${inputProps["aria-invalid"] ?? nothing}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @keydown=${this.handleKeyDown}
+        />
+
+        ${
+          this.suffix
+            ? html`<span class="ds-number-input__suffix" aria-hidden="true">${this.suffix}</span>`
+            : nothing
+        }
+
+        ${
+          this.showButtons
+            ? html`
+              <button
+                type="button"
+                class="ds-number-input__increment"
+                aria-label="Increment"
+                tabindex="-1"
+                ?disabled=${this.disabled || isAtMax}
+                @click=${this.handleIncrement}
+              >
+                <span aria-hidden="true">+</span>
+              </button>
+            `
+            : nothing
+        }
+      </div>
+    `;
+  }
+}
+
+define("ds-number-input", DsNumberInput);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-number-input": DsNumberInput;
+  }
+}

package/templates/pagination/index.tsx

@@ -0,0 +1,198 @@
+/**
+ * Pagination compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Pagination } from "@/components/ui";
+ *
+ * <Pagination.Root page={1} totalPages={10} onPageChange={(page) => console.log(page)}>
+ *   <Pagination.Content>
+ *     <Pagination.Previous />
+ *     <Pagination.Item><Pagination.Link page={1}>1</Pagination.Link></Pagination.Item>
+ *     <Pagination.Ellipsis />
+ *     <Pagination.Next />
+ *   </Pagination.Content>
+ * </Pagination.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PaginationRootProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  page?: number;
+  defaultPage?: number;
+  totalPages?: number;
+  onPageChange?: (page: number) => void;
+}
+
+export interface PaginationContentProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface PaginationItemProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface PaginationLinkProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  page: number;
+  active?: boolean;
+}
+
+export interface PaginationPreviousProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface PaginationNextProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface PaginationEllipsisProps extends HTMLAttributes<HTMLElement> {}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+const PaginationRoot = forwardRef<HTMLElement, PaginationRootProps>(function PaginationRoot(
+  {
+    children,
+    className,
+    page: controlledPage,
+    defaultPage = 1,
+    totalPages = 1,
+    onPageChange,
+    ...props
+  },
+  ref
+) {
+  const [internalPage, setInternalPage] = useState(defaultPage);
+  const isControlled = controlledPage !== undefined;
+  const page = isControlled ? controlledPage : internalPage;
+  const elementRef = useRef<HTMLElement>(null);
+
+  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 handlePageChange = useCallback(
+    (event: Event) => {
+      const e = event as CustomEvent<{ page: number }>;
+      if (!isControlled) setInternalPage(e.detail.page);
+      onPageChange?.(e.detail.page);
+    },
+    [isControlled, onPageChange]
+  );
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    element.addEventListener("ds:page-change", handlePageChange);
+    return () => element.removeEventListener("ds:page-change", handlePageChange);
+  }, [handlePageChange]);
+
+  return createElement(
+    "ds-pagination",
+    { ref: combinedRef, class: className, page, "total-pages": totalPages, ...props },
+    children
+  );
+});
+PaginationRoot.displayName = "Pagination.Root";
+
+const PaginationContent = forwardRef<HTMLElement, PaginationContentProps>(
+  function PaginationContent({ children, className, ...props }, ref) {
+    return createElement("ds-pagination-content", { ref, class: className, ...props }, children);
+  }
+);
+PaginationContent.displayName = "Pagination.Content";
+
+const PaginationItem = forwardRef<HTMLElement, PaginationItemProps>(function PaginationItem(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-pagination-item", { ref, class: className, ...props }, children);
+});
+PaginationItem.displayName = "Pagination.Item";
+
+const PaginationLink = forwardRef<HTMLElement, PaginationLinkProps>(function PaginationLink(
+  { children, className, page, active, ...props },
+  ref
+) {
+  return createElement(
+    "ds-pagination-link",
+    { ref, class: className, page, active: active || undefined, ...props },
+    children
+  );
+});
+PaginationLink.displayName = "Pagination.Link";
+
+const PaginationPrevious = forwardRef<HTMLElement, PaginationPreviousProps>(
+  function PaginationPrevious({ children, className, disabled, ...props }, ref) {
+    return createElement(
+      "ds-pagination-previous",
+      { ref, class: className, disabled: disabled || undefined, ...props },
+      children
+    );
+  }
+);
+PaginationPrevious.displayName = "Pagination.Previous";
+
+const PaginationNext = forwardRef<HTMLElement, PaginationNextProps>(function PaginationNext(
+  { children, className, disabled, ...props },
+  ref
+) {
+  return createElement(
+    "ds-pagination-next",
+    { ref, class: className, disabled: disabled || undefined, ...props },
+    children
+  );
+});
+PaginationNext.displayName = "Pagination.Next";
+
+const PaginationEllipsis = forwardRef<HTMLElement, PaginationEllipsisProps>(
+  function PaginationEllipsis({ className, ...props }, ref) {
+    return createElement("ds-pagination-ellipsis", { ref, class: className, ...props });
+  }
+);
+PaginationEllipsis.displayName = "Pagination.Ellipsis";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Pagination = {
+  Root: PaginationRoot,
+  Content: PaginationContent,
+  Item: PaginationItem,
+  Link: PaginationLink,
+  Previous: PaginationPrevious,
+  Next: PaginationNext,
+  Ellipsis: PaginationEllipsis,
+};
+
+export {
+  PaginationRoot,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/templates/pagination/wc/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Pagination component exports.
+ */
+
+export { DsPagination } from "./pagination.js";
+export { DsPaginationContent } from "./pagination-content.js";
+export { DsPaginationItem } from "./pagination-item.js";
+export { DsPaginationLink } from "./pagination-link.js";
+export { DsPaginationPrevious } from "./pagination-previous.js";
+export { DsPaginationNext } from "./pagination-next.js";
+export { DsPaginationEllipsis } from "./pagination-ellipsis.js";

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * PaginationEllipsis component - indicates more pages.
+ *
+ * @element ds-pagination-ellipsis
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsPaginationEllipsis extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("aria-hidden", "true");
+  }
+
+  override render() {
+    return html`<span>...</span>`;
+  }
+}
+
+define("ds-pagination-ellipsis", DsPaginationEllipsis);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagination-ellipsis": DsPaginationEllipsis;
+  }
+}