@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/separator/index.tsx

@@ -0,0 +1,49 @@
+/**
+ * Separator component React wrapper.
+ *
+ * @example
+ * ```tsx
+ * import { Separator } from "@/components/ui";
+ *
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * <Separator decorative />
+ * ```
+ */
+
+import { type HTMLAttributes, createElement, forwardRef } from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export interface SeparatorProps extends HTMLAttributes<HTMLElement> {
+  /** Visual orientation of the separator */
+  orientation?: SeparatorOrientation;
+  /** Whether the separator is purely decorative (no semantic meaning) */
+  decorative?: boolean;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Separator component - visual divider between content sections.
+ */
+export const Separator = forwardRef<HTMLElement, SeparatorProps>(function Separator(
+  { className, orientation = "horizontal", decorative = false, ...props },
+  ref
+) {
+  return createElement("ds-separator", {
+    ref,
+    class: className,
+    orientation,
+    decorative: decorative || undefined,
+    ...props,
+  });
+});
+
+Separator.displayName = "Separator";

package/templates/separator/wc/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Separator component barrel exports.
+ */
+
+export { DsSeparator, type SeparatorOrientation } from "./separator.js";

package/templates/separator/wc/separator.ts

@@ -0,0 +1,60 @@
+/**
+ * Separator component - visual divider between content sections.
+ *
+ * @element ds-separator
+ *
+ * @example
+ * ```html
+ * <ds-separator></ds-separator>
+ * <ds-separator orientation="vertical"></ds-separator>
+ * <ds-separator decorative></ds-separator>
+ * ```
+ */
+
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export class DsSeparator extends DSElement {
+  /** Visual orientation of the separator */
+  @property({ reflect: true })
+  orientation: SeparatorOrientation = "horizontal";
+
+  /** Whether the separator is purely decorative (no semantic meaning) */
+  @property({ type: Boolean, reflect: true })
+  decorative = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.updateAccessibility();
+  }
+
+  override updated(): void {
+    this.updateAccessibility();
+  }
+
+  private updateAccessibility(): void {
+    if (this.decorative) {
+      this.setAttribute("role", "none");
+      this.removeAttribute("aria-orientation");
+    } else {
+      this.setAttribute("role", "separator");
+      this.setAttribute("aria-orientation", this.orientation);
+    }
+  }
+
+  override render() {
+    return html``;
+  }
+}
+
+define("ds-separator", DsSeparator);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-separator": DsSeparator;
+  }
+}

package/templates/sheet/index.tsx

@@ -0,0 +1,291 @@
+/**
+ * Sheet compound component exports.
+ *
+ * Sheet is a slide-in overlay panel from screen edges.
+ *
+ * @example
+ * ```tsx
+ * import { Sheet } from "@/components/ui";
+ *
+ * <Sheet.Root>
+ *   <Sheet.Trigger>
+ *     <button>Open Settings</button>
+ *   </Sheet.Trigger>
+ *   <Sheet.Content side="right">
+ *     <Sheet.Header>
+ *       <Sheet.Title>Settings</Sheet.Title>
+ *       <Sheet.Description>Adjust your preferences</Sheet.Description>
+ *     </Sheet.Header>
+ *     <div>Settings content...</div>
+ *     <Sheet.Footer>
+ *       <Sheet.Close>
+ *         <button>Close</button>
+ *       </Sheet.Close>
+ *     </Sheet.Footer>
+ *   </Sheet.Content>
+ * </Sheet.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type SheetSide = "top" | "right" | "bottom" | "left";
+export type SheetContentSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface SheetRootProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean;
+  /** Called when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Whether Escape key closes the sheet */
+  closeOnEscape?: boolean;
+  /** Whether clicking the overlay closes the sheet */
+  closeOnOverlay?: boolean;
+  /** Whether to animate open/close transitions */
+  animated?: boolean;
+}
+
+export interface SheetTriggerProps extends HTMLAttributes<HTMLElement> {
+  /** Trigger content (typically a button) */
+  children?: ReactNode;
+}
+
+export interface SheetContentProps extends HTMLAttributes<HTMLElement> {
+  /** Content */
+  children?: ReactNode;
+  /** Side of the screen the sheet appears from */
+  side?: SheetSide;
+  /** Size of the content */
+  size?: SheetContentSize;
+}
+
+export interface SheetOverlayProps extends HTMLAttributes<HTMLElement> {}
+
+export interface SheetHeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Header content */
+  children?: ReactNode;
+}
+
+export interface SheetFooterProps extends HTMLAttributes<HTMLElement> {
+  /** Footer content */
+  children?: ReactNode;
+}
+
+export interface SheetTitleProps extends HTMLAttributes<HTMLElement> {
+  /** Title content */
+  children?: ReactNode;
+}
+
+export interface SheetDescriptionProps extends HTMLAttributes<HTMLElement> {
+  /** Description content */
+  children?: ReactNode;
+}
+
+export interface SheetCloseProps extends HTMLAttributes<HTMLElement> {
+  /** Close button content */
+  children?: ReactNode;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Sheet root component.
+ */
+const SheetRoot = forwardRef<HTMLElement, SheetRootProps>(function SheetRoot(
+  {
+    children,
+    className,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    closeOnEscape = true,
+    closeOnOverlay = true,
+    animated = true,
+    ...props
+  },
+  ref
+) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  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 handleOpenChange = useCallback(
+    (event: Event) => {
+      const customEvent = event as CustomEvent;
+      const isOpen = customEvent.type === "ds:open";
+
+      if (!isControlled) {
+        setInternalOpen(isOpen);
+      }
+      onOpenChange?.(isOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  // Attach event listeners
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    element.addEventListener("ds:open", handleOpenChange);
+    element.addEventListener("ds:close", handleOpenChange);
+
+    return () => {
+      element.removeEventListener("ds:open", handleOpenChange);
+      element.removeEventListener("ds:close", handleOpenChange);
+    };
+  }, [handleOpenChange]);
+
+  return createElement(
+    "ds-sheet",
+    {
+      ref: combinedRef,
+      class: className,
+      open: open || undefined,
+      "close-on-escape": closeOnEscape,
+      "close-on-overlay": closeOnOverlay,
+      animated: animated || undefined,
+      ...props,
+    },
+    children
+  );
+});
+SheetRoot.displayName = "Sheet.Root";
+
+/**
+ * Sheet trigger component.
+ */
+const SheetTrigger = forwardRef<HTMLElement, SheetTriggerProps>(function SheetTrigger(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("div", { ref, className, slot: "trigger", ...props }, children);
+});
+SheetTrigger.displayName = "Sheet.Trigger";
+
+/**
+ * Sheet content component.
+ */
+const SheetContent = forwardRef<HTMLElement, SheetContentProps>(function SheetContent(
+  { children, className, side = "right", size = "md", ...props },
+  ref
+) {
+  return createElement(
+    "ds-sheet-content",
+    { ref, class: className, side, size, ...props },
+    children
+  );
+});
+SheetContent.displayName = "Sheet.Content";
+
+/**
+ * Sheet header component.
+ */
+const SheetHeader = forwardRef<HTMLElement, SheetHeaderProps>(function SheetHeader(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-sheet-header", { ref, class: className, ...props }, children);
+});
+SheetHeader.displayName = "Sheet.Header";
+
+/**
+ * Sheet footer component.
+ */
+const SheetFooter = forwardRef<HTMLElement, SheetFooterProps>(function SheetFooter(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-sheet-footer", { ref, class: className, ...props }, children);
+});
+SheetFooter.displayName = "Sheet.Footer";
+
+/**
+ * Sheet title component.
+ */
+const SheetTitle = forwardRef<HTMLElement, SheetTitleProps>(function SheetTitle(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-sheet-title", { ref, class: className, ...props }, children);
+});
+SheetTitle.displayName = "Sheet.Title";
+
+/**
+ * Sheet description component.
+ */
+const SheetDescription = forwardRef<HTMLElement, SheetDescriptionProps>(function SheetDescription(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-sheet-description", { ref, class: className, ...props }, children);
+});
+SheetDescription.displayName = "Sheet.Description";
+
+/**
+ * Sheet close component.
+ */
+const SheetClose = forwardRef<HTMLElement, SheetCloseProps>(function SheetClose(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-sheet-close", { ref, class: className, ...props }, children);
+});
+SheetClose.displayName = "Sheet.Close";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Sheet = {
+  Root: SheetRoot,
+  Trigger: SheetTrigger,
+  Content: SheetContent,
+  Header: SheetHeader,
+  Footer: SheetFooter,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Close: SheetClose,
+};
+
+// Also export individual components
+export {
+  SheetRoot,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
+};

package/templates/sheet/wc/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Sheet component exports.
+ */
+
+export { DsSheet } from "./sheet.js";
+export { DsSheetContent, type SheetSide, type SheetContentSize } from "./sheet-content.js";
+export { DsSheetOverlay } from "./sheet-overlay.js";
+export { DsSheetHeader } from "./sheet-header.js";
+export { DsSheetFooter } from "./sheet-footer.js";
+export { DsSheetTitle } from "./sheet-title.js";
+export { DsSheetDescription } from "./sheet-description.js";
+export { DsSheetClose } from "./sheet-close.js";

package/templates/sheet/wc/sheet-close.ts

@@ -0,0 +1,43 @@
+/**
+ * SheetClose component - closes the sheet when clicked.
+ *
+ * @element ds-sheet-close
+ *
+ * @slot - Close button content
+ *
+ * @fires ds:sheet-close - Fired when close is clicked
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export class DsSheetClose extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+  }
+
+  private handleClick = (): void => {
+    // Emit close event - parent will handle closing
+    emitEvent(this, "ds:sheet-close", { bubbles: true });
+  };
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-sheet-close", DsSheetClose);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-sheet-close": DsSheetClose;
+  }
+}

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

@@ -0,0 +1,47 @@
+/**
+ * SheetContent component - container for sheet content.
+ *
+ * @element ds-sheet-content
+ *
+ * @slot - Sheet content (header, body, footer)
+ */
+
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export type SheetSide = "top" | "right" | "bottom" | "left";
+export type SheetContentSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export class DsSheetContent extends DSElement {
+  /** Side of the screen the sheet appears from */
+  @property({ reflect: true })
+  side: SheetSide = "right";
+
+  /** Size of the sheet content */
+  @property({ reflect: true })
+  size: SheetContentSize = "md";
+
+  /** Data state for animations */
+  @property({ attribute: "data-state", reflect: true })
+  dataState: "open" | "closed" = "closed";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // ARIA attributes are set by parent DsSheet
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-sheet-content", DsSheetContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-sheet-content": DsSheetContent;
+  }
+}

package/templates/sheet/wc/sheet-description.ts

@@ -0,0 +1,34 @@
+/**
+ * SheetDescription component - description for the sheet.
+ *
+ * @element ds-sheet-description
+ *
+ * @slot - Description content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsSheetDescription extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID if not present (for aria-describedby)
+    if (!this.id) {
+      this.id = `sheet-desc-${crypto.randomUUID().slice(0, 8)}`;
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-sheet-description", DsSheetDescription);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-sheet-description": DsSheetDescription;
+  }
+}

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

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

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

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

package/templates/sheet/wc/sheet-overlay.ts

@@ -0,0 +1,23 @@
+/**
+ * SheetOverlay component - backdrop overlay behind the sheet.
+ *
+ * @element ds-sheet-overlay
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsSheetOverlay extends DSElement {
+  override render() {
+    return html``;
+  }
+}
+
+define("ds-sheet-overlay", DsSheetOverlay);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-sheet-overlay": DsSheetOverlay;
+  }
+}

package/templates/sheet/wc/sheet-title.ts

@@ -0,0 +1,34 @@
+/**
+ * SheetTitle component - title for the sheet.
+ *
+ * @element ds-sheet-title
+ *
+ * @slot - Title content
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsSheetTitle extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Generate ID if not present (for aria-labelledby)
+    if (!this.id) {
+      this.id = `sheet-title-${crypto.randomUUID().slice(0, 8)}`;
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-sheet-title", DsSheetTitle);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-sheet-title": DsSheetTitle;
+  }
+}