@hauktui/registry 0.0.1

package/components/toggle/toggle.tsx

@@ -0,0 +1,114 @@
+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 } from "@hauktui/core";
+
+export interface ToggleProps {
+  /** Whether the toggle is on (controlled) */
+  value?: boolean;
+  /** Default value (uncontrolled) */
+  defaultValue?: boolean;
+  /** Callback when value changes */
+  onChange?: (value: boolean) => void;
+  /** Toggle label */
+  label?: string;
+  /** Whether the toggle is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** On label */
+  onLabel?: string;
+  /** Off label */
+  offLabel?: string;
+}
+
+export function Toggle({
+  value: controlledValue,
+  defaultValue = false,
+  onChange,
+  label,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  onLabel = "ON",
+  offLabel = "OFF",
+}: ToggleProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("toggle");
+  const { isFocused } = useFocusable(id);
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const isOn = isControlled ? controlledValue : internalValue;
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const newValue = !isOn;
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  }, [disabled, isOn, isControlled, onChange]);
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+      if (key.return || input === " ") {
+        toggle();
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const trackColor = disabled
+    ? tokens.colors.disabled
+    : isOn
+    ? tokens.colors.success
+    : tokens.colors.border;
+
+  const thumbPosition = isOn ? "  ●" : "●  ";
+
+  return React.createElement(
+    Box,
+    { gap: 1 },
+    label
+      ? React.createElement(
+          Text,
+          {
+            color: disabled ? tokens.colors.disabled : tokens.colors.fg,
+            bold: isFocused,
+          },
+          label
+        )
+      : null,
+    React.createElement(
+      Box,
+      {
+        borderStyle: "round",
+        borderColor: isFocused ? tokens.colors.focus : trackColor,
+        paddingX: 0,
+      },
+      React.createElement(
+        Text,
+        { color: trackColor, bold: true },
+        thumbPosition
+      )
+    ),
+    React.createElement(
+      Text,
+      {
+        color: disabled
+          ? tokens.colors.disabled
+          : isOn
+          ? tokens.colors.success
+          : tokens.colors.muted,
+        dimColor: disabled,
+      },
+      isOn ? onLabel : offLabel
+    )
+  );
+}

package/components/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { ToggleGroup } from "./toggle-group.js";
+export type { ToggleGroupProps, ToggleGroupItem } from "./toggle-group.js";

package/components/toggle-group/toggle-group.tsx

@@ -0,0 +1,176 @@
+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 ToggleGroupItem {
+  /** Unique value */
+  value: string;
+  /** Display label */
+  label: string;
+  /** Whether this item is disabled */
+  disabled?: boolean;
+}
+
+export interface ToggleGroupProps {
+  /** Available toggle items */
+  items: ToggleGroupItem[];
+  /** Controlled selected value(s) */
+  value?: string | string[];
+  /** Default value for uncontrolled mode */
+  defaultValue?: string | string[];
+  /** Callback when selection changes */
+  onChange?: (value: string | string[]) => void;
+  /** Allow multiple selection */
+  multiple?: boolean;
+  /** Whether the toggle group is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Variant style */
+  variant?: "default" | "outline";
+}
+
+export function ToggleGroup({
+  items,
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  multiple = false,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  orientation = "horizontal",
+  variant = "default",
+}: ToggleGroupProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("toggle-group");
+  const { isFocused } = useFocusable(id);
+
+  const normalizeValue = (v: string | string[] | undefined): string[] => {
+    if (v === undefined) return [];
+    return Array.isArray(v) ? v : [v];
+  };
+
+  const [internalValue, setInternalValue] = useState<string[]>(
+    normalizeValue(defaultValue)
+  );
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = normalizeValue(
+    isControlled ? controlledValue : internalValue
+  );
+
+  const toggleItem = useCallback(
+    (itemValue: string) => {
+      const item = items.find((i) => i.value === itemValue);
+      if (!item || item.disabled || disabled) return;
+
+      let newValue: string[];
+      if (multiple) {
+        if (currentValue.includes(itemValue)) {
+          newValue = currentValue.filter((v) => v !== itemValue);
+        } else {
+          newValue = [...currentValue, itemValue];
+        }
+      } else {
+        newValue = currentValue.includes(itemValue) ? [] : [itemValue];
+      }
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(multiple ? newValue : newValue[0] || "");
+    },
+    [items, currentValue, multiple, disabled, isControlled, onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      const isHorizontal = orientation === "horizontal";
+
+      if (
+        (isHorizontal && key.leftArrow) ||
+        (!isHorizontal && key.upArrow) ||
+        input === "h" ||
+        input === "k"
+      ) {
+        setHighlightedIndex((prev) => clamp(prev - 1, 0, items.length - 1));
+      } else if (
+        (isHorizontal && key.rightArrow) ||
+        (!isHorizontal && key.downArrow) ||
+        input === "l" ||
+        input === "j"
+      ) {
+        setHighlightedIndex((prev) => clamp(prev + 1, 0, items.length - 1));
+      } else if (key.return || input === " ") {
+        const item = items[highlightedIndex];
+        if (item) {
+          toggleItem(item.value);
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: orientation === "horizontal" ? "row" : "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+    },
+    items.map((item, index) => {
+      const isSelected = currentValue.includes(item.value);
+      const isHighlighted = index === highlightedIndex && isFocused;
+      const isDisabled = item.disabled || disabled;
+
+      let bgColor: string | undefined;
+      let fgColor = tokens.colors.fg;
+
+      if (isDisabled) {
+        fgColor = tokens.colors.disabled;
+      } else if (isSelected) {
+        bgColor = tokens.colors.accent;
+        fgColor = tokens.colors.bg;
+      } else if (isHighlighted) {
+        fgColor = tokens.colors.accent;
+      }
+
+      return React.createElement(
+        Box,
+        {
+          key: item.value,
+          paddingX: 1,
+          borderStyle: variant === "outline" ? "single" : undefined,
+          borderColor:
+            variant === "outline"
+              ? isSelected
+                ? tokens.colors.accent
+                : tokens.colors.border
+              : undefined,
+        },
+        React.createElement(
+          Text,
+          {
+            backgroundColor: bgColor,
+            color: fgColor,
+            bold: isSelected || isHighlighted,
+            inverse: isHighlighted && !isSelected,
+            dimColor: isDisabled,
+          },
+          item.label
+        )
+      );
+    })
+  );
+}

package/components/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from "./tooltip.js";
+export type { TooltipProps } from "./tooltip.js";

package/components/tooltip/tooltip.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface TooltipProps {
+  /** The content to show in the tooltip */
+  content: string;
+  /** The element that triggers the tooltip */
+  children: React.ReactNode;
+  /** Whether the tooltip is visible */
+  visible?: boolean;
+  /** Tooltip position */
+  position?: "top" | "bottom" | "left" | "right";
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function Tooltip({
+  content,
+  children,
+  visible = false,
+  position = "top",
+  tokens: propTokens,
+}: TooltipProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  const tooltipElement = React.createElement(
+    Box,
+    {
+      borderStyle: "round",
+      borderColor: tokens.colors.border,
+      paddingX: 1,
+      backgroundColor: tokens.colors.bg,
+    },
+    React.createElement(Text, { color: tokens.colors.fg }, content)
+  );
+
+  if (!visible) {
+    return React.createElement(Box, null, children);
+  }
+
+  const containerProps: Record<string, unknown> = {
+    flexDirection:
+      position === "top" || position === "bottom" ? "column" : "row",
+    alignItems: "center",
+    gap: 0,
+  };
+
+  if (position === "top") {
+    return React.createElement(Box, containerProps, tooltipElement, children);
+  }
+
+  if (position === "bottom") {
+    return React.createElement(Box, containerProps, children, tooltipElement);
+  }
+
+  if (position === "left") {
+    return React.createElement(Box, containerProps, tooltipElement, children);
+  }
+
+  // right
+  return React.createElement(Box, containerProps, children, tooltipElement);
+}

package/components/tree-view/index.ts

@@ -0,0 +1,2 @@
+export { TreeView } from "./tree-view.js";
+export type { TreeViewProps, TreeNode } from "./tree-view.js";

package/components/tree-view/tree-view.tsx

@@ -0,0 +1,245 @@
+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 } from "@hauktui/core";
+
+export interface TreeNode {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Icon to display (emoji or character) */
+  icon?: string;
+  /** Child nodes */
+  children?: TreeNode[];
+  /** Whether the node is disabled */
+  disabled?: boolean;
+}
+
+export interface TreeViewProps {
+  /** Tree data structure */
+  data: TreeNode[];
+  /** Currently selected node ID */
+  selectedId?: string;
+  /** Callback when a node is selected */
+  onSelect?: (node: TreeNode) => void;
+  /** Initially expanded node IDs */
+  defaultExpanded?: string[];
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Show connecting lines */
+  showLines?: boolean;
+  /** Indent size in characters */
+  indentSize?: number;
+}
+
+interface FlatNode {
+  node: TreeNode;
+  depth: number;
+  isExpanded: boolean;
+  hasChildren: boolean;
+  isLast: boolean;
+  parentIsLast: boolean[];
+}
+
+export function TreeView({
+  data,
+  selectedId,
+  onSelect,
+  defaultExpanded = [],
+  tokens: propTokens,
+  focusId,
+  showLines = true,
+  indentSize = 2,
+}: TreeViewProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("tree-view");
+  const { isFocused } = useFocusable(id);
+
+  const [expanded, setExpanded] = useState<Set<string>>(
+    new Set(defaultExpanded)
+  );
+  const [focusedIndex, setFocusedIndex] = useState(0);
+
+  // Flatten tree for rendering
+  const flattenTree = useCallback(
+    (
+      nodes: TreeNode[],
+      depth = 0,
+      parentIsLast: boolean[] = []
+    ): FlatNode[] => {
+      const result: FlatNode[] = [];
+
+      nodes.forEach((node, index) => {
+        const isLast = index === nodes.length - 1;
+        const hasChildren = !!node.children && node.children.length > 0;
+        const isExpanded = expanded.has(node.id);
+
+        result.push({
+          node,
+          depth,
+          isExpanded,
+          hasChildren,
+          isLast,
+          parentIsLast,
+        });
+
+        if (hasChildren && isExpanded) {
+          result.push(
+            ...flattenTree(node.children!, depth + 1, [...parentIsLast, isLast])
+          );
+        }
+      });
+
+      return result;
+    },
+    [expanded]
+  );
+
+  const flatNodes = flattenTree(data);
+
+  // Handle keyboard input
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      const currentNode = flatNodes[focusedIndex];
+      if (!currentNode) return;
+
+      if (key.upArrow || input === "k") {
+        setFocusedIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.downArrow || input === "j") {
+        setFocusedIndex((prev) => Math.min(flatNodes.length - 1, prev + 1));
+      } else if (key.rightArrow || input === "l") {
+        if (currentNode.hasChildren && !currentNode.isExpanded) {
+          setExpanded((prev) => new Set([...prev, currentNode.node.id]));
+        }
+      } else if (key.leftArrow || input === "h") {
+        if (currentNode.hasChildren && currentNode.isExpanded) {
+          setExpanded((prev) => {
+            const next = new Set(prev);
+            next.delete(currentNode.node.id);
+            return next;
+          });
+        }
+      } else if (key.return || input === " ") {
+        if (!currentNode.node.disabled) {
+          if (currentNode.hasChildren) {
+            setExpanded((prev) => {
+              const next = new Set(prev);
+              if (next.has(currentNode.node.id)) {
+                next.delete(currentNode.node.id);
+              } else {
+                next.add(currentNode.node.id);
+              }
+              return next;
+            });
+          }
+          onSelect?.(currentNode.node);
+        }
+      } else if (input === "g") {
+        setFocusedIndex(0);
+      } else if (input === "G") {
+        setFocusedIndex(flatNodes.length - 1);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Build line prefix
+  const buildPrefix = (flatNode: FlatNode): string => {
+    if (!showLines) {
+      return " ".repeat(flatNode.depth * indentSize);
+    }
+
+    let prefix = "";
+
+    for (let i = 0; i < flatNode.depth; i++) {
+      if (flatNode.parentIsLast[i]) {
+        prefix += " ".repeat(indentSize);
+      } else {
+        prefix += "│" + " ".repeat(indentSize - 1);
+      }
+    }
+
+    if (flatNode.depth > 0) {
+      prefix = prefix.slice(0, -indentSize);
+      prefix += flatNode.isLast
+        ? "└" + "─".repeat(indentSize - 1)
+        : "├" + "─".repeat(indentSize - 1);
+    }
+
+    return prefix;
+  };
+
+  // Get node icon
+  const getIcon = (flatNode: FlatNode): string => {
+    if (flatNode.node.icon) return flatNode.node.icon;
+    if (flatNode.hasChildren) {
+      return flatNode.isExpanded ? "▼" : "▶";
+    }
+    return "•";
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: isFocused ? "round" : "single",
+      borderColor: isFocused ? tokens.colors.focus : tokens.colors.border,
+      paddingX: 1,
+    },
+    flatNodes.map((flatNode, index) => {
+      const isSelected = selectedId === flatNode.node.id;
+      const isFocusedItem = isFocused && index === focusedIndex;
+      const prefix = buildPrefix(flatNode);
+      const icon = getIcon(flatNode);
+
+      return React.createElement(
+        Box,
+        { key: flatNode.node.id },
+        React.createElement(
+          Text,
+          {
+            color: flatNode.node.disabled
+              ? tokens.colors.muted
+              : isFocusedItem
+                ? tokens.colors.accent
+                : tokens.colors.border,
+          },
+          prefix
+        ),
+        React.createElement(
+          Text,
+          {
+            color: flatNode.node.disabled
+              ? tokens.colors.muted
+              : isFocusedItem
+                ? tokens.colors.accent
+                : isSelected
+                  ? tokens.colors.success
+                  : tokens.colors.fg,
+          },
+          icon + " "
+        ),
+        React.createElement(
+          Text,
+          {
+            color: flatNode.node.disabled
+              ? tokens.colors.muted
+              : isFocusedItem || isSelected
+                ? tokens.colors.accent
+                : tokens.colors.fg,
+            bold: isFocusedItem || isSelected,
+            dimColor: flatNode.node.disabled,
+          },
+          flatNode.node.label
+        )
+      );
+    })
+  );
+}

package/components/typography/index.ts

@@ -0,0 +1,12 @@
+export {
+  Typography,
+  H1,
+  H2,
+  H3,
+  H4,
+  Code,
+  Quote,
+  Small,
+  Lead,
+} from "./typography.js";
+export type { TypographyProps, TypographyVariant } from "./typography.js";