@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/combobox/wc/index.ts

@@ -0,0 +1,5 @@
+export { DsCombobox } from "./combobox.js";
+export { DsComboboxInput } from "./combobox-input.js";
+export { DsComboboxContent, type ComboboxContentState } from "./combobox-content.js";
+export { DsComboboxOption } from "./combobox-option.js";
+export { DsComboboxTag } from "./combobox-tag.js";

package/templates/command/index.tsx

@@ -0,0 +1,279 @@
+/**
+ * Command palette compound component exports.
+ *
+ * @example
+ * ```tsx
+ * import { Command } from "@/components/ui";
+ *
+ * <Command.Root onSelect={(value) => console.log(value)}>
+ *   <Command.Input placeholder="Type a command..." />
+ *   <Command.List>
+ *     <Command.Empty>No results found.</Command.Empty>
+ *     <Command.Group heading="Actions">
+ *       <Command.Item value="copy">Copy</Command.Item>
+ *       <Command.Item value="paste">Paste</Command.Item>
+ *     </Command.Group>
+ *   </Command.List>
+ * </Command.Root>
+ * ```
+ */
+
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CommandRootProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+  children?: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onSelect?: (value: string) => void;
+  loading?: boolean;
+  filter?: boolean;
+  label?: string;
+}
+
+export interface CommandInputProps extends HTMLAttributes<HTMLElement> {
+  placeholder?: string;
+  disabled?: boolean;
+  value?: string;
+}
+
+export interface CommandListProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface CommandItemProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+  children?: ReactNode;
+  value?: string;
+  keywords?: string;
+  disabled?: boolean;
+  onSelect?: (value: string) => void;
+}
+
+export interface CommandGroupProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  heading?: string;
+}
+
+export interface CommandSeparatorProps extends HTMLAttributes<HTMLElement> {}
+
+export interface CommandEmptyProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+export interface CommandLoadingProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+const CommandRoot = forwardRef<HTMLElement, CommandRootProps>(function CommandRoot(
+  {
+    children,
+    className,
+    value: controlledValue,
+    defaultValue = "",
+    onValueChange,
+    onSelect,
+    loading,
+    filter = true,
+    label,
+    ...props
+  },
+  ref
+) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+  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;
+  };
+
+  const handleValueChange = useCallback(
+    (event: Event) => {
+      const e = event as CustomEvent<{ value: string }>;
+      if (!isControlled) setInternalValue(e.detail.value);
+      onValueChange?.(e.detail.value);
+    },
+    [isControlled, onValueChange]
+  );
+
+  const handleSelect = useCallback(
+    (event: Event) => {
+      const e = event as CustomEvent<{ value: string }>;
+      onSelect?.(e.detail.value);
+    },
+    [onSelect]
+  );
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    element.addEventListener("ds:value-change", handleValueChange);
+    element.addEventListener("ds:select", handleSelect);
+    return () => {
+      element.removeEventListener("ds:value-change", handleValueChange);
+      element.removeEventListener("ds:select", handleSelect);
+    };
+  }, [handleValueChange, handleSelect]);
+
+  return createElement(
+    "ds-command",
+    {
+      ref: combinedRef,
+      class: className,
+      value,
+      loading: loading || undefined,
+      filter: filter || undefined,
+      label,
+      ...props,
+    },
+    children
+  );
+});
+CommandRoot.displayName = "Command.Root";
+
+const CommandInput = forwardRef<HTMLElement, CommandInputProps>(function CommandInput(
+  { className, placeholder, disabled, value, ...props },
+  ref
+) {
+  return createElement("ds-command-input", {
+    ref,
+    class: className,
+    placeholder,
+    disabled: disabled || undefined,
+    value,
+    ...props,
+  });
+});
+CommandInput.displayName = "Command.Input";
+
+const CommandList = forwardRef<HTMLElement, CommandListProps>(function CommandList(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-command-list", { ref, class: className, ...props }, children);
+});
+CommandList.displayName = "Command.List";
+
+const CommandItem = forwardRef<HTMLElement, CommandItemProps>(function CommandItem(
+  { children, className, value, keywords, disabled, onSelect, ...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;
+  };
+
+  const handleSelect = useCallback(
+    (event: Event) => {
+      const e = event as CustomEvent<{ value: string }>;
+      onSelect?.(e.detail.value);
+    },
+    [onSelect]
+  );
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    element.addEventListener("ds:command-select", handleSelect);
+    return () => element.removeEventListener("ds:command-select", handleSelect);
+  }, [handleSelect]);
+
+  return createElement(
+    "ds-command-item",
+    {
+      ref: combinedRef,
+      class: className,
+      value,
+      keywords,
+      disabled: disabled || undefined,
+      ...props,
+    },
+    children
+  );
+});
+CommandItem.displayName = "Command.Item";
+
+const CommandGroup = forwardRef<HTMLElement, CommandGroupProps>(function CommandGroup(
+  { children, className, heading, ...props },
+  ref
+) {
+  return createElement("ds-command-group", { ref, class: className, heading, ...props }, children);
+});
+CommandGroup.displayName = "Command.Group";
+
+const CommandSeparator = forwardRef<HTMLElement, CommandSeparatorProps>(function CommandSeparator(
+  { className, ...props },
+  ref
+) {
+  return createElement("ds-command-separator", {
+    ref,
+    class: className,
+    ...props,
+  });
+});
+CommandSeparator.displayName = "Command.Separator";
+
+const CommandEmpty = forwardRef<HTMLElement, CommandEmptyProps>(function CommandEmpty(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-command-empty", { ref, class: className, ...props }, children);
+});
+CommandEmpty.displayName = "Command.Empty";
+
+const CommandLoading = forwardRef<HTMLElement, CommandLoadingProps>(function CommandLoading(
+  { children, className, ...props },
+  ref
+) {
+  return createElement("ds-command-loading", { ref, class: className, ...props }, children);
+});
+CommandLoading.displayName = "Command.Loading";
+
+// ============================================================================
+// Compound Component
+// ============================================================================
+
+export const Command = {
+  Root: CommandRoot,
+  Input: CommandInput,
+  List: CommandList,
+  Item: CommandItem,
+  Group: CommandGroup,
+  Separator: CommandSeparator,
+  Empty: CommandEmpty,
+  Loading: CommandLoading,
+};
+
+export {
+  CommandRoot,
+  CommandInput,
+  CommandList,
+  CommandItem,
+  CommandGroup,
+  CommandSeparator,
+  CommandEmpty,
+  CommandLoading,
+};

package/templates/command/wc/command-empty.ts

@@ -0,0 +1,24 @@
+import { DSElement } from "../../base/ds-element.js";
+
+/**
+ * Command palette empty state component - shown when no results match the search.
+ *
+ * @element ds-command-empty
+ * @slot - Empty state content
+ *
+ * @example
+ * ```html
+ * <ds-command-empty>
+ *   No results found.
+ * </ds-command-empty>
+ * ```
+ */
+export class DsCommandEmpty extends DSElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "status");
+    this.setAttribute("aria-live", "polite");
+    // Start hidden - ds-command will show when needed
+    this.setAttribute("hidden", "");
+  }
+}

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

@@ -0,0 +1,60 @@
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+
+/**
+ * Command palette group component - groups related command items with a heading.
+ *
+ * @element ds-command-group
+ * @slot - Command items
+ *
+ * @example
+ * ```html
+ * <ds-command-group heading="Actions">
+ *   <ds-command-item value="copy">Copy</ds-command-item>
+ *   <ds-command-item value="paste">Paste</ds-command-item>
+ * </ds-command-group>
+ * ```
+ */
+export class DsCommandGroup extends DSElement {
+  /**
+   * Heading text for the group.
+   */
+  @property({ type: String })
+  heading = "";
+
+  private _headingEl: HTMLDivElement | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "group");
+
+    if (this.heading) {
+      this._createHeading();
+    }
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has("heading")) {
+      if (this.heading) {
+        this._createHeading();
+      } else if (this._headingEl) {
+        this._headingEl.remove();
+        this._headingEl = null;
+        this.removeAttribute("aria-labelledby");
+      }
+    }
+  }
+
+  private _createHeading(): void {
+    if (!this._headingEl) {
+      this._headingEl = document.createElement("div");
+      this._headingEl.className = "ds-command-group__heading";
+      this._headingEl.id = `ds-command-group-${Math.random().toString(36).slice(2, 9)}`;
+      this._headingEl.setAttribute("aria-hidden", "true");
+      this.prepend(this._headingEl);
+      this.setAttribute("aria-labelledby", this._headingEl.id);
+    }
+
+    this._headingEl.textContent = this.heading;
+  }
+}

package/templates/command/wc/command-input.ts

@@ -0,0 +1,136 @@
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+
+/**
+ * Command palette input component - search input for filtering commands.
+ *
+ * @element ds-command-input
+ *
+ * @fires ds:command-input - When the input value changes (bubbles to ds-command)
+ *
+ * @example
+ * ```html
+ * <ds-command-input placeholder="Type a command or search..."></ds-command-input>
+ * ```
+ */
+export class DsCommandInput extends DSElement {
+  /**
+   * Current input value.
+   */
+  @property({ type: String })
+  value = "";
+
+  /**
+   * Placeholder text.
+   */
+  @property({ type: String })
+  placeholder = "Type a command or search...";
+
+  /**
+   * Whether the input is disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  private _input: HTMLInputElement | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._createInput();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this._input) {
+      this._input.removeEventListener("input", this._handleInput);
+      this._input.removeEventListener("keydown", this._handleKeyDown);
+    }
+  }
+
+  private _createInput(): void {
+    // Check if input already exists (slotted)
+    let input = this.querySelector("input");
+
+    if (!input) {
+      input = document.createElement("input");
+      input.type = "text";
+      input.className = "ds-command-input__field";
+      this.appendChild(input);
+    }
+
+    this._input = input;
+    this._input.placeholder = this.placeholder;
+    this._input.disabled = this.disabled;
+    this._input.value = this.value;
+    this._input.setAttribute("role", "combobox");
+    this._input.setAttribute("aria-expanded", "true");
+    this._input.setAttribute("aria-controls", "");
+    this._input.setAttribute("aria-autocomplete", "list");
+    this._input.setAttribute("autocomplete", "off");
+    this._input.setAttribute("autocorrect", "off");
+    this._input.setAttribute("spellcheck", "false");
+
+    this._input.addEventListener("input", this._handleInput);
+    this._input.addEventListener("keydown", this._handleKeyDown);
+  }
+
+  private _handleInput = (event: Event): void => {
+    const target = event.target as HTMLInputElement;
+    this.value = target.value;
+
+    emitEvent(this, "command-input", {
+      detail: { value: this.value },
+    });
+  };
+
+  private _handleKeyDown = (event: KeyboardEvent): void => {
+    const command = this.closest("ds-command");
+    const list = command?.querySelector("ds-command-list") as HTMLElement | null;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        list?.focus();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (
+          list &&
+          "focusLast" in list &&
+          typeof (list as unknown as { focusLast: () => void }).focusLast === "function"
+        ) {
+          (list as unknown as { focusLast: () => void }).focusLast();
+        }
+        break;
+      case "Enter": {
+        event.preventDefault();
+        const activeItem = command?.querySelector(
+          "ds-command-item[data-active]"
+        ) as HTMLElement | null;
+        if (activeItem) {
+          activeItem.click();
+        }
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        emitEvent(this, "command-escape", { detail: {} });
+        break;
+    }
+  };
+
+  /**
+   * Focus the input.
+   */
+  focus(): void {
+    this._input?.focus();
+  }
+
+  /**
+   * Blur the input.
+   */
+  blur(): void {
+    this._input?.blur();
+  }
+}

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

@@ -0,0 +1,78 @@
+import { property } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+
+/**
+ * Command palette item component - selectable command/option.
+ *
+ * @element ds-command-item
+ * @slot - Item content
+ *
+ * @fires ds:command-select - When the item is selected (bubbles to ds-command)
+ *
+ * @example
+ * ```html
+ * <ds-command-item value="copy" keywords="duplicate clone">
+ *   <ds-icon name="copy"></ds-icon>
+ *   Copy
+ * </ds-command-item>
+ * ```
+ */
+export class DsCommandItem extends DSElement {
+  /**
+   * Value to emit when selected.
+   */
+  @property({ type: String })
+  value = "";
+
+  /**
+   * Additional keywords for fuzzy search (space-separated).
+   */
+  @property({ type: String })
+  keywords = "";
+
+  /**
+   * Whether the item is disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    this.tabIndex = -1;
+
+    if (this.disabled) {
+      this.setAttribute("aria-disabled", "true");
+    }
+
+    this.addEventListener("click", this._handleClick);
+    this.addEventListener("keydown", this._handleKeyDown);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleClick);
+    this.removeEventListener("keydown", this._handleKeyDown);
+  }
+
+  private _handleClick = (): void => {
+    if (this.disabled) return;
+    this._select();
+  };
+
+  private _handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disabled) return;
+
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this._select();
+    }
+  };
+
+  private _select(): void {
+    emitEvent(this, "command-select", {
+      detail: { value: this.value || this.textContent?.trim() || "" },
+    });
+  }
+}

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

@@ -0,0 +1,103 @@
+import { createRovingFocus } from "@hypoth-ui/primitives-dom";
+import { DSElement } from "../../base/ds-element.js";
+
+/**
+ * Command palette list component - contains command items with keyboard navigation.
+ *
+ * @element ds-command-list
+ * @slot - Command items and groups
+ *
+ * @example
+ * ```html
+ * <ds-command-list>
+ *   <ds-command-item value="copy">Copy</ds-command-item>
+ *   <ds-command-item value="paste">Paste</ds-command-item>
+ * </ds-command-list>
+ * ```
+ */
+export class DsCommandList extends DSElement {
+  private _rovingFocus: ReturnType<typeof createRovingFocus> | null = null;
+  private _observer: MutationObserver | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "listbox");
+    this.tabIndex = -1;
+
+    this._setupRovingFocus();
+    this._setupMutationObserver();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._rovingFocus?.destroy();
+    this._observer?.disconnect();
+  }
+
+  private _setupMutationObserver(): void {
+    this._observer = new MutationObserver(() => {
+      // Re-setup roving focus when items change
+      this._rovingFocus?.destroy();
+      this._setupRovingFocus();
+    });
+
+    this._observer.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-filtered", "disabled"],
+    });
+  }
+
+  private _setupRovingFocus(): void {
+    const items = this._getVisibleItems();
+
+    if (items.length === 0) return;
+
+    this._rovingFocus = createRovingFocus({
+      container: this,
+      selector: "ds-command-item:not([data-filtered]):not([disabled])",
+      direction: "vertical",
+      loop: true,
+      onFocus: (item: HTMLElement) => {
+        // Update active state for styling
+        this._getVisibleItems().forEach((i) => i.removeAttribute("data-active"));
+        item.setAttribute("data-active", "true");
+      },
+    });
+  }
+
+  private _getVisibleItems(): HTMLElement[] {
+    return Array.from(
+      this.querySelectorAll("ds-command-item:not([data-filtered]):not([disabled])")
+    ) as HTMLElement[];
+  }
+
+  /**
+   * Focus the first visible item.
+   */
+  focus(): void {
+    const items = this._getVisibleItems();
+    if (items.length > 0) {
+      const firstItem = items[0];
+      if (firstItem) {
+        firstItem.focus();
+        firstItem.setAttribute("data-active", "true");
+      }
+    }
+  }
+
+  /**
+   * Focus the last visible item.
+   */
+  focusLast(): void {
+    const items = this._getVisibleItems();
+    if (items.length > 0) {
+      const lastItem = items[items.length - 1];
+      if (lastItem) {
+        lastItem.focus();
+        lastItem.setAttribute("data-active", "true");
+      }
+    }
+  }
+}