@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/card/index.tsx

@@ -0,0 +1,108 @@
+/**
+ * Card compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Card } from "@/components/ui";
+ *
+ * <Card.Root>
+ *   <Card.Header>
+ *     <h3>Card Title</h3>
+ *   </Card.Header>
+ *   <Card.Content>
+ *     <p>Card content goes here.</p>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <Button>Action</Button>
+ *   </Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+
+import { type HTMLAttributes, type ReactNode, createElement, forwardRef } from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CardRootProps extends HTMLAttributes<HTMLElement> {
+  /** Card content */
+  children?: ReactNode;
+}
+
+export interface CardHeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Header content */
+  children?: ReactNode;
+}
+
+export interface CardContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+}
+
+export interface CardFooterProps extends HTMLAttributes<HTMLElement> {
+  /** Footer content */
+  children?: ReactNode;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Card root component - container for grouping related content.
+ */
+const CardRoot = forwardRef<HTMLElement, CardRootProps>(function CardRoot(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-card", { ref, class: className, ...props }, children);
+});
+CardRoot.displayName = "Card.Root";
+
+/**
+ * Card header component - header section for Card.
+ */
+const CardHeader = forwardRef<HTMLElement, CardHeaderProps>(function CardHeader(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-card-header", { ref, class: className, ...props }, children);
+});
+CardHeader.displayName = "Card.Header";
+
+/**
+ * Card content component - main content section for Card.
+ */
+const CardContent = forwardRef<HTMLElement, CardContentProps>(function CardContent(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-card-content", { ref, class: className, ...props }, children);
+});
+CardContent.displayName = "Card.Content";
+
+/**
+ * Card footer component - footer section for Card.
+ */
+const CardFooter = forwardRef<HTMLElement, CardFooterProps>(function CardFooter(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-card-footer", { ref, class: className, ...props }, children);
+});
+CardFooter.displayName = "Card.Footer";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Card = {
+  Root: CardRoot,
+  Header: CardHeader,
+  Content: CardContent,
+  Footer: CardFooter,
+};
+
+// Also export individual components
+export { CardRoot, CardHeader, CardContent, CardFooter };

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

@@ -0,0 +1,25 @@
+/**
+ * Card Content component - main content section for ds-card.
+ *
+ * @element ds-card-content
+ *
+ * @slot - Default slot for main card content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsCardContent extends DSElement {
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-card-content", DsCardContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-card-content": DsCardContent;
+  }
+}

package/templates/card/wc/card-footer.ts

@@ -0,0 +1,25 @@
+/**
+ * Card Footer component - footer section for ds-card.
+ *
+ * @element ds-card-footer
+ *
+ * @slot - Default slot for footer content (typically actions)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsCardFooter extends DSElement {
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-card-footer", DsCardFooter);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-card-footer": DsCardFooter;
+  }
+}

package/templates/card/wc/card-header.ts

@@ -0,0 +1,25 @@
+/**
+ * Card Header component - header section for ds-card.
+ *
+ * @element ds-card-header
+ *
+ * @slot - Default slot for header content (typically title and description)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsCardHeader extends DSElement {
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-card-header", DsCardHeader);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-card-header": DsCardHeader;
+  }
+}

package/templates/card/wc/card.ts

@@ -0,0 +1,43 @@
+/**
+ * Card component - container for grouping related content.
+ *
+ * A structural component that provides visual grouping with consistent
+ * styling for headers, content areas, and footers.
+ *
+ * @element ds-card
+ *
+ * @slot - Default slot for card content (ds-card-header, ds-card-content, ds-card-footer)
+ *
+ * @example
+ * ```html
+ * <ds-card>
+ *   <ds-card-header>
+ *     <h3>Card Title</h3>
+ *   </ds-card-header>
+ *   <ds-card-content>
+ *     <p>Card content goes here.</p>
+ *   </ds-card-content>
+ *   <ds-card-footer>
+ *     <button>Action</button>
+ *   </ds-card-footer>
+ * </ds-card>
+ * ```
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsCard extends DSElement {
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-card", DsCard);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-card": DsCard;
+  }
+}

package/templates/card/wc/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Card component barrel exports.
+ */
+
+export { DsCard } from "./card.js";
+export { DsCardHeader } from "./card-header.js";
+export { DsCardContent } from "./card-content.js";
+export { DsCardFooter } from "./card-footer.js";

package/templates/checkbox/checkbox.tsx

@@ -0,0 +1,85 @@
+import type React from "react";
+import { type HTMLAttributes, createElement, forwardRef, useEffect, useRef } from "react";
+
+export interface CheckboxProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  /** Checkbox name */
+  name?: string;
+  /** Checkbox value */
+  value?: string;
+  /** Whether checked */
+  checked?: boolean;
+  /** Default checked state (uncontrolled) */
+  defaultChecked?: boolean;
+  /** Whether disabled */
+  disabled?: boolean;
+  /** Whether required */
+  required?: boolean;
+  /** Indeterminate state */
+  indeterminate?: boolean;
+  /** Change handler */
+  onChange?: (checked: boolean, event: Event) => void;
+  /** Checkbox label content */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-checkbox Web Component.
+ * Checkbox input with tri-state support.
+ */
+export const Checkbox = forwardRef<HTMLElement, CheckboxProps>((props, forwardedRef) => {
+  const {
+    name,
+    value,
+    checked,
+    defaultChecked,
+    disabled = false,
+    required = false,
+    indeterminate = false,
+    onChange,
+    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]);
+
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element || !onChange) return;
+
+    const handleChange = (event: Event) => {
+      const customEvent = event as CustomEvent<{ checked: boolean }>;
+      onChange(customEvent.detail.checked, event);
+    };
+
+    element.addEventListener("ds:change", handleChange);
+    return () => element.removeEventListener("ds:change", handleChange);
+  }, [onChange]);
+
+  return createElement(
+    "ds-checkbox",
+    {
+      ref: internalRef,
+      name,
+      value,
+      checked: checked || undefined,
+      "default-checked": defaultChecked || undefined,
+      disabled: disabled || undefined,
+      required: required || undefined,
+      indeterminate: indeterminate || undefined,
+      class: className,
+      ...rest,
+    },
+    children
+  );
+});
+
+Checkbox.displayName = "Checkbox";

package/templates/checkbox/wc/checkbox.ts

@@ -0,0 +1,247 @@
+import { html } from "lit";
+import type { PropertyValues } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DSElement } from "../../base/ds-element.js";
+import { FormAssociatedMixin } from "../../base/form-associated.js";
+import type { ValidationFlags } from "../../base/form-associated.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Checkbox input with tri-state support and native form participation.
+ *
+ * Uses ElementInternals for form association - values are submitted with the form
+ * and the checkbox participates in constraint validation.
+ *
+ * @element ds-checkbox
+ * @fires ds:change - Fired on state change with { checked, indeterminate }
+ * @fires ds:invalid - Fired when customValidation is true and validation fails
+ *
+ * @slot - Checkbox label
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <ds-checkbox name="accept" required>Accept terms and conditions</ds-checkbox>
+ *   <button type="submit">Submit</button>
+ * </form>
+ *
+ * <ds-field>
+ *   <ds-checkbox name="newsletter" custom-validation>Subscribe to newsletter</ds-checkbox>
+ *   <ds-field-error></ds-field-error>
+ * </ds-field>
+ * ```
+ */
+export class DsCheckbox extends FormAssociatedMixin(DSElement) {
+  /** Checked state */
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+
+  /** Indeterminate (mixed) state */
+  @property({ type: Boolean, reflect: true })
+  indeterminate = false;
+
+  /** ARIA describedby - IDs of elements that describe this checkbox */
+  @state()
+  private ariaDescribedBy?: string;
+
+  /** Label text captured from slot */
+  @state()
+  private labelText = "";
+
+  /** Unique ID for label association */
+  @state()
+  private labelId = "";
+
+  /** Default checked state for form reset */
+  private _defaultChecked = false;
+
+  private attributeObserver: MutationObserver | null = null;
+
+  override connectedCallback(): void {
+    // Capture label text before Lit renders
+    this.labelText = this.textContent?.trim() ?? "";
+    // Generate unique ID for label
+    this.labelId = `checkbox-label-${crypto.randomUUID().slice(0, 8)}`;
+    // Store default checked state
+    this._defaultChecked = this.checked;
+
+    super.connectedCallback();
+
+    // Set default value for form association
+    if (!this.value) {
+      this.value = "on";
+    }
+
+    // Observe ARIA attribute changes on the host element
+    this.attributeObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          this.syncAriaAttributes();
+        }
+      }
+    });
+
+    this.attributeObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ["aria-describedby", "aria-invalid", "aria-required", "aria-disabled"],
+    });
+
+    // Initial sync
+    this.syncAriaAttributes();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.attributeObserver?.disconnect();
+    this.attributeObserver = null;
+  }
+
+  /**
+   * Syncs ARIA attributes from the host element to internal state.
+   */
+  private syncAriaAttributes(): void {
+    this.ariaDescribedBy = this.getAttribute("aria-describedby") ?? undefined;
+
+    // Sync required state from aria-required
+    const ariaRequired = this.getAttribute("aria-required");
+    if (ariaRequired === "true") {
+      this.required = true;
+    }
+
+    // Sync disabled state from aria-disabled
+    const ariaDisabled = this.getAttribute("aria-disabled");
+    if (ariaDisabled === "true") {
+      this.disabled = true;
+    }
+  }
+
+  /**
+   * Returns the aria-checked value based on state.
+   */
+  private getAriaChecked(): "true" | "false" | "mixed" {
+    if (this.indeterminate) return "mixed";
+    return this.checked ? "true" : "false";
+  }
+
+  /**
+   * Toggles the checkbox state.
+   */
+  private toggle(): void {
+    if (this.disabled) return;
+
+    // Clear indeterminate on any interaction
+    this.indeterminate = false;
+    this.checked = !this.checked;
+
+    emitEvent(this, StandardEvents.CHANGE, {
+      detail: {
+        checked: this.checked,
+        indeterminate: this.indeterminate,
+      },
+    });
+  }
+
+  private handleClick = (event: Event): void => {
+    event.preventDefault();
+    this.toggle();
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === " ") {
+      event.preventDefault();
+      this.toggle();
+    }
+  };
+
+  // Form association implementation
+
+  protected getFormValue(): string | null {
+    return this.checked ? this.value : null;
+  }
+
+  protected getValidationAnchor(): HTMLElement | undefined {
+    return this.querySelector(".ds-checkbox__control") as HTMLElement | undefined;
+  }
+
+  protected getValidationFlags(): ValidationFlags {
+    if (this.required && !this.checked) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
+
+  protected getValidationMessage(flags: ValidationFlags): string {
+    if (flags.valueMissing) {
+      return "Please check this box to proceed";
+    }
+    return "";
+  }
+
+  protected shouldUpdateFormValue(changedProperties: PropertyValues): boolean {
+    return changedProperties.has("checked");
+  }
+
+  protected shouldUpdateValidity(changedProperties: PropertyValues): boolean {
+    return changedProperties.has("checked");
+  }
+
+  protected onFormReset(): void {
+    this.checked = this._defaultChecked;
+    this.indeterminate = false;
+  }
+
+  protected onFormStateRestore(
+    state: string | File | FormData | null,
+    _mode: "restore" | "autocomplete"
+  ): void {
+    if (typeof state === "string") {
+      this.checked = state === this.value;
+    }
+  }
+
+  override render() {
+    return html`
+      <div
+        class="ds-checkbox"
+        part="container"
+        @click=${this.handleClick}
+      >
+        <div
+          role="checkbox"
+          part="control"
+          class="ds-checkbox__control"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-checked=${this.getAriaChecked()}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-required=${this.required ? "true" : "false"}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${ifDefined(this.ariaDescribedBy)}
+          @keydown=${this.handleKeyDown}
+        >
+          <span class="ds-checkbox__indicator" part="indicator">
+            ${
+              this.indeterminate
+                ? html`<span class="ds-checkbox__indeterminate-icon">−</span>`
+                : this.checked
+                  ? html`<span class="ds-checkbox__check-icon">✓</span>`
+                  : null
+            }
+          </span>
+        </div>
+        <span id=${this.labelId} class="ds-checkbox__label" part="label">
+          ${this.labelText}
+        </span>
+      </div>
+    `;
+  }
+}
+
+define("ds-checkbox", DsCheckbox);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-checkbox": DsCheckbox;
+  }
+}