@hauktui/registry 0.0.1

package/components/tabs/tabs.tsx

@@ -0,0 +1,240 @@
+import React, { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens, useFocusable } from "@hauktui/primitives-ink";
+import { stableId, clamp } from "@hauktui/core";
+
+export interface Tab {
+  /** Tab key/identifier */
+  key: string;
+  /** Tab label */
+  label: string;
+  /** Whether this tab is disabled */
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  /** Available tabs */
+  tabs: Tab[];
+  /** Controlled active tab key */
+  activeKey?: string;
+  /** Default active tab for uncontrolled mode */
+  defaultActiveKey?: string;
+  /** Callback when tab changes */
+  onChange?: (key: string) => void;
+  /** Whether the tabs component is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Tab orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Tab style variant */
+  variant?: "default" | "boxed" | "underline";
+}
+
+export function Tabs({
+  tabs,
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  onChange,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  orientation = "horizontal",
+  variant = "default",
+}: TabsProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("tabs");
+  const { isFocused } = useFocusable(id);
+
+  // Internal state for uncontrolled mode
+  const defaultKey = defaultActiveKey ?? tabs[0]?.key;
+  const [internalActiveKey, setInternalActiveKey] = useState<string | undefined>(defaultKey);
+  const isControlled = controlledActiveKey !== undefined;
+  const currentActiveKey = isControlled ? controlledActiveKey : internalActiveKey;
+
+  const activeIndex = tabs.findIndex((t) => t.key === currentActiveKey);
+
+  const selectTab = useCallback(
+    (key: string) => {
+      const tab = tabs.find((t) => t.key === key);
+      if (!tab || tab.disabled) return;
+
+      if (!isControlled) {
+        setInternalActiveKey(key);
+      }
+      onChange?.(key);
+    },
+    [tabs, isControlled, onChange]
+  );
+
+  const navigateTo = useCallback(
+    (direction: 1 | -1) => {
+      let nextIndex = activeIndex + direction;
+
+      // Skip disabled tabs
+      while (
+        nextIndex >= 0 &&
+        nextIndex < tabs.length &&
+        tabs[nextIndex]?.disabled
+      ) {
+        nextIndex += direction;
+      }
+
+      nextIndex = clamp(nextIndex, 0, tabs.length - 1);
+      const nextTab = tabs[nextIndex];
+      if (nextTab && !nextTab.disabled) {
+        selectTab(nextTab.key);
+      }
+    },
+    [activeIndex, tabs, selectTab]
+  );
+
+  // Handle keyboard navigation
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      const isHorizontal = orientation === "horizontal";
+
+      if (isHorizontal) {
+        if (key.leftArrow || input === "h") {
+          navigateTo(-1);
+        } else if (key.rightArrow || input === "l") {
+          navigateTo(1);
+        }
+      } else {
+        if (key.upArrow || input === "k") {
+          navigateTo(-1);
+        } else if (key.downArrow || input === "j") {
+          navigateTo(1);
+        }
+      }
+
+      // Number keys for quick access (1-9)
+      const num = parseInt(input, 10);
+      if (num >= 1 && num <= 9 && num <= tabs.length) {
+        const tab = tabs[num - 1];
+        if (tab && !tab.disabled) {
+          selectTab(tab.key);
+        }
+      }
+
+      // Home/End
+      if (input === "g" && key.shift === false) {
+        // Go to first tab
+        const firstEnabled = tabs.find((t) => !t.disabled);
+        if (firstEnabled) selectTab(firstEnabled.key);
+      } else if (input === "G") {
+        // Go to last tab
+        const lastEnabled = [...tabs].reverse().find((t) => !t.disabled);
+        if (lastEnabled) selectTab(lastEnabled.key);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Render a single tab
+  const renderTab = (tab: Tab, index: number) => {
+    const isActive = tab.key === currentActiveKey;
+    const isDisabled = tab.disabled;
+
+    let color = tokens.colors.fg;
+    if (isDisabled) {
+      color = tokens.colors.disabled;
+    } else if (isActive) {
+      color = tokens.colors.accent;
+    }
+
+    // Different styles based on variant
+    let prefix = "";
+    let suffix = "";
+
+    if (variant === "boxed") {
+      prefix = isActive ? "[" : " ";
+      suffix = isActive ? "]" : " ";
+    } else if (variant === "underline") {
+      suffix = isActive ? "─" : " ";
+    } else {
+      prefix = isActive ? "● " : "○ ";
+    }
+
+    const tabNumber = index + 1 <= 9 ? `${index + 1}.` : "  ";
+
+    return React.createElement(
+      Box,
+      {
+        key: tab.key,
+        paddingX: orientation === "horizontal" ? 1 : 0,
+        paddingY: orientation === "vertical" ? 0 : 0,
+      },
+      React.createElement(
+        Text,
+        {
+          color,
+          bold: isActive && isFocused,
+          dimColor: isDisabled,
+          inverse: isActive && isFocused && variant !== "underline",
+        },
+        prefix,
+        React.createElement(Text, { color: tokens.colors.muted }, tabNumber, " "),
+        tab.label,
+        suffix
+      )
+    );
+  };
+
+  // Render underline for underline variant
+  const renderUnderline = () => {
+    if (variant !== "underline" || orientation !== "horizontal") return null;
+
+    return React.createElement(
+      Box,
+      null,
+      tabs.map((tab) => {
+        const isActive = tab.key === currentActiveKey;
+        const width = tab.label.length + 5; // account for number prefix and padding
+
+        return React.createElement(
+          Box,
+          { key: tab.key, paddingX: 1 },
+          React.createElement(
+            Text,
+            { color: isActive ? tokens.colors.accent : tokens.colors.border },
+            isActive ? "─".repeat(width) : " ".repeat(width)
+          )
+        );
+      })
+    );
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+    },
+    React.createElement(
+      Box,
+      {
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        gap: orientation === "horizontal" ? 0 : 0,
+      },
+      tabs.map(renderTab)
+    ),
+    renderUnderline(),
+    // Hint
+    isFocused
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          orientation === "horizontal" ? "←/→ or 1-9" : "↑/↓ or 1-9"
+        )
+      : null
+  );
+}

package/components/tag-input/index.ts

@@ -0,0 +1,2 @@
+export { TagInput } from "./tag-input.js";
+export type { TagInputProps } from "./tag-input.js";

package/components/tag-input/tag-input.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens, useFocusable } from "@hauktui/primitives-ink";
+import { stableId } from "@hauktui/core";
+
+export interface TagInputProps {
+  /** Current tags */
+  value: string[];
+  /** Callback when tags change */
+  onChange?: (tags: string[]) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Maximum number of tags */
+  maxTags?: number;
+  /** Allowed tag separator characters */
+  separators?: string[];
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Tag variant */
+  variant?: "default" | "outline";
+}
+
+export function TagInput({
+  value,
+  onChange,
+  placeholder = "Add tag...",
+  maxTags,
+  separators = [",", " ", "Enter"],
+  tokens: propTokens,
+  focusId,
+  variant = "default",
+}: TagInputProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("tag-input");
+  const { isFocused } = useFocusable(id);
+
+  const [inputValue, setInputValue] = useState("");
+  const [focusedTagIndex, setFocusedTagIndex] = useState(-1); // -1 means input is focused
+
+  // Add a tag
+  const addTag = (tag: string) => {
+    const trimmed = tag.trim();
+    if (!trimmed) return;
+    if (value.includes(trimmed)) return;
+    if (maxTags && value.length >= maxTags) return;
+
+    onChange?.([...value, trimmed]);
+    setInputValue("");
+  };
+
+  // Remove a tag
+  const removeTag = (index: number) => {
+    const newTags = [...value];
+    newTags.splice(index, 1);
+    onChange?.(newTags);
+    setFocusedTagIndex(-1);
+  };
+
+  // Handle keyboard input
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      // If we're focused on a tag
+      if (focusedTagIndex >= 0) {
+        if (key.leftArrow || input === "h") {
+          setFocusedTagIndex((prev) => Math.max(0, prev - 1));
+        } else if (key.rightArrow || input === "l") {
+          if (focusedTagIndex < value.length - 1) {
+            setFocusedTagIndex((prev) => prev + 1);
+          } else {
+            setFocusedTagIndex(-1); // Go to input
+          }
+        } else if (key.backspace || key.delete || input === "x") {
+          removeTag(focusedTagIndex);
+        } else if (key.escape) {
+          setFocusedTagIndex(-1);
+        }
+        return;
+      }
+
+      // Input mode
+      if (key.backspace) {
+        if (inputValue === "" && value.length > 0) {
+          setFocusedTagIndex(value.length - 1);
+        } else {
+          setInputValue((prev) => prev.slice(0, -1));
+        }
+      } else if (key.return || (separators.includes(input) && inputValue)) {
+        addTag(inputValue);
+      } else if (key.leftArrow && inputValue === "" && value.length > 0) {
+        setFocusedTagIndex(value.length - 1);
+      } else if (input && !key.ctrl && !key.meta) {
+        if (!separators.includes(input)) {
+          setInputValue((prev) => prev + input);
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Render a tag
+  const renderTag = (tag: string, index: number) => {
+    const isFocusedTag = focusedTagIndex === index;
+
+    return React.createElement(
+      Box,
+      {
+        key: index,
+        borderStyle: variant === "outline" ? "round" : undefined,
+        borderColor: isFocusedTag ? tokens.colors.danger : tokens.colors.accent,
+        paddingX: variant === "outline" ? 0 : undefined,
+      },
+      React.createElement(
+        Text,
+        {
+          backgroundColor:
+            variant === "default"
+              ? isFocusedTag
+                ? tokens.colors.danger
+                : tokens.colors.accent
+              : undefined,
+          color:
+            variant === "default"
+              ? tokens.colors.bg
+              : isFocusedTag
+                ? tokens.colors.danger
+                : tokens.colors.accent,
+        },
+        ` ${tag} `
+      ),
+      isFocusedTag &&
+        React.createElement(Text, { color: tokens.colors.danger }, "×")
+    );
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 1,
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+      paddingY: 0,
+    },
+    // Existing tags
+    ...value.map(renderTag),
+    // Input
+    React.createElement(
+      Box,
+      {},
+      React.createElement(
+        Text,
+        {
+          color:
+            inputValue || focusedTagIndex === -1
+              ? tokens.colors.fg
+              : tokens.colors.muted,
+        },
+        inputValue || (focusedTagIndex === -1 ? placeholder : "")
+      ),
+      isFocused &&
+        focusedTagIndex === -1 &&
+        React.createElement(Text, { color: tokens.colors.accent }, "█")
+    ),
+    // Max tags indicator
+    maxTags &&
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        ` (${value.length}/${maxTags})`
+      )
+  );
+}

package/components/terminal/index.ts

@@ -0,0 +1,2 @@
+export { Terminal } from "./terminal.js";
+export type { TerminalProps, TerminalLine } from "./terminal.js";

package/components/terminal/terminal.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface TerminalLine {
+  /** Line content */
+  content: string;
+  /** Line type */
+  type?: "command" | "output" | "error" | "success" | "info" | "warning";
+  /** Optional prefix/prompt */
+  prefix?: string;
+  /** Timestamp */
+  timestamp?: Date;
+}
+
+export interface TerminalProps {
+  /** Terminal lines */
+  lines: TerminalLine[];
+  /** Terminal title */
+  title?: string;
+  /** Default prompt prefix */
+  prompt?: string;
+  /** Show timestamps */
+  showTimestamps?: boolean;
+  /** Maximum lines to display (scrollable) */
+  maxLines?: number;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Terminal width */
+  width?: number;
+}
+
+export function Terminal({
+  lines,
+  title = "Terminal",
+  prompt = "$ ",
+  showTimestamps = false,
+  maxLines,
+  tokens: propTokens,
+  width,
+}: TerminalProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  // Limit lines if maxLines is set
+  const displayLines = maxLines ? lines.slice(-maxLines) : lines;
+
+  // Get color for line type
+  const getLineColor = (type: TerminalLine["type"]): string => {
+    switch (type) {
+      case "command":
+        return tokens.colors.accent;
+      case "error":
+        return tokens.colors.danger;
+      case "success":
+        return tokens.colors.success;
+      case "info":
+        return tokens.colors.info;
+      case "warning":
+        return tokens.colors.warning;
+      case "output":
+      default:
+        return tokens.colors.fg;
+    }
+  };
+
+  // Format timestamp
+  const formatTimestamp = (date: Date): string => {
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: tokens.colors.border,
+      ...(width ? { width } : {}),
+    },
+    // Title bar
+    React.createElement(
+      Box,
+      {
+        paddingX: 1,
+        justifyContent: "space-between",
+        borderStyle: "single",
+        borderTop: false,
+        borderLeft: false,
+        borderRight: false,
+        borderColor: tokens.colors.border,
+      },
+      React.createElement(
+        Box,
+        { gap: 1 },
+        React.createElement(Text, { color: tokens.colors.danger }, "●"),
+        React.createElement(Text, { color: tokens.colors.warning }, "●"),
+        React.createElement(Text, { color: tokens.colors.success }, "●")
+      ),
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, bold: true },
+        title
+      ),
+      React.createElement(Text, {}, "   ") // Spacer for symmetry
+    ),
+    // Terminal content
+    React.createElement(
+      Box,
+      { flexDirection: "column", paddingX: 1, paddingY: 1 },
+      displayLines.length === 0
+        ? React.createElement(
+            Text,
+            { color: tokens.colors.muted },
+            prompt + "█"
+          )
+        : displayLines.map((line, index) => {
+            const prefix =
+              line.type === "command"
+                ? (line.prefix ?? prompt)
+                : (line.prefix ?? "");
+
+            return React.createElement(
+              Box,
+              { key: index, gap: 1 },
+              // Timestamp
+              showTimestamps &&
+                line.timestamp &&
+                React.createElement(
+                  Text,
+                  { color: tokens.colors.muted },
+                  "[" + formatTimestamp(line.timestamp) + "]"
+                ),
+              // Prefix/prompt
+              prefix &&
+                React.createElement(
+                  Text,
+                  {
+                    color:
+                      line.type === "command"
+                        ? tokens.colors.success
+                        : tokens.colors.muted,
+                    bold: line.type === "command",
+                  },
+                  prefix
+                ),
+              // Content
+              React.createElement(
+                Text,
+                { color: getLineColor(line.type) },
+                line.content
+              )
+            );
+          })
+    )
+  );
+}

package/components/text-input/index.ts

@@ -0,0 +1,2 @@
+export { TextInput } from "./text-input.js";
+export type { TextInputProps } from "./text-input.js";