@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/avatar/wc/avatar-group.ts

@@ -0,0 +1,112 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property, state } 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";
+import type { AvatarSize } from "./avatar.js";
+
+/**
+ * Avatar group component for displaying multiple avatars with overflow.
+ *
+ * @element ds-avatar-group
+ *
+ * @slot - Avatar elements to display
+ *
+ * @csspart overflow - The overflow indicator element
+ *
+ * @cssprop --ds-avatar-size - Avatar dimensions (inherited by children)
+ */
+export class DsAvatarGroup extends DSElement {
+  static override styles = [];
+
+  /**
+   * Maximum number of avatars to display before showing overflow.
+   */
+  @property({ type: Number })
+  max = 5;
+
+  /**
+   * Size variant (inherited by child avatars).
+   */
+  @property({ type: String, reflect: true })
+  size: AvatarSize = "md";
+
+  @state()
+  private overflowCount = 0;
+
+  @state()
+  private visibleAvatars: Element[] = [];
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.updateAvatarVisibility();
+
+    // Use MutationObserver to track slot changes
+    const observer = new MutationObserver(() => this.updateAvatarVisibility());
+    observer.observe(this, { childList: true });
+  }
+
+  private updateAvatarVisibility(): void {
+    const avatars = Array.from(this.querySelectorAll("ds-avatar"));
+    const total = avatars.length;
+
+    if (total <= this.max) {
+      this.visibleAvatars = avatars;
+      this.overflowCount = 0;
+    } else {
+      this.visibleAvatars = avatars.slice(0, this.max);
+      this.overflowCount = total - this.max;
+    }
+
+    // Hide overflow avatars
+    avatars.forEach((avatar, index) => {
+      if (index >= this.max) {
+        (avatar as HTMLElement).style.display = "none";
+      } else {
+        (avatar as HTMLElement).style.display = "";
+      }
+    });
+
+    this.requestUpdate();
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-avatar-group": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        role="group"
+        aria-label="Avatar group"
+        data-size=${this.size}
+      >
+        ${
+          this.overflowCount > 0
+            ? html`
+              <span
+                part="overflow"
+                class="ds-avatar-group__overflow"
+                aria-label="${this.overflowCount} more users"
+              >
+                +${this.overflowCount}
+              </span>
+            `
+            : nothing
+        }
+        <slot @slotchange=${this.updateAvatarVisibility}></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-avatar-group", DsAvatarGroup);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-avatar-group": DsAvatarGroup;
+  }
+}

package/templates/avatar/wc/avatar.ts

@@ -0,0 +1,184 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property, state } 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 AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type AvatarShape = "circle" | "square";
+export type AvatarStatus = "online" | "offline" | "away" | "busy";
+
+// Default user icon SVG
+const defaultUserIcon = html`
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+  </svg>
+`;
+
+/**
+ * Avatar component for user representation.
+ *
+ * @element ds-avatar
+ *
+ * @csspart image - The avatar image element
+ * @csspart initials - The initials fallback element
+ * @csspart icon - The icon fallback element
+ * @csspart status - The status indicator element
+ *
+ * @cssprop --ds-avatar-size - Avatar dimensions
+ * @cssprop --ds-avatar-radius - Border radius
+ * @cssprop --ds-avatar-bg - Background color for fallback
+ * @cssprop --ds-avatar-color - Text color for initials/icon
+ */
+export class DsAvatar extends DSElement {
+  static override styles = [];
+
+  /**
+   * Image source URL.
+   */
+  @property({ type: String })
+  src = "";
+
+  /**
+   * Alt text for image.
+   */
+  @property({ type: String })
+  alt = "";
+
+  /**
+   * User's name (used for initials fallback).
+   */
+  @property({ type: String })
+  name = "";
+
+  /**
+   * Size variant.
+   */
+  @property({ type: String, reflect: true })
+  size: AvatarSize = "md";
+
+  /**
+   * Shape variant.
+   */
+  @property({ type: String, reflect: true })
+  shape: AvatarShape = "circle";
+
+  /**
+   * Status indicator.
+   */
+  @property({ type: String })
+  status?: AvatarStatus;
+
+  /**
+   * Whether to show status indicator.
+   */
+  @property({ type: Boolean, attribute: "show-status" })
+  showStatus = false;
+
+  @state()
+  private imageError = false;
+
+  private get initials(): string {
+    if (!this.name) return "";
+
+    const names = this.name.trim().split(/\s+/);
+    if (names.length === 0) return "";
+    if (names.length === 1) {
+      return (names[0] ?? "").charAt(0).toUpperCase();
+    }
+    const first = names[0] ?? "";
+    const last = names[names.length - 1] ?? "";
+    return (first.charAt(0) + last.charAt(0)).toUpperCase();
+  }
+
+  private get showImage(): boolean {
+    return Boolean(this.src && !this.imageError);
+  }
+
+  private get showInitials(): boolean {
+    return !this.showImage && Boolean(this.initials);
+  }
+
+  private get showIcon(): boolean {
+    return !this.showImage && !this.showInitials;
+  }
+
+  private handleImageError(): void {
+    this.imageError = true;
+  }
+
+  private handleImageLoad(): void {
+    this.imageError = false;
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-avatar": true,
+    };
+
+    return html`
+      <span
+        class=${classMap(classes)}
+        role="img"
+        aria-label=${this.alt || this.name || "Avatar"}
+        data-size=${this.size}
+        data-shape=${this.shape !== "circle" ? this.shape : nothing}
+      >
+        ${
+          this.showImage
+            ? html`
+              <img
+                part="image"
+                class="ds-avatar__image"
+                src=${this.src}
+                alt=""
+                @error=${this.handleImageError}
+                @load=${this.handleImageLoad}
+              />
+            `
+            : nothing
+        }
+        ${
+          this.showInitials
+            ? html`
+              <span part="initials" class="ds-avatar__initials">
+                ${this.initials}
+              </span>
+            `
+            : nothing
+        }
+        ${
+          this.showIcon
+            ? html`
+              <span part="icon" class="ds-avatar__icon">
+                ${defaultUserIcon}
+              </span>
+            `
+            : nothing
+        }
+        ${
+          this.showStatus && this.status
+            ? html`
+              <span
+                part="status"
+                class="ds-avatar__status"
+                data-status=${this.status}
+                aria-label=${`Status: ${this.status}`}
+              ></span>
+            `
+            : nothing
+        }
+      </span>
+    `;
+  }
+}
+
+// Register the component
+define("ds-avatar", DsAvatar);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-avatar": DsAvatar;
+  }
+}

package/templates/avatar/wc/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Avatar component exports
+ */
+export { DsAvatar, type AvatarSize, type AvatarShape, type AvatarStatus } from "./avatar.js";
+export { DsAvatarGroup } from "./avatar-group.js";

package/templates/badge/index.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { type HTMLAttributes, createElement, forwardRef } from "react";
+import "@hypoth-ui/wc";
+import {
+  type ResponsiveProp,
+  generateResponsiveDataAttr,
+  isResponsiveObject,
+  resolveResponsiveValue,
+} from "../../primitives/responsive.js";
+
+export type BadgeVariant =
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+export type BadgeSize = "sm" | "md" | "lg";
+export type BadgePosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLElement>, "content"> {
+  /**
+   * Badge content/count.
+   */
+  content?: string | number;
+
+  /**
+   * Maximum count to show. Displays "{max}+" if exceeded.
+   */
+  max?: number;
+
+  /**
+   * Color variant.
+   * @default "primary"
+   */
+  variant?: BadgeVariant;
+
+  /**
+   * Size variant - supports responsive object syntax.
+   * @default "md"
+   * @example
+   * ```tsx
+   * // Single value
+   * <Badge content={5} size="md" />
+   *
+   * // Responsive
+   * <Badge content={5} size={{ base: "sm", md: "md" }} />
+   * ```
+   */
+  size?: ResponsiveProp<BadgeSize>;
+
+  /**
+   * Use outline style.
+   * @default false
+   */
+  outline?: boolean;
+
+  /**
+   * Show as dot (no content).
+   * @default false
+   */
+  dot?: boolean;
+
+  /**
+   * Position when used in wrapper.
+   * @default "top-right"
+   */
+  position?: BadgePosition;
+
+  /**
+   * Show pulse animation.
+   * @default false
+   */
+  pulse?: boolean;
+}
+
+/**
+ * Badge component for counts, notifications, and status indicators.
+ *
+ * @example
+ * ```tsx
+ * // Count badge
+ * <Badge content={5} variant="error" />
+ *
+ * // Max count
+ * <Badge content={150} max={99} />
+ *
+ * // Dot indicator
+ * <Badge dot variant="success" />
+ * ```
+ */
+export const Badge = forwardRef<HTMLElement, BadgeProps>(function Badge(
+  {
+    content,
+    max,
+    variant = "primary",
+    size = "md",
+    outline = false,
+    dot = false,
+    position = "top-right",
+    pulse = false,
+    className,
+    ...props
+  },
+  ref
+) {
+  // 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-badge", {
+    ref,
+    content: content?.toString() ?? "",
+    max,
+    variant,
+    size: resolvedSize,
+    outline: outline || undefined,
+    dot: dot || undefined,
+    position,
+    pulse: pulse || undefined,
+    class: className,
+    // Add responsive data attribute for CSS targeting
+    "data-size-responsive": responsiveSizeAttr,
+    ...props,
+  });
+});
+
+// TypeScript declaration for JSX
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "ds-badge": BadgeProps & {
+        ref?: React.Ref<HTMLElement>;
+      };
+    }
+  }
+}

package/templates/badge/wc/badge.ts

@@ -0,0 +1,119 @@
+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 BadgeVariant =
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+export type BadgeSize = "sm" | "md" | "lg";
+export type BadgePosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
+/**
+ * Badge component for counts, notifications, and status indicators.
+ *
+ * @element ds-badge
+ *
+ * @cssprop --ds-badge-bg - Background color
+ * @cssprop --ds-badge-color - Text color
+ */
+export class DsBadge extends DSElement {
+  static override styles = [];
+
+  /**
+   * Badge content/count.
+   */
+  @property({ type: String })
+  content = "";
+
+  /**
+   * Maximum count to show. Displays "{max}+" if exceeded.
+   */
+  @property({ type: Number })
+  max?: number;
+
+  /**
+   * Color variant.
+   */
+  @property({ type: String, reflect: true })
+  variant: BadgeVariant = "primary";
+
+  /**
+   * Size variant.
+   */
+  @property({ type: String, reflect: true })
+  size: BadgeSize = "md";
+
+  /**
+   * Use outline style.
+   */
+  @property({ type: Boolean, reflect: true })
+  outline = false;
+
+  /**
+   * Show as dot (no content).
+   */
+  @property({ type: Boolean, reflect: true })
+  dot = false;
+
+  /**
+   * Position when used in wrapper.
+   */
+  @property({ type: String, reflect: true })
+  position: BadgePosition = "top-right";
+
+  /**
+   * Show pulse animation.
+   */
+  @property({ type: Boolean, reflect: true })
+  pulse = false;
+
+  private get displayContent(): string {
+    if (this.dot) return "";
+    if (this.max !== undefined && !Number.isNaN(Number(this.content))) {
+      const count = Number(this.content);
+      if (count > this.max) {
+        return `${this.max}+`;
+      }
+    }
+    return this.content;
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-badge": true,
+    };
+
+    return html`
+      <span
+        class=${classMap(classes)}
+        role="status"
+        data-variant=${this.variant}
+        data-size=${this.size !== "md" ? this.size : nothing}
+        ?data-outline=${this.outline}
+        ?data-dot=${this.dot}
+        data-position=${this.position}
+        ?data-pulse=${this.pulse}
+        aria-label=${this.dot ? "Notification indicator" : `${this.displayContent} notifications`}
+      >
+        ${this.dot ? nothing : this.displayContent}
+      </span>
+    `;
+  }
+}
+
+// Register the component
+define("ds-badge", DsBadge);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-badge": DsBadge;
+  }
+}

package/templates/badge/wc/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Badge component exports
+ */
+export {
+  DsBadge,
+  type BadgeVariant,
+  type BadgeSize,
+  type BadgePosition,
+} from "./badge.js";