@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/tag/wc/tag.ts

@@ -0,0 +1,166 @@
+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 { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export type TagVariant =
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+export type TagSize = "sm" | "md" | "lg";
+
+// Close icon SVG
+const closeIcon = html`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+`;
+
+/**
+ * Tag component for categorization with optional remove action.
+ *
+ * @element ds-tag
+ *
+ * @slot - Tag content
+ * @slot icon - Optional leading icon
+ *
+ * @fires ds-remove - When the remove button is clicked
+ * @fires ds-click - When the tag is clicked (if clickable)
+ *
+ * @cssprop --ds-tag-bg - Background color
+ * @cssprop --ds-tag-color - Text color
+ */
+export class DsTag extends DSElement {
+  static override styles = [];
+
+  /**
+   * Color variant.
+   */
+  @property({ type: String, reflect: true })
+  variant: TagVariant = "neutral";
+
+  /**
+   * Size variant.
+   */
+  @property({ type: String, reflect: true })
+  size: TagSize = "md";
+
+  /**
+   * Use solid (filled) style instead of subtle.
+   */
+  @property({ type: Boolean, reflect: true })
+  solid = false;
+
+  /**
+   * Show remove button.
+   */
+  @property({ type: Boolean, reflect: true })
+  removable = false;
+
+  /**
+   * Make tag clickable/interactive.
+   */
+  @property({ type: Boolean, reflect: true })
+  clickable = false;
+
+  /**
+   * Disable the tag.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * Value for identification in events.
+   */
+  @property({ type: String })
+  value = "";
+
+  private handleRemove(event: Event): void {
+    event.stopPropagation();
+    if (this.disabled) return;
+
+    emitEvent(this, "remove", {
+      detail: { value: this.value },
+    });
+  }
+
+  private handleClick(): void {
+    if (!this.clickable || this.disabled) return;
+
+    emitEvent(this, "click", {
+      detail: { value: this.value },
+    });
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      if (this.clickable) {
+        event.preventDefault();
+        this.handleClick();
+      }
+    } else if (event.key === "Backspace" || event.key === "Delete") {
+      if (this.removable) {
+        event.preventDefault();
+        emitEvent(this, "remove", { detail: { value: this.value } });
+      }
+    }
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-tag": true,
+    };
+
+    return html`
+      <span
+        class=${classMap(classes)}
+        role=${this.clickable ? "button" : "status"}
+        tabindex=${this.clickable && !this.disabled ? 0 : nothing}
+        data-variant=${this.variant}
+        data-size=${this.size !== "md" ? this.size : nothing}
+        ?data-solid=${this.solid}
+        ?data-clickable=${this.clickable}
+        ?data-disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : nothing}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot name="icon"></slot>
+        <slot></slot>
+        ${
+          this.removable
+            ? html`
+              <button
+                type="button"
+                class="ds-tag__remove"
+                aria-label="Remove"
+                ?disabled=${this.disabled}
+                @click=${this.handleRemove}
+              >
+                ${closeIcon}
+              </button>
+            `
+            : nothing
+        }
+      </span>
+    `;
+  }
+}
+
+// Register the component
+define("ds-tag", DsTag);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-tag": DsTag;
+  }
+}

package/templates/text/text.tsx

@@ -0,0 +1,100 @@
+import type { ReactNode } from "react";
+import { createElement, forwardRef } from "react";
+import { Slot } from "../primitives/slot.js";
+import type { AsChildProps } from "../types/polymorphic.js";
+import { mergeClassNames } from "../utils/merge-props.js";
+
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextVariant = "default" | "muted" | "success" | "warning" | "error";
+
+export interface TextProps extends AsChildProps {
+  /** Text size */
+  size?: TextSize;
+  /** Font weight */
+  weight?: TextWeight;
+  /** Color variant */
+  variant?: TextVariant;
+  /** Truncate text with ellipsis */
+  truncate?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Text content */
+  children?: ReactNode;
+}
+
+/**
+ * Maps text props to CSS utility classes.
+ */
+function buildTextClasses(props: TextProps): string[] {
+  const classes: string[] = [];
+
+  // Size
+  if (props.size) {
+    classes.push(`ds-text-${props.size}`);
+  }
+
+  // Weight
+  if (props.weight) {
+    classes.push(`ds-font-${props.weight}`);
+  }
+
+  // Variant (color)
+  if (props.variant && props.variant !== "default") {
+    classes.push(`ds-text-${props.variant}`);
+  }
+
+  // Truncate
+  if (props.truncate) {
+    classes.push("ds-truncate");
+  }
+
+  return classes;
+}
+
+/**
+ * Text is a typography primitive that applies consistent text styling.
+ * Supports asChild for semantic HTML elements (h1-h6, p, etc.).
+ *
+ * @example
+ * ```tsx
+ * <Text size="lg" weight="bold">Large bold text</Text>
+ *
+ * <Text size="2xl" weight="bold" asChild>
+ *   <h1>Page Title</h1>
+ * </Text>
+ *
+ * <Text variant="muted" asChild>
+ *   <p>Muted paragraph text</p>
+ * </Text>
+ * ```
+ */
+export const Text = forwardRef<HTMLElement, TextProps>((props, ref) => {
+  const {
+    asChild = false,
+    size = "md",
+    weight = "normal",
+    variant = "default",
+    truncate = false,
+    className,
+    children,
+    ...rest
+  } = props;
+
+  const textClasses = buildTextClasses({ size, weight, variant, truncate });
+  const allClasses = mergeClassNames(...textClasses, className);
+
+  const Component = asChild ? Slot : "span";
+
+  return createElement(
+    Component,
+    {
+      ref,
+      className: allClasses || undefined,
+      ...rest,
+    },
+    children
+  );
+});
+
+Text.displayName = "Text";

package/templates/text/wc/text.ts

@@ -0,0 +1,94 @@
+import type { TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextVariant = "default" | "muted" | "success" | "warning" | "error";
+export type TextAs = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+const VALID_AS_VALUES = new Set<string>(["span", "p", "h1", "h2", "h3", "h4", "h5", "h6"]);
+
+/**
+ * A typography component for consistent text styling.
+ *
+ * @element ds-text
+ * @slot - Default slot for text content
+ */
+export class DsText extends DSElement {
+  static override styles = [];
+
+  /**
+   * The text size.
+   */
+  @property({ type: String, reflect: true })
+  size: TextSize = "md";
+
+  /**
+   * The font weight.
+   */
+  @property({ type: String, reflect: true })
+  weight: TextWeight = "normal";
+
+  /**
+   * The color variant.
+   */
+  @property({ type: String, reflect: true })
+  variant: TextVariant = "default";
+
+  /**
+   * The semantic element to render as.
+   * Supports: span, p, h1-h6
+   */
+  @property({ type: String, reflect: true })
+  as: TextAs = "span";
+
+  /**
+   * Whether to truncate text with ellipsis.
+   */
+  @property({ type: Boolean, reflect: true })
+  truncate = false;
+
+  private getValidAs(): TextAs {
+    if (VALID_AS_VALUES.has(this.as)) {
+      return this.as;
+    }
+
+    console.warn(
+      `[ds-text] Invalid "as" value "${this.as}". Expected one of: ${Array.from(VALID_AS_VALUES).join(", ")}. Falling back to "span".`
+    );
+    return "span";
+  }
+
+  override render(): TemplateResult {
+    const validAs = this.getValidAs();
+    const tag = unsafeStatic(validAs);
+
+    const classes = {
+      "ds-text": true,
+      [`ds-text--${this.size}`]: true,
+      [`ds-text--${this.weight}`]: true,
+      [`ds-text--${this.variant}`]: true,
+      "ds-text--truncate": this.truncate,
+    };
+
+    return staticHtml`
+      <${tag} class=${classMap(classes)}>
+        <slot></slot>
+      </${tag}>
+    `;
+  }
+}
+
+// Register the component
+define("ds-text", DsText);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-text": DsText;
+  }
+}

package/templates/textarea/textarea.tsx

@@ -0,0 +1,134 @@
+import type React from "react";
+import {
+  type TextareaHTMLAttributes,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import {
+  type ResponsiveProp,
+  generateResponsiveDataAttr,
+  isResponsiveObject,
+  resolveResponsiveValue,
+} from "../primitives/responsive.js";
+
+export type TextareaSize = "sm" | "md" | "lg";
+
+export interface TextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "onInput"> {
+  /**
+   * Textarea size - supports responsive object syntax
+   * @example
+   * ```tsx
+   * // Single value
+   * <Textarea size="md" />
+   *
+   * // Responsive
+   * <Textarea size={{ base: "sm", md: "md", lg: "lg" }} />
+   * ```
+   */
+  size?: ResponsiveProp<TextareaSize>;
+  /** Error state */
+  error?: boolean;
+  /** Auto-resize to fit content */
+  autoResize?: boolean;
+  /** Change handler */
+  onChange?: (value: string, event: Event) => void;
+  /** Value change handler - fires on every keystroke */
+  onValueChange?: (value: string, event: Event) => void;
+}
+
+/**
+ * React wrapper for ds-textarea Web Component.
+ * Multi-line text input with auto-resize support.
+ */
+export const Textarea = forwardRef<HTMLElement, TextareaProps>((props, forwardedRef) => {
+  const {
+    size = "md",
+    name,
+    value,
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    error = false,
+    autoResize = false,
+    rows,
+    minLength,
+    maxLength,
+    onChange,
+    onValueChange,
+    className,
+    ...rest
+  } = props;
+
+  const internalRef = useRef<HTMLElement>(null);
+
+  // Store handlers in refs for stable callback references
+  const onChangeRef = useRef(onChange);
+  const onValueChangeRef = useRef(onValueChange);
+  onChangeRef.current = onChange;
+  onValueChangeRef.current = onValueChange;
+
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  // Stable handlers that read from refs
+  const handleInputEvent = useCallback((event: Event) => {
+    const customEvent = event as CustomEvent<{ value: string }>;
+    onValueChangeRef.current?.(customEvent.detail.value, event);
+  }, []);
+
+  const handleChangeEvent = useCallback((event: Event) => {
+    const customEvent = event as CustomEvent<{ value: string }>;
+    onChangeRef.current?.(customEvent.detail.value, event);
+  }, []);
+
+  // Handle events - no handler deps needed
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element) return;
+
+    element.addEventListener("input", handleInputEvent);
+    element.addEventListener("change", handleChangeEvent);
+
+    return () => {
+      element.removeEventListener("input", handleInputEvent);
+      element.removeEventListener("change", handleChangeEvent);
+    };
+  }, [handleInputEvent, handleChangeEvent]);
+
+  // Resolve responsive size - use base value for the WC attribute
+  const resolvedSize = resolveResponsiveValue(size, "md");
+  const isResponsive = isResponsiveObject(size);
+  const responsiveSizeAttr = isResponsive ? generateResponsiveDataAttr(size) : undefined;
+
+  return createElement("ds-textarea", {
+    ref: internalRef,
+    size: resolvedSize,
+    name,
+    value,
+    placeholder,
+    disabled: disabled || undefined,
+    readonly: readOnly || undefined,
+    required: required || undefined,
+    error: error || undefined,
+    "auto-resize": autoResize || undefined,
+    rows,
+    minlength: minLength,
+    maxlength: maxLength,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...rest,
+  });
+});
+
+Textarea.displayName = "Textarea";