@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/sheet/wc/sheet.ts

@@ -0,0 +1,336 @@
+/**
+ * Sheet component - slide-in overlay panel from screen edge.
+ *
+ * Provides a modal overlay that slides in from any edge of the screen.
+ * Follows WAI-ARIA Dialog (Modal) pattern.
+ *
+ * @element ds-sheet
+ *
+ * @slot trigger - Button or element that opens the sheet
+ * @slot - Sheet content (ds-sheet-content)
+ *
+ * @fires ds:open - Fired when sheet opens
+ * @fires ds:close - Fired when sheet closes
+ *
+ * @example
+ * ```html
+ * <ds-sheet>
+ *   <button slot="trigger">Open Settings</button>
+ *   <ds-sheet-content side="right">
+ *     <ds-sheet-header>
+ *       <ds-sheet-title>Settings</ds-sheet-title>
+ *       <ds-sheet-description>Adjust your preferences</ds-sheet-description>
+ *     </ds-sheet-header>
+ *     <div>Settings content...</div>
+ *     <ds-sheet-footer>
+ *       <ds-sheet-close>Close</ds-sheet-close>
+ *     </ds-sheet-footer>
+ *   </ds-sheet-content>
+ * </ds-sheet>
+ * ```
+ */
+
+import {
+  type DialogBehavior,
+  type Presence,
+  createDialogBehavior,
+  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 { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+import { devWarn, hasRequiredChild, Warnings } from "../../utils/dev-warnings.js";
+
+// Import child components to ensure they're registered
+import type { DsSheetContent } from "./sheet-content.js";
+import "./sheet-content.js";
+import "./sheet-overlay.js";
+import "./sheet-header.js";
+import "./sheet-footer.js";
+import "./sheet-title.js";
+import "./sheet-description.js";
+import "./sheet-close.js";
+
+export class DsSheet extends DSElement {
+  /** Whether the sheet is open */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /** Whether Escape key closes the sheet */
+  @property({ type: Boolean, attribute: "close-on-escape" })
+  closeOnEscape = true;
+
+  /** Whether clicking the overlay closes the sheet */
+  @property({ type: Boolean, attribute: "close-on-overlay" })
+  closeOnOverlay = true;
+
+  /** Whether to animate open/close transitions */
+  @property({ type: Boolean })
+  animated = true;
+
+  /** Whether the sheet is closing (for animation) */
+  @state()
+  private isClosing = false;
+
+  private dialogBehavior: DialogBehavior | null = null;
+  private presence: Presence | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Listen for trigger clicks via event delegation
+    this.addEventListener("click", this.handleTriggerClick);
+
+    // Listen for close requests from child components
+    this.addEventListener("ds:sheet-close", this.handleCloseRequest as EventListener);
+
+    // Initialize dialog behavior
+    this.initDialogBehavior();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleTriggerClick);
+    this.removeEventListener("ds:sheet-close", this.handleCloseRequest as EventListener);
+    this.cleanup();
+  }
+
+  /**
+   * Initializes the dialog behavior primitive.
+   */
+  private initDialogBehavior(): void {
+    this.dialogBehavior = createDialogBehavior({
+      defaultOpen: this.open,
+      role: "dialog",
+      closeOnEscape: this.closeOnEscape,
+      closeOnOutsideClick: this.closeOnOverlay,
+      onOpenChange: (open) => {
+        // Sync state when behavior changes (e.g., from escape or outside click)
+        if (!open && this.open) {
+          this.handleBehaviorClose();
+        }
+      },
+    });
+
+    // Set trigger element if one exists
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (trigger) {
+      this.dialogBehavior.setTriggerElement(trigger);
+    }
+  }
+
+  /**
+   * Handles close triggered by the behavior (escape/outside click).
+   */
+  private handleBehaviorClose(): void {
+    const content = this.querySelector("ds-sheet-content") as DsSheetContent | null;
+
+    // If animated, use presence for exit animation
+    if (this.animated && content && !prefersReducedMotion()) {
+      this.isClosing = true;
+
+      // Create presence for exit animation
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.completeClose();
+        },
+      });
+      this.presence.hide(content);
+    } else {
+      // No animation - close immediately
+      this.open = false;
+      this.isClosing = false;
+      emitEvent(this, StandardEvents.CLOSE);
+    }
+  }
+
+  /**
+   * Opens the sheet.
+   */
+  public show(): void {
+    if (this.open) return;
+
+    // Store trigger element for focus return
+    const trigger = this.querySelector('[slot="trigger"]') as HTMLElement | null;
+    if (trigger) {
+      this.dialogBehavior?.setTriggerElement(trigger);
+    } else if (document.activeElement instanceof HTMLElement) {
+      this.dialogBehavior?.setTriggerElement(document.activeElement);
+    }
+
+    this.open = true;
+    this.dialogBehavior?.open();
+    emitEvent(this, StandardEvents.OPEN);
+  }
+
+  /**
+   * Closes the sheet.
+   */
+  public close(): void {
+    if (!this.open) return;
+
+    const content = this.querySelector("ds-sheet-content") as DsSheetContent | null;
+
+    // Close the behavior (deactivates focus trap and dismiss layer)
+    this.dialogBehavior?.close();
+
+    // If animated, use presence for exit animation
+    if (this.animated && content && !prefersReducedMotion()) {
+      this.isClosing = true;
+
+      // Create presence for exit animation
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.completeClose();
+        },
+      });
+      this.presence.hide(content);
+    } else {
+      // No animation - close immediately
+      this.open = false;
+      this.isClosing = false;
+      emitEvent(this, StandardEvents.CLOSE);
+    }
+  }
+
+  /**
+   * Completes the close after exit animation.
+   */
+  private completeClose(): void {
+    this.presence?.destroy();
+    this.presence = null;
+    this.open = false;
+    this.isClosing = false;
+    emitEvent(this, StandardEvents.CLOSE);
+  }
+
+  private handleTriggerClick = (event: Event): void => {
+    const target = event.target as HTMLElement;
+    const trigger = target.closest('[slot="trigger"]');
+
+    if (trigger && this.contains(trigger)) {
+      // Store trigger before opening
+      this.dialogBehavior?.setTriggerElement(trigger as HTMLElement);
+      this.show();
+    }
+  };
+
+  private handleCloseRequest = (): void => {
+    this.close();
+  };
+
+  private cleanup(): void {
+    this.dialogBehavior?.destroy();
+    this.dialogBehavior = null;
+    this.presence?.destroy();
+    this.presence = null;
+  }
+
+  override async updated(changedProperties: Map<string, unknown>): Promise<void> {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("open")) {
+      const content = this.querySelector("ds-sheet-content") as DsSheetContent | null;
+
+      if (this.open) {
+        // Wait for the next microtask to ensure DOM is committed
+        await this.updateComplete;
+
+        // Set data-state to open for entry animation
+        if (content) {
+          content.dataState = "open";
+        }
+
+        // Set content element on behavior (activates focus trap and dismiss layer)
+        this.dialogBehavior?.setContentElement(content);
+        this.updateContentAccessibility();
+      } else {
+        // Clear content element on behavior
+        this.dialogBehavior?.setContentElement(null);
+      }
+    }
+
+    // Sync behavior options when they change
+    if (changedProperties.has("closeOnEscape") || changedProperties.has("closeOnOverlay")) {
+      // Re-create behavior with new options
+      const wasOpen = this.dialogBehavior?.state.open;
+      this.dialogBehavior?.destroy();
+      this.initDialogBehavior();
+      if (wasOpen) {
+        this.dialogBehavior?.open();
+        const content = this.querySelector("ds-sheet-content") as HTMLElement | null;
+        this.dialogBehavior?.setContentElement(content);
+      }
+    }
+  }
+
+  /**
+   * Updates accessibility attributes on sheet content.
+   */
+  private updateContentAccessibility(): void {
+    const content = this.querySelector("ds-sheet-content");
+    if (!content || !this.dialogBehavior) return;
+
+    // Get props from behavior
+    const contentProps = this.dialogBehavior.getContentProps();
+
+    // Set role on content
+    content.setAttribute("role", "dialog");
+    content.setAttribute("aria-modal", contentProps["aria-modal"]);
+
+    // Dev warning: Check for required sheet title
+    if (!hasRequiredChild(this, "ds-sheet-title") && !this.getAttribute("aria-label")) {
+      devWarn(Warnings.dialogMissingTitle("ds-sheet"));
+    }
+
+    // Connect title via aria-labelledby
+    const title = this.querySelector("ds-sheet-title");
+    if (title) {
+      const titleProps = this.dialogBehavior.getTitleProps();
+      if (!title.id) {
+        title.id = titleProps.id;
+      }
+      content.setAttribute("aria-labelledby", title.id);
+    }
+
+    // Connect description via aria-describedby
+    const description = this.querySelector("ds-sheet-description");
+    if (description) {
+      const descProps = this.dialogBehavior.getDescriptionProps();
+      if (!description.id) {
+        description.id = descProps.id;
+      }
+      content.setAttribute("aria-describedby", description.id);
+      this.dialogBehavior.setHasDescription(true);
+    } else {
+      // Dev warning: Title without description
+      if (title) {
+        devWarn(Warnings.dialogMissingDescription("ds-sheet"));
+      }
+      this.dialogBehavior.setHasDescription(false);
+    }
+  }
+
+  override render() {
+    return html`
+      <slot name="trigger"></slot>
+      <ds-sheet-overlay
+        ?hidden=${!this.open}
+        ?data-closing=${this.isClosing}
+        @click=${this.closeOnOverlay ? this.handleCloseRequest : undefined}
+      ></ds-sheet-overlay>
+      <slot ?hidden=${!this.open}></slot>
+    `;
+  }
+}
+
+define("ds-sheet", DsSheet);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-sheet": DsSheet;
+  }
+}

package/templates/skeleton/index.tsx

@@ -0,0 +1,131 @@
+"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 SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+export type SkeletonSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SkeletonWidth = "full" | "3/4" | "1/2" | "1/4";
+export type SkeletonAnimation = "wave" | "pulse" | "none";
+
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /**
+   * Shape variant.
+   * @default "text"
+   */
+  variant?: SkeletonVariant;
+
+  /**
+   * Size preset for height - supports responsive object syntax.
+   * @example
+   * ```tsx
+   * // Single value
+   * <Skeleton size="md" />
+   *
+   * // Responsive
+   * <Skeleton size={{ base: "sm", md: "lg" }} />
+   * ```
+   */
+  size?: ResponsiveProp<SkeletonSize>;
+
+  /**
+   * Width preset.
+   */
+  width?: SkeletonWidth;
+
+  /**
+   * Custom width (CSS value).
+   */
+  customWidth?: string;
+
+  /**
+   * Custom height (CSS value).
+   */
+  customHeight?: string;
+
+  /**
+   * Animation type.
+   * @default "wave"
+   */
+  animation?: SkeletonAnimation;
+
+  /**
+   * Accessible label for screen readers.
+   * @default "Loading..."
+   */
+  label?: string;
+}
+
+/**
+ * Skeleton loading placeholder component for content that is loading.
+ *
+ * @example
+ * ```tsx
+ * // Text skeleton
+ * <Skeleton variant="text" width="3/4" />
+ *
+ * // Circular avatar skeleton
+ * <Skeleton variant="circular" customWidth="40px" customHeight="40px" />
+ *
+ * // Card skeleton layout
+ * <div className="space-y-2">
+ *   <Skeleton variant="rectangular" customHeight="200px" />
+ *   <Skeleton variant="text" width="1/2" />
+ *   <Skeleton variant="text" />
+ *   <Skeleton variant="text" width="3/4" />
+ * </div>
+ * ```
+ */
+export const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(
+  {
+    variant = "text",
+    size,
+    width,
+    customWidth,
+    customHeight,
+    animation = "wave",
+    label = "Loading...",
+    className,
+    ...props
+  },
+  ref
+) {
+  // Resolve responsive size - use base value for the WC attribute
+  const resolvedSize = size ? resolveResponsiveValue(size, "md") : undefined;
+  const isResponsive = size ? isResponsiveObject(size) : false;
+  const responsiveSizeAttr = isResponsive && size ? generateResponsiveDataAttr(size) : undefined;
+
+  return createElement("ds-skeleton", {
+    ref,
+    variant,
+    size: resolvedSize,
+    width,
+    "custom-width": customWidth,
+    "custom-height": customHeight,
+    animation,
+    label,
+    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-skeleton": SkeletonProps & {
+        ref?: React.Ref<HTMLElement>;
+        "custom-width"?: string;
+        "custom-height"?: string;
+      };
+    }
+  }
+}

package/templates/skeleton/wc/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Skeleton component exports
+ */
+export {
+  DsSkeleton,
+  type SkeletonVariant,
+  type SkeletonSize,
+  type SkeletonWidth,
+  type SkeletonAnimation,
+} from "./skeleton.js";

package/templates/skeleton/wc/skeleton.ts

@@ -0,0 +1,107 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+export type SkeletonSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SkeletonWidth = "full" | "3/4" | "1/2" | "1/4";
+export type SkeletonAnimation = "wave" | "pulse" | "none";
+
+/**
+ * Skeleton loading placeholder component.
+ *
+ * @element ds-skeleton
+ *
+ * @cssprop --ds-skeleton-bg - Background color
+ * @cssprop --ds-skeleton-highlight - Shimmer highlight color
+ * @cssprop --ds-skeleton-radius - Border radius
+ */
+export class DsSkeleton extends DSElement {
+  static override styles = [];
+
+  /**
+   * Shape variant.
+   */
+  @property({ type: String, reflect: true })
+  variant: SkeletonVariant = "text";
+
+  /**
+   * Size preset for height.
+   */
+  @property({ type: String, reflect: true })
+  size?: SkeletonSize;
+
+  /**
+   * Width preset.
+   */
+  @property({ type: String, reflect: true })
+  width?: SkeletonWidth;
+
+  /**
+   * Custom width (CSS value).
+   */
+  @property({ type: String, attribute: "custom-width" })
+  customWidth = "";
+
+  /**
+   * Custom height (CSS value).
+   */
+  @property({ type: String, attribute: "custom-height" })
+  customHeight = "";
+
+  /**
+   * Animation type.
+   */
+  @property({ type: String, reflect: true })
+  animation: SkeletonAnimation = "wave";
+
+  /**
+   * Accessible label for screen readers.
+   */
+  @property({ type: String })
+  label = "Loading...";
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-skeleton": true,
+    };
+
+    const styles: Record<string, string> = {};
+    if (this.customWidth) {
+      styles.width = this.customWidth;
+    }
+    if (this.customHeight) {
+      styles.height = this.customHeight;
+    }
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        role="status"
+        aria-busy="true"
+        aria-label=${this.label}
+        data-variant=${this.variant}
+        data-size=${this.size || nothing}
+        data-width=${!this.customWidth && this.width ? this.width : nothing}
+        data-animation=${this.animation}
+        ?data-no-animation=${this.animation === "none"}
+        style=${Object.keys(styles).length > 0 ? styleMap(styles) : nothing}
+      >
+        <span class="ds-visually-hidden">${this.label}</span>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-skeleton", DsSkeleton);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-skeleton": DsSkeleton;
+  }
+}

package/templates/slider/index.ts

@@ -0,0 +1,41 @@
+/**
+ * Slider compound component for numeric value selection.
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider.Root min={0} max={100} onValueChange={(v) => console.log(v)}>
+ *   <Slider.Track className="slider-track">
+ *     <Slider.Range className="slider-range" />
+ *     <Slider.Thumb className="slider-thumb" />
+ *   </Slider.Track>
+ * </Slider.Root>
+ *
+ * // Range slider
+ * <Slider.Root range min={0} max={1000} onRangeChange={(r) => console.log(r)}>
+ *   <Slider.Track className="slider-track">
+ *     <Slider.Range className="slider-range" />
+ *     <Slider.Thumb type="min" aria-label="Minimum" />
+ *     <Slider.Thumb type="max" aria-label="Maximum" />
+ *   </Slider.Track>
+ * </Slider.Root>
+ * ```
+ */
+
+export { SliderRoot, type SliderRootProps } from "./slider-root.js";
+export { SliderTrack, type SliderTrackProps } from "./slider-track.js";
+export { SliderRange, type SliderRangeProps } from "./slider-range.js";
+export { SliderThumb, type SliderThumbProps } from "./slider-thumb.js";
+export { useSliderContext, type SliderContextValue } from "./slider-context.js";
+
+export const Slider = {
+  Root: SliderRoot,
+  Track: SliderTrack,
+  Range: SliderRange,
+  Thumb: SliderThumb,
+} as const;
+
+import { SliderRange } from "./slider-range.js";
+import { SliderRoot } from "./slider-root.js";
+import { SliderThumb } from "./slider-thumb.js";
+import { SliderTrack } from "./slider-track.js";

package/templates/slider/slider-context.ts

@@ -0,0 +1,36 @@
+/**
+ * Slider context for compound component pattern.
+ */
+
+import type { SliderBehavior } from "@hypoth-ui/primitives-dom";
+import { createCompoundContext } from "../../utils/create-context.js";
+
+export interface SliderContextValue {
+  /** Slider behavior instance */
+  behavior: SliderBehavior;
+  /** Current value (single mode) */
+  value: number;
+  /** Set value (single mode) */
+  setValue: (value: number) => void;
+  /** Range values */
+  rangeValue: { min: number; max: number };
+  /** Set range values */
+  setRangeValue: (range: { min: number; max: number }) => void;
+  /** Whether in range mode */
+  range: boolean;
+  /** Min constraint */
+  min: number;
+  /** Max constraint */
+  max: number;
+  /** Step increment */
+  step: number;
+  /** Orientation */
+  orientation: "horizontal" | "vertical";
+  /** Disabled state */
+  disabled: boolean;
+  /** Value text formatter */
+  formatValueText?: (value: number) => string;
+}
+
+export const [SliderProvider, useSliderContext] =
+  createCompoundContext<SliderContextValue>("Slider");