@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/button/wc/button.ts

@@ -0,0 +1,169 @@
+import { type ButtonBehavior, createButtonBehavior } from "@hypoth-ui/primitives-dom";
+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 { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+import { validateProp } from "../../utils/dev-warnings.js";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg";
+
+const VALID_VARIANTS: readonly ButtonVariant[] = ["primary", "secondary", "ghost", "destructive"];
+const VALID_SIZES: readonly ButtonSize[] = ["sm", "md", "lg"];
+
+/**
+ * A button component following WAI-ARIA button pattern.
+ *
+ * @element ds-button
+ * @slot - Default slot for button content
+ *
+ * @csspart button - The button element
+ *
+ * @fires ds:press - When the button is activated (click, Enter, Space)
+ */
+export class DsButton extends DSElement {
+  static override styles = [];
+
+  /**
+   * The button variant.
+   */
+  @property({ type: String, reflect: true })
+  variant: ButtonVariant = "primary";
+
+  /**
+   * The button size.
+   */
+  @property({ type: String, reflect: true })
+  size: ButtonSize = "md";
+
+  /**
+   * Whether the button is disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * Whether the button is in a loading state.
+   */
+  @property({ type: Boolean, reflect: true })
+  loading = false;
+
+  /**
+   * Button type attribute.
+   */
+  @property({ type: String })
+  type: "button" | "submit" | "reset" = "button";
+
+  /** Button behavior instance */
+  private behavior!: ButtonBehavior;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    // Create behavior with current property values
+    this.behavior = createButtonBehavior({
+      disabled: this.disabled,
+      loading: this.loading,
+      type: this.type,
+    });
+
+    // Dev warnings: Validate variant and size
+    validateProp("ds-button", "variant", this.variant, VALID_VARIANTS);
+    validateProp("ds-button", "size", this.size, VALID_SIZES);
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    // Sync behavior state with component properties
+    if (
+      changedProperties.has("disabled") ||
+      changedProperties.has("loading") ||
+      changedProperties.has("type")
+    ) {
+      this.behavior.setState({
+        disabled: this.disabled,
+        loading: this.loading,
+        type: this.type,
+      });
+    }
+  }
+
+  private handleClick(event: MouseEvent): void {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    // Dispatch ds:press event per standard event naming convention
+    emitEvent(this, StandardEvents.PRESS, {
+      detail: {
+        originalEvent: event,
+        target: this,
+        isKeyboard: false,
+      },
+    });
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    // For WC compatibility, handle both Enter and Space on keydown
+    // The behavior only handles Enter on keydown (Space is typically keyup)
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!this.disabled && !this.loading) {
+        // Dispatch ds:press event with keyboard flag
+        // Note: We do NOT call this.click() to avoid double event emission
+        emitEvent(this, StandardEvents.PRESS, {
+          detail: {
+            originalEvent: event,
+            target: this,
+            isKeyboard: true,
+          },
+        });
+      }
+    }
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-button": true,
+      [`ds-button--${this.variant}`]: true,
+      [`ds-button--${this.size}`]: true,
+      "ds-button--disabled": this.disabled,
+      "ds-button--loading": this.loading,
+    };
+
+    // Compute ARIA props based on current component state
+    const isDisabled = this.disabled || this.loading;
+
+    return html`
+      <button
+        part="button"
+        class=${classMap(classes)}
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-disabled=${isDisabled ? "true" : nothing}
+        aria-busy=${this.loading ? "true" : nothing}
+        tabindex=${isDisabled ? -1 : 0}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        ${this.loading ? html`<span class="ds-button__spinner" aria-hidden="true"></span>` : null}
+        <span class="ds-button__content">
+          <slot></slot>
+        </span>
+      </button>
+    `;
+  }
+}
+
+// Register the component
+define("ds-button", DsButton);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-button": DsButton;
+  }
+}

package/templates/calendar/index.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { type HTMLAttributes, createElement, forwardRef, useEffect, useRef } from "react";
+import "@hypoth-ui/wc";
+
+export type CalendarSize = "default" | "compact";
+
+export interface CalendarProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  /**
+   * Selected date (ISO format: YYYY-MM-DD).
+   */
+  value?: string;
+
+  /**
+   * Minimum selectable date (ISO format).
+   */
+  min?: string;
+
+  /**
+   * Maximum selectable date (ISO format).
+   */
+  max?: string;
+
+  /**
+   * Disabled dates (array of ISO format strings).
+   */
+  disabledDates?: string[];
+
+  /**
+   * Locale for month/day names.
+   * @default "en-US"
+   */
+  locale?: string;
+
+  /**
+   * Size variant.
+   * @default "default"
+   */
+  size?: CalendarSize;
+
+  /**
+   * First day of week (0 = Sunday, 1 = Monday).
+   * @default 0
+   */
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  /**
+   * Callback when a date is selected.
+   */
+  onChange?: (value: string, date: Date) => void;
+
+  /**
+   * Callback when the displayed month changes.
+   */
+  onMonthChange?: (month: number, year: number) => void;
+}
+
+/**
+ * Calendar component for date selection.
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   value="2024-01-15"
+ *   min="2024-01-01"
+ *   max="2024-12-31"
+ *   onChange={(value, date) => console.log(value, date)}
+ * />
+ * ```
+ */
+export const Calendar = forwardRef<HTMLElement, CalendarProps>(function Calendar(
+  {
+    value,
+    min,
+    max,
+    disabledDates = [],
+    locale = "en-US",
+    size = "default",
+    firstDayOfWeek = 0,
+    onChange,
+    onMonthChange,
+    className,
+    ...props
+  },
+  forwardedRef
+) {
+  const internalRef = useRef<HTMLElement>(null);
+
+  // Sync forwarded ref
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  // Set up event listeners
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element) return;
+
+    const handleChange = (e: Event) => {
+      const event = e as CustomEvent<{ value: string; date: string }>;
+      onChange?.(event.detail.value, new Date(event.detail.date));
+    };
+
+    const handleMonthChange = (e: Event) => {
+      const event = e as CustomEvent<{ month: number; year: number }>;
+      onMonthChange?.(event.detail.month, event.detail.year);
+    };
+
+    element.addEventListener("ds:change", handleChange);
+    element.addEventListener("ds:month-change", handleMonthChange);
+
+    return () => {
+      element.removeEventListener("ds:change", handleChange);
+      element.removeEventListener("ds:month-change", handleMonthChange);
+    };
+  }, [onChange, onMonthChange]);
+
+  return createElement("ds-calendar", {
+    ref: internalRef,
+    value,
+    min,
+    max,
+    "disabled-dates": disabledDates.join(","),
+    locale,
+    size,
+    "first-day-of-week": firstDayOfWeek,
+    class: className,
+    ...props,
+  });
+});
+
+// TypeScript declaration for JSX
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "ds-calendar": CalendarProps & {
+        ref?: React.Ref<HTMLElement>;
+        "disabled-dates"?: string;
+        "first-day-of-week"?: number;
+        "onDs-change"?: (event: CustomEvent) => void;
+        "onDs-month-change"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/templates/calendar/wc/calendar.ts

@@ -0,0 +1,316 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property, state } 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 CalendarSize = "default" | "compact";
+
+// Navigation icons
+const chevronLeftIcon = html`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M15 18l-6-6 6-6" />
+  </svg>
+`;
+
+const chevronRightIcon = html`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M9 18l6-6-6-6" />
+  </svg>
+`;
+
+/**
+ * Calendar component for date selection.
+ *
+ * @element ds-calendar
+ *
+ * @fires ds-change - When a date is selected
+ * @fires ds-month-change - When the displayed month changes
+ *
+ * @cssprop --ds-calendar-width - Calendar width
+ * @cssprop --ds-calendar-cell-size - Day cell size
+ */
+export class DsCalendar extends DSElement {
+  static override styles = [];
+
+  /**
+   * Selected date (ISO format: YYYY-MM-DD).
+   */
+  @property({ type: String })
+  value = "";
+
+  /**
+   * Minimum selectable date (ISO format).
+   */
+  @property({ type: String })
+  min = "";
+
+  /**
+   * Maximum selectable date (ISO format).
+   */
+  @property({ type: String })
+  max = "";
+
+  /**
+   * Disabled dates (comma-separated ISO format).
+   */
+  @property({ type: String, attribute: "disabled-dates" })
+  disabledDates = "";
+
+  /**
+   * Locale for month/day names.
+   */
+  @property({ type: String })
+  locale = "en-US";
+
+  /**
+   * Size variant.
+   */
+  @property({ type: String, reflect: true })
+  size: CalendarSize = "default";
+
+  /**
+   * First day of week (0 = Sunday, 1 = Monday).
+   */
+  @property({ type: Number, attribute: "first-day-of-week" })
+  firstDayOfWeek = 0;
+
+  @state()
+  private viewDate: Date = new Date();
+
+  private get selectedDate(): Date | null {
+    return this.value ? new Date(this.value) : null;
+  }
+
+  private get minDate(): Date | null {
+    return this.min ? new Date(this.min) : null;
+  }
+
+  private get maxDate(): Date | null {
+    return this.max ? new Date(this.max) : null;
+  }
+
+  private get disabledDateSet(): Set<string> {
+    if (!this.disabledDates) return new Set();
+    return new Set(this.disabledDates.split(",").map((d) => d.trim()));
+  }
+
+  private get weekdayNames(): string[] {
+    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
+    const days: string[] = [];
+    // Start from a known Sunday
+    const baseDate = new Date(2024, 0, 7); // Jan 7, 2024 is a Sunday
+    for (let i = 0; i < 7; i++) {
+      const day = new Date(baseDate);
+      day.setDate(baseDate.getDate() + ((i + this.firstDayOfWeek) % 7));
+      days.push(formatter.format(day));
+    }
+    return days;
+  }
+
+  private get monthYearLabel(): string {
+    const formatter = new Intl.DateTimeFormat(this.locale, {
+      month: "long",
+      year: "numeric",
+    });
+    return formatter.format(this.viewDate);
+  }
+
+  private get calendarDays(): Array<{ date: Date; isOutside: boolean }> {
+    const days: Array<{ date: Date; isOutside: boolean }> = [];
+    const year = this.viewDate.getFullYear();
+    const month = this.viewDate.getMonth();
+
+    // First day of the month
+    const firstOfMonth = new Date(year, month, 1);
+    // Day of week of first day (0-6)
+    const startDayOfWeek = firstOfMonth.getDay();
+    // How many days to show from previous month
+    const daysFromPrevMonth = (startDayOfWeek - this.firstDayOfWeek + 7) % 7;
+
+    // Add days from previous month
+    for (let i = daysFromPrevMonth; i > 0; i--) {
+      const date = new Date(year, month, 1 - i);
+      days.push({ date, isOutside: true });
+    }
+
+    // Add days of current month
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({ date: new Date(year, month, i), isOutside: false });
+    }
+
+    // Add days from next month to complete grid (6 rows × 7 days = 42)
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      const date = new Date(year, month + 1, i);
+      days.push({ date, isOutside: true });
+    }
+
+    return days;
+  }
+
+  private isToday(date: Date): boolean {
+    const today = new Date();
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  }
+
+  private isSelected(date: Date): boolean {
+    if (!this.selectedDate) return false;
+    return (
+      date.getDate() === this.selectedDate.getDate() &&
+      date.getMonth() === this.selectedDate.getMonth() &&
+      date.getFullYear() === this.selectedDate.getFullYear()
+    );
+  }
+
+  private isDisabled(date: Date): boolean {
+    const dateStr = date.toISOString().split("T")[0] ?? "";
+
+    // Check disabled dates
+    if (dateStr && this.disabledDateSet.has(dateStr)) return true;
+
+    // Check min/max bounds
+    if (this.minDate && date < this.minDate) return true;
+    if (this.maxDate && date > this.maxDate) return true;
+
+    return false;
+  }
+
+  private formatDateISO(date: Date): string {
+    return date.toISOString().split("T")[0] ?? "";
+  }
+
+  private handlePrevMonth(): void {
+    const newDate = new Date(this.viewDate);
+    newDate.setMonth(newDate.getMonth() - 1);
+    this.viewDate = newDate;
+
+    emitEvent(this, "month-change", {
+      detail: {
+        month: newDate.getMonth() + 1,
+        year: newDate.getFullYear(),
+      },
+    });
+  }
+
+  private handleNextMonth(): void {
+    const newDate = new Date(this.viewDate);
+    newDate.setMonth(newDate.getMonth() + 1);
+    this.viewDate = newDate;
+
+    emitEvent(this, "month-change", {
+      detail: {
+        month: newDate.getMonth() + 1,
+        year: newDate.getFullYear(),
+      },
+    });
+  }
+
+  private handleDateSelect(date: Date): void {
+    if (this.isDisabled(date)) return;
+
+    this.value = this.formatDateISO(date);
+
+    emitEvent(this, "change", {
+      detail: {
+        value: this.value,
+        date: date.toISOString(),
+      },
+    });
+  }
+
+  private handleKeyDown(event: KeyboardEvent, date: Date): void {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleDateSelect(date);
+    }
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-calendar": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        role="application"
+        aria-label="Calendar"
+        data-size=${this.size !== "default" ? this.size : nothing}
+      >
+        <div class="ds-calendar__header">
+          <button
+            type="button"
+            class="ds-calendar__nav-button"
+            aria-label="Previous month"
+            @click=${this.handlePrevMonth}
+          >
+            ${chevronLeftIcon}
+          </button>
+          <span class="ds-calendar__title" aria-live="polite">
+            ${this.monthYearLabel}
+          </span>
+          <button
+            type="button"
+            class="ds-calendar__nav-button"
+            aria-label="Next month"
+            @click=${this.handleNextMonth}
+          >
+            ${chevronRightIcon}
+          </button>
+        </div>
+
+        <div class="ds-calendar__weekdays" role="row">
+          ${this.weekdayNames.map(
+            (day) => html`
+              <div class="ds-calendar__weekday" role="columnheader">${day}</div>
+            `
+          )}
+        </div>
+
+        <div class="ds-calendar__grid" role="grid">
+          ${this.calendarDays.map(({ date, isOutside }) => {
+            const disabled = this.isDisabled(date);
+            const selected = this.isSelected(date);
+            const today = this.isToday(date);
+
+            return html`
+              <button
+                type="button"
+                class="ds-calendar__day"
+                role="gridcell"
+                tabindex=${selected ? 0 : -1}
+                aria-selected=${selected ? "true" : "false"}
+                aria-disabled=${disabled ? "true" : nothing}
+                ?data-outside=${isOutside}
+                ?data-selected=${selected}
+                ?data-today=${today}
+                ?data-disabled=${disabled}
+                @click=${() => this.handleDateSelect(date)}
+                @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, date)}
+              >
+                ${date.getDate()}
+              </button>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-calendar", DsCalendar);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-calendar": DsCalendar;
+  }
+}

package/templates/calendar/wc/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Calendar component exports
+ */
+export { DsCalendar, type CalendarSize } from "./calendar.js";