@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/breadcrumb/index.tsx

@@ -0,0 +1,157 @@
+/**
+ * Breadcrumb compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Breadcrumb } from "@/components/ui";
+ *
+ * <Breadcrumb.Root>
+ *   <Breadcrumb.List>
+ *     <Breadcrumb.Item>
+ *       <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ *     </Breadcrumb.Item>
+ *     <Breadcrumb.Separator />
+ *     <Breadcrumb.Item>
+ *       <Breadcrumb.Page>Current</Breadcrumb.Page>
+ *     </Breadcrumb.Item>
+ *   </Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useEffect,
+  useRef,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface BreadcrumbRootProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface BreadcrumbListProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface BreadcrumbItemProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface BreadcrumbLinkProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  href?: string;
+  onNavigate?: (href: string) => void;
+}
+
+export interface BreadcrumbPageProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface BreadcrumbSeparatorProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+const BreadcrumbRoot = forwardRef<HTMLElement, BreadcrumbRootProps>(function BreadcrumbRoot(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-breadcrumb", { ref, class: className, ...props }, children);
+});
+BreadcrumbRoot.displayName = "Breadcrumb.Root";
+
+const BreadcrumbList = forwardRef<HTMLElement, BreadcrumbListProps>(function BreadcrumbList(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-breadcrumb-list", { ref, class: className, ...props }, children);
+});
+BreadcrumbList.displayName = "Breadcrumb.List";
+
+const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(function BreadcrumbItem(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-breadcrumb-item", { ref, class: className, ...props }, children);
+});
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+
+const BreadcrumbLink = forwardRef<HTMLElement, BreadcrumbLinkProps>(function BreadcrumbLink(
+  { children, className, href, onNavigate, ...props },
+  ref
+) {
+  const elementRef = useRef<HTMLElement>(null);
+
+  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;
+  };
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !onNavigate) return;
+
+    const handleNavigate = (event: Event) => {
+      event.preventDefault();
+      const e = event as CustomEvent<{ href: string }>;
+      onNavigate(e.detail.href);
+    };
+    element.addEventListener("ds:navigate", handleNavigate);
+    return () => element.removeEventListener("ds:navigate", handleNavigate);
+  }, [onNavigate]);
+
+  return createElement(
+    "ds-breadcrumb-link",
+    { ref: combinedRef, class: className, href, ...props },
+    children
+  );
+});
+BreadcrumbLink.displayName = "Breadcrumb.Link";
+
+const BreadcrumbPage = forwardRef<HTMLElement, BreadcrumbPageProps>(function BreadcrumbPage(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-breadcrumb-page", { ref, class: className, ...props }, children);
+});
+BreadcrumbPage.displayName = "Breadcrumb.Page";
+
+const BreadcrumbSeparator = forwardRef<HTMLElement, BreadcrumbSeparatorProps>(
+  function BreadcrumbSeparator({ children, className, ...props }, ref) {
+    return createElement("ds-breadcrumb-separator", { ref, class: className, ...props }, children);
+  }
+);
+BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Breadcrumb = {
+  Root: BreadcrumbRoot,
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator,
+};
+
+export {
+  BreadcrumbRoot,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/templates/breadcrumb/wc/breadcrumb-item.ts

@@ -0,0 +1,30 @@
+/**
+ * BreadcrumbItem component - individual breadcrumb item.
+ *
+ * @element ds-breadcrumb-item
+ *
+ * @slot - Link or page content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsBreadcrumbItem extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-breadcrumb-item", DsBreadcrumbItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-breadcrumb-item": DsBreadcrumbItem;
+  }
+}

package/templates/breadcrumb/wc/breadcrumb-link.ts

@@ -0,0 +1,70 @@
+/**
+ * BreadcrumbLink component - navigable breadcrumb link.
+ *
+ * @element ds-breadcrumb-link
+ *
+ * @slot - Link content
+ *
+ * @fires ds:navigate - Fired when link is clicked (for SPA navigation)
+ */
+
+import { html } 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 class DsBreadcrumbLink extends DSElement {
+  /** URL to navigate to */
+  @property({ type: String, reflect: true })
+  href = "";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  private handleClick = (event: MouseEvent): void => {
+    const navigateEvent = emitEvent(this, "ds:navigate", {
+      detail: { href: this.href },
+      bubbles: true,
+      cancelable: true,
+    });
+
+    if (!navigateEvent.defaultPrevented && this.href) {
+      if (event.ctrlKey || event.metaKey) {
+        window.open(this.href, "_blank");
+      } else {
+        window.location.href = this.href;
+      }
+    }
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.handleClick(new MouseEvent("click"));
+    }
+  };
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-breadcrumb-link", DsBreadcrumbLink);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-breadcrumb-link": DsBreadcrumbLink;
+  }
+}

package/templates/breadcrumb/wc/breadcrumb-list.ts

@@ -0,0 +1,30 @@
+/**
+ * BreadcrumbList component - ordered list container.
+ *
+ * @element ds-breadcrumb-list
+ *
+ * @slot - Breadcrumb items and separators
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsBreadcrumbList extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "list");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-breadcrumb-list", DsBreadcrumbList);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-breadcrumb-list": DsBreadcrumbList;
+  }
+}

package/templates/breadcrumb/wc/breadcrumb-page.ts

@@ -0,0 +1,32 @@
+/**
+ * BreadcrumbPage component - current page (non-navigable).
+ *
+ * @element ds-breadcrumb-page
+ *
+ * @slot - Page content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsBreadcrumbPage extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "link");
+    this.setAttribute("aria-current", "page");
+    this.setAttribute("aria-disabled", "true");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-breadcrumb-page", DsBreadcrumbPage);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-breadcrumb-page": DsBreadcrumbPage;
+  }
+}

package/templates/breadcrumb/wc/breadcrumb-separator.ts

@@ -0,0 +1,31 @@
+/**
+ * BreadcrumbSeparator component - visual separator between items.
+ *
+ * @element ds-breadcrumb-separator
+ *
+ * @slot - Separator content (defaults to /)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsBreadcrumbSeparator extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+    this.setAttribute("aria-hidden", "true");
+  }
+
+  override render() {
+    return html`<slot>/</slot>`;
+  }
+}
+
+define("ds-breadcrumb-separator", DsBreadcrumbSeparator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-breadcrumb-separator": DsBreadcrumbSeparator;
+  }
+}

package/templates/breadcrumb/wc/breadcrumb.ts

@@ -0,0 +1,55 @@
+/**
+ * Breadcrumb component - navigation trail.
+ *
+ * Shows the current page location within a navigational hierarchy.
+ *
+ * @element ds-breadcrumb
+ *
+ * @slot - Breadcrumb list
+ *
+ * @example
+ * ```html
+ * <ds-breadcrumb>
+ *   <ds-breadcrumb-list>
+ *     <ds-breadcrumb-item>
+ *       <ds-breadcrumb-link href="/">Home</ds-breadcrumb-link>
+ *     </ds-breadcrumb-item>
+ *     <ds-breadcrumb-separator>/</ds-breadcrumb-separator>
+ *     <ds-breadcrumb-item>
+ *       <ds-breadcrumb-page>Current</ds-breadcrumb-page>
+ *     </ds-breadcrumb-item>
+ *   </ds-breadcrumb-list>
+ * </ds-breadcrumb>
+ * ```
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+// Import child components
+import "./breadcrumb-list.js";
+import "./breadcrumb-item.js";
+import "./breadcrumb-link.js";
+import "./breadcrumb-page.js";
+import "./breadcrumb-separator.js";
+
+export class DsBreadcrumb extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "Breadcrumb");
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-breadcrumb", DsBreadcrumb);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-breadcrumb": DsBreadcrumb;
+  }
+}

package/templates/breadcrumb/wc/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Breadcrumb component exports.
+ */
+
+export { DsBreadcrumb } from "./breadcrumb.js";
+export { DsBreadcrumbList } from "./breadcrumb-list.js";
+export { DsBreadcrumbItem } from "./breadcrumb-item.js";
+export { DsBreadcrumbLink } from "./breadcrumb-link.js";
+export { DsBreadcrumbPage } from "./breadcrumb-page.js";
+export { DsBreadcrumbSeparator } from "./breadcrumb-separator.js";

package/templates/button/button.tsx

@@ -0,0 +1,119 @@
+/**
+ * Native React Button component using createButtonBehavior.
+ * Provides accessible button with loading and disabled states.
+ */
+
+import { type ButtonBehaviorOptions, createButtonBehavior } from "@hypoth-ui/primitives-dom";
+import {
+  type ButtonHTMLAttributes,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+import { Slot } from "../../primitives/slot.js";
+
+export interface ButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled"> {
+  /** Button content */
+  children?: ReactNode;
+  /** Button type */
+  type?: "button" | "submit" | "reset";
+  /** Whether button is disabled */
+  disabled?: boolean;
+  /** Whether button is in loading state */
+  loading?: boolean;
+  /** Render as child element (polymorphic) */
+  asChild?: boolean;
+  /** Called when button is activated */
+  onPress?: () => void;
+}
+
+/**
+ * Accessible button component with loading and disabled states.
+ *
+ * @example
+ * ```tsx
+ * <Button onPress={() => console.log("clicked")}>Click me</Button>
+ *
+ * <Button loading>Saving...</Button>
+ *
+ * <Button asChild>
+ *   <a href="/link">Link styled as button</a>
+ * </Button>
+ * ```
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      type = "button",
+      disabled = false,
+      loading = false,
+      asChild = false,
+      onPress,
+      onClick,
+      onKeyDown,
+      ...restProps
+    },
+    ref
+  ) => {
+    // Create behavior instance - intentionally created once with initial values
+    // biome-ignore lint/correctness/useExhaustiveDependencies: behavior is created once, updates handled via setState
+    const behavior = useMemo(() => {
+      const options: ButtonBehaviorOptions = {
+        disabled,
+        loading,
+        type,
+        onActivate: onPress,
+      };
+      return createButtonBehavior(options);
+    }, []);
+
+    // Update behavior state when props change
+    useEffect(() => {
+      behavior.setState({ disabled, loading, type });
+    }, [behavior, disabled, loading, type]);
+
+    // Get button props from behavior
+    const buttonProps = behavior.getButtonProps();
+
+    // Handle keyboard events
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLButtonElement>) => {
+        behavior.handleKeyDown(event.nativeEvent);
+        onKeyDown?.(event);
+      },
+      [behavior, onKeyDown]
+    );
+
+    // Handle click events
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        behavior.handleClick(event.nativeEvent);
+        onClick?.(event);
+      },
+      [behavior, onClick]
+    );
+
+    const Component = asChild ? Slot : "button";
+
+    return (
+      <Component
+        ref={ref}
+        type={asChild ? undefined : buttonProps.type}
+        aria-disabled={buttonProps["aria-disabled"]}
+        aria-busy={buttonProps["aria-busy"]}
+        tabIndex={buttonProps.tabIndex}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...restProps}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Button.displayName = "Button";

package/templates/button/index.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from "./button.js";