@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/popover/wc/popover.ts

@@ -0,0 +1,343 @@
+import {
+  type AnchorPosition,
+  type DismissableLayer,
+  type Placement,
+  type Presence,
+  createAnchorPosition,
+  createDismissableLayer,
+  createPresence,
+  prefersReducedMotion,
+} from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property } 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 component to ensure it's registered
+import type { DsPopoverContent } from "./popover-content.js";
+import "./popover-content.js";
+
+/**
+ * Non-modal popover component with anchor positioning.
+ *
+ * Unlike Dialog, Popover does not trap focus and allows Tab to exit.
+ * Positioned relative to its trigger using anchor positioning.
+ *
+ * @element ds-popover
+ *
+ * @slot trigger - Button or element that opens the popover
+ * @slot - Popover content (ds-popover-content)
+ *
+ * @fires ds:open - Fired when popover opens
+ * @fires ds:close - Fired when popover closes
+ *
+ * @example
+ * ```html
+ * <ds-popover>
+ *   <button slot="trigger">Open Menu</button>
+ *   <ds-popover-content>
+ *     <button>Option 1</button>
+ *     <button>Option 2</button>
+ *   </ds-popover-content>
+ * </ds-popover>
+ * ```
+ */
+export class DsPopover extends DSElement {
+  /** Whether the popover is open */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /** Placement relative to trigger */
+  @property({ type: String, reflect: true })
+  placement: Placement = "bottom";
+
+  /** Offset distance from trigger in pixels */
+  @property({ type: Number })
+  offset = 8;
+
+  /** Whether to flip placement when near viewport edge */
+  @property({ type: Boolean })
+  flip = true;
+
+  /** Whether Escape key closes the popover */
+  @property({
+    attribute: "close-on-escape",
+    converter: {
+      fromAttribute: (value: string | null) => value !== "false",
+      toAttribute: (value: boolean) => (value ? "" : "false"),
+    },
+  })
+  closeOnEscape = true;
+
+  /** Whether clicking outside closes the popover */
+  @property({
+    attribute: "close-on-outside-click",
+    converter: {
+      fromAttribute: (value: string | null) => value !== "false",
+      toAttribute: (value: boolean) => (value ? "" : "false"),
+    },
+  })
+  closeOnOutsideClick = true;
+
+  /** Whether to animate open/close transitions */
+  @property({ type: Boolean })
+  animated = true;
+
+  private anchorPosition: AnchorPosition | null = null;
+  private dismissLayer: DismissableLayer | null = null;
+  private presence: Presence | null = null;
+  private triggerElement: HTMLElement | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+  private scrollHandler: (() => void) | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Listen for trigger clicks
+    this.addEventListener("click", this.handleTriggerClick);
+
+    // Setup after first render
+    this.updateComplete.then(() => {
+      this.setupTriggerAccessibility();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleTriggerClick);
+    this.cleanup();
+  }
+
+  /**
+   * Opens the popover.
+   */
+  public show(): void {
+    if (this.open) return;
+
+    this.open = true;
+    emitEvent(this, StandardEvents.OPEN);
+  }
+
+  /**
+   * Closes the popover.
+   */
+  public close(): void {
+    if (!this.open) return;
+
+    const content = this.querySelector("ds-popover-content") as DsPopoverContent | null;
+
+    // If animated, use presence for exit animation
+    if (this.animated && content && !prefersReducedMotion()) {
+      // Cleanup dismiss layer so clicks don't re-trigger close
+      this.dismissLayer?.deactivate();
+      this.dismissLayer = null;
+
+      // Create presence for exit animation
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.completeClose();
+        },
+      });
+      this.presence.hide(content);
+    } else {
+      // No animation - close immediately
+      this.cleanup();
+      this.open = false;
+      emitEvent(this, StandardEvents.CLOSE);
+
+      // Return focus to trigger
+      this.triggerElement?.focus();
+    }
+  }
+
+  /**
+   * Completes the close after exit animation.
+   */
+  private completeClose(): void {
+    this.cleanup();
+    this.open = false;
+    emitEvent(this, StandardEvents.CLOSE);
+
+    // Return focus to trigger
+    this.triggerElement?.focus();
+  }
+
+  /**
+   * Toggles the popover open/closed state.
+   */
+  public toggle(): void {
+    if (this.open) {
+      this.close();
+    } else {
+      this.show();
+    }
+  }
+
+  private handleTriggerClick = (event: Event): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"]');
+
+    if (trigger && this.contains(trigger)) {
+      event.preventDefault();
+      this.triggerElement = trigger as HTMLElement;
+      this.toggle();
+    }
+  };
+
+  private handleDismiss = (reason: "escape" | "outside-click"): void => {
+    if (reason === "escape" && this.closeOnEscape) {
+      this.close();
+    } else if (reason === "outside-click" && this.closeOnOutsideClick) {
+      this.close();
+    }
+  };
+
+  private setupTriggerAccessibility(): void {
+    const trigger = this.querySelector('[slot="trigger"]');
+    const content = this.querySelector("ds-popover-content");
+
+    if (trigger && content) {
+      // Store reference
+      this.triggerElement = trigger as HTMLElement;
+
+      // Set ARIA attributes on trigger
+      trigger.setAttribute("aria-haspopup", "true");
+      trigger.setAttribute("aria-expanded", String(this.open));
+      trigger.setAttribute("aria-controls", content.id);
+    }
+  }
+
+  private updateTriggerAria(): void {
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", String(this.open));
+    }
+  }
+
+  private setupPositioning(): void {
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    const content = this.querySelector("ds-popover-content") as HTMLElement | null;
+
+    if (!trigger || !content) return;
+
+    // Setup anchor positioning
+    this.anchorPosition = createAnchorPosition({
+      anchor: trigger,
+      floating: content,
+      placement: this.placement,
+      offset: this.offset,
+      flip: this.flip,
+      onPositionChange: (pos) => {
+        content.setAttribute("data-placement", pos.placement);
+      },
+    });
+
+    // Setup resize observer for repositioning
+    this.resizeObserver = new ResizeObserver(() => {
+      this.anchorPosition?.update();
+    });
+    this.resizeObserver.observe(trigger);
+    this.resizeObserver.observe(content);
+
+    // Setup scroll handler for repositioning
+    this.scrollHandler = () => {
+      this.anchorPosition?.update();
+    };
+    window.addEventListener("scroll", this.scrollHandler, { passive: true });
+    window.addEventListener("resize", this.scrollHandler, { passive: true });
+  }
+
+  private setupDismissLayer(): void {
+    const content = this.querySelector("ds-popover-content") as HTMLElement | null;
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+
+    if (!content) return;
+
+    this.dismissLayer = createDismissableLayer({
+      container: content,
+      excludeElements: trigger ? [trigger] : [],
+      onDismiss: this.handleDismiss,
+      closeOnEscape: this.closeOnEscape,
+      closeOnOutsideClick: this.closeOnOutsideClick,
+    });
+    this.dismissLayer.activate();
+  }
+
+  private cleanup(): void {
+    // Cleanup anchor positioning
+    this.anchorPosition?.destroy();
+    this.anchorPosition = null;
+
+    // Cleanup dismiss layer
+    this.dismissLayer?.deactivate();
+    this.dismissLayer = null;
+
+    // Cleanup presence
+    this.presence?.destroy();
+    this.presence = null;
+
+    // Cleanup resize observer
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+
+    // Cleanup scroll handler
+    if (this.scrollHandler) {
+      window.removeEventListener("scroll", this.scrollHandler);
+      window.removeEventListener("resize", this.scrollHandler);
+      this.scrollHandler = null;
+    }
+  }
+
+  override async updated(changedProperties: Map<string, unknown>): Promise<void> {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("open")) {
+      this.updateTriggerAria();
+
+      const content = this.querySelector("ds-popover-content") as DsPopoverContent | null;
+
+      if (this.open) {
+        // Show content
+        content?.removeAttribute("hidden");
+
+        // Set data-state to open for entry animation
+        if (content) {
+          content.dataState = "open";
+        }
+
+        // Wait for DOM update
+        await this.updateComplete;
+
+        // Setup positioning and dismiss
+        this.setupPositioning();
+        this.setupDismissLayer();
+      } else {
+        // Hide content
+        content?.setAttribute("hidden", "");
+      }
+    }
+
+    // Update positioning if placement or offset changes while open
+    if (this.open && (changedProperties.has("placement") || changedProperties.has("offset"))) {
+      this.cleanup();
+      this.setupPositioning();
+      this.setupDismissLayer();
+    }
+  }
+
+  override render() {
+    return html`
+      <slot name="trigger"></slot>
+      <slot></slot>
+    `;
+  }
+}
+
+define("ds-popover", DsPopover);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-popover": DsPopover;
+  }
+}

package/templates/progress/index.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { type HTMLAttributes, createElement, forwardRef } from "react";
+import "@hypoth-ui/wc";
+import {
+  type ResponsiveProp,
+  generateResponsiveDataAttr,
+  isResponsiveObject,
+  resolveResponsiveValue,
+} from "../../primitives/responsive.js";
+
+export type ProgressVariant = "linear" | "circular";
+export type ProgressSize = "sm" | "md" | "lg";
+
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /**
+   * Current progress value (0-100). Omit for indeterminate.
+   */
+  value?: number;
+
+  /**
+   * Maximum value.
+   * @default 100
+   */
+  max?: number;
+
+  /**
+   * Visual variant.
+   * @default "linear"
+   */
+  variant?: ProgressVariant;
+
+  /**
+   * Size variant - supports responsive object syntax.
+   * @default "md"
+   * @example
+   * ```tsx
+   * // Single value
+   * <Progress value={75} size="md" />
+   *
+   * // Responsive
+   * <Progress value={75} size={{ base: "sm", md: "lg" }} />
+   * ```
+   */
+  size?: ResponsiveProp<ProgressSize>;
+
+  /**
+   * Accessible label.
+   */
+  label?: string;
+
+  /**
+   * Show value as percentage text (circular only).
+   * @default false
+   */
+  showValue?: boolean;
+}
+
+/**
+ * Progress indicator component for showing loading or completion status.
+ *
+ * @example
+ * ```tsx
+ * // Determinate linear progress
+ * <Progress value={75} label="Uploading..." />
+ *
+ * // Indeterminate circular progress
+ * <Progress variant="circular" label="Loading" />
+ *
+ * // Circular with percentage display
+ * <Progress variant="circular" value={45} showValue />
+ * ```
+ */
+export const Progress = forwardRef<HTMLElement, ProgressProps>(function Progress(
+  {
+    value,
+    max = 100,
+    variant = "linear",
+    size = "md",
+    label,
+    showValue = false,
+    className,
+    ...props
+  },
+  ref
+) {
+  // Resolve responsive size - use base value for the WC attribute
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : undefined;
+
+  return createElement("ds-progress", {
+    ref,
+    value,
+    max,
+    variant,
+    size: resolvedSize,
+    label,
+    "show-value": showValue || undefined,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...props,
+  });
+});
+
+// TypeScript declaration for JSX
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "ds-progress": ProgressProps & {
+        ref?: React.Ref<HTMLElement>;
+        "show-value"?: boolean;
+      };
+    }
+  }
+}

package/templates/progress/wc/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Progress component exports
+ */
+export { DsProgress, type ProgressVariant, type ProgressSize } from "./progress.js";

package/templates/progress/wc/progress.ts

@@ -0,0 +1,174 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export type ProgressVariant = "linear" | "circular";
+export type ProgressSize = "sm" | "md" | "lg";
+
+/**
+ * Progress indicator component.
+ *
+ * @element ds-progress
+ *
+ * @csspart track - The progress track
+ * @csspart bar - The progress bar/fill
+ * @csspart label - The accessible label
+ *
+ * @cssprop --ds-progress-track - Track background color
+ * @cssprop --ds-progress-fill - Fill/indicator color
+ * @cssprop --ds-progress-height - Track height (linear)
+ */
+export class DsProgress extends DSElement {
+  static override styles = [];
+
+  /**
+   * Current progress value (0-100). Omit for indeterminate.
+   */
+  @property({ type: Number })
+  value?: number;
+
+  /**
+   * Maximum value.
+   */
+  @property({ type: Number })
+  max = 100;
+
+  /**
+   * Visual variant.
+   */
+  @property({ type: String, reflect: true })
+  variant: ProgressVariant = "linear";
+
+  /**
+   * Size variant.
+   */
+  @property({ type: String, reflect: true })
+  size: ProgressSize = "md";
+
+  /**
+   * Accessible label.
+   */
+  @property({ type: String })
+  label = "";
+
+  /**
+   * Show value as percentage text (circular only).
+   */
+  @property({ type: Boolean, attribute: "show-value" })
+  showValue = false;
+
+  private get isIndeterminate(): boolean {
+    return this.value === undefined || this.value === null;
+  }
+
+  private get percentage(): number {
+    if (this.isIndeterminate) return 0;
+    return Math.min(100, Math.max(0, ((this.value ?? 0) / this.max) * 100));
+  }
+
+  private get valueText(): string {
+    if (this.isIndeterminate) {
+      return this.label || "Loading...";
+    }
+    return `${Math.round(this.percentage)}% complete`;
+  }
+
+  private renderLinear(): TemplateResult {
+    const classes = {
+      "ds-progress": true,
+    };
+
+    return html`
+      <div
+        part="track"
+        class=${classMap(classes)}
+        role="progressbar"
+        aria-valuenow=${this.isIndeterminate ? nothing : this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuetext=${this.valueText}
+        aria-label=${this.label || nothing}
+        ?aria-busy=${this.isIndeterminate}
+        data-size=${this.size}
+        ?data-indeterminate=${this.isIndeterminate}
+      >
+        <div
+          part="bar"
+          class="ds-progress__bar"
+          style=${this.isIndeterminate ? "" : `width: ${this.percentage}%`}
+        ></div>
+        ${
+          this.label
+            ? html`<span part="label" class="ds-progress__label">${this.label}</span>`
+            : nothing
+        }
+      </div>
+    `;
+  }
+
+  private renderCircular(): TemplateResult {
+    // SVG circle calculations
+    const size = this.size === "sm" ? 24 : this.size === "lg" ? 64 : 40;
+    const strokeWidth = this.size === "sm" ? 3 : this.size === "lg" ? 6 : 4;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (this.percentage / 100) * circumference;
+
+    const classes = {
+      "ds-progress-circular": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        role="progressbar"
+        aria-valuenow=${this.isIndeterminate ? nothing : this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuetext=${this.valueText}
+        aria-label=${this.label || nothing}
+        ?aria-busy=${this.isIndeterminate}
+        data-size=${this.size}
+        ?data-indeterminate=${this.isIndeterminate}
+      >
+        <svg class="ds-progress-circular__svg" viewBox="0 0 ${size} ${size}">
+          <circle
+            class="ds-progress-circular__track"
+            cx=${size / 2}
+            cy=${size / 2}
+            r=${radius}
+          />
+          <circle
+            class="ds-progress-circular__fill"
+            cx=${size / 2}
+            cy=${size / 2}
+            r=${radius}
+            stroke-dasharray=${circumference}
+            stroke-dashoffset=${this.isIndeterminate ? 0 : offset}
+          />
+        </svg>
+        ${
+          this.showValue && !this.isIndeterminate
+            ? html`<span class="ds-progress-circular__label">${Math.round(this.percentage)}%</span>`
+            : nothing
+        }
+      </div>
+    `;
+  }
+
+  override render(): TemplateResult {
+    return this.variant === "circular" ? this.renderCircular() : this.renderLinear();
+  }
+}
+
+// Register the component
+define("ds-progress", DsProgress);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-progress": DsProgress;
+  }
+}

package/templates/radio/radio.tsx

@@ -0,0 +1,43 @@
+import type React from "react";
+import { type HTMLAttributes, createElement, forwardRef, useEffect, useRef } from "react";
+
+export interface RadioProps extends HTMLAttributes<HTMLElement> {
+  /** Radio value */
+  value: string;
+  /** Whether disabled */
+  disabled?: boolean;
+  /** Radio label content */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-radio Web Component.
+ * Individual radio option within a RadioGroup.
+ */
+export const Radio = forwardRef<HTMLElement, RadioProps>((props, forwardedRef) => {
+  const { value, disabled = false, children, className, ...rest } = props;
+
+  const internalRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  return createElement(
+    "ds-radio",
+    {
+      ref: internalRef,
+      value,
+      disabled: disabled || undefined,
+      class: className,
+      ...rest,
+    },
+    children
+  );
+});
+
+Radio.displayName = "Radio";