@hauktui/registry 0.0.1

package/components/text-input/text-input.tsx

@@ -0,0 +1,179 @@
+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 TextInputProps {
+  /** Current input value (controlled) */
+  value?: string;
+  /** Default value (uncontrolled) */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onChange?: (value: string) => void;
+  /** Callback when Enter is pressed */
+  onSubmit?: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Input label */
+  label?: string;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Maximum input length */
+  maxLength?: number;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Mask character for password inputs */
+  mask?: string;
+}
+
+export function TextInput({
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  onSubmit,
+  placeholder = "",
+  label,
+  disabled = false,
+  maxLength,
+  tokens: propTokens,
+  focusId,
+  mask,
+}: TextInputProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("text-input");
+  const { isFocused } = useFocusable(id);
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [cursorPosition, setCursorPosition] = useState(defaultValue.length);
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const updateValue = useCallback(
+    (newValue: string) => {
+      if (maxLength !== undefined && newValue.length > maxLength) {
+        newValue = newValue.slice(0, maxLength);
+      }
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, maxLength, onChange]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.return) {
+        onSubmit?.(currentValue);
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        if (cursorPosition > 0) {
+          const newValue =
+            currentValue.slice(0, cursorPosition - 1) +
+            currentValue.slice(cursorPosition);
+          updateValue(newValue);
+          setCursorPosition(Math.max(0, cursorPosition - 1));
+        }
+        return;
+      }
+
+      if (key.leftArrow) {
+        setCursorPosition(Math.max(0, cursorPosition - 1));
+        return;
+      }
+
+      if (key.rightArrow) {
+        setCursorPosition(Math.min(currentValue.length, cursorPosition + 1));
+        return;
+      }
+
+      // Home key
+      if (key.ctrl && input === "a") {
+        setCursorPosition(0);
+        return;
+      }
+
+      // End key
+      if (key.ctrl && input === "e") {
+        setCursorPosition(currentValue.length);
+        return;
+      }
+
+      // Regular character input
+      if (input && !key.ctrl && !key.meta) {
+        const newValue =
+          currentValue.slice(0, cursorPosition) +
+          input +
+          currentValue.slice(cursorPosition);
+        updateValue(newValue);
+        setCursorPosition(cursorPosition + input.length);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  // Display value (masked if needed)
+  const displayValue = mask
+    ? mask.repeat(currentValue.length)
+    : currentValue;
+
+  // Render with cursor
+  const renderValue = () => {
+    if (!isFocused) {
+      if (displayValue.length === 0) {
+        return React.createElement(Text, { color: tokens.colors.muted }, placeholder);
+      }
+      return React.createElement(Text, { color: tokens.colors.fg }, displayValue);
+    }
+
+    const before = displayValue.slice(0, cursorPosition);
+    const cursor = displayValue[cursorPosition] ?? " ";
+    const after = displayValue.slice(cursorPosition + 1);
+
+    return React.createElement(
+      Text,
+      null,
+      React.createElement(Text, { color: tokens.colors.fg }, before),
+      React.createElement(
+        Text,
+        { backgroundColor: tokens.colors.accent, color: tokens.colors.bg },
+        cursor
+      ),
+      React.createElement(Text, { color: tokens.colors.fg }, after)
+    );
+  };
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    label
+      ? React.createElement(
+          Text,
+          { color: isFocused ? tokens.colors.accent : tokens.colors.muted },
+          label
+        )
+      : null,
+    React.createElement(
+      Box,
+      {
+        borderStyle: "round",
+        borderColor: disabled
+          ? tokens.colors.disabled
+          : isFocused
+          ? tokens.colors.focus
+          : tokens.colors.border,
+        paddingX: 1,
+      },
+      renderValue()
+    )
+  );
+}

package/components/textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from "./textarea.js";
+export type { TextareaProps } from "./textarea.js";

package/components/textarea/textarea.tsx

@@ -0,0 +1,206 @@
+import React, { useState, useCallback, useEffect } 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 TextareaProps {
+  /** Controlled value */
+  value?: string;
+  /** Default value for uncontrolled mode */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onChange?: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Label text */
+  label?: string;
+  /** Whether the textarea is disabled */
+  disabled?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Focus ID for focus management */
+  focusId?: string;
+  /** Number of visible rows */
+  rows?: number;
+  /** Maximum length */
+  maxLength?: number;
+}
+
+export function Textarea({
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  placeholder = "",
+  label,
+  disabled = false,
+  tokens: propTokens,
+  focusId,
+  rows = 3,
+  maxLength,
+}: TextareaProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const id = focusId ?? stableId("textarea");
+  const { isFocused } = useFocusable(id);
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [cursorRow, setCursorRow] = useState(0);
+  const [cursorCol, setCursorCol] = useState(0);
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const lines = currentValue.split("\n");
+
+  const updateValue = useCallback(
+    (newValue: string) => {
+      if (maxLength && newValue.length > maxLength) {
+        newValue = newValue.slice(0, maxLength);
+      }
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange, maxLength]
+  );
+
+  useInput(
+    (input, key) => {
+      if (!isFocused || disabled) return;
+
+      if (key.return) {
+        // Insert newline
+        const before = lines.slice(0, cursorRow).join("\n");
+        const currentLine = lines[cursorRow] || "";
+        const lineStart = currentLine.slice(0, cursorCol);
+        const lineEnd = currentLine.slice(cursorCol);
+        const after = lines.slice(cursorRow + 1).join("\n");
+
+        let newValue = before ? before + "\n" : "";
+        newValue += lineStart + "\n" + lineEnd;
+        if (after) newValue += "\n" + after;
+
+        updateValue(newValue);
+        setCursorRow(cursorRow + 1);
+        setCursorCol(0);
+      } else if (key.backspace || key.delete) {
+        if (cursorCol > 0) {
+          const currentLine = lines[cursorRow] || "";
+          const newLine =
+            currentLine.slice(0, cursorCol - 1) + currentLine.slice(cursorCol);
+          lines[cursorRow] = newLine;
+          updateValue(lines.join("\n"));
+          setCursorCol(cursorCol - 1);
+        } else if (cursorRow > 0) {
+          const prevLine = lines[cursorRow - 1] || "";
+          const currentLine = lines[cursorRow] || "";
+          lines[cursorRow - 1] = prevLine + currentLine;
+          lines.splice(cursorRow, 1);
+          updateValue(lines.join("\n"));
+          setCursorRow(cursorRow - 1);
+          setCursorCol(prevLine.length);
+        }
+      } else if (key.upArrow) {
+        if (cursorRow > 0) {
+          setCursorRow(cursorRow - 1);
+          const prevLineLen = (lines[cursorRow - 1] || "").length;
+          setCursorCol(Math.min(cursorCol, prevLineLen));
+        }
+      } else if (key.downArrow) {
+        if (cursorRow < lines.length - 1) {
+          setCursorRow(cursorRow + 1);
+          const nextLineLen = (lines[cursorRow + 1] || "").length;
+          setCursorCol(Math.min(cursorCol, nextLineLen));
+        }
+      } else if (key.leftArrow) {
+        if (cursorCol > 0) {
+          setCursorCol(cursorCol - 1);
+        } else if (cursorRow > 0) {
+          setCursorRow(cursorRow - 1);
+          setCursorCol((lines[cursorRow - 1] || "").length);
+        }
+      } else if (key.rightArrow) {
+        const lineLen = (lines[cursorRow] || "").length;
+        if (cursorCol < lineLen) {
+          setCursorCol(cursorCol + 1);
+        } else if (cursorRow < lines.length - 1) {
+          setCursorRow(cursorRow + 1);
+          setCursorCol(0);
+        }
+      } else if (input && !key.ctrl && !key.meta) {
+        const currentLine = lines[cursorRow] || "";
+        const newLine =
+          currentLine.slice(0, cursorCol) +
+          input +
+          currentLine.slice(cursorCol);
+        lines[cursorRow] = newLine;
+        updateValue(lines.join("\n"));
+        setCursorCol(cursorCol + input.length);
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const isEmpty = currentValue.length === 0;
+  const displayLines = isEmpty ? [placeholder] : lines;
+
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    label
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.fg, bold: true },
+          label
+        )
+      : null,
+    React.createElement(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: isFocused ? "round" : "single",
+        borderColor: disabled
+          ? tokens.colors.disabled
+          : isFocused
+            ? tokens.colors.focus
+            : tokens.colors.border,
+        paddingX: 1,
+      },
+      displayLines.slice(0, rows).map((line, rowIndex) => {
+        const isCurrentRow = rowIndex === cursorRow && isFocused && !isEmpty;
+
+        if (isCurrentRow) {
+          const before = line.slice(0, cursorCol);
+          const cursor = line[cursorCol] || " ";
+          const after = line.slice(cursorCol + 1);
+
+          return React.createElement(
+            Text,
+            { key: rowIndex, color: tokens.colors.fg },
+            before,
+            React.createElement(Text, { inverse: true }, cursor),
+            after
+          );
+        }
+
+        return React.createElement(
+          Text,
+          {
+            key: rowIndex,
+            color: isEmpty ? tokens.colors.muted : tokens.colors.fg,
+            dimColor: isEmpty,
+          },
+          line || " "
+        );
+      })
+    ),
+    maxLength
+      ? React.createElement(
+          Text,
+          { color: tokens.colors.muted, dimColor: true },
+          `${currentValue.length}/${maxLength}`
+        )
+      : null
+  );
+}

package/components/timeline/index.ts

@@ -0,0 +1,2 @@
+export { Timeline } from "./timeline.js";
+export type { TimelineProps, TimelineItem } from "./timeline.js";

package/components/timeline/timeline.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export interface TimelineItem {
+  /** Unique identifier */
+  id: string;
+  /** Item title */
+  title: string;
+  /** Item description */
+  description?: string;
+  /** Timestamp or date label */
+  date?: string;
+  /** Status of this item */
+  status?: "completed" | "current" | "upcoming" | "error";
+  /** Custom icon */
+  icon?: string;
+}
+
+export interface TimelineProps {
+  /** Timeline items */
+  items: TimelineItem[];
+  /** Orientation */
+  orientation?: "vertical" | "horizontal";
+  /** Show connecting lines */
+  showLines?: boolean;
+  /** Custom tokens override */
+  tokens?: Tokens;
+}
+
+export function Timeline({
+  items,
+  orientation = "vertical",
+  showLines = true,
+  tokens: propTokens,
+}: TimelineProps): React.ReactElement {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+
+  // Get icon and color for status
+  const getStatusStyle = (
+    status: TimelineItem["status"]
+  ): { icon: string; color: string } => {
+    switch (status) {
+      case "completed":
+        return { icon: "✓", color: tokens.colors.success };
+      case "current":
+        return { icon: "●", color: tokens.colors.accent };
+      case "error":
+        return { icon: "✗", color: tokens.colors.danger };
+      case "upcoming":
+      default:
+        return { icon: "○", color: tokens.colors.muted };
+    }
+  };
+
+  if (orientation === "horizontal") {
+    return React.createElement(
+      Box,
+      { flexDirection: "row", gap: 1 },
+      items.map((item, index) => {
+        const style = getStatusStyle(item.status);
+        const isLast = index === items.length - 1;
+
+        return React.createElement(
+          Box,
+          { key: item.id, flexDirection: "column", alignItems: "center" },
+          // Icon and line
+          React.createElement(
+            Box,
+            { gap: 0 },
+            React.createElement(
+              Text,
+              { color: style.color, bold: item.status === "current" },
+              item.icon ?? style.icon
+            ),
+            showLines &&
+              !isLast &&
+              React.createElement(Text, { color: tokens.colors.border }, "───")
+          ),
+          // Content
+          React.createElement(
+            Box,
+            { flexDirection: "column", alignItems: "center", marginTop: 1 },
+            item.date &&
+              React.createElement(
+                Text,
+                { color: tokens.colors.muted, dimColor: true },
+                item.date
+              ),
+            React.createElement(
+              Text,
+              {
+                color:
+                  item.status === "current"
+                    ? tokens.colors.accent
+                    : tokens.colors.fg,
+                bold: item.status === "current",
+              },
+              item.title
+            )
+          )
+        );
+      })
+    );
+  }
+
+  // Vertical timeline
+  return React.createElement(
+    Box,
+    { flexDirection: "column" },
+    items.map((item, index) => {
+      const style = getStatusStyle(item.status);
+      const isLast = index === items.length - 1;
+
+      return React.createElement(
+        Box,
+        { key: item.id, flexDirection: "row" },
+        // Icon column
+        React.createElement(
+          Box,
+          { flexDirection: "column", alignItems: "center", marginRight: 1 },
+          React.createElement(
+            Text,
+            { color: style.color, bold: item.status === "current" },
+            item.icon ?? style.icon
+          ),
+          showLines &&
+            !isLast &&
+            React.createElement(Text, { color: tokens.colors.border }, "│")
+        ),
+        // Content column
+        React.createElement(
+          Box,
+          { flexDirection: "column", marginBottom: isLast ? 0 : 1 },
+          // Date
+          item.date &&
+            React.createElement(
+              Text,
+              { color: tokens.colors.muted, dimColor: true },
+              item.date
+            ),
+          // Title
+          React.createElement(
+            Text,
+            {
+              color:
+                item.status === "current"
+                  ? tokens.colors.accent
+                  : tokens.colors.fg,
+              bold: item.status === "current",
+            },
+            item.title
+          ),
+          // Description
+          item.description &&
+            React.createElement(
+              Text,
+              { color: tokens.colors.muted },
+              item.description
+            )
+        )
+      );
+    })
+  );
+}

package/components/toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from "./toast.js";
+export type { ToastProps, ToastVariant } from "./toast.js";

package/components/toast/toast.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import type { Tokens } from "@hauktui/tokens";
+import { useTokens } from "@hauktui/primitives-ink";
+
+export type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+
+export interface ToastProps {
+  /** Toast message */
+  message: string;
+  /** Toast title */
+  title?: string;
+  /** Toast variant */
+  variant?: ToastVariant;
+  /** Duration in milliseconds (0 = persistent) */
+  duration?: number;
+  /** Callback when toast should be dismissed */
+  onDismiss?: () => void;
+  /** Custom tokens override */
+  tokens?: Tokens;
+  /** Show icon */
+  showIcon?: boolean;
+}
+
+const ICONS: Record<ToastVariant, string> = {
+  default: "●",
+  success: "✓",
+  error: "✗",
+  warning: "⚠",
+  info: "ℹ",
+};
+
+export function Toast({
+  message,
+  title,
+  variant = "default",
+  duration = 3000,
+  onDismiss,
+  tokens: propTokens,
+  showIcon = true,
+}: ToastProps): React.ReactElement | null {
+  const contextTokens = useTokens();
+  const tokens = propTokens ?? contextTokens;
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        onDismiss?.();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, onDismiss]);
+
+  if (!visible) return null;
+
+  const variantColors: Record<ToastVariant, string> = {
+    default: tokens.colors.fg,
+    success: tokens.colors.success,
+    error: tokens.colors.danger,
+    warning: tokens.colors.warning,
+    info: tokens.colors.accent,
+  };
+
+  const color = variantColors[variant];
+  const icon = ICONS[variant];
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: color,
+      paddingX: 1,
+    },
+    React.createElement(
+      Box,
+      { gap: 1 },
+      showIcon ? React.createElement(Text, { color }, icon) : null,
+      title
+        ? React.createElement(Text, { color, bold: true }, title)
+        : React.createElement(Text, { color: tokens.colors.fg }, message)
+    ),
+    title
+      ? React.createElement(
+          Box,
+          { paddingLeft: showIcon ? 2 : 0 },
+          React.createElement(Text, { color: tokens.colors.fg }, message)
+        )
+      : null
+  );
+}

package/components/toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from "./toggle.js";
+export type { ToggleProps } from "./toggle.js";