@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/accordion/wc/accordion.ts

@@ -0,0 +1,213 @@
+/**
+ * Accordion component - collapsible sections for organizing content.
+ *
+ * Implements WAI-ARIA Accordion pattern with keyboard navigation.
+ *
+ * @element ds-accordion
+ *
+ * @slot - Accordion items (ds-accordion-item)
+ *
+ * @fires ds:change - Fired when expanded items change
+ *
+ * @example
+ * ```html
+ * <ds-accordion type="single" default-value="item-1" collapsible>
+ *   <ds-accordion-item value="item-1">
+ *     <ds-accordion-trigger>Section 1</ds-accordion-trigger>
+ *     <ds-accordion-content>Content 1</ds-accordion-content>
+ *   </ds-accordion-item>
+ *   <ds-accordion-item value="item-2">
+ *     <ds-accordion-trigger>Section 2</ds-accordion-trigger>
+ *     <ds-accordion-content>Content 2</ds-accordion-content>
+ *   </ds-accordion-item>
+ * </ds-accordion>
+ * ```
+ */
+
+import { type RovingFocus, createRovingFocus } from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property, state } 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 type { DsAccordionItem } from "./accordion-item.js";
+import "./accordion-item.js";
+import "./accordion-trigger.js";
+import "./accordion-content.js";
+
+export type AccordionType = "single" | "multiple";
+export type AccordionOrientation = "horizontal" | "vertical";
+
+export class DsAccordion extends DSElement {
+  /** Type: single (one open) or multiple (many open) */
+  @property({ reflect: true })
+  type: AccordionType = "single";
+
+  /** Controlled value (string for single, JSON array for multiple) */
+  @property()
+  value: string | undefined;
+
+  /** Default value (string for single, JSON array for multiple) */
+  @property({ attribute: "default-value" })
+  defaultValue: string | undefined;
+
+  /** Allow collapsing all items in single mode */
+  @property({ type: Boolean, reflect: true })
+  collapsible = false;
+
+  /** Keyboard navigation orientation */
+  @property({ reflect: true })
+  orientation: AccordionOrientation = "vertical";
+
+  /** Internal tracked value(s) */
+  @state()
+  private internalValue: Set<string> = new Set();
+
+  private rovingFocus: RovingFocus | null = null;
+
+  /** Whether we're in controlled mode */
+  private get isControlled(): boolean {
+    return this.value !== undefined;
+  }
+
+  /** Current expanded values */
+  get expandedValues(): Set<string> {
+    if (this.isControlled) {
+      return this.parseValue(this.value);
+    }
+    return this.internalValue;
+  }
+
+  private parseValue(value: string | undefined): Set<string> {
+    if (!value) return new Set();
+
+    // Try parsing as JSON array
+    if (value.startsWith("[")) {
+      try {
+        const arr = JSON.parse(value);
+        return new Set(Array.isArray(arr) ? arr : []);
+      } catch {
+        return new Set();
+      }
+    }
+
+    // Single value
+    return new Set([value]);
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Initialize internal value from default
+    if (!this.isControlled && this.defaultValue) {
+      this.internalValue = this.parseValue(this.defaultValue);
+    }
+
+    // Listen for item toggle events
+    this.addEventListener("ds:accordion-toggle", this.handleItemToggle as EventListener);
+
+    // Setup roving focus after DOM is ready
+    requestAnimationFrame(() => {
+      this.setupRovingFocus();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:accordion-toggle", this.handleItemToggle as EventListener);
+    this.rovingFocus?.destroy();
+    this.rovingFocus = null;
+  }
+
+  private setupRovingFocus(): void {
+    this.rovingFocus = createRovingFocus({
+      container: this,
+      selector: "ds-accordion-trigger:not([aria-disabled='true'])",
+      direction: this.orientation,
+      loop: true,
+    });
+  }
+
+  /**
+   * Toggle an item's expanded state.
+   */
+  public toggleItem(value: string): void {
+    const items = this.querySelectorAll("ds-accordion-item") as NodeListOf<DsAccordionItem>;
+    const item = Array.from(items).find((i) => i.value === value);
+    if (!item || item.disabled) return;
+
+    const currentExpanded = this.expandedValues;
+    const isExpanded = currentExpanded.has(value);
+
+    let newValue: Set<string>;
+
+    if (this.type === "single") {
+      if (isExpanded) {
+        // Collapse if collapsible is true
+        newValue = this.collapsible ? new Set() : currentExpanded;
+      } else {
+        // Expand this item (collapse others)
+        newValue = new Set([value]);
+      }
+    } else {
+      // Multiple mode
+      newValue = new Set(currentExpanded);
+      if (isExpanded) {
+        newValue.delete(value);
+      } else {
+        newValue.add(value);
+      }
+    }
+
+    // Update state
+    if (!this.isControlled) {
+      this.internalValue = newValue;
+    }
+
+    // Emit change event
+    const eventValue =
+      this.type === "single"
+        ? (Array.from(newValue)[0] ?? "")
+        : JSON.stringify(Array.from(newValue));
+
+    emitEvent(this, "ds:change", { detail: { value: eventValue } });
+    this.updateItems();
+  }
+
+  private handleItemToggle = (event: CustomEvent<{ value: string }>): void => {
+    this.toggleItem(event.detail.value);
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("internalValue") ||
+      changedProperties.has("defaultValue")
+    ) {
+      this.updateItems();
+    }
+  }
+
+  private updateItems(): void {
+    const expanded = this.expandedValues;
+
+    const items = this.querySelectorAll("ds-accordion-item") as NodeListOf<DsAccordionItem>;
+    for (const item of items) {
+      item.setExpanded(expanded.has(item.value));
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-accordion", DsAccordion);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-accordion": DsAccordion;
+  }
+}

package/templates/accordion/wc/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Accordion component barrel exports.
+ */
+
+export {
+  DsAccordion,
+  type AccordionType,
+  type AccordionOrientation,
+} from "./accordion.js";
+export { DsAccordionItem } from "./accordion-item.js";
+export { DsAccordionTrigger } from "./accordion-trigger.js";
+export { DsAccordionContent } from "./accordion-content.js";

package/templates/alert/index.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+/**
+ * Alert React Component
+ *
+ * Contextual feedback messages for user notifications.
+ */
+
+import { type HTMLAttributes, type ReactNode, forwardRef, useCallback } from "react";
+
+export type AlertVariant = "info" | "success" | "warning" | "error";
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Visual variant */
+  variant?: AlertVariant;
+  /** Alert title */
+  title?: string;
+  /** Whether the alert can be closed */
+  closable?: boolean;
+  /** Hide the default icon */
+  hideIcon?: boolean;
+  /** Custom icon element */
+  icon?: ReactNode;
+  /** Action slot content */
+  action?: ReactNode;
+  /** Callback when close button is clicked */
+  onClose?: () => void;
+  /** Alert content/description */
+  children?: ReactNode;
+}
+
+/**
+ * SVG icons for different alert variants
+ */
+const VARIANT_ICONS: Record<AlertVariant, ReactNode> = {
+  info: (
+    <svg className="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  success: (
+    <svg className="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  warning: (
+    <svg className="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  error: (
+    <svg className="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+};
+
+const CLOSE_ICON = (
+  <svg className="ds-alert__close-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+  </svg>
+);
+
+/**
+ * Get the ARIA role based on variant.
+ */
+function getRole(variant: AlertVariant): "alert" | "status" {
+  return variant === "error" || variant === "warning" ? "alert" : "status";
+}
+
+/**
+ * Alert component for contextual feedback messages.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Alert variant="success" title="Success">
+ *   Your changes have been saved.
+ * </Alert>
+ *
+ * // Closable alert
+ * <Alert variant="error" title="Error" closable onClose={() => setShowAlert(false)}>
+ *   An error occurred while saving.
+ * </Alert>
+ *
+ * // With action
+ * <Alert variant="warning" title="Warning" action={<Button size="sm">Undo</Button>}>
+ *   This action cannot be reversed.
+ * </Alert>
+ * ```
+ */
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = "info",
+      title,
+      closable = false,
+      hideIcon = false,
+      icon,
+      action,
+      onClose,
+      children,
+      className,
+      ...restProps
+    },
+    ref
+  ) => {
+    const role = getRole(variant);
+
+    const handleClose = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent) => {
+        if (event.key === "Escape" && closable) {
+          handleClose();
+        }
+      },
+      [closable, handleClose]
+    );
+
+    const alertClassName = ["ds-alert", className].filter(Boolean).join(" ");
+
+    return (
+      <div
+        ref={ref}
+        className={alertClassName}
+        role={role}
+        aria-live={role === "alert" ? "assertive" : "polite"}
+        data-variant={variant}
+        data-closable={closable || undefined}
+        onKeyDown={handleKeyDown}
+        {...restProps}
+      >
+        {!hideIcon && (icon || VARIANT_ICONS[variant])}
+
+        <div className="ds-alert__content">
+          {title && <p className="ds-alert__title">{title}</p>}
+
+          <div className="ds-alert__description">{children}</div>
+
+          {action && <div className="ds-alert__action">{action}</div>}
+        </div>
+
+        {closable && (
+          <button
+            className="ds-alert__close"
+            type="button"
+            aria-label="Dismiss alert"
+            onClick={handleClose}
+          >
+            {CLOSE_ICON}
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Alert.displayName = "Alert";

package/templates/alert/wc/alert.ts

@@ -0,0 +1,167 @@
+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 { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export type AlertVariant = "info" | "success" | "warning" | "error";
+
+/**
+ * SVG icons for different alert variants
+ */
+const VARIANT_ICONS: Record<AlertVariant, TemplateResult> = {
+  info: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+  </svg>`,
+  success: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+  </svg>`,
+  warning: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+  </svg>`,
+  error: html`<svg class="ds-alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+  </svg>`,
+};
+
+const CLOSE_ICON = html`<svg class="ds-alert__close-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+</svg>`;
+
+/**
+ * Alert component for contextual feedback messages.
+ *
+ * @element ds-alert
+ * @slot - Default slot for alert description/content
+ * @slot icon - Custom icon content
+ * @slot action - Action button slot
+ *
+ * @fires ds:close - Fired when close button is clicked
+ *
+ * @csspart alert - The alert container
+ * @csspart icon - The icon container
+ * @csspart content - The content container
+ * @csspart title - The title element
+ * @csspart description - The description slot container
+ * @csspart close - The close button
+ *
+ * @cssprop --ds-alert-bg - Background color
+ * @cssprop --ds-alert-fg - Text color
+ * @cssprop --ds-alert-border - Border color
+ * @cssprop --ds-alert-icon - Icon color
+ */
+export class DsAlert extends DSElement {
+  static override styles = [];
+
+  /**
+   * The visual variant of the alert.
+   */
+  @property({ type: String, reflect: true })
+  variant: AlertVariant = "info";
+
+  /**
+   * The alert title.
+   */
+  @property({ type: String })
+  alertTitle = "";
+
+  /**
+   * Whether the alert can be closed.
+   */
+  @property({ type: Boolean, reflect: true })
+  closable = false;
+
+  /**
+   * Hide the default icon.
+   */
+  @property({ type: Boolean, attribute: "hide-icon" })
+  hideIcon = false;
+
+  private handleClose(): void {
+    emitEvent(this, "ds:close", {});
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === "Escape" && this.closable) {
+      this.handleClose();
+    }
+  }
+
+  /**
+   * Get the ARIA role based on variant.
+   * Error and warning use 'alert' for immediate announcement.
+   * Info and success use 'status' for polite announcement.
+   */
+  private getRole(): "alert" | "status" {
+    return this.variant === "error" || this.variant === "warning" ? "alert" : "status";
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-alert": true,
+    };
+
+    return html`
+      <div
+        part="alert"
+        class=${classMap(classes)}
+        role=${this.getRole()}
+        aria-live=${this.getRole() === "alert" ? "assertive" : "polite"}
+        data-variant=${this.variant}
+        ?data-closable=${this.closable}
+        @keydown=${this.handleKeyDown}
+      >
+        ${
+          !this.hideIcon
+            ? html`
+              <slot name="icon">
+                ${VARIANT_ICONS[this.variant]}
+              </slot>
+            `
+            : nothing
+        }
+
+        <div part="content" class="ds-alert__content">
+          ${
+            this.alertTitle
+              ? html`<p part="title" class="ds-alert__title">${this.alertTitle}</p>`
+              : nothing
+          }
+
+          <div part="description" class="ds-alert__description">
+            <slot></slot>
+          </div>
+
+          <slot name="action" class="ds-alert__action"></slot>
+        </div>
+
+        ${
+          this.closable
+            ? html`
+              <button
+                part="close"
+                class="ds-alert__close"
+                type="button"
+                aria-label="Dismiss alert"
+                @click=${this.handleClose}
+              >
+                ${CLOSE_ICON}
+              </button>
+            `
+            : nothing
+        }
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-alert", DsAlert);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-alert": DsAlert;
+  }
+}

package/templates/alert/wc/index.ts

@@ -0,0 +1 @@
+export { DsAlert, type AlertVariant } from "./alert.js";