@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/table/row.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { type HTMLAttributes, type ReactNode, createElement, forwardRef } from "react";
+import "@hypoth-ui/wc";
+
+export interface TableRowProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Row ID for selection tracking.
+   */
+  rowId?: string;
+
+  /**
+   * Whether this row is selected.
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Row cells.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Table row component (tr).
+ */
+export const TableRow = forwardRef<HTMLElement, TableRowProps>(function TableRow(
+  { rowId, selected = false, children, className, ...props },
+  ref
+) {
+  return createElement(
+    "ds-table-row",
+    { ref, "row-id": rowId, selected: selected || undefined, class: className, ...props },
+    children
+  );
+});

package/templates/table/wc/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Table component exports
+ */
+export { DsTable, type TableSize } from "./table.js";
+export { DsTableHeader } from "./table-header.js";
+export { DsTableBody } from "./table-body.js";
+export { DsTableRow } from "./table-row.js";
+export { DsTableHead, type TableAlign, type SortDirection } from "./table-head.js";
+export { DsTableCell } from "./table-cell.js";

package/templates/table/wc/table-body.ts

@@ -0,0 +1,32 @@
+import { type TemplateResult, html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Table body component (tbody).
+ *
+ * @element ds-table-body
+ *
+ * @slot - TableRow elements for body
+ */
+export class DsTableBody extends DSElement {
+  static override styles = [];
+
+  override render(): TemplateResult {
+    return html`
+      <tbody class="ds-table__body" role="rowgroup">
+        <slot></slot>
+      </tbody>
+    `;
+  }
+}
+
+// Register the component
+define("ds-table-body", DsTableBody);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-table-body": DsTableBody;
+  }
+}

package/templates/table/wc/table-cell.ts

@@ -0,0 +1,58 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { TableAlign } from "./table-head.js";
+
+/**
+ * Table cell component (td).
+ *
+ * @element ds-table-cell
+ *
+ * @slot - Cell content
+ */
+export class DsTableCell extends DSElement {
+  static override styles = [];
+
+  /**
+   * Text alignment.
+   */
+  @property({ type: String, reflect: true })
+  align: TableAlign = "left";
+
+  /**
+   * Column span.
+   */
+  @property({ type: Number })
+  colspan = 1;
+
+  /**
+   * Row span.
+   */
+  @property({ type: Number })
+  rowspan = 1;
+
+  override render(): TemplateResult {
+    return html`
+      <td
+        class="ds-table__cell"
+        role="gridcell"
+        data-align=${this.align !== "left" ? this.align : nothing}
+        colspan=${this.colspan > 1 ? this.colspan : nothing}
+        rowspan=${this.rowspan > 1 ? this.rowspan : nothing}
+      >
+        <slot></slot>
+      </td>
+    `;
+  }
+}
+
+// Register the component
+define("ds-table-cell", DsTableCell);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-table-cell": DsTableCell;
+  }
+}

package/templates/table/wc/table-head.ts

@@ -0,0 +1,129 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export type TableAlign = "left" | "center" | "right";
+export type SortDirection = "asc" | "desc" | "none";
+
+// Sort icon SVG
+const sortIcon = html`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M12 5v14M5 12l7-7 7 7" />
+  </svg>
+`;
+
+/**
+ * Table header cell component (th).
+ *
+ * @element ds-table-head
+ *
+ * @slot - Header content
+ *
+ * @fires ds-sort - When sortable header is clicked
+ */
+export class DsTableHead extends DSElement {
+  static override styles = [];
+
+  /**
+   * Column key for sorting.
+   */
+  @property({ type: String })
+  column = "";
+
+  /**
+   * Text alignment.
+   */
+  @property({ type: String, reflect: true })
+  align: TableAlign = "left";
+
+  /**
+   * Whether this column is sortable.
+   */
+  @property({ type: Boolean, reflect: true })
+  sortable = false;
+
+  /**
+   * Current sort direction.
+   */
+  @property({ type: String, attribute: "sort-direction", reflect: true })
+  sortDirection: SortDirection = "none";
+
+  /**
+   * Column width (CSS value).
+   */
+  @property({ type: String })
+  width = "";
+
+  private handleClick(): void {
+    if (!this.sortable) return;
+
+    emitEvent(this, "sort", {
+      detail: {
+        column: this.column,
+        direction: this.getNextDirection(),
+      },
+    });
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (!this.sortable) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick();
+    }
+  }
+
+  private getNextDirection(): SortDirection {
+    if (this.sortDirection === "none") return "asc";
+    if (this.sortDirection === "asc") return "desc";
+    return "none";
+  }
+
+  /**
+   * Get the aria-sort attribute value.
+   * Per APG, sortable columns should always have aria-sort:
+   * - "ascending" for A-Z or low-high sort
+   * - "descending" for Z-A or high-low sort
+   * - "none" when sortable but not currently sorted
+   */
+  private getAriaSort(): "ascending" | "descending" | "none" {
+    if (this.sortDirection === "asc") return "ascending";
+    if (this.sortDirection === "desc") return "descending";
+    return "none";
+  }
+
+  override render(): TemplateResult {
+    const style = this.width ? `width: ${this.width}` : "";
+
+    return html`
+      <th
+        class="ds-table__head"
+        role="columnheader"
+        scope="col"
+        data-align=${this.align !== "left" ? this.align : nothing}
+        ?data-sortable=${this.sortable}
+        data-sort-direction=${this.sortable ? this.sortDirection : nothing}
+        aria-sort=${this.sortable ? this.getAriaSort() : nothing}
+        tabindex=${this.sortable ? 0 : nothing}
+        style=${style || nothing}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot></slot>
+        ${this.sortable ? html`<span class="ds-table__sort-icon">${sortIcon}</span>` : nothing}
+      </th>
+    `;
+  }
+}
+
+// Register the component
+define("ds-table-head", DsTableHead);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-table-head": DsTableHead;
+  }
+}

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

@@ -0,0 +1,32 @@
+import { type TemplateResult, html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Table header component (thead).
+ *
+ * @element ds-table-header
+ *
+ * @slot - TableRow elements for header
+ */
+export class DsTableHeader extends DSElement {
+  static override styles = [];
+
+  override render(): TemplateResult {
+    return html`
+      <thead class="ds-table__header" role="rowgroup">
+        <slot></slot>
+      </thead>
+    `;
+  }
+}
+
+// Register the component
+define("ds-table-header", DsTableHeader);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-table-header": DsTableHeader;
+  }
+}

package/templates/table/wc/table-row.ts

@@ -0,0 +1,50 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+/**
+ * Table row component (tr).
+ *
+ * @element ds-table-row
+ *
+ * @slot - TableHead or TableCell elements
+ */
+export class DsTableRow extends DSElement {
+  static override styles = [];
+
+  /**
+   * Row ID for selection tracking.
+   */
+  @property({ type: String, attribute: "row-id" })
+  rowId = "";
+
+  /**
+   * Whether this row is selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+
+  override render(): TemplateResult {
+    return html`
+      <tr
+        class="ds-table__row"
+        role="row"
+        ?data-selected=${this.selected}
+        aria-selected=${this.selected ? "true" : nothing}
+      >
+        <slot></slot>
+      </tr>
+    `;
+  }
+}
+
+// Register the component
+define("ds-table-row", DsTableRow);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-table-row": DsTableRow;
+  }
+}

package/templates/table/wc/table.ts

@@ -0,0 +1,93 @@
+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 TableSize = "compact" | "default" | "spacious";
+
+/**
+ * Table root component.
+ *
+ * @element ds-table
+ *
+ * @slot - Table content (thead, tbody, tfoot)
+ *
+ * @cssprop --ds-table-border - Border style
+ * @cssprop --ds-table-radius - Border radius
+ * @cssprop --ds-table-bg - Background color
+ */
+export class DsTable extends DSElement {
+  static override styles = [];
+
+  /**
+   * Size variant.
+   */
+  @property({ type: String, reflect: true })
+  size: TableSize = "default";
+
+  /**
+   * Whether to show striped rows.
+   */
+  @property({ type: Boolean, reflect: true })
+  striped = false;
+
+  /**
+   * Whether to remove borders.
+   */
+  @property({ type: Boolean, reflect: true })
+  borderless = false;
+
+  /**
+   * Whether to use fixed layout.
+   */
+  @property({ type: Boolean, reflect: true })
+  fixed = false;
+
+  /**
+   * Whether header is sticky.
+   */
+  @property({ type: Boolean, attribute: "sticky-header", reflect: true })
+  stickyHeader = false;
+
+  /**
+   * Accessible caption for screen readers.
+   */
+  @property({ type: String })
+  caption = "";
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-table": true,
+    };
+
+    return html`
+      <table
+        class=${classMap(classes)}
+        role="grid"
+        data-size=${this.size !== "default" ? this.size : nothing}
+        ?data-striped=${this.striped}
+        ?data-borderless=${this.borderless}
+        ?data-fixed=${this.fixed}
+        ?data-sticky-header=${this.stickyHeader}
+      >
+        ${
+          this.caption
+            ? html`<caption class="ds-table__caption">${this.caption}</caption>`
+            : nothing
+        }
+        <slot></slot>
+      </table>
+    `;
+  }
+}
+
+// Register the component
+define("ds-table", DsTable);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-table": DsTable;
+  }
+}

package/templates/tabs/index.tsx

@@ -0,0 +1,222 @@
+/**
+ * Tabs compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs } from "@/components/ui";
+ *
+ * <Tabs.Root defaultValue="tab1">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+ *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
+ *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ * </Tabs.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsActivationMode = "automatic" | "manual";
+
+export interface TabsRootProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Controlled value */
+  value?: string;
+  /** Default value (uncontrolled) */
+  defaultValue?: string;
+  /** Called when value changes */
+  onValueChange?: (value: string) => void;
+  /** Keyboard navigation orientation */
+  orientation?: TabsOrientation;
+  /** Activation mode */
+  activationMode?: TabsActivationMode;
+}
+
+export interface TabsListProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Loop focus at ends */
+  loop?: boolean;
+}
+
+export interface TabsTriggerProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Unique value identifying this tab */
+  value: string;
+  /** Disable this tab */
+  disabled?: boolean;
+}
+
+export interface TabsContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Value of associated tab */
+  value: string;
+  /** Keep mounted when inactive */
+  forceMount?: boolean;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Tabs root component.
+ */
+const TabsRoot = forwardRef<HTMLElement, TabsRootProps>(function TabsRoot(
+  {
+    children,
+    className,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    orientation = "horizontal",
+    activationMode = "automatic",
+    ...props
+  },
+  ref
+) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+  const elementRef = useRef<HTMLElement>(null);
+
+  // Combine refs
+  const combinedRef = (node: HTMLElement | null) => {
+    (elementRef as React.MutableRefObject<HTMLElement | null>).current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+    }
+  };
+
+  const handleChange = useCallback(
+    (event: Event) => {
+      const customEvent = event as CustomEvent<{ value: string }>;
+      const newValue = customEvent.detail.value;
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Attach event listeners
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    element.addEventListener("ds:change", handleChange);
+
+    return () => {
+      element.removeEventListener("ds:change", handleChange);
+    };
+  }, [handleChange]);
+
+  return createElement(
+    "ds-tabs",
+    {
+      ref: combinedRef,
+      class: className,
+      value: isControlled ? value : undefined,
+      "default-value": !isControlled ? defaultValue : undefined,
+      orientation,
+      "activation-mode": activationMode,
+      ...props,
+    },
+    children
+  );
+});
+TabsRoot.displayName = "Tabs.Root";
+
+/**
+ * Tabs list component.
+ */
+const TabsList = forwardRef<HTMLElement, TabsListProps>(function TabsList(
+  { children, className, loop = true, ...props },
+  ref
+) {
+  return createElement(
+    "ds-tabs-list",
+    { ref, class: className, loop: loop || undefined, ...props },
+    children
+  );
+});
+TabsList.displayName = "Tabs.List";
+
+/**
+ * Tabs trigger component.
+ */
+const TabsTrigger = forwardRef<HTMLElement, TabsTriggerProps>(function TabsTrigger(
+  { children, className, value, disabled = false, ...props },
+  ref
+) {
+  return createElement(
+    "ds-tabs-trigger",
+    {
+      ref,
+      class: className,
+      value,
+      disabled: disabled || undefined,
+      ...props,
+    },
+    children
+  );
+});
+TabsTrigger.displayName = "Tabs.Trigger";
+
+/**
+ * Tabs content component.
+ */
+const TabsContent = forwardRef<HTMLElement, TabsContentProps>(function TabsContent(
+  { children, className, value, forceMount = false, ...props },
+  ref
+) {
+  return createElement(
+    "ds-tabs-content",
+    {
+      ref,
+      class: className,
+      value,
+      "force-mount": forceMount || undefined,
+      ...props,
+    },
+    children
+  );
+});
+TabsContent.displayName = "Tabs.Content";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+};
+
+// Also export individual components
+export { TabsRoot, TabsList, TabsTrigger, TabsContent };

package/templates/tabs/wc/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Tabs component barrel exports.
+ */
+
+export { DsTabs, type TabsOrientation, type TabsActivationMode } from "./tabs.js";
+export { DsTabsList } from "./tabs-list.js";
+export { DsTabsTrigger } from "./tabs-trigger.js";
+export { DsTabsContent } from "./tabs-content.js";