@hauktui/registry 0.0.1

package/components/list/list.tsx

@@ -0,0 +1,247 @@
+import React, { useState, useCallback, useEffect, useMemo } 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 ListItem<T = string> {
+  /** Display label */
+  label: string;
+  /** Item value */
+  value: T;
+  /** Secondary text/description */
+  description?: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+}
+
+export interface ListProps<T = string> {
+  /** List items */
+  items: ListItem<T>[];
+  /** Controlled selected value */
+  value?: T;
+  /** Default value for uncontrolled mode */
+  defaultValue?: T;
+  /** Callback when selection changes */
+  onChange?: (value: T) => void;
+  /** Callback when Enter is pressed on selected item */
+  onSelect?: (value: T) => void;
+  /** Whether the list is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Maximum visible items before scrolling */
+  maxHeight?: number;
+  /** Show item descriptions */
+  showDescriptions?: boolean;
+  /** Show scroll indicators */
+  showScrollIndicators?: boolean;
+}
+
+export function List<T = string>({
+  items,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onSelect,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  maxHeight = 10,
+  showDescriptions = false,
+  showScrollIndicators = true,
+}: ListProps<T>): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("list");
+  const { isFocused } = useFocusable(id);
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = useState<T | undefined>(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  // Highlighted index for keyboard navigation
+  const [highlightedIndex, setHighlightedIndex] = useState(() => {
+    if (currentValue !== undefined) {
+      const idx = items.findIndex((item) => item.value === currentValue);
+      return idx >= 0 ? idx : 0;
+    }
+    return 0;
+  });
+
+  // Scroll offset
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // Update highlighted index when value changes externally
+  useEffect(() => {
+    if (currentValue !== undefined) {
+      const idx = items.findIndex((item) => item.value === currentValue);
+      if (idx >= 0) {
+        setHighlightedIndex(idx);
+      }
+    }
+  }, [currentValue, items]);
+
+  // Ensure scroll keeps highlighted item visible
+  useEffect(() => {
+    if (highlightedIndex < scrollOffset) {
+      setScrollOffset(highlightedIndex);
+    } else if (highlightedIndex >= scrollOffset + maxHeight) {
+      setScrollOffset(highlightedIndex - maxHeight + 1);
+    }
+  }, [highlightedIndex, scrollOffset, maxHeight]);
+
+  const selectItem = useCallback(
+    (index: number) => {
+      const item = items[index];
+      if (!item || item.disabled) return;
+
+      if (!isControlled) {
+        setInternalValue(item.value);
+      }
+      onChange?.(item.value);
+    },
+    [items, isControlled, onChange]
+  );
+
+  // Handle keyboard navigation
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.upArrow || input === "k") {
+        setHighlightedIndex((prev) => {
+          let next = prev - 1;
+          // Skip disabled items
+          while (next >= 0 && items[next]?.disabled) {
+            next--;
+          }
+          return clamp(next, 0, items.length - 1);
+        });
+      } else if (key.downArrow || input === "j") {
+        setHighlightedIndex((prev) => {
+          let next = prev + 1;
+          // Skip disabled items
+          while (next < items.length && items[next]?.disabled) {
+            next++;
+          }
+          return clamp(next, 0, items.length - 1);
+        });
+      } else if (key.return || input === " ") {
+        selectItem(highlightedIndex);
+        const item = items[highlightedIndex];
+        if (item && !item.disabled) {
+          onSelect?.(item.value);
+        }
+      } else if (input === "g") {
+        // Go to top
+        setHighlightedIndex(0);
+        setScrollOffset(0);
+      } else if (input === "G") {
+        // Go to bottom
+        setHighlightedIndex(items.length - 1);
+      } else if (key.pageUp) {
+        setHighlightedIndex((prev) => clamp(prev - maxHeight, 0, items.length - 1));
+      } else if (key.pageDown) {
+        setHighlightedIndex((prev) => clamp(prev + maxHeight, 0, items.length - 1));
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Calculate visible items
+  const visibleItems = useMemo(() => {
+    return items.slice(scrollOffset, scrollOffset + maxHeight);
+  }, [items, scrollOffset, maxHeight]);
+
+  // Check if we need scroll indicators
+  const canScrollUp = scrollOffset > 0;
+  const canScrollDown = scrollOffset + maxHeight < items.length;
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+    },
+    // Scroll up indicator
+    showScrollIndicators && canScrollUp
+      ? React.createElement(
+          Box,
+          { justifyContent: "center" },
+          React.createElement(Text, { color: tokens.colors.muted }, "▲ more")
+        )
+      : null,
+    // List items
+    visibleItems.map((item, visibleIndex) => {
+      const actualIndex = scrollOffset + visibleIndex;
+      const isSelected = item.value === currentValue;
+      const isHighlighted = actualIndex === highlightedIndex;
+      const isDisabled = item.disabled;
+
+      let color = tokens.colors.fg;
+      if (isDisabled) {
+        color = tokens.colors.disabled;
+      } else if (isHighlighted) {
+        color = tokens.colors.accent;
+      }
+
+      const prefix = isSelected ? "● " : "  ";
+      const highlight = isHighlighted && isFocused;
+
+      return React.createElement(
+        Box,
+        {
+          key: actualIndex,
+          flexDirection: "column",
+          paddingX: 1,
+        },
+        React.createElement(
+          Box,
+          null,
+          React.createElement(
+            Text,
+            {
+              color,
+              bold: highlight,
+              dimColor: isDisabled,
+              inverse: highlight,
+            },
+            prefix,
+            item.label
+          )
+        ),
+        showDescriptions && item.description
+          ? React.createElement(
+              Text,
+              { color: tokens.colors.muted, dimColor: true },
+              "   ",
+              item.description
+            )
+          : null
+      );
+    }),
+    // Scroll down indicator
+    showScrollIndicators && canScrollDown
+      ? React.createElement(
+          Box,
+          { justifyContent: "center" },
+          React.createElement(Text, { color: tokens.colors.muted }, "▼ more")
+        )
+      : null,
+    // Item count indicator
+    React.createElement(
+      Box,
+      { justifyContent: "flex-end", paddingX: 1 },
+      React.createElement(
+        Text,
+        { color: tokens.colors.muted, dimColor: true },
+        `${highlightedIndex + 1}/${items.length}`
+      )
+    )
+  );
+}

package/components/menubar/index.ts

@@ -0,0 +1,2 @@
+export { Menubar } from "./menubar.js";
+export type { MenubarProps, MenubarItem, MenubarSubItem } from "./menubar.js";

package/components/menubar/menubar.tsx

@@ -0,0 +1,220 @@
+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 MenubarItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional keyboard shortcut hint */
+  shortcut?: string;
+  /** Sub-items for dropdown */
+  items?: MenubarSubItem[];
+}
+
+export interface MenubarSubItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional keyboard shortcut */
+  shortcut?: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+  /** Whether this is a separator */
+  separator?: boolean;
+}
+
+export interface MenubarProps {
+  /** Menu items */
+  items: MenubarItem[];
+  /** Callback when an item is selected */
+  onSelect: (menuId: string, itemId: string) => void;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+}
+
+export function Menubar({
+  items,
+  onSelect,
+  tokens: propTokens,
+  focusId,
+}: MenubarProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("menubar");
+  const { isFocused } = useFocusable(id);
+
+  const [activeMenu, setActiveMenu] = useState<string | null>(null);
+  const [menuIndex, setMenuIndex] = useState(0);
+  const [subIndex, setSubIndex] = useState(0);
+
+  const activeMenuItem = items.find((item) => item.id === activeMenu);
+  const selectableSubItems =
+    activeMenuItem?.items?.filter(
+      (item) => !item.separator && !item.disabled
+    ) || [];
+
+  const handleSelect = useCallback(() => {
+    if (activeMenu && selectableSubItems[subIndex]) {
+      onSelect(activeMenu, selectableSubItems[subIndex]!.id);
+      setActiveMenu(null);
+    }
+  }, [activeMenu, selectableSubItems, subIndex, onSelect]);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.escape) {
+        setActiveMenu(null);
+        return;
+      }
+
+      if (!activeMenu) {
+        // Top-level navigation
+        if (key.leftArrow || input === "h") {
+          setMenuIndex((prev) => clamp(prev - 1, 0, items.length - 1));
+        } else if (key.rightArrow || input === "l") {
+          setMenuIndex((prev) => clamp(prev + 1, 0, items.length - 1));
+        } else if (key.return || key.downArrow) {
+          setActiveMenu(items[menuIndex]?.id || null);
+          setSubIndex(0);
+        }
+      } else {
+        // Submenu navigation
+        if (key.upArrow || input === "k") {
+          setSubIndex((prev) =>
+            clamp(prev - 1, 0, selectableSubItems.length - 1)
+          );
+        } else if (key.downArrow || input === "j") {
+          setSubIndex((prev) =>
+            clamp(prev + 1, 0, selectableSubItems.length - 1)
+          );
+        } else if (key.leftArrow || input === "h") {
+          const newIndex = clamp(menuIndex - 1, 0, items.length - 1);
+          setMenuIndex(newIndex);
+          setActiveMenu(items[newIndex]?.id || null);
+          setSubIndex(0);
+        } else if (key.rightArrow || input === "l") {
+          const newIndex = clamp(menuIndex + 1, 0, items.length - 1);
+          setMenuIndex(newIndex);
+          setActiveMenu(items[newIndex]?.id || null);
+          setSubIndex(0);
+        } else if (key.return) {
+          handleSelect();
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    // Menu bar
+    React.createElement(
+      Box,
+      {
+        borderStyle: "single",
+        borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+        borderBottom: true,
+        borderTop: false,
+        borderLeft: false,
+        borderRight: false,
+        paddingX: 1,
+        gap: 2,
+      },
+      ...items.map((item, index) => {
+        const isActive = index === menuIndex;
+        const isOpen = activeMenu === item.id;
+
+        return React.createElement(
+          Text,
+          {
+            key: item.id,
+            color: isOpen
+              ? tokens.colors.accent
+              : isActive
+                ? tokens.colors.fg
+                : tokens.colors.muted,
+            bold: isOpen || isActive,
+            inverse: isOpen,
+          },
+          ` ${item.label} `
+        );
+      })
+    ),
+    // Dropdown
+    activeMenuItem?.items
+      ? React.createElement(
+          Box,
+          {
+            flexDirection: "column",
+            borderStyle: "round",
+            borderColor: tokens.colors.border,
+            width: 25,
+            marginLeft: menuIndex * 10,
+          },
+          ...activeMenuItem.items.map((item, index) => {
+            if (item.separator) {
+              return React.createElement(
+                Box,
+                { key: `sep-${index}`, paddingX: 1 },
+                React.createElement(
+                  Text,
+                  { color: tokens.colors.border },
+                  "─".repeat(21)
+                )
+              );
+            }
+
+            const isSelected = selectableSubItems[subIndex]?.id === item.id;
+
+            return React.createElement(
+              Box,
+              { key: item.id, paddingX: 1, justifyContent: "space-between" },
+              React.createElement(
+                Box,
+                { gap: 1 },
+                React.createElement(
+                  Text,
+                  {
+                    color: isSelected
+                      ? tokens.colors.accent
+                      : tokens.colors.muted,
+                  },
+                  isSelected ? "▸" : " "
+                ),
+                React.createElement(
+                  Text,
+                  {
+                    color: item.disabled
+                      ? tokens.colors.muted
+                      : isSelected
+                        ? tokens.colors.fg
+                        : tokens.colors.fg,
+                    dimColor: item.disabled,
+                    bold: isSelected,
+                  },
+                  item.label
+                )
+              ),
+              item.shortcut
+                ? React.createElement(
+                    Text,
+                    { color: tokens.colors.muted, dimColor: true },
+                    item.shortcut
+                  )
+                : null
+            );
+          })
+        )
+      : null
+  );
+}

package/components/navigation-menu/index.ts

@@ -0,0 +1,6 @@
+export { NavigationMenu } from "./navigation-menu.js";
+export type {
+  NavigationMenuProps,
+  NavigationMenuItem,
+  NavigationMenuChild,
+} from "./navigation-menu.js";

package/components/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,216 @@
+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, clamp } from "@hauktui/core";
+
+export interface NavigationMenuItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional href/path */
+  href?: string;
+  /** Child items for dropdown */
+  children?: NavigationMenuChild[];
+  /** Whether this item is disabled */
+  disabled?: boolean;
+}
+
+export interface NavigationMenuChild {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Description text */
+  description?: string;
+  /** Optional href/path */
+  href?: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+}
+
+export interface NavigationMenuProps {
+  /** Menu items */
+  items: NavigationMenuItem[];
+  /** Callback when an item is selected */
+  onSelect?: (item: NavigationMenuItem | NavigationMenuChild) => void;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Orientation */
+  orientation?: "horizontal" | "vertical";
+}
+
+export function NavigationMenu({
+  items,
+  onSelect,
+  tokens: propTokens,
+  focusId,
+  orientation = "horizontal",
+}: NavigationMenuProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("navigation-menu");
+  const { isFocused } = useFocusable(id);
+
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [openMenu, setOpenMenu] = useState<string | null>(null);
+  const [childIndex, setChildIndex] = useState(0);
+
+  const activeItem = items.find((item) => item.id === openMenu);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.escape) {
+        setOpenMenu(null);
+        return;
+      }
+
+      if (!openMenu) {
+        // Top level navigation
+        if (orientation === "horizontal") {
+          if (key.leftArrow || input === "h") {
+            setActiveIndex((prev) => clamp(prev - 1, 0, items.length - 1));
+          } else if (key.rightArrow || input === "l") {
+            setActiveIndex((prev) => clamp(prev + 1, 0, items.length - 1));
+          }
+        } else {
+          if (key.upArrow || input === "k") {
+            setActiveIndex((prev) => clamp(prev - 1, 0, items.length - 1));
+          } else if (key.downArrow || input === "j") {
+            setActiveIndex((prev) => clamp(prev + 1, 0, items.length - 1));
+          }
+        }
+
+        if (key.return || key.downArrow) {
+          const item = items[activeIndex];
+          if (item?.children && item.children.length > 0) {
+            setOpenMenu(item.id);
+            setChildIndex(0);
+          } else if (item) {
+            onSelect?.(item);
+          }
+        }
+      } else {
+        // Child navigation
+        const children = activeItem?.children || [];
+        if (key.upArrow || input === "k") {
+          setChildIndex((prev) => clamp(prev - 1, 0, children.length - 1));
+        } else if (key.downArrow || input === "j") {
+          setChildIndex((prev) => clamp(prev + 1, 0, children.length - 1));
+        } else if (key.return) {
+          const child = children[childIndex];
+          if (child && !child.disabled) {
+            onSelect?.(child);
+            setOpenMenu(null);
+          }
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const menuItems = items.map((item, index) => {
+    const isActive = index === activeIndex;
+    const isOpen = openMenu === item.id;
+
+    return React.createElement(
+      Text,
+      {
+        key: item.id,
+        color: item.disabled
+          ? tokens.colors.muted
+          : isActive || isOpen
+            ? tokens.colors.accent
+            : tokens.colors.fg,
+        bold: isActive || isOpen,
+        dimColor: item.disabled,
+      },
+      ` ${item.label} `,
+      item.children ? "▾" : ""
+    );
+  });
+
+  const dropdown = activeItem?.children
+    ? React.createElement(
+        Box,
+        {
+          flexDirection: "column",
+          borderStyle: "round",
+          borderColor: tokens.colors.border,
+          marginTop: 0,
+          width: 35,
+          paddingY: 0,
+        },
+        ...activeItem.children.map((child, index) => {
+          const isSelected = index === childIndex;
+          return React.createElement(
+            Box,
+            {
+              key: child.id,
+              flexDirection: "column",
+              paddingX: 1,
+            },
+            React.createElement(
+              Box,
+              { gap: 1 },
+              React.createElement(
+                Text,
+                {
+                  color: isSelected
+                    ? tokens.colors.accent
+                    : tokens.colors.muted,
+                },
+                isSelected ? "▸" : " "
+              ),
+              React.createElement(
+                Text,
+                {
+                  color: child.disabled
+                    ? tokens.colors.muted
+                    : isSelected
+                      ? tokens.colors.fg
+                      : tokens.colors.fg,
+                  bold: isSelected,
+                  dimColor: child.disabled,
+                },
+                child.label
+              )
+            ),
+            child.description
+              ? React.createElement(
+                  Text,
+                  { color: tokens.colors.muted, dimColor: true },
+                  "  ",
+                  child.description
+                )
+              : null
+          );
+        })
+      )
+    : null;
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    React.createElement(
+      Box,
+      {
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        borderStyle: "single",
+        borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+        borderBottom: orientation === "horizontal",
+        borderRight: orientation === "vertical",
+        borderTop: false,
+        borderLeft: false,
+        gap: orientation === "horizontal" ? 1 : 0,
+      },
+      ...menuItems
+    ),
+    dropdown
+  );
+}

package/components/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from "./pagination.js";
+export type { PaginationProps } from "./pagination.js";