@hypoth-ui/cli 0.0.1 → 0.1.0

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

@@ -0,0 +1,82 @@
+/**
+ * Tabs Content component - panel content for a tab.
+ *
+ * @element ds-tabs-content
+ *
+ * @slot - Tab panel content
+ */
+
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { DsTabs } from "./tabs.js";
+
+export class DsTabsContent extends DSElement {
+  /** Value of associated tab */
+  @property({ reflect: true })
+  value = "";
+
+  /** Keep mounted when inactive (for animations) */
+  @property({ type: Boolean, attribute: "force-mount" })
+  forceMount = false;
+
+  /** Internal active state */
+  @state()
+  private active = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Apply panel props after DOM is ready
+    requestAnimationFrame(() => {
+      this.applyBehaviorProps();
+    });
+  }
+
+  private applyBehaviorProps(): void {
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+
+    if (!tabsBehavior) {
+      // Fallback for standalone usage
+      this.setAttribute("role", "tabpanel");
+      return;
+    }
+
+    const panelProps = tabsBehavior.getPanelProps(this.value);
+    this.id = panelProps.id;
+    this.setAttribute("role", panelProps.role);
+    this.setAttribute("aria-labelledby", panelProps["aria-labelledby"]);
+    this.setAttribute("tabindex", String(panelProps.tabIndex));
+
+    // Handle visibility (respecting forceMount)
+    if (this.forceMount) {
+      this.hidden = false;
+    } else {
+      this.hidden = panelProps.hidden;
+    }
+
+    this.setAttribute("data-state", panelProps.hidden ? "inactive" : "active");
+  }
+
+  /**
+   * Update from behavior (called by parent).
+   */
+  public updateFromBehavior(active: boolean): void {
+    this.active = active;
+    this.applyBehaviorProps();
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-tabs-content", DsTabsContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-tabs-content": DsTabsContent;
+  }
+}

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

@@ -0,0 +1,56 @@
+/**
+ * Tabs List component - container for tab triggers.
+ *
+ * Implements keyboard navigation with arrow keys via behavior primitive.
+ *
+ * @element ds-tabs-list
+ *
+ * @slot - Tab triggers (ds-tabs-trigger)
+ */
+
+import { html } from "lit";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { DsTabs } from "./tabs.js";
+
+export class DsTabsList extends DSElement {
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Initialize after DOM is ready
+    requestAnimationFrame(() => {
+      this.setupBehavior();
+    });
+  }
+
+  /**
+   * Setup behavior connection (called by parent when options change).
+   */
+  public setupBehavior(): void {
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+
+    if (!tabsBehavior) return;
+
+    // Apply tablist props from behavior
+    const tablistProps = tabsBehavior.getTabListProps();
+    this.setAttribute("id", tablistProps.id);
+    this.setAttribute("role", tablistProps.role);
+    this.setAttribute("aria-orientation", tablistProps["aria-orientation"]);
+
+    // Set tablist element to activate roving focus
+    tabsBehavior.setTablistElement(this);
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-tabs-list", DsTabsList);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-tabs-list": DsTabsList;
+  }
+}

package/templates/tabs/wc/tabs-trigger.ts

@@ -0,0 +1,136 @@
+/**
+ * Tabs Trigger component - button that activates a tab panel.
+ *
+ * @element ds-tabs-trigger
+ *
+ * @slot - Trigger label content
+ */
+
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { DsTabs } from "./tabs.js";
+
+export class DsTabsTrigger extends DSElement {
+  /** Unique value identifying this tab */
+  @property({ reflect: true })
+  value = "";
+
+  /** Disable this tab */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Internal selected state */
+  @state()
+  private selected = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Handle interactions
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+    this.addEventListener("focus", this.handleFocus);
+
+    // Register with behavior after DOM is ready
+    requestAnimationFrame(() => {
+      this.registerWithBehavior();
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+    this.removeEventListener("focus", this.handleFocus);
+
+    // Unregister from behavior
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    tabsRoot?.getTabsBehavior()?.unregisterTab(this.value);
+  }
+
+  private registerWithBehavior(): void {
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+
+    if (!tabsBehavior) return;
+
+    // Register this tab
+    tabsBehavior.registerTab(this.value, { disabled: this.disabled });
+
+    // Apply trigger props from behavior
+    this.applyBehaviorProps();
+  }
+
+  private applyBehaviorProps(): void {
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+
+    if (!tabsBehavior) return;
+
+    const triggerProps = tabsBehavior.getTriggerProps(this.value, { disabled: this.disabled });
+    this.id = triggerProps.id;
+    this.setAttribute("role", triggerProps.role);
+    this.setAttribute("tabindex", String(triggerProps.tabIndex));
+    this.setAttribute("aria-selected", triggerProps["aria-selected"]);
+    this.setAttribute("aria-controls", triggerProps["aria-controls"]);
+
+    if (triggerProps["aria-disabled"]) {
+      this.setAttribute("aria-disabled", triggerProps["aria-disabled"]);
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
+  }
+
+  /**
+   * Update from behavior (called by parent).
+   */
+  public updateFromBehavior(selected: boolean): void {
+    this.selected = selected;
+    this.applyBehaviorProps();
+  }
+
+  private handleClick = (): void => {
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+    tabsBehavior?.handleTriggerClick(this.value);
+  };
+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+    tabsBehavior?.handleTriggerKeyDown(event, this.value);
+  };
+
+  private handleFocus = (): void => {
+    const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+    tabsBehavior?.handleTriggerFocus(this.value);
+  };
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    // Re-register if disabled state changes
+    if (changedProperties.has("disabled")) {
+      const tabsRoot = this.closest("ds-tabs") as DsTabs | null;
+      const tabsBehavior = tabsRoot?.getTabsBehavior();
+      if (tabsBehavior) {
+        tabsBehavior.unregisterTab(this.value);
+        tabsBehavior.registerTab(this.value, { disabled: this.disabled });
+        this.applyBehaviorProps();
+      }
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-tabs-trigger", DsTabsTrigger);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-tabs-trigger": DsTabsTrigger;
+  }
+}

package/templates/tabs/wc/tabs.ts

@@ -0,0 +1,202 @@
+/**
+ * Tabs component - tabbed interface for organizing content.
+ *
+ * Implements WAI-ARIA Tabs pattern with keyboard navigation.
+ *
+ * @element ds-tabs
+ *
+ * @slot - Tabs content (ds-tabs-list, ds-tabs-content)
+ *
+ * @fires ds:change - Fired when selected tab changes
+ *
+ * @example
+ * ```html
+ * <ds-tabs default-value="tab1">
+ *   <ds-tabs-list>
+ *     <ds-tabs-trigger value="tab1">Tab 1</ds-tabs-trigger>
+ *     <ds-tabs-trigger value="tab2">Tab 2</ds-tabs-trigger>
+ *   </ds-tabs-list>
+ *   <ds-tabs-content value="tab1">Content 1</ds-tabs-content>
+ *   <ds-tabs-content value="tab2">Content 2</ds-tabs-content>
+ * </ds-tabs>
+ * ```
+ */
+
+import {
+  type TabsBehavior,
+  type TabsOrientation as BehaviorTabsOrientation,
+  type TabsActivationMode as BehaviorTabsActivationMode,
+  createTabsBehavior,
+} from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+// Import child components
+import type { DsTabsContent } from "./tabs-content.js";
+import type { DsTabsList } from "./tabs-list.js";
+import type { DsTabsTrigger } from "./tabs-trigger.js";
+import "./tabs-list.js";
+import "./tabs-trigger.js";
+import "./tabs-content.js";
+
+export type TabsOrientation = BehaviorTabsOrientation;
+export type TabsActivationMode = BehaviorTabsActivationMode;
+
+export class DsTabs extends DSElement {
+  /** Controlled value */
+  @property()
+  value: string | undefined;
+
+  /** Default value (uncontrolled) */
+  @property({ attribute: "default-value" })
+  defaultValue: string | undefined;
+
+  /** Keyboard navigation orientation */
+  @property({ reflect: true })
+  orientation: TabsOrientation = "horizontal";
+
+  /**
+   * Activation mode:
+   * - automatic: selection follows focus
+   * - manual: selection requires Enter/Space
+   */
+  @property({ attribute: "activation-mode" })
+  activationMode: TabsActivationMode = "automatic";
+
+  /** Loop keyboard navigation at ends */
+  @property({ type: Boolean })
+  loop = true;
+
+  /** Internal tracked value */
+  @state()
+  private internalValue: string | undefined;
+
+  /** Behavior primitive instance */
+  private tabsBehavior: TabsBehavior | null = null;
+
+  /** Whether we're in controlled mode */
+  private get isControlled(): boolean {
+    return this.value !== undefined;
+  }
+
+  /** Current active value */
+  get activeValue(): string | undefined {
+    return this.isControlled ? this.value : this.internalValue;
+  }
+
+  /** Get the tabs behavior (for child components) */
+  getTabsBehavior(): TabsBehavior | null {
+    return this.tabsBehavior;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Initialize internal value from default
+    if (!this.isControlled && this.defaultValue) {
+      this.internalValue = this.defaultValue;
+    }
+
+    // Initialize behavior
+    this.initTabsBehavior();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.tabsBehavior?.destroy();
+    this.tabsBehavior = null;
+  }
+
+  private initTabsBehavior(): void {
+    this.tabsBehavior = createTabsBehavior({
+      defaultValue: this.activeValue ?? this.defaultValue ?? "",
+      orientation: this.orientation,
+      activationMode: this.activationMode,
+      loop: this.loop,
+      onValueChange: (newValue) => {
+        if (!this.isControlled) {
+          this.internalValue = newValue;
+        }
+        emitEvent(this, "ds:change", { detail: { value: newValue } });
+        this.updateTabsState();
+      },
+    });
+  }
+
+  /**
+   * Select a tab by value.
+   */
+  public selectTab(value: string): void {
+    if (this.activeValue === value) return;
+    this.tabsBehavior?.select(value);
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    // Handle controlled value changes
+    if (changedProperties.has("value") && this.isControlled && this.value) {
+      this.tabsBehavior?.select(this.value);
+      this.updateTabsState();
+    }
+
+    // Handle internal value changes
+    if (changedProperties.has("internalValue")) {
+      this.updateTabsState();
+    }
+
+    // Initial update when defaultValue is set
+    if (changedProperties.has("defaultValue") && !this.isControlled && !this.internalValue) {
+      this.internalValue = this.defaultValue;
+      this.tabsBehavior?.select(this.defaultValue ?? "");
+      this.updateTabsState();
+    }
+
+    // Re-create behavior if orientation/activationMode/loop change
+    if (
+      changedProperties.has("orientation") ||
+      changedProperties.has("activationMode") ||
+      changedProperties.has("loop")
+    ) {
+      const currentValue = this.activeValue;
+      this.tabsBehavior?.destroy();
+      this.initTabsBehavior();
+      if (currentValue) {
+        this.tabsBehavior?.select(currentValue);
+      }
+      // Re-setup tablist element
+      const tabsList = this.querySelector("ds-tabs-list") as DsTabsList | null;
+      tabsList?.setupBehavior();
+      this.updateTabsState();
+    }
+  }
+
+  private updateTabsState(): void {
+    const activeValue = this.activeValue;
+
+    // Update triggers
+    const triggers = this.querySelectorAll("ds-tabs-trigger") as NodeListOf<DsTabsTrigger>;
+    for (const trigger of triggers) {
+      trigger.updateFromBehavior(trigger.value === activeValue);
+    }
+
+    // Update content panels
+    const contents = this.querySelectorAll("ds-tabs-content") as NodeListOf<DsTabsContent>;
+    for (const content of contents) {
+      content.updateFromBehavior(content.value === activeValue);
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+define("ds-tabs", DsTabs);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-tabs": DsTabs;
+  }
+}

package/templates/tag/index.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useEffect,
+  useRef,
+} from "react";
+import "@hypoth-ui/wc";
+import {
+  type ResponsiveProp,
+  generateResponsiveDataAttr,
+  isResponsiveObject,
+  resolveResponsiveValue,
+} from "../../primitives/responsive.js";
+
+export type TagVariant =
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+export type TagSize = "sm" | "md" | "lg";
+
+export interface TagProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Color variant.
+   * @default "neutral"
+   */
+  variant?: TagVariant;
+
+  /**
+   * Size variant - supports responsive object syntax.
+   * @default "md"
+   * @example
+   * ```tsx
+   * // Single value
+   * <Tag size="md">React</Tag>
+   *
+   * // Responsive
+   * <Tag size={{ base: "sm", md: "md" }}>React</Tag>
+   * ```
+   */
+  size?: ResponsiveProp<TagSize>;
+
+  /**
+   * Use solid (filled) style instead of subtle.
+   * @default false
+   */
+  solid?: boolean;
+
+  /**
+   * Show remove button.
+   * @default false
+   */
+  removable?: boolean;
+
+  /**
+   * Make tag clickable/interactive.
+   * @default false
+   */
+  clickable?: boolean;
+
+  /**
+   * Disable the tag.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Value for identification in events.
+   */
+  value?: string;
+
+  /**
+   * Callback when remove button is clicked.
+   */
+  onRemove?: (value: string) => void;
+
+  /**
+   * Tag content.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Tag component for categorization with optional remove action.
+ *
+ * @example
+ * ```tsx
+ * // Basic tag
+ * <Tag variant="primary">React</Tag>
+ *
+ * // Removable tag
+ * <Tag removable onRemove={(value) => console.log('Removed:', value)} value="react">
+ *   React
+ * </Tag>
+ *
+ * // Clickable tag
+ * <Tag clickable onClick={() => console.log('Clicked')}>
+ *   Click me
+ * </Tag>
+ * ```
+ */
+export const Tag = forwardRef<HTMLElement, TagProps>(function Tag(
+  {
+    variant = "neutral",
+    size = "md",
+    solid = false,
+    removable = false,
+    clickable = false,
+    disabled = false,
+    value,
+    onRemove,
+    children,
+    className,
+    ...props
+  },
+  forwardedRef
+) {
+  const internalRef = useRef<HTMLElement>(null);
+
+  // Sync forwarded ref
+  useEffect(() => {
+    if (typeof forwardedRef === "function") {
+      forwardedRef(internalRef.current);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;
+    }
+  }, [forwardedRef]);
+
+  // Set up event listeners
+  useEffect(() => {
+    const element = internalRef.current;
+    if (!element) return;
+
+    const handleRemove = (e: Event) => {
+      const event = e as CustomEvent<{ value: string }>;
+      onRemove?.(event.detail.value);
+    };
+
+    element.addEventListener("ds:remove", handleRemove);
+    return () => element.removeEventListener("ds:remove", handleRemove);
+  }, [onRemove]);
+
+  // 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-tag",
+    {
+      ref: internalRef,
+      variant,
+      size: resolvedSize,
+      solid: solid || undefined,
+      removable: removable || undefined,
+      clickable: clickable || undefined,
+      disabled: disabled || undefined,
+      value,
+      class: className,
+      // Add responsive data attribute for CSS targeting
+      "data-size-responsive": responsiveSizeAttr,
+      ...props,
+    },
+    children
+  );
+});
+
+// TypeScript declaration for JSX
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "ds-tag": TagProps & {
+        ref?: React.Ref<HTMLElement>;
+        "onDs-remove"?: (event: CustomEvent) => void;
+        "onDs-click"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/templates/tag/wc/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Tag component exports
+ */
+export { DsTag, type TagVariant, type TagSize } from "./tag.js";